@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="calendar"></i>
                                </div>
                                Cấu hình lịch làm việc
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div class="container-xl px-4 mt-4">
            <div class="row">
                <div class="col-xl-12">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <div class="row g-3 mb-4">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Chọn tháng</label>
                                    <select class="form-select form-select-lg" id="monthSelect">
                                        @php
                                            $monthNames = [
                                                1 => 'Tháng 1',
                                                2 => 'Tháng 2',
                                                3 => 'Tháng 3',
                                                4 => 'Tháng 4',
                                                5 => 'Tháng 5',
                                                6 => 'Tháng 6',
                                                7 => 'Tháng 7',
                                                8 => 'Tháng 8',
                                                9 => 'Tháng 9',
                                                10 => 'Tháng 10',
                                                11 => 'Tháng 11',
                                                12 => 'Tháng 12',
                                            ];
                                        @endphp
                                        @foreach ($monthNames as $value => $label)
                                            <option value="{{ $value }}" {{ $currentMonth == $value ? 'selected' : '' }}>
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Chọn năm</label>
                                    <select class="form-select form-select-lg" id="yearSelect">
                                        @for ($year = now()->year - 5; $year <= now()->year + 5; $year++)
                                            <option value="{{ $year }}" {{ $currentYear == $year ? 'selected' : '' }}>
                                                {{ $year }}
                                            </option>
                                        @endfor
                                    </select>
                                </div>
                            </div>

                            <div id="alertPlaceholder"></div>

                            <div class="table-responsive">
                                <table class="table table-hover align-middle" id="calendarTable">
                                    <thead class="table-primary">
                                        <tr>
                                            <th>Ngày</th>
                                            <th>Thứ</th>
                                            <th class="text-center">Làm việc</th>
                                        </tr>
                                    </thead>
                                    <tbody id="calendarBody">
                                        <tr>
                                            <td colspan="4" class="text-center text-muted py-4">
                                                Đang tải dữ liệu...
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="d-flex flex-wrap gap-2 pt-3 border-top">
                                <button class="btn btn-outline-primary" id="selectAllBtn">
                                    ✓ Chọn tất cả
                                </button>
                                <button class="btn btn-outline-secondary" id="deselectAllBtn">
                                    ✗ Bỏ chọn tất cả
                                </button>
                                <button class="btn btn-primary ms-auto" id="saveCalendarBtn">
                                    Lưu lịch làm việc
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>
        const routes = {
            data: "{{ route('work-calendar.data') }}",
            store: "{{ route('work-calendar.store') }}"
        };
        const csrfToken = "{{ csrf_token() }}";

        const monthSelect = document.getElementById('monthSelect');
        const yearSelect = document.getElementById('yearSelect');
        const calendarBody = document.getElementById('calendarBody');
        const selectAllBtn = document.getElementById('selectAllBtn');
        const deselectAllBtn = document.getElementById('deselectAllBtn');
        const saveCalendarBtn = document.getElementById('saveCalendarBtn');
        const alertPlaceholder = document.getElementById('alertPlaceholder');

        const showAlert = (message, type = 'success') => {
            alertPlaceholder.innerHTML = `
                <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            `;
        };

        const loadCalendar = () => {
            const month = monthSelect.value;
            const year = yearSelect.value;

            calendarBody.innerHTML = `
                <tr>
                    <td colspan="4" class="text-center text-muted py-4">
                        Đang tải dữ liệu...
                    </td>
                </tr>
            `;

            fetch(`${routes.data}?month=${month}&year=${year}`, {
                headers: {
                    'Accept': 'application/json'
                }
            })
                .then(response => response.json())
                .then(result => {
                    if (!result.data || !result.data.length) {
                        calendarBody.innerHTML = `
                            <tr><td colspan="4" class="text-center text-muted py-4">Không có dữ liệu.</td></tr>
                        `;
                        return;
                    }

                    calendarBody.innerHTML = result.data.map(day => `
                        <tr>
                            <td class="fw-semibold">${day.day}/${day.month}</td>
                            <td>${day.weekday}</td>
                            <td class="text-center">
                                <input class="form-check-input day-checkbox" type="checkbox"
                                    data-day="${day.day}" ${day.is_working_day ? 'checked' : ''}>
                            </td>
                        </tr>
                    `).join('');
                })
                .catch(() => {
                    calendarBody.innerHTML = `
                        <tr><td colspan="4" class="text-center text-danger py-4">Không thể tải dữ liệu.</td></tr>
                    `;
                });
        };

        const getCheckedDays = () => {
            return Array.from(document.querySelectorAll('.day-checkbox'))
                .filter(cb => cb.checked)
                .map(cb => Number(cb.dataset.day));
        };

        selectAllBtn.addEventListener('click', () => {
            document.querySelectorAll('.day-checkbox').forEach(cb => cb.checked = true);
        });

        deselectAllBtn.addEventListener('click', () => {
            document.querySelectorAll('.day-checkbox').forEach(cb => cb.checked = false);
        });

        saveCalendarBtn.addEventListener('click', () => {
            const month = Number(monthSelect.value);
            const year = Number(yearSelect.value);
            const workingDays = getCheckedDays();

            saveCalendarBtn.disabled = true;
            saveCalendarBtn.textContent = 'Đang lưu...';

            fetch(routes.store, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ month, year, working_days: workingDays })
            })
                .then(response => response.json())
                .then(data => {
                    if (data.message) {
                        showAlert(data.message, 'success');
                    } else {
                        showAlert('Đã lưu lịch làm việc.', 'success');
                    }
                })
                .catch(() => showAlert('Không thể lưu lịch. Vui lòng thử lại.', 'danger'))
                .finally(() => {
                    saveCalendarBtn.disabled = false;
                    saveCalendarBtn.textContent = 'Lưu lịch làm việc';
                });
        });

        monthSelect.addEventListener('change', loadCalendar);
        yearSelect.addEventListener('change', loadCalendar);

        document.addEventListener('DOMContentLoaded', loadCalendar);
    </script>
@endsection