@extends('layouts.app')

@section('title', 'New Permission Request')

@section('content')
<div class="p-6">
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200">
            <h5 class="text-lg font-semibold text-gray-900">New Permission Request</h5>
        </div>
        
        <div class="p-6">
            <form method="POST" action="{{ route('permission.store') }}">
                @csrf
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="md:col-span-2">
                        <label for="permission_type_id" class="block text-sm font-medium text-gray-700 mb-2">
                            Permission Type <span class="text-red-500">*</span>
                        </label>
                        <select name="permission_type_id" id="permission_type_id" required class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 sm:text-sm transition-colors duration-200">
                            <option value="">Select Permission Type</option>
                            @foreach($permissionTypes as $type)
                                <option value="{{ $type->id }}" {{ old('permission_type_id') == $type->id ? 'selected' : '' }}>
                                    {{ $type->name }} - {{ $type->description }}
                                </option>
                            @endforeach
                        </select>
                        @error('permission_type_id')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="permission_date" class="block text-sm font-medium text-gray-700 mb-2">
                            Permission Date <span class="text-red-500">*</span>
                        </label>
                        <input type="date" name="permission_date" id="permission_date" required 
                               value="{{ old('permission_date') }}" 
                               min="{{ now()->format('Y-m-d') }}"
                               class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 sm:text-sm transition-colors duration-200"
                               placeholder="dd/mm/yyyy">
                        @error('permission_date')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-3">Time Duration <span class="text-red-500">*</span></label>
                        <div class="space-y-4">
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div>
                                    <label for="from_time" class="block text-sm font-medium text-gray-600 mb-2">From Time</label>
                                    <input type="time" name="from_time" id="from_time" required 
                                           value="{{ old('from_time') }}" 
                                           class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 sm:text-sm transition-colors duration-200"
                                           placeholder="HH:MM">
                                    @error('from_time')
                                        <p class="mt-2 text-sm text-red-600 flex items-center">
                                            <i class="fas fa-exclamation-circle mr-1"></i> {{ $message }}
                                        </p>
                                    @enderror
                                </div>
                                <div>
                                    <label for="to_time" class="block text-sm font-medium text-gray-600 mb-2">To Time</label>
                                    <input type="time" name="to_time" id="to_time" required 
                                           value="{{ old('to_time') }}" 
                                           class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 sm:text-sm transition-colors duration-200"
                                           placeholder="HH:MM">
                                    @error('to_time')
                                        <p class="mt-2 text-sm text-red-600 flex items-center">
                                            <i class="fas fa-exclamation-circle mr-1"></i> {{ $message }}
                                        </p>
                                    @enderror
                                </div>
                            </div>
                            <div class="bg-gray-50 px-4 py-3 rounded-lg border border-gray-200">
                                <p class="text-sm font-medium text-gray-700 flex items-center">
                                    <i class="fas fa-clock mr-2 text-primary-600"></i>
                                    Duration: <span id="duration-display" class="ml-2 text-primary-700 font-semibold">--</span>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="md:col-span-2">
                        <label for="reason" class="block text-sm font-medium text-gray-700 mb-3">
                            <i class="fas fa-comment-alt mr-2 text-gray-500"></i>
                            Reason <span class="text-red-500">*</span>
                        </label>
                        <textarea name="reason" id="reason" required rows="4" 
                                  class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 sm:text-sm transition-colors duration-200 resize-none"
                                  placeholder="Please provide a detailed reason for your permission request...">{{ old('reason') }}</textarea>
                        <div class="flex justify-between items-center mt-2">
                            <p class="text-xs text-gray-500">Minimum 10 characters required</p>
                            <span id="reason-char-count" class="text-xs text-gray-400">0 / 500</span>
                        </div>
                        @error('reason')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <i class="fas fa-exclamation-circle mr-1"></i> {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <div class="md:col-span-2">
                        <label for="notes" class="block text-sm font-medium text-gray-700 mb-3">
                            <i class="fas fa-sticky-note mr-2 text-gray-400"></i>
                            Additional Notes (Optional)
                        </label>
                        <textarea name="notes" id="notes" rows="3" 
                                  class="block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 sm:text-sm transition-colors duration-200 resize-none"
                                  placeholder="Any additional information or details that may help with your request...">{{ old('notes') }}</textarea>
                        <div class="flex justify-between items-center mt-2">
                            <p class="text-xs text-gray-500">Optional: Add any extra details here</p>
                            <span id="notes-char-count" class="text-xs text-gray-400">0 / 300</span>
                        </div>
                        @error('notes')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <i class="fas fa-exclamation-circle mr-1"></i> {{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>

                <div class="mt-8 flex justify-end space-x-3 pt-6 border-t border-gray-200">
                    <a href="{{ route('permission.my-requests') }}" class="px-6 py-2.5 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-all duration-200 flex items-center">
                        <i class="fas fa-times mr-2"></i>
                        Cancel
                    </a>
                    <button type="submit" class="px-6 py-2.5 border border-transparent rounded-lg text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-all duration-200 flex items-center shadow-sm hover:shadow-md">
                        <i class="fas fa-paper-plane mr-2"></i> Submit Request
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const fromTime = document.getElementById('from_time');
    const toTime = document.getElementById('to_time');
    const durationDisplay = document.getElementById('duration-display');
    const reasonTextarea = document.getElementById('reason');
    const notesTextarea = document.getElementById('notes');
    const reasonCharCount = document.getElementById('reason-char-count');
    const notesCharCount = document.getElementById('notes-char-count');

    function calculateDuration() {
        if (fromTime.value && toTime.value) {
            const from = new Date(`2000-01-01T${fromTime.value}`);
            const to = new Date(`2000-01-01T${toTime.value}`);
            
            if (to > from) {
                const diffMs = to - from;
                const diffMinutes = Math.floor(diffMs / 60000);
                const hours = Math.floor(diffMinutes / 60);
                const minutes = diffMinutes % 60;
                
                if (hours > 0) {
                    durationDisplay.textContent = `${hours}h ${minutes}m`;
                } else {
                    durationDisplay.textContent = `${minutes} minutes`;
                }
                durationDisplay.parentElement.classList.remove('text-red-600');
                durationDisplay.parentElement.classList.add('text-primary-700');
            } else {
                durationDisplay.textContent = 'Invalid time range';
                durationDisplay.parentElement.classList.remove('text-primary-700');
                durationDisplay.parentElement.classList.add('text-red-600');
            }
        } else {
            durationDisplay.textContent = '--';
            durationDisplay.parentElement.classList.remove('text-red-600');
            durationDisplay.parentElement.classList.add('text-primary-700');
        }
    }

    function updateCharCount(textarea, counter, maxLength) {
        const currentLength = textarea.value.length;
        counter.textContent = `${currentLength} / ${maxLength}`;
        
        if (currentLength > maxLength) {
            counter.classList.add('text-red-600');
            counter.classList.remove('text-gray-400');
        } else if (currentLength > maxLength * 0.8) {
            counter.classList.add('text-yellow-600');
            counter.classList.remove('text-gray-400', 'text-red-600');
        } else {
            counter.classList.add('text-gray-400');
            counter.classList.remove('text-yellow-600', 'text-red-600');
        }
    }

    // Character counting
    reasonTextarea.addEventListener('input', () => updateCharCount(reasonTextarea, reasonCharCount, 500));
    notesTextarea.addEventListener('input', () => updateCharCount(notesTextarea, notesCharCount, 300));

    // Duration calculation
    fromTime.addEventListener('change', calculateDuration);
    toTime.addEventListener('change', calculateDuration);

    // Initialize character counts
    updateCharCount(reasonTextarea, reasonCharCount, 500);
    updateCharCount(notesTextarea, notesCharCount, 300);
});
</script>
@endsection