@extends('layouts.app')

@section('title', isset($designation) ? 'Edit Designation' : 'Add Designation')
@section('no-page-header')

@section('content')
<div class="p-6">
    <div class="max-w-4xl mx-auto">
        <div class="bg-white rounded shadow">
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex justify-between items-center">
                    <h1 class="text-xl font-semibold">
                        @if(isset($designation))
                            Edit Designation
                        @else
                            Add Designation
                        @endif
                    </h1>
                    <a href="{{ route('designations.index') }}" class="text-gray-600 hover:text-gray-900">
                        <i class="fas fa-arrow-left mr-2"></i>Back to List
                    </a>
                </div>
            </div>
            
            <div class="p-6">
                <form action="{{ isset($designation) ? route('designations.update', $designation->id) : route('designations.store') }}" method="POST">
                    @csrf
                    @if(isset($designation))
                        @method('PUT')
                    @endif

                    <!-- Basic Information -->
                    <div class="mb-6">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Basic Information</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="mb-4">
                                <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Designation Name</label>
                                <input type="text" id="name" name="name" 
                                       value="{{ old('name', $designation->name ?? '') }}" required
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                @error('name')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <label for="department_id" class="block text-sm font-medium text-gray-700 mb-2">Department</label>
                                <select id="department_id" name="department_id" 
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    <option value="">Select Department</option>
                                    @foreach($departments ?? [] as $department)
                                        <option value="{{ $department->id }}" {{ old('department_id', $designation->department_id ?? '') == $department->id ? 'selected' : '' }}>
                                            {{ $department->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('department_id')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <label for="risk_level" class="block text-sm font-medium text-gray-700 mb-2">Risk Level</label>
                                <select id="risk_level" name="risk_level" required
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    <option value="">Select Risk Level</option>
                                    <option value="low" {{ old('risk_level', $designation->risk_level ?? '') === 'low' ? 'selected' : '' }}>Low Risk</option>
                                    <option value="medium" {{ old('risk_level', $designation->risk_level ?? '') === 'medium' ? 'selected' : '' }}>Medium Risk</option>
                                    <option value="high" {{ old('risk_level', $designation->risk_level ?? '') === 'high' ? 'selected' : '' }}>High Risk</option>
                                </select>
                                @error('risk_level')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                            <textarea id="description" name="description" rows="3" 
                                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">{{ old('description', $designation->description ?? '') }}</textarea>
                            @error('description')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Leave Allocation Settings -->
                    <div class="mb-6">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Leave Allocation Settings</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <!-- Annual Leave -->
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <h4 class="font-medium text-gray-900 mb-3">Annual Leave</h4>
                                <div class="space-y-3">
                                    <div>
                                        <label for="annual_leave_min" class="block text-sm text-gray-700 mb-1">Minimum Days</label>
                                        <input type="number" id="annual_leave_min" name="annual_leave_min" 
                                               value="{{ old('annual_leave_min', $designation->annual_leave_min ?? 12) }}" min="0" required
                                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                        @error('annual_leave_min')
                                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div>
                                        <label for="annual_leave_max" class="block text-sm text-gray-700 mb-1">Maximum Days</label>
                                        <input type="number" id="annual_leave_max" name="annual_leave_max" 
                                               value="{{ old('annual_leave_max', $designation->annual_leave_max ?? 15) }}" min="0" required
                                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                        @error('annual_leave_max')
                                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Sick Leave -->
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <h4 class="font-medium text-gray-900 mb-3">Sick Leave</h4>
                                <div class="space-y-3">
                                    <div>
                                        <label for="sick_leave_min" class="block text-sm text-gray-700 mb-1">Minimum Days</label>
                                        <input type="number" id="sick_leave_min" name="sick_leave_min" 
                                               value="{{ old('sick_leave_min', $designation->sick_leave_min ?? 8) }}" min="0" required
                                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                        @error('sick_leave_min')
                                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div>
                                        <label for="sick_leave_max" class="block text-sm text-gray-700 mb-1">Maximum Days</label>
                                        <input type="number" id="sick_leave_max" name="sick_leave_max" 
                                               value="{{ old('sick_leave_max', $designation->sick_leave_max ?? 10) }}" min="0" required
                                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                        @error('sick_leave_max')
                                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Casual Leave -->
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <h4 class="font-medium text-gray-900 mb-3">Casual Leave</h4>
                                <div class="space-y-3">
                                    <div>
                                        <label for="casual_leave_min" class="block text-sm text-gray-700 mb-1">Minimum Days</label>
                                        <input type="number" id="casual_leave_min" name="casual_leave_min" 
                                               value="{{ old('casual_leave_min', $designation->casual_leave_min ?? 6) }}" min="0" required
                                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                        @error('casual_leave_min')
                                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div>
                                        <label for="casual_leave_max" class="block text-sm text-gray-700 mb-1">Maximum Days</label>
                                        <input type="number" id="casual_leave_max" name="casual_leave_max" 
                                               value="{{ old('casual_leave_max', $designation->casual_leave_max ?? 6) }}" min="0" required
                                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                        @error('casual_leave_max')
                                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Leave Restrictions -->
                    <div class="mb-6">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Leave Restrictions</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="space-y-3">
                                <label class="flex items-center">
                                    <input type="hidden" name="requires_advance_approval" value="0">
                                    <input type="checkbox" name="requires_advance_approval" value="1"
                                           {{ old('requires_advance_approval', $designation->requires_advance_approval ?? false) ? 'checked' : '' }}
                                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                    <span class="ml-2 text-sm text-gray-700">Requires Advance Approval</span>
                                </label>

                                <label class="flex items-center">
                                    <input type="hidden" name="requires_replacement" value="0">
                                    <input type="checkbox" name="requires_replacement" value="1"
                                           {{ old('requires_replacement', $designation->requires_replacement ?? false) ? 'checked' : '' }}
                                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                    <span class="ml-2 text-sm text-gray-700">Replacement Mandatory</span>
                                </label>
                            </div>

                            <div class="space-y-3">
                                <label class="flex items-center">
                                    <input type="hidden" name="has_blackout_periods" value="0">
                                    <input type="checkbox" name="has_blackout_periods" value="1"
                                           {{ old('has_blackout_periods', $designation->has_blackout_periods ?? false) ? 'checked' : '' }}
                                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                    <span class="ml-2 text-sm text-gray-700">Has Blackout Periods</span>
                                </label>

                                <label class="flex items-center">
                                    <input type="hidden" name="critical_duty_windows" value="0">
                                    <input type="checkbox" name="critical_duty_windows" value="1"
                                           {{ old('critical_duty_windows', $designation->critical_duty_windows ?? false) ? 'checked' : '' }}
                                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                    <span class="ml-2 text-sm text-gray-700">Critical Duty Windows Apply</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Risk Level Information -->
                    <div class="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
                        <h3 class="text-sm font-medium text-blue-900 mb-2">Risk Level Guidelines</h3>
                        <div class="text-xs text-blue-800 space-y-1">
                            <p><strong>High Risk:</strong> Security guards, patrol staff, control room operators (18-24 annual, 10-12 sick, 6-8 casual)</p>
                            <p><strong>Medium Risk:</strong> Supervisors, team leads, field officers (15-18 annual, 8-12 sick, 6 casual)</p>
                            <p><strong>Low Risk:</strong> Admin, HR, accounts, office staff (12-15 annual, 8-10 sick, 6 casual)</p>
                        </div>
                    </div>

                    <div class="flex justify-end space-x-3">
                        <a href="{{ route('designations.index') }}" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400">Cancel</a>
                        <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                            @if(isset($designation))
                                Update Designation
                            @else
                                Create Designation
                            @endif
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection