@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

                            <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="Sick">Nghỉ phép bệnh</option>
                                        <option value="Casual">Nghỉ phép</option>
                                        <option value="Annual">Nghỉ phép năm</option>
                                        <option value="Personal">Nghỉ phép riêng</option>
                                        <option value="Maternity">Nghỉ phép sinh con</option>
                                        <option value="Paternity">Nghỉ phép dưỡng con</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">
                                        <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>
                                </div>

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

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


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

    <script>
        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') {
                    // Ẩ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)
                    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);
            
            // Chạy lần đầu để set trạng thái ban đầu
            handleLeaveTypeChange();
        });
    </script>

@endsection