@extends('layouts.employee')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">Apply for Leave</h1>
                    <p class="text-muted mb-0">Submit a new leave request</p>
                </div>
                <div>
                    <a href="{{ route('employee.leaves') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-2"></i>Back to Leave Management
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Leave Balance Cards -->
    <div class="row mb-4">
        @foreach($leaveTypes as $type => $info)
        <div class="col-md-{{ count($leaveTypes) > 4 ? '2' : '3' }}">
            <div class="card text-center">
                <div class="card-body">
                    <h6 class="card-title">{{ $info['label'] }}</h6>
                    <h4 class="text-primary">{{ $info['balance'] }}</h4>
                    <small class="text-muted">days available</small>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Leave Application Form -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Leave Application Form</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('employee.leaves.store') }}" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="leave_type" class="form-label">Leave Type <span class="text-danger">*</span></label>
                                <select class="form-select @error('leave_type') is-invalid @enderror" 
                                        id="leave_type" name="leave_type" required onchange="updateLeaveInfo()">
                                    <option value="">Select Leave Type</option>
                                    @foreach($leaveTypes as $type => $info)
                                    <option value="{{ $type }}" 
                                            data-balance="{{ $info['balance'] }}"
                                            data-description="{{ $info['description'] }}"
                                            {{ old('leave_type') === $type ? 'selected' : '' }}>
                                        {{ $info['label'] }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('leave_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div id="leave_info" class="form-text"></div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Half Day Option</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="is_half_day" onchange="toggleHalfDay()">
                                    <label class="form-check-label" for="is_half_day">
                                        This is a half-day leave
                                    </label>
                                </div>
                                <select class="form-select mt-2 d-none @error('half_day_type') is-invalid @enderror" 
                                        id="half_day_type" name="half_day_type">
                                    <option value="">Select Half Day</option>
                                    <option value="morning" {{ old('half_day_type') === 'morning' ? 'selected' : '' }}>Morning</option>
                                    <option value="afternoon" {{ old('half_day_type') === 'afternoon' ? 'selected' : '' }}>Afternoon</option>
                                </select>
                                @error('half_day_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="start_date" class="form-label">Start Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('start_date') is-invalid @enderror" 
                                       id="start_date" name="start_date" value="{{ old('start_date') }}" 
                                       min="{{ date('Y-m-d') }}" required onchange="calculateDays()">
                                @error('start_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="end_date" class="form-label">End Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('end_date') is-invalid @enderror" 
                                       id="end_date" name="end_date" value="{{ old('end_date') }}" 
                                       min="{{ date('Y-m-d') }}" required onchange="calculateDays()">
                                @error('end_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="alert alert-info d-none" id="days_calculation">
                                <i class="bi bi-info-circle me-2"></i>
                                <span id="total_days_text"></span>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="reason" class="form-label">Reason for Leave <span class="text-danger">*</span></label>
                            <textarea class="form-control @error('reason') is-invalid @enderror" 
                                      id="reason" name="reason" rows="4" 
                                      placeholder="Please provide the reason for your leave request..." required>{{ old('reason') }}</textarea>
                            @error('reason')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="attachment" class="form-label">Supporting Document (Optional)</label>
                            <input type="file" class="form-control @error('attachment') is-invalid @enderror" 
                                   id="attachment" name="attachment" accept=".jpg,.jpeg,.png,.pdf">
                            <div class="form-text">Upload medical certificate, letter, or other supporting documents (JPG, PNG, PDF - Max 2MB)</div>
                            @error('attachment')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{{ route('employee.leaves') }}" class="btn btn-secondary">
                                <i class="bi bi-x-circle me-2"></i>Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle me-2"></i>Submit Leave Request
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">Leave Policy Guidelines</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <h6 class="text-primary">Annual Leave</h6>
                        <p class="small text-muted">Must be applied at least 2 days in advance. Subject to manager approval.</p>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="text-success">Sick Leave</h6>
                        <p class="small text-muted">Medical certificate required for leaves longer than 2 days.</p>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="text-warning">Emergency Leave</h6>
                        <p class="small text-muted">For urgent family matters. Supporting documents may be required.</p>
                    </div>
                    
                    <div class="mb-3">
                        <h6 class="text-info">Maternity/Paternity</h6>
                        <p class="small text-muted">Must be applied with medical certification or birth certificate.</p>
                    </div>
                    
                    <div class="alert alert-warning">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        <small>Leave requests are subject to approval by your reporting manager.</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function updateLeaveInfo() {
    const select = document.getElementById('leave_type');
    const infoDiv = document.getElementById('leave_info');
    const option = select.options[select.selectedIndex];
    
    if (option.value) {
        const balance = option.getAttribute('data-balance');
        const description = option.getAttribute('data-description');
        infoDiv.innerHTML = `<strong>${balance} days available.</strong> ${description}`;
        infoDiv.className = 'form-text text-info';
    } else {
        infoDiv.innerHTML = '';
    }
}

function toggleHalfDay() {
    const checkbox = document.getElementById('is_half_day');
    const select = document.getElementById('half_day_type');
    const endDate = document.getElementById('end_date');
    const startDate = document.getElementById('start_date');
    
    if (checkbox.checked) {
        select.classList.remove('d-none');
        select.required = true;
        // Set end date same as start date for half day
        if (startDate.value) {
            endDate.value = startDate.value;
            endDate.disabled = true;
        }
    } else {
        select.classList.add('d-none');
        select.required = false;
        select.value = '';
        endDate.disabled = false;
    }
    calculateDays();
}

function calculateDays() {
    const startDate = document.getElementById('start_date').value;
    const endDate = document.getElementById('end_date').value;
    const isHalfDay = document.getElementById('is_half_day').checked;
    const calculationDiv = document.getElementById('days_calculation');
    const totalDaysText = document.getElementById('total_days_text');
    
    if (startDate && endDate) {
        const start = new Date(startDate);
        const end = new Date(endDate);
        
        if (end >= start) {
            let totalDays;
            if (isHalfDay) {
                totalDays = 0.5;
            } else {
                totalDays = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1;
            }
            
            totalDaysText.textContent = `Total leave days: ${totalDays} ${totalDays === 1 ? 'day' : 'days'}`;
            calculationDiv.classList.remove('d-none');
        } else {
            calculationDiv.classList.add('d-none');
        }
    } else {
        calculationDiv.classList.add('d-none');
    }
}

// Update end date when start date changes for half day
document.getElementById('start_date').addEventListener('change', function() {
    const isHalfDay = document.getElementById('is_half_day').checked;
    if (isHalfDay) {
        document.getElementById('end_date').value = this.value;
    }
});
</script>
@endpush