@extends('layouts.app')

@section('title', 'Request Leave')

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('my.dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <a href="{{ route('my.leave') }}">My Leave</a>
        <span class="separator">/</span>
        <span class="current">New Request</span>
    </div>
@endsection

@section('content')
<div class="max-w-2xl animate-fade-up" x-data="leaveRequestForm()">
    <div class="mb-5">
        <h1 class="font-display text-2xl font-semibold text-gray-900">Request Leave</h1>
        <p class="text-sm text-gray-500 mt-1">Submit a new leave request for approval</p>
    </div>

    <div class="card">
        <form method="POST" action="{{ route('my.leave.request.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="card-body space-y-4">

                {{-- Leave Type --}}
                <div>
                    <label class="form-label">Leave Type <span class="text-danger-500">*</span></label>
                    <select name="leave_type_id" class="form-select @error('leave_type_id') form-input-error @enderror"
                            x-model="selectedType" @change="updateBalance()" required>
                        <option value="">Select Leave Type</option>
                        @foreach($leaveTypes as $type)
                            <option value="{{ $type->id }}"
                                    data-balance="{{ $balances[$type->id] ?? 0 }}"
                                    data-color="{{ $type->color }}"
                                    data-requires-doc="{{ $type->requires_document ? '1' : '0' }}"
                                    data-doc-after="{{ $type->document_required_after_days }}"
                                    data-max-consecutive="{{ $type->max_consecutive_days }}"
                                    data-min-notice="{{ $type->min_days_before_request }}"
                                    {{ old('leave_type_id') == $type->id ? 'selected' : '' }}>
                                {{ $type->name }} ({{ $type->code }})
                            </option>
                        @endforeach
                    </select>
                    @error('leave_type_id') <p class="form-error">{{ $message }}</p> @enderror

                    {{-- Balance indicator --}}
                    <div x-show="selectedType" x-transition class="mt-2 p-2.5 rounded-lg bg-gray-50 flex items-center justify-between">
                        <span class="text-xs text-gray-500">Available Balance</span>
                        <span class="text-sm font-semibold" :class="currentBalance <= 0 ? 'text-danger-500' : (currentBalance <= 3 ? 'text-warning-600' : 'text-success-600')"
                              x-text="currentBalance + ' days'"></span>
                    </div>
                </div>

                {{-- Half Day Toggle --}}
                <div>
                    <label class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors">
                        <input type="hidden" name="is_half_day" value="0">
                        <input type="checkbox" name="is_half_day" value="1"
                               x-model="isHalfDay" @change="calculateDays()"
                               {{ old('is_half_day') ? 'checked' : '' }}
                               class="w-4.5 h-4.5 rounded border-gray-300 text-primary-600 focus:ring-primary-600">
                        <div>
                            <span class="text-sm font-medium text-gray-700">Half Day Leave</span>
                            <p class="text-xs text-gray-500">Request only half a day off</p>
                        </div>
                    </label>
                </div>

                {{-- Half Day Type --}}
                <div x-show="isHalfDay" x-transition>
                    <label class="form-label">Which Half? <span class="text-danger-500">*</span></label>
                    <select name="half_day_type" class="form-select" :required="isHalfDay">
                        <option value="first_half" {{ old('half_day_type') === 'first_half' ? 'selected' : '' }}>First Half (Morning)</option>
                        <option value="second_half" {{ old('half_day_type') === 'second_half' ? 'selected' : '' }}>Second Half (Afternoon)</option>
                    </select>
                </div>

                {{-- Dates --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="form-label">Start Date <span class="text-danger-500">*</span></label>
                        <input type="date" name="start_date" value="{{ old('start_date') }}"
                               class="form-input @error('start_date') form-input-error @enderror"
                               x-model="startDate" @change="calculateDays()"
                               min="{{ now()->format('Y-m-d') }}" required>
                        @error('start_date') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                    <div x-show="!isHalfDay">
                        <label class="form-label">End Date <span class="text-danger-500">*</span></label>
                        <input type="date" name="end_date" value="{{ old('end_date') }}"
                               class="form-input @error('end_date') form-input-error @enderror"
                               x-model="endDate" @change="calculateDays()"
                               :min="startDate || '{{ now()->format('Y-m-d') }}'" :required="!isHalfDay">
                        @error('end_date') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                </div>

                {{-- Calculated days --}}
                <div x-show="totalDays > 0" x-transition
                     class="p-3 rounded-lg border border-primary-200 bg-primary-50/50 flex items-center justify-between">
                    <span class="text-sm text-primary-700">Total Days Requested</span>
                    <span class="font-display text-xl font-bold text-primary-700" x-text="totalDays"></span>
                </div>

                {{-- Reason --}}
                <div>
                    <label class="form-label">Reason <span class="text-danger-500">*</span></label>
                    <textarea name="reason" class="form-input @error('reason') form-input-error @enderror"
                              rows="3" placeholder="Briefly explain the reason for your leave..." required>{{ old('reason') }}</textarea>
                    @error('reason') <p class="form-error">{{ $message }}</p> @enderror
                </div>

                {{-- Document Upload --}}
                <div>
                    <label class="form-label">
                        Supporting Document
                        <span x-show="docRequired" class="text-danger-500">*</span>
                        <span x-show="!docRequired" class="text-gray-400 font-normal">(optional)</span>
                    </label>
                    <input type="file" name="document" accept=".pdf,.jpg,.jpeg,.png"
                           class="form-input text-sm file:mr-3 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-medium file:bg-primary-50 file:text-primary-600 hover:file:bg-primary-100"
                           :required="docRequired">
                    <p class="text-xs text-gray-400 mt-1">Accepted: PDF, JPG, PNG (max 5MB)</p>
                    <p x-show="docRequired" x-transition class="text-xs text-warning-600 mt-1">
                        A supporting document is required for this leave type when requesting more than <span x-text="docAfterDays"></span> days.
                    </p>
                    @error('document') <p class="form-error">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="px-5 py-4 border-t border-gray-100 flex items-center justify-end gap-3">
                <a href="{{ route('my.leave') }}" class="btn-secondary">Cancel</a>
                <button type="submit" class="btn-primary">Submit Request</button>
            </div>
        </form>
    </div>
</div>

<script>
function leaveRequestForm() {
    return {
        selectedType: '{{ old('leave_type_id', '') }}',
        currentBalance: 0,
        isHalfDay: {{ old('is_half_day') ? 'true' : 'false' }},
        startDate: '{{ old('start_date', '') }}',
        endDate: '{{ old('end_date', '') }}',
        totalDays: 0,
        docRequired: false,
        docAfterDays: 0,

        init() {
            this.updateBalance();
            this.calculateDays();
        },

        updateBalance() {
            const option = this.$el.querySelector(`select[name="leave_type_id"] option[value="${this.selectedType}"]`);
            if (option) {
                this.currentBalance = parseFloat(option.dataset.balance) || 0;
                this.docAfterDays = parseInt(option.dataset.docAfter) || 0;
            }
            this.calculateDays();
        },

        calculateDays() {
            if (this.isHalfDay) {
                this.totalDays = 0.5;
                // For half day, end_date = start_date
                this.endDate = this.startDate;
            } else if (this.startDate && this.endDate) {
                const start = new Date(this.startDate);
                const end = new Date(this.endDate);
                const diff = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1;
                this.totalDays = diff > 0 ? diff : 0;
            } else {
                this.totalDays = 0;
            }

            // Check if document is required
            const option = this.$el.querySelector(`select[name="leave_type_id"] option[value="${this.selectedType}"]`);
            if (option && option.dataset.requiresDoc === '1' && this.docAfterDays > 0) {
                this.docRequired = this.totalDays > this.docAfterDays;
            } else {
                this.docRequired = false;
            }
        }
    }
}
</script>
@endsection