@php
    $shiftModel = $shift ?? null;
    $clockInDefault = $shiftModel
        ? \Carbon\Carbon::parse($shiftModel->clock_in_time)->format('H:i')
        : '09:00';
    $clockOutDefault = $shiftModel
        ? \Carbon\Carbon::parse($shiftModel->clock_out_time)->format('H:i')
        : '18:00';
@endphp

<div
    class="space-y-8 max-w-3xl"
    x-data="{
        clockIn: @js(old('clock_in_time', $clockInDefault)),
        clockOut: @js(old('clock_out_time', $clockOutDefault)),
        nightShift: @js((bool) old('is_night_shift', $shiftModel?->is_night_shift ?? false)),
        nightShiftTouched: false,
        suggestNightShift() {
            if (!this.nightShiftTouched && this.clockIn && this.clockOut) {
                this.nightShift = this.clockOut < this.clockIn;
            }
        }
    }"
    x-init="$watch('clockIn', () => suggestNightShift()); $watch('clockOut', () => suggestNightShift()); suggestNightShift();"
>
    <div>
        <h3 class="text-sm font-semibold text-slate-800">Basic details</h3>
        <p class="mt-1 text-xs text-slate-500">Name, timings, and optional description for this shift.</p>
        <div class="mt-4 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            <div class="sm:col-span-2">
                <label class="block text-sm font-medium text-slate-700">Name <span class="text-red-500">*</span></label>
                <input
                    type="text"
                    name="name"
                    value="{{ old('name', $shiftModel?->name) }}"
                    class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2"
                    placeholder="e.g. General Shift"
                >
                @error('name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                <p data-js-error="name" class="mt-1 text-sm text-red-600 hidden"></p>
            </div>
            <div class="sm:col-span-2">
                <label class="block text-sm font-medium text-slate-700">Description</label>
                <textarea
                    name="description"
                    rows="2"
                    class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2"
                    placeholder="Optional notes about this shift"
                >{{ old('description', $shiftModel?->description) }}</textarea>
                @error('description')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                <p data-js-error="description" class="mt-1 text-sm text-red-600 hidden"></p>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Clock In Time <span class="text-red-500">*</span></label>
                <input
                    type="time"
                    name="clock_in_time"
                    x-model="clockIn"
                    @change="suggestNightShift()"
                    class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2"
                >
                @error('clock_in_time')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                <p data-js-error="clock_in_time" class="mt-1 text-sm text-red-600 hidden"></p>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Clock Out Time <span class="text-red-500">*</span></label>
                <input
                    type="time"
                    name="clock_out_time"
                    x-model="clockOut"
                    @change="suggestNightShift()"
                    class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2"
                >
                @error('clock_out_time')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                <p data-js-error="clock_out_time" class="mt-1 text-sm text-red-600 hidden"></p>
            </div>
            <div class="sm:col-span-2 flex items-start gap-2">
                <input type="hidden" name="is_night_shift" :value="nightShift ? '1' : '0'">
                <input
                    type="checkbox"
                    id="is_night_shift"
                    value="1"
                    x-model="nightShift"
                    @change="nightShiftTouched = true"
                    class="mt-1 rounded border-slate-300"
                >
                <div>
                    <label for="is_night_shift" class="text-sm font-medium text-slate-700">Night shift</label>
                    <p class="text-xs text-slate-500">Cross-midnight shift when clock-out is on the next calendar day. Auto-suggested when clock-out is earlier than clock-in.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="rounded-lg border border-slate-200 bg-slate-50 p-4">
        <h3 class="text-sm font-semibold text-slate-800">Attendance policy</h3>
        <p class="mt-1 text-xs text-slate-500">Grace windows used for late arrival and early departure checks in attendance.</p>
        <div class="mt-4 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            <div>
                <label class="block text-sm font-medium text-slate-700">Grace period (minutes)</label>
                <input
                    type="number"
                    name="grace_period_minutes"
                    value="{{ old('grace_period_minutes', $shiftModel?->grace_period_minutes ?? 15) }}"
                    min="0"
                    max="120"
                    class="mt-1 block w-full rounded-lg border border-slate-300 bg-white px-3 py-2"
                    required
                >
                <p class="mt-1 text-xs text-slate-500">Minutes after shift start before an arrival is marked late.</p>
                @error('grace_period_minutes')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Early going grace (minutes)</label>
                <input
                    type="number"
                    name="early_going_grace_minutes"
                    value="{{ old('early_going_grace_minutes', $shiftModel?->early_going_grace_minutes ?? 15) }}"
                    min="0"
                    max="120"
                    class="mt-1 block w-full rounded-lg border border-slate-300 bg-white px-3 py-2"
                    required
                >
                <p class="mt-1 text-xs text-slate-500">Minutes before shift end that an early clock-out is still accepted.</p>
                @error('early_going_grace_minutes')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Minimum hours for full day</label>
                <input
                    type="number"
                    name="minimum_hours_full_day"
                    value="{{ old('minimum_hours_full_day', $shiftModel?->minimum_hours_full_day) }}"
                    min="0"
                    max="24"
                    step="0.25"
                    class="mt-1 block w-full rounded-lg border border-slate-300 bg-white px-3 py-2"
                    placeholder="e.g. 8"
                >
                <p class="mt-1 text-xs text-slate-500">Optional half-day threshold. Work below this may be treated as half day in future attendance rules.</p>
                @error('minimum_hours_full_day')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>
        </div>
    </div>

    <div>
        <h3 class="text-sm font-semibold text-slate-800">Status</h3>
        <div class="mt-4 flex items-start gap-2">
            <input type="hidden" name="is_active" value="0">
            <input
                type="checkbox"
                name="is_active"
                id="is_active"
                value="1"
                {{ old('is_active', $shiftModel?->is_active ?? true) ? 'checked' : '' }}
                class="mt-1 rounded border-slate-300"
            >
            <div>
                <label for="is_active" class="text-sm font-medium text-slate-700">Active</label>
                <p class="text-xs text-slate-500">Inactive shifts are hidden when assigning employees but remain visible in this list.</p>
            </div>
        </div>
        @error('is_active')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>
</div>