@extends('layouts.user_type.auth')

@section('content')

<div id="loading-overlay" style="display:none;">
    <div class="loader"></div>
</div>

<div>
    <div class="row">
        <div class="col-12">
            @if(session('status'))
                <div class="m-3 alert alert-success alert-dismissible fade show" id="alert-success" role="alert">
                    <span class="alert-text text-white">{{ session('status') }}</span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        <i class="fa fa-close" aria-hidden="true"></i>
                    </button>
                </div>
            @endif
            @if(session('error'))
                <div class="m-3 alert alert-danger alert-dismissible fade show" id="alert-error" role="alert">
                    <span class="alert-text text-white">{{ session('error') }}</span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        <i class="fa fa-close" aria-hidden="true"></i>
                    </button>
                </div>
            @endif

            <!-- Single Leave Request -->
            <div class="card mb-4 mx-4">
                <div class="card-header pb-0">
                    <h5 class="mb-0">Create Leave Request</h5>
                </div>
                <div class="container-fluid py-4">
                    <div class="card">
                        <div class="card-header pb-0 px-3">
                            <h6 class="mb-0">Leave Request Information</h6>
                        </div>
                        <div class="card-body pt-4 p-3">
                            <form action="{{ route('leave.store.request') }}" method="POST" role="form text-left" id="leave-form">
                                @csrf

                                @if($errors->any())
                                    <div class="mt-3 alert alert-primary alert-dismissible fade show" role="alert">
                                        <span class="alert-text text-white">{{ $errors->first() }}</span>
                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                                            <i class="fa fa-close" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                @endif

                                <div class="row">
                                    <!-- Employee Selection -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="employee_id" class="form-control-label">Employee</label>
                                            <select class="form-control" id="employee_id" name="employee_id" required>
                                                <option value="">Select Employee</option>
                                                @foreach($employees as $employee)
                                                    <option value="{{ $employee->id }}" {{ old('employee_id') == $employee->id ? 'selected' : '' }}>
                                                        {{ $employee->first_name }} {{ $employee->last_name }} ({{ $employee->employee_id }})
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('employee_id')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>

                                    <!-- Leave Type Selection -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="leave_type_id" class="form-control-label">Leave Type</label>
                                            <select class="form-control" id="leave_type_id" name="leave_type_id" required>
                                                <option value="">Select Leave Type</option>
                                                @foreach($leaveTypes as $leaveType)
                                                    <option value="{{ $leaveType->id }}" {{ old('leave_type_id') == $leaveType->id ? 'selected' : '' }}>
                                                        {{ $leaveType->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('leave_type_id')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>

                                    <!-- Start Date -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="start_date" class="form-control-label">Start Date</label>
                                            <input class="form-control" type="date" name="start_date" id="start_date" value="{{ old('start_date') }}" required>
                                            @error('start_date')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>

                                    <!-- End Date -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="end_date" class="form-control-label">End Date</label>
                                            <input class="form-control" type="date" name="end_date" id="end_date" value="{{ old('end_date') }}" required>
                                            @error('end_date')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>

                                    <!-- Half Day Checkbox -->
                                    <div class="col-md-6">
                                        <div class="form-check mt-3">
                                            <input class="form-check-input" type="checkbox" id="half_day_checkbox" name="half_day" {{ old('half_day', $leaveType->half_day ?? false) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="half_day_checkbox">
                                                Half Day
                                            </label>
                                        </div>
                                    </div>

                                    <!-- Half Day Type -->
                                    <div class="col-md-6" id="half_day_type_container" style="display: none;">
                                        <div class="form-group">
                                            <label for="half_day_type" class="form-control-label">Half Day Type</label>
                                            <select name="half_day_type" id="half_day_type" class="form-control">
                                                <option value="">Select Type</option>
                                                <option value="first_half" {{ old('half_day_type', $leaveType->half_day_type ?? '') == 'first_half' ? 'selected' : '' }}>First Half</option>
                                                <option value="second_half" {{ old('half_day_type', $leaveType->half_day_type ?? '') == 'second_half' ? 'selected' : '' }}>Second Half</option>
                                            </select>
                                            @error('half_day_type')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>

                                    <!-- Reason -->
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="reason" class="form-control-label">Reason</label>
                                            <textarea class="form-control" id="reason" rows="3" placeholder="Reason for leave" name="reason">{{ old('reason') }}</textarea>
                                            @error('reason')
                                                <p class="text-danger text-xs mt-2">{{ $message }}</p>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="d-flex justify-content-end">
                                    <button type="submit" class="btn bg-gradient-dark btn-md mt-4 mb-4">Submit Leave Request</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Mass Upload Section -->
            <div class="card mb-4 mx-4 shadow-sm">
                <div class="card-header pb-0">
                    <h5 class="mb-0">Mass Upload Leaves</h5>
                </div>
                <div class="container-fluid py-4">
                    <div class="card">
                        <div class="card-body pt-4 p-3">
                            <form action="{{ route('leave.mass-upload') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="row align-items-center">
                                    <div class="col-md-8">
                                        <input type="file" name="leaves_file" class="form-control" accept=".xlsx,.xls,.csv" required>
                                    </div>
                                    <div class="col-md-4">
                                        <button type="submit" class="btn bg-gradient-primary">Upload</button>
                                    </div>
                                </div>
                                <small class="text-muted">Allowed formats: XLSX, XLS, CSV</small>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const checkbox = document.getElementById('half_day_checkbox');
        const container = document.getElementById('half_day_type_container');

        function toggleHalfDayType() {
            if (checkbox.checked) {
                container.style.display = 'block';
            } else {
                container.style.display = 'none';
            }
        }

        checkbox.addEventListener('change', toggleHalfDayType);

        // Trigger on page load if already checked
        toggleHalfDayType();
    });
</script>
@endpush