@extends('layouts.template.main')

@section('content')
    <main>
        <header class="page-header page-header-compact page-header-light border-bottom bg-white mb-4">
            <div class="container-xl px-4">
                <div class="page-header-content">
                    <div class="row align-items-center justify-content-between pt-3">
                        <div class="col-auto mb-3">
                            <h1 class="page-header-title">
                                <div class="page-header-icon">
                                    <i data-feather="user"></i>
                                </div>
                                Đơn xin nghỉ phép/ đi làm muộn
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- Main page content-->
        <div class="container-xl px-4 mt-4">
            <div class="row">
                <div class="col-xl-12">
                    <!-- Account details card-->
                    <div class="card mb-4">
                        <div class="card-header">Đơn xin nghỉ phép/ đi làm muộn</div>
                        <div class="card-body">


                            @if(session('success'))
                                <div class="alert alert-success" role="alert">
                                    {{ session('success') }}
                                </div>
                            @endif

                            @if(session('error'))
                                <div class="alert alert-danger" role="alert">
                                    {{ session('error') }}
                                </div>
                            @endif

                            @if ($errors->any())
                                <div class="alert alert-danger" role="alert">
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <form action="{{ route('leave_notices.store') }}" method="POST">
                                @csrf
                                <div class="mb-3">
                                    <label>Ngày bắt đầu</label>
                                    <input type="date" name="start_date" id="start_date" class="form-control" required>
                                </div>

                                <div class="mb-3" id="end_date_container">
                                    <label>Ngày kết thúc</label>
                                    <input type="date" name="end_date" id="end_date" class="form-control" required>
                                </div>

                                <div class="mb-3">
                                    <label>Loại nghỉ phép</label>
                                    <select name="leave_type" id="leave_type" class="form-select" required>
                                        <option value="Late">Đi làm muộn</option>
                                        <option value="EarlyLeave">Về sớm</option>
                                        <option value="Casual">Nghỉ phép</option>
                                        <option value="MissingPunch">Quên chấm công</option>
                                    </select>
                                </div>

                                <div class="mb-3" id="half_day_container">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="is_half_day" id="is_half_day"
                                            value="1" onchange="toggleHalfDayPeriod(this)">
                                        <label class="form-check-label" for="is_half_day">
                                            <strong>Nghỉ nửa ngày</strong> (chỉ tính 0.5 ngày công)
                                        </label>
                                    </div>
                                    <small class="text-muted">Chỉ áp dụng khi nghỉ 1 ngày. Nếu nghỉ nhiều ngày, vui lòng bỏ
                                        chọn.</small>

                                    {{-- Chọn buổi nghỉ -- hiện ra khi tick nửa ngày --}}
                                    <div class="mt-2" id="half_day_period_container" style="display: none;">
                                        <label class="form-label fw-semibold">Nghỉ buổi nào? <span class="text-danger">*</span></label>
                                        <div class="d-flex gap-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="half_day_period"
                                                    id="period_morning" value="morning" checked>
                                                <label class="form-check-label" for="period_morning">
                                                     Buổi sáng
                                                </label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="half_day_period"
                                                    id="period_afternoon" value="afternoon">
                                                <label class="form-check-label" for="period_afternoon">
                                                     Buổi chiều
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label>Lý do</label>
                                    <textarea name="reason" class="form-control"></textarea>
                                </div>

                                <button type="submit" id="submit-btn" class="btn btn-primary">
                                    <span id="btn-text">Lưu</span>
                                </button>
                            </form>


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

    <script>
        // Global scope — cần thiết vì dùng trong onchange inline
        function toggleHalfDayPeriod(checkbox) {
            const periodContainer = document.getElementById('half_day_period_container');
            periodContainer.style.display = checkbox.checked ? 'block' : 'none';
        }

        document.addEventListener('DOMContentLoaded', function () {
            const leaveTypeSelect = document.getElementById('leave_type');
            const startDateInput = document.getElementById('start_date');
            const endDateInput = document.getElementById('end_date');
            const endDateContainer = document.getElementById('end_date_container');
            const halfDayContainer = document.getElementById('half_day_container');
            const halfDayCheckbox = document.getElementById('is_half_day');

            function handleLeaveTypeChange() {
                const selectedType = leaveTypeSelect.value;

                if (selectedType === 'Late' || selectedType === 'EarlyLeave' || selectedType === 'MissingPunch') {
                    // Ẩn trường ngày kết thúc
                    endDateContainer.style.display = 'none';
                    endDateInput.removeAttribute('required');

                    // Ẩn checkbox nửa ngày (không áp dụng cho đi muộn/quên chấm công)
                    halfDayContainer.style.display = 'none';
                    halfDayCheckbox.checked = false;

                    // Khi ngày bắt đầu thay đổi, tự động set ngày kết thúc giống nhau
                    startDateInput.addEventListener('change', function () {
                        endDateInput.value = startDateInput.value;
                    });
                } else {
                    // Hiện trường ngày kết thúc
                    endDateContainer.style.display = 'block';
                    endDateInput.setAttribute('required', 'required');

                    // Hiện checkbox nửa ngày
                    halfDayContainer.style.display = 'block';
                }
            }

            // Kiểm tra khi thay đổi ngày để cảnh báo nếu chọn nửa ngày nhưng nghỉ nhiều ngày
            function validateHalfDay() {
                if (halfDayCheckbox.checked && startDateInput.value && endDateInput.value) {
                    const start = new Date(startDateInput.value);
                    const end = new Date(endDateInput.value);
                    const diffDays = Math.ceil((end - start) / (1000 * 60 * 60 * 24));

                    if (diffDays > 0) {
                        alert('Cảnh báo: Bạn đang chọn "Nghỉ nửa ngày" nhưng nghỉ nhiều hơn 1 ngày. Hệ thống sẽ tính 0.5 ngày cho mỗi ngày nghỉ.');
                    }
                }
            }

            // Xử lý khi thay đổi loại nghỉ phép
            leaveTypeSelect.addEventListener('change', handleLeaveTypeChange);

            // Xử lý khi thay đổi ngày
            startDateInput.addEventListener('change', validateHalfDay);
            endDateInput.addEventListener('change', validateHalfDay);
            halfDayCheckbox.addEventListener('change', validateHalfDay);

            // Xử lý khi submit form để tránh spam
            const form = document.querySelector('form');
            const submitBtn = document.getElementById('submit-btn');
            const btnText = document.getElementById('btn-text');

            form.addEventListener('submit', function () {
                submitBtn.disabled = true;
                btnText.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Đang lưu...';
            });

            // Chạy lần đầu để set trạng thái ban đầu
            handleLeaveTypeChange();
        });
    </script>

@endsection