<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Create Shift') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <form action="{{ route('shifts.store') }}" method="POST" x-data="{ shiftType: 'normal' }">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="mb-4">
                                <x-input-label for="name" :value="__('Shift Name')" />
                                <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus placeholder="e.g. Day Shift" />
                                <x-input-error :messages="$errors->get('name')" class="mt-2" />
                            </div>

                            <div class="mb-4">
                                <x-input-label for="type" :value="__('Shift Type')" />
                                <select id="type" name="type" class="block mt-1 w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" x-model="shiftType" required>
                                    <option value="normal">Normal (Fixed Time)</option>
                                    <option value="flexible">Flexible (Fixed Hours)</option>
                                </select>
                                <x-input-error :messages="$errors->get('type')" class="mt-2" />
                            </div>

                            <!-- Fixed Time Fields -->
                            <div class="mb-4" x-show="shiftType === 'normal'">
                                <x-input-label for="start_time" :value="__('Start Time')" />
                                <x-text-input id="start_time" class="block mt-1 w-full" type="time" name="start_time" :value="old('start_time')" />
                                <x-input-error :messages="$errors->get('start_time')" class="mt-2" />
                            </div>

                            <div class="mb-4" x-show="shiftType === 'normal'">
                                <x-input-label for="end_time" :value="__('End Time')" />
                                <x-text-input id="end_time" class="block mt-1 w-full" type="time" name="end_time" :value="old('end_time')" />
                                <x-input-error :messages="$errors->get('end_time')" class="mt-2" />
                            </div>

                            <!-- Flexible Hours Field -->
                            <div class="mb-4" x-show="shiftType === 'flexible'">
                                <x-input-label for="flexible_hours" :value="__('Total Working Hours')" />
                                <x-text-input id="flexible_hours" class="block mt-1 w-full" type="number" name="flexible_hours" :value="old('flexible_hours')" />
                                <x-input-error :messages="$errors->get('flexible_hours')" class="mt-2" />
                            </div>

                            <div class="mb-4">
                                <x-input-label for="grace_period" :value="__('Grace Period (Minutes)')" />
                                <x-text-input id="grace_period" class="block mt-1 w-full" type="number" name="grace_period" :value="old('grace_period', 15)" required />
                                <x-input-error :messages="$errors->get('grace_period')" class="mt-2" />
                            </div>

                            <div class="mb-4 md:col-span-2">
                                <label for="is_night_shift" class="inline-flex items-center">
                                    <input id="is_night_shift" type="checkbox" name="is_night_shift" value="1" {{ old('is_night_shift') ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
                                    <span class="ml-2 text-sm text-gray-600 font-bold uppercase tracking-widest">{{ __('Cross-Day / Night Shift') }}</span>
                                </label>
                                <p class="text-xs text-gray-500 mt-1">Enable this if the shift ends on the next day.</p>
                            </div>

                            <!-- Overtime Settings -->
                            <div class="md:col-span-2 border-t pt-4 mt-4" x-data="{ otAllowed: false }">
                                <h3 class="text-lg font-medium text-gray-900 mb-4">{{ __('Overtime Rules') }}</h3>
                                
                                <div class="mb-4">
                                    <label for="overtime_allowed" class="inline-flex items-center">
                                        <input id="overtime_allowed" type="checkbox" name="overtime_allowed" value="1" x-model="otAllowed" {{ old('overtime_allowed') ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
                                        <span class="ml-2 text-sm text-gray-600 font-bold uppercase tracking-widest">{{ __('Enable Overtime for this shift') }}</span>
                                    </label>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4" x-show="otAllowed">
                                    <div>
                                        <x-input-label for="overtime_rate" :value="__('Overtime Rate (e.g. 1.5)')" />
                                        <x-text-input id="overtime_rate" name="overtime_rate" type="number" step="0.1" class="mt-1 block w-full" :value="old('overtime_rate', 1.5)" />
                                        <x-input-error :messages="$errors->get('overtime_rate')" class="mt-2" />
                                    </div>

                                    <div>
                                        <x-input-label for="min_overtime_minutes" :value="__('Min OT Minutes')" />
                                        <x-text-input id="min_overtime_minutes" name="min_overtime_minutes" type="number" class="mt-1 block w-full" :value="old('min_overtime_minutes', 30)" />
                                        <x-input-error :messages="$errors->get('min_overtime_minutes')" class="mt-2" />
                                    </div>

                                    <div>
                                        <x-input-label for="max_overtime_minutes" :value="__('Max OT Minutes (Optional)')" />
                                        <x-text-input id="max_overtime_minutes" name="max_overtime_minutes" type="number" class="mt-1 block w-full" :value="old('max_overtime_minutes')" />
                                        <x-input-error :messages="$errors->get('max_overtime_minutes')" class="mt-2" />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="flex items-center justify-end mt-4">
                            <a href="{{ route('shifts.index') }}" class="mr-4 text-sm text-gray-600 hover:text-gray-900">Cancel</a>
                            <x-primary-button>
                                {{ __('Create Shift') }}
                            </x-primary-button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
