@extends('admin.layouts.app')

@section('title', __('dashboard.edit_academy_schedule'))

@section('content')
    <x-admin.page-header title="{{ __('dashboard.edit_academy_schedule') }}" :breadcrumbs="[__('dashboard.academy_schedules') => route('admin.academy-schedules.index'), __('dashboard.edit_academy_schedule') => '']" />

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">{{ __('dashboard.academy_schedule_information') }}</h5>
                </div>
                <div class="card-body">
                    <x-form action="{{ route('admin.academy-schedules.update', $academySchedule) }}" method="PUT">
                        @include('admin.academy-schedules.__inputs')
                    </x-form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const academySelect = document.querySelector('select[name="academy_id"]');
    const courtSelect = document.querySelector('select[name="court_id"]');
    const daySelect = document.querySelector('select[name="days[]"]');
    const startDateInput = document.querySelector('input[name="start_date"]');
    const endDateInput = document.querySelector('input[name="end_date"]');
    const slotsContainer = document.getElementById('available-slots-container');
    const slotsUrl = '{{ route("admin.academy-schedules.availableSlots") }}';
    const courtsByAcademyUrl = '{{ route("admin.academy-schedules.courtsByAcademy") }}';
    const excludeId = {{ $academySchedule->id }};

    function loadCourtsForAcademy(academyId) {
        if (!courtSelect || !academyId) return;
        fetch(courtsByAcademyUrl + '?academy_id=' + encodeURIComponent(academyId))
            .then(r => r.json())
            .then(data => {
                const courts = data.courts || [];
                const currentCourtId = courtSelect.value;
                courtSelect.innerHTML = '<option value="">{{ __("dashboard.select") }}</option>';
                courts.forEach(c => {
                    const opt = document.createElement('option');
                    opt.value = c.id;
                    opt.textContent = c.name;
                    if (c.id == currentCourtId) opt.selected = true;
                    courtSelect.appendChild(opt);
                });
                if (slotsContainer) slotsContainer.innerHTML = '';
            })
            .catch(() => {});
    }

    function fetchSlots() {
        const academyId = academySelect?.value;
        const courtId = courtSelect?.value;
        const day = daySelect?.value;
        const startDate = startDateInput?.value;
        const endDate = endDateInput?.value;
        if (!academyId || !courtId || !day || !startDate || !endDate || !slotsContainer) return;
        const params = new URLSearchParams({ academy_id: academyId, court_id: courtId, day: day, start_date: startDate, end_date: endDate, exclude_schedule_id: excludeId });
        fetch(slotsUrl + '?' + params)
            .then(r => r.json())
            .then(data => {
                if (!data.slots || !data.slots.length) { slotsContainer.innerHTML = ''; return; }
                let html = '<p class="mb-2"><strong>{{ __("dashboard.available_slots") }}</strong> ({{ __("dashboard.disabled_slots_overlap") }})</p><div class="d-flex flex-wrap gap-2">';
                data.slots.forEach(slot => {
                    const disabled = slot.disabled ? ' opacity-50' : '';
                    html += '<span class="badge bg-' + (slot.disabled ? 'secondary' : 'success') + disabled + '">' + slot.start_time + ' - ' + slot.end_time + '</span>';
                });
                html += '</div>';
                slotsContainer.innerHTML = html;
            })
            .catch(() => { if (slotsContainer) slotsContainer.innerHTML = ''; });
    }

    if (academySelect) {
        academySelect.addEventListener('change', function () {
            loadCourtsForAcademy(this.value);
            fetchSlots();
        });
    }
    [courtSelect, daySelect, startDateInput, endDateInput].forEach(el => { if (el) el.addEventListener('change', fetchSlots); });
    fetchSlots();
});
</script>
@endpush
