@extends('admin.layouts.app')

@section('content')
<div class="bg-gray-100 min-h-full p-4 flex justify-center">

    <div class="bg-white shadow-sm border border-gray-200 w-full max-w-5xl">
        
        <!-- Header -->
        <div class=" bg-slate-50 border-b border-slate-200 text-slate-800 px-6 py-4 font-bold flex items-center shadow-sm rounded-t-xl  .5">
            <i class="fa-solid fa-pen-to-square mr-2"></i> Add/Edit Leave Details
        </div>

        <form action="{{ route('leave-types.update', $leaveType->id) }}" method="POST" class="p-6">
            @csrf
            @method('PUT')

            <!-- Form Content -->
            <div class="mb-4">
                <h3 class="text-cyan-600 font-bold text-sm mb-4">Define Leave Details</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-xs font-bold text-gray-800 mb-1">Leave Code</label>
                        <input type="text" name="leave_code" value="{{ old('leave_code', $leaveType->leave_code) }}" required class="w-full border border-gray-300 px-3 py-1.5 text-sm focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                        @error('leave_code') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-800 mb-1">Leave Type Name</label>
                        <input type="text" name="leave_name" value="{{ old('leave_name', $leaveType->leave_name) }}" required class="w-full border border-gray-300 px-3 py-1.5 text-sm focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                        @error('leave_name') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>
                    <div>
                        <label class="block text-xs font-bold text-gray-800 mb-1">Leave Type (Yearly/Monthly)</label>
                        <select name="leave_type" class="w-full border border-gray-300 px-3 py-1.5 text-sm focus:outline-none focus:border-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20 text-gray-600">
                            <option value="Yearly" {{ old('leave_type', $leaveType->leave_type) == 'Yearly' ? 'selected' : '' }}>Yearly</option>
                            <option value="Monthly" {{ old('leave_type', $leaveType->leave_type) == 'Monthly' ? 'selected' : '' }}>Monthly</option>
                        </select>
                        @error('leave_type') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>
                </div>
            </div>

            <!-- Holidays and weekly Off Summary Section -->
            <div class="mb-6 border border-gray-200">
                <div class=" bg-slate-50 border-b border-slate-200 text-slate-800 px-6 py-4 font-bold flex items-center shadow-sm rounded-t-xl  .5">
                    Holidays and weekly Off Summary
                </div>
                <div class="bg-gray-50 p-4 flex flex-wrap gap-8 justify-around">
                    <label class="flex items-center space-x-2 cursor-pointer">
                        <input type="checkbox" name="include_weekly_off" value="1" {{ old('include_weekly_off', $leaveType->include_weekly_off) ? 'checked' : '' }} class="h-4 w-4 text-cyan-600 focus:ring-[#ff5722] border-gray-300 rounded">
                        <span class="text-xs font-bold text-gray-800">Weekly off Incude(Yes/No)</span>
                    </label>
                    <label class="flex items-center space-x-2 cursor-pointer">
                        <input type="checkbox" name="include_holiday" value="1" {{ old('include_holiday', $leaveType->include_holiday) ? 'checked' : '' }} class="h-4 w-4 text-cyan-600 focus:ring-[#ff5722] border-gray-300 rounded">
                        <span class="text-xs font-bold text-gray-800">Holiday Incude(Yes/No)</span>
                    </label>
                    <label class="flex items-center space-x-2 cursor-pointer">
                        <input type="checkbox" name="is_paid_leave" value="1" {{ old('is_paid_leave', $leaveType->is_paid_leave) ? 'checked' : '' }} class="h-4 w-4 text-cyan-600 focus:ring-[#ff5722] border-gray-300 rounded">
                        <span class="text-xs font-bold text-gray-800">Paid Leave</span>
                    </label>
                    <label class="flex items-center space-x-2 cursor-pointer">
                        <input type="checkbox" name="is_carry_forward" value="1" {{ old('is_carry_forward', $leaveType->is_carry_forward) ? 'checked' : '' }} class="h-4 w-4 text-cyan-600 focus:ring-[#ff5722] border-gray-300 rounded">
                        <span class="text-xs font-bold text-gray-800">Is-Leave Carry Forward</span>
                    </label>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="mt-8 flex justify-center space-x-2">
                <button type="submit" class="bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white px-6 py-1.5 rounded shadow text-sm font-semibold transition">Update</button>
                <a href="{{ route('leave-types.index') }}" class="bg-[#dc3545] hover:bg-[#c82333] text-white px-6 py-1.5 rounded shadow text-sm font-semibold transition">Cancel</a>
            </div>

        </form>
    </div>

</div>
@endsection