@extends('layouts.app')

@section('title', isset($leave) ? 'Edit Leave Request' : 'New Leave Request')
@section('heading', isset($leave) ? 'Edit Leave Request' : 'New Leave Request')

@section('content')
@php($leave = $leave ?? null)
@include('leaves.top-submenu')

<div class="grid gap-6 xl:grid-cols-5">
    <div class="leave-create-form xl:col-span-3">
        <div class="leave-create-panel">
            <form
                action="{{ isset($leave) ? route('leaves.update', $leave) : route('leaves.store') }}"
                method="POST"
                class="leave-create-panel__form"
                enctype="multipart/form-data"
                novalidate
                data-leave-form="create"
                x-data="{
                    editing: {{ isset($leave) ? 'true' : 'false' }},
                    userId: '{{ old('user_id', isset($leave) ? $leave->user_id : (auth()->user()->isTenantManager() ? '' : auth()->id())) }}',
                    leaveTypeId: '{{ old('leave_type_id', $leave?->leave_type_id ?? '') }}',
                    startDate: '{{ old('start_date', isset($leave) ? $leave->start_date?->format('Y-m-d') : '') }}',
                    endDate: '{{ old('end_date', isset($leave) ? $leave->end_date?->format('Y-m-d') : '') }}',
                    isHalfDay: {{ (session()->hasOldInput() ? old('is_half_day') : (isset($leave) && $leave->is_half_day)) ? 'true' : 'false' }},
                    halfLeave: '{{ old('half_leave', (isset($leave) && $leave->is_half_day) ? $leave->half_leave : '') }}',
                    isPaid: {{ (session()->hasOldInput() ? old('is_paid') : (isset($leave) && $leave->is_paid)) ? 'true' : 'false' }},
                    reason: @js(old('reason', (isset($leave) && $leave->reason !== 'N/A') ? $leave->reason : '')),
                    reasonMax: 500,
                    available: null,
                    isUnlimited: false,
                    accrualMode: null,
                    earnedAsOfToday: null,
                    annualEntitlement: null,
                    isSingleDay() {
                        return this.startDate !== '' && this.endDate !== '' && this.startDate === this.endDate;
                    },
                    syncHalfDayDates() {
                        if (!this.isHalfDay) {
                            return;
                        }
                        if (this.startDate) {
                            this.endDate = this.startDate;
                            return;
                        }
                        if (this.endDate) {
                            this.startDate = this.endDate;
                        }
                    },
                    enforceHalfDayRule() {
                        if (this.isHalfDay) {
                            this.syncHalfDayDates();
                            return;
                        }
                        this.halfLeave = '';
                    },
                    async fetchBalance() {
                        if (!this.userId || !this.leaveTypeId) { this.available = null; return; }
                        const params = new URLSearchParams({ user_id: this.userId, leave_type_id: this.leaveTypeId });
                        const res = await fetch('{{ route('leaves.balance-lookup') }}?' + params.toString(), { headers: { 'Accept': 'application/json' } });
                        if (!res.ok) return;
                        const data = await res.json();
                        this.isUnlimited = !!data.is_unlimited;
                        if (!this.editing) {
                            this.isPaid = !!data.is_paid;
                        }
                        this.available = data.is_unlimited ? null : data.available;
                        this.accrualMode = data.accrual_mode || null;
                        this.earnedAsOfToday = data.earned_as_of_today;
                        this.annualEntitlement = data.annual_entitlement;
                    }
                }"
                x-init="$watch('userId', () => fetchBalance()); $watch('leaveTypeId', () => fetchBalance()); $watch('isHalfDay', () => enforceHalfDayRule()); $watch('startDate', () => { if (isHalfDay && startDate) endDate = startDate; }); $watch('endDate', () => { if (isHalfDay && endDate && startDate && endDate !== startDate) endDate = startDate; }); enforceHalfDayRule(); fetchBalance();"
            >
                @csrf
                @if(isset($leave))
                    @method('PUT')
                @endif

                <section class="leave-create-section">
                    <div class="leave-create-section__head">
                        <span class="leave-create-section__icon leave-create-section__icon--teal">
                            <i class="bi bi-calendar2-week"></i>
                        </span>
                        <h3>Leave details</h3>
                    </div>

                    @if(auth()->user()->isTenantManager() && ! isset($leave))
                        <div class="leave-create-field">
                            <label class="leave-create-label">Employee <span>*</span></label>
                            <select name="user_id" x-model="userId" class="leave-create-control js-select2">
                                <option value="">Select employee</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}" @selected(old('user_id') == $user->id)>{{ $user->name }}</option>
                                @endforeach
                            </select>
                            @error('user_id')<p class="leave-create-error">{{ $message }}</p>@enderror
                            <p data-js-error="user_id" class="leave-create-error hidden"></p>
                        </div>
                    @else
                        <input type="hidden" name="user_id" value="{{ isset($leave) ? $leave->user_id : auth()->id() }}">
                    @endif

                    <div class="leave-create-field">
                        <label class="leave-create-label">Leave Type <span>*</span></label>
                        <select name="leave_type_id" x-model="leaveTypeId" class="leave-create-control js-select2">
                            <option value="">Select leave type</option>
                            @foreach($leaveTypes as $type)
                                <option value="{{ $type->id }}" @selected(old('leave_type_id', $leave?->leave_type_id ?? '') == $type->id)>{{ $type->name }}</option>
                            @endforeach
                        </select>
                        @error('leave_type_id')<p class="leave-create-error">{{ $message }}</p>@enderror
                        <p data-js-error="leave_type_id" class="leave-create-error hidden"></p>
                    </div>

                    <div class="leave-create-balance" x-show="leaveTypeId" x-cloak>
                        <p>
                            <span class="leave-create-balance__label">Available balance:</span>
                            <span x-text="isUnlimited ? 'Unlimited' : (available !== null ? available + ' day(s)' : '—')"></span>
                        </p>
                        <p
                            class="leave-create-balance__hint"
                            x-show="!isUnlimited && accrualMode === 'monthly'"
                            x-text="earnedAsOfToday !== null ? 'Monthly accrual: ' + earnedAsOfToday + ' earned till today, annual cap ' + annualEntitlement : ''"
                        ></p>
                    </div>

                    <input type="hidden" name="is_paid" value="0">
                    <label class="leave-create-check" x-show="leaveTypeId" x-cloak>
                        <input id="is_paid" type="checkbox" name="is_paid" value="1" x-model="isPaid">
                        <span>Paid Leave</span>
                    </label>
                </section>

                <section class="leave-create-section">
                    <div class="leave-create-section__head">
                        <span class="leave-create-section__icon leave-create-section__icon--sky">
                            <i class="bi bi-calendar-range"></i>
                        </span>
                        <h3>Duration</h3>
                    </div>

                    <div class="leave-create-grid">
                        <div class="leave-create-field">
                            <label class="leave-create-label">Start Date <span>*</span></label>
                            <input type="date" name="start_date" x-model="startDate" class="leave-create-control">
                            @error('start_date')<p class="leave-create-error">{{ $message }}</p>@enderror
                            <p data-js-error="start_date" class="leave-create-error hidden"></p>
                        </div>
                        <div class="leave-create-field">
                            <label class="leave-create-label">End Date <span>*</span></label>
                            <input
                                type="date"
                                name="end_date"
                                x-model="endDate"
                                :readonly="isHalfDay"
                                class="leave-create-control"
                                :class="isHalfDay ? 'is-muted' : ''"
                            >
                            @error('end_date')<p class="leave-create-error">{{ $message }}</p>@enderror
                            <p data-js-error="end_date" class="leave-create-error hidden"></p>
                            <p class="leave-create-hint" x-show="isHalfDay" x-cloak>Matches start date for half-day leave.</p>
                        </div>
                    </div>

                    <div class="leave-create-grid leave-create-grid--align-end">
                        <label class="leave-create-halfday">
                            <input x-model="isHalfDay" id="is_half_day" type="checkbox" name="is_half_day" value="1">
                            <i class="bi bi-clock"></i>
                            <span>Half Day Leave</span>
                        </label>

                        <div class="leave-create-field" x-show="isHalfDay" x-cloak>
                            <label class="leave-create-label">Half Day Slot <span>*</span></label>
                            <select name="half_leave" x-model="halfLeave" class="leave-create-control js-select2">
                                <option value="">Select slot</option>
                                <option value="first_half" @selected(old('half_leave', (isset($leave) && $leave->is_half_day) ? $leave->half_leave : '') === 'first_half')>First Half</option>
                                <option value="second_half" @selected(old('half_leave', (isset($leave) && $leave->is_half_day) ? $leave->half_leave : '') === 'second_half')>Second Half</option>
                            </select>
                            @error('half_leave')<p class="leave-create-error">{{ $message }}</p>@enderror
                            <p data-js-error="half_leave" class="leave-create-error hidden"></p>
                            <p class="leave-create-hint" x-show="!isSingleDay()" x-cloak>Choose a start date to apply half-day leave.</p>
                        </div>
                    </div>
                </section>

                <section class="leave-create-section">
                    <div class="leave-create-section__head">
                        <span class="leave-create-section__icon leave-create-section__icon--violet">
                            <i class="bi bi-chat-left-text"></i>
                        </span>
                        <h3>Additional details</h3>
                    </div>

                    <div class="leave-create-field">
                        <label class="leave-create-label">Reason <span>*</span></label>
                        <div class="leave-create-reason">
                            <textarea
                                name="reason"
                                rows="3"
                                maxlength="500"
                                x-model="reason"
                                class="leave-create-control leave-create-control--textarea"
                                placeholder="Enter reason for leave"
                            ></textarea>
                            <span class="leave-create-reason__count" x-text="(reason ? reason.length : 0) + '/' + reasonMax"></span>
                        </div>
                        @error('reason')<p class="leave-create-error">{{ $message }}</p>@enderror
                        <p data-js-error="reason" class="leave-create-error hidden"></p>
                    </div>

                    <div class="leave-create-field">
                        <label class="leave-create-label">Attachment <span class="leave-create-label__optional">(optional)</span></label>
                        <input type="file" name="attachment" accept=".pdf,.doc,.docx,.png,.jpg,.jpeg" class="leave-create-control leave-create-control--file">
                        <p class="leave-create-hint">Allowed file types: PDF, DOC, DOCX, PNG, JPG (Max 5 MB)</p>
                        @error('attachment')<p class="leave-create-error">{{ $message }}</p>@enderror
                    </div>
                </section>

                <div class="leave-create-actions">
                    <a href="{{ route('leaves.index') }}" class="leave-create-btn leave-create-btn--ghost">Cancel</a>
                    <button type="submit" class="leave-create-btn leave-create-btn--primary">
                        <i class="bi bi-send"></i>
                        {{ isset($leave) ? 'Save changes' : 'Submit Request' }}
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="xl:col-span-2">
        @include('leaves.partials.create-sidebar')
    </div>
</div>
@endsection

@push('styles')
<style>
    .leave-create-form {
        --lc-accent: var(--color-primary, #0c6e6d);
        --lc-height: 34px;
        --lc-radius: 0.5rem;
    }

    .leave-create-panel {
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
        background: #fff;
        padding: 1rem 1.15rem;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    .leave-create-panel__form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .leave-create-section {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #f1f5f9;
    }

    .leave-create-section:last-of-type {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .leave-create-section__head {
        display: flex;
        align-items: center;
        gap: 0.55rem;
    }

    .leave-create-section__head h3 {
        margin: 0;
        font-size: 0.9375rem;
        font-weight: 600;
        color: #0f172a;
    }

    .leave-create-section__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: 0.5rem;
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    .leave-create-section__icon--teal {
        background: #e6f5f5;
        color: #0c6e6d;
    }

    .leave-create-section__icon--sky {
        background: #e0f2fe;
        color: #0284c7;
    }

    .leave-create-section__icon--violet {
        background: #f5f3ff;
        color: #7c3aed;
    }

    .leave-create-grid {
        display: grid;
        gap: 0.75rem 1rem;
        grid-template-columns: 1fr;
    }

    .leave-create-grid--align-end {
        align-items: end;
    }

    @media (min-width: 640px) {
        .leave-create-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .leave-create-field {
        min-width: 0;
    }

    .leave-create-label {
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #334155;
    }

    .leave-create-label span {
        color: #ef4444;
    }

    .leave-create-label__optional {
        color: #64748b !important;
        font-weight: 400;
    }

    .leave-create-control {
        display: block;
        width: 100%;
        min-height: var(--lc-height);
        height: var(--lc-height);
        padding: 0.35rem 0.7rem;
        border: 1px solid #cbd5e1;
        border-radius: var(--lc-radius) !important;
        background: #fff;
        color: #0f172a;
        font-size: 0.8125rem;
        line-height: 1.25;
        box-sizing: border-box;
    }

    .leave-create-control:focus {
        outline: none;
        border-color: var(--lc-accent);
        box-shadow: 0 0 0 0.16rem rgba(12, 110, 109, 0.14);
    }

    .leave-create-control.is-muted,
    .leave-create-control[readonly] {
        background: #f1f5f9;
    }

    .leave-create-control--textarea {
        height: auto;
        min-height: 5.5rem;
        padding: 0.6rem 0.75rem 1.5rem;
        resize: vertical;
    }

    .leave-create-control--file {
        height: auto;
        min-height: var(--lc-height);
        padding: 0.55rem 0.75rem;
        border-style: dashed;
        background: #f8fafc;
        color: #64748b;
    }

    .leave-create-reason {
        position: relative;
    }

    .leave-create-reason__count {
        position: absolute;
        right: 0.7rem;
        bottom: 0.45rem;
        font-size: 0.7rem;
        color: #94a3b8;
        pointer-events: none;
    }

    .leave-create-balance {
        border: 1px solid rgba(12, 110, 109, 0.2);
        border-radius: var(--lc-radius);
        background: var(--color-primary-light, #e6f5f5);
        padding: 0.55rem 0.75rem;
        font-size: 0.8125rem;
        color: #334155;
    }

    .leave-create-balance__label {
        font-weight: 600;
        color: var(--lc-accent);
    }

    .leave-create-balance__hint {
        margin: 0.2rem 0 0;
        font-size: 0.7rem;
        color: #64748b;
    }

    .leave-create-check,
    .leave-create-halfday {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-height: var(--lc-height);
        font-size: 0.8125rem;
        color: #334155;
        cursor: pointer;
    }

    .leave-create-halfday {
        width: 100%;
        padding: 0 0.75rem;
        border: 1px solid #e2e8f0;
        border-radius: var(--lc-radius);
        background: #f8fafc;
        font-weight: 500;
    }

    .leave-create-halfday i {
        color: #64748b;
    }

    .leave-create-check input,
    .leave-create-halfday input {
        border-radius: 0.25rem;
        border-color: #cbd5e1;
        color: var(--lc-accent);
    }

    .leave-create-hint {
        margin: 0.25rem 0 0;
        font-size: 0.7rem;
        color: #64748b;
    }

    .leave-create-error {
        margin: 0.25rem 0 0;
        font-size: 0.75rem;
        color: #dc2626;
    }

    .leave-create-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding-top: 0.85rem;
        border-top: 1px solid #f1f5f9;
    }

    .leave-create-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        min-height: 2rem;
        padding: 0.35rem 0.9rem;
        border-radius: var(--lc-radius) !important;
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1.2;
        border: 1px solid transparent;
    }

    .leave-create-btn--ghost {
        border-color: #cbd5e1;
        background: #fff;
        color: #334155;
    }

    .leave-create-btn--ghost:hover {
        background: #f8fafc;
    }

    .leave-create-btn--primary {
        background: var(--lc-accent);
        color: #fff;
    }

    .leave-create-btn--primary:hover {
        background: var(--color-primary-hover, #0a5c5b);
    }

    .leave-create-form .select2-container {
        width: 100% !important;
    }

    .leave-create-form .select2-container .select2-selection--single {
        min-height: var(--lc-height) !important;
        height: var(--lc-height) !important;
        border-radius: var(--lc-radius) !important;
        border-color: #cbd5e1 !important;
    }

    .leave-create-form .select2-container .select2-selection--single .select2-selection__rendered {
        line-height: 32px !important;
        font-size: 0.8125rem;
        padding-left: 0.7rem;
    }

    .leave-create-form .select2-container .select2-selection--single .select2-selection__arrow {
        height: 32px !important;
    }

    .leave-create-form input.leave-create-control,
    .leave-create-form select.leave-create-control,
    .leave-create-form textarea.leave-create-control {
        border-radius: var(--lc-radius) !important;
    }
</style>
@endpush

@push('scripts')
<script src="{{ asset('js/form-validation.js') }}"></script>
<script src="{{ asset('js/form-text-rules.js') }}"></script>
<script src="{{ asset('js/leave-form-validation.js') }}"></script>
@endpush