@extends('layouts.portal')

@section('title', __('time_slots.title') . ' — ' . config('app.name'))
@section('page_title', __('time_slots.title'))
@section('page_subtitle', number_format($timeSlots->total()) . ' · ' . __('time_slots.title'))

@section('page_actions')
    <a href="{{ route('portal.time-slots.create') }}" class="btn-brand !px-5 !py-2.5 text-sm">{{ __('time_slots.add_time_slot') }}</a>
@endsection

@section('content')
    @if ($timeSlots->count() > 0)
        <form id="bulkDeleteForm" method="POST" action="{{ route('portal.time-slots.bulk-delete') }}" class="hidden">
            @csrf
            @method('DELETE')
            <div id="selectedSlots"></div>
        </form>

        <div class="card-sc mb-5 flex flex-wrap items-center gap-2">
            <button type="button" class="btn-ghost text-sm" id="selectAllBtn">{{ __('time_slots.select_all') }}</button>
            <button type="button" class="btn-ghost text-sm" id="deselectAllBtn">{{ __('time_slots.deselect_all') }}</button>
            <button type="button" class="btn-soft hidden text-sm !text-red-600" id="bulkDeleteBtn">{{ __('time_slots.delete_selected') }}</button>
            <span id="selectedCount" class="ms-2 text-sm text-ink-500"></span>
        </div>

        <div class="overflow-hidden rounded-3xl border border-ink-100 bg-white shadow-card">
            <div class="overflow-x-auto">
                <table class="table-sc">
                    <thead>
                        <tr>
                            <th class="w-10"><input type="checkbox" id="masterCheckbox" class="rounded border-ink-300 text-brand-500 focus:ring-brand-300"></th>
                            <th>{{ __('appointments.appointment_date') }}</th>
                            <th>{{ __('appointments.appointment_time') }}</th>
                            <th>{{ __('time_slots.consultation_type') }}</th>
                            <th>{{ __('common.status') }}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($timeSlots as $slot)
                            <tr>
                                <td>
                                    <input type="checkbox" class="slot-checkbox rounded border-ink-300 text-brand-500 focus:ring-brand-300"
                                           value="{{ $slot->id }}" {{ $slot->is_available ? '' : 'disabled' }}>
                                </td>
                                <td class="font-semibold text-ink-900">{{ $slot->formatted_date }}</td>
                                <td class="numeric">{{ $slot->formatted_start_time }} – {{ $slot->formatted_end_time }}</td>
                                <td>
                                    <span class="badge-sc {{ $slot->isOnline() ? 'bg-sky-100 text-sky-800' : 'bg-brand-50 text-brand-700' }}">
                                        {{ __('time_slots.' . $slot->type) }}
                                    </span>
                                </td>
                                <td>
                                    @if ($slot->is_available)
                                        <span class="badge-sc bg-emerald-100 text-emerald-800">{{ __('time_slots.available') }}</span>
                                    @else
                                        <span class="badge-sc bg-ink-100 text-ink-600">{{ __('time_slots.booked') }}</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    @if ($slot->is_available)
                                        <form method="POST" action="{{ route('portal.time-slots.destroy', $slot) }}" class="inline"
                                              onsubmit="return confirm('{{ __('appointments.are_you_sure') }}')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn-soft text-sm !text-red-600">{{ __('common.delete') }}</button>
                                        </form>
                                    @else
                                        <span class="text-xs text-ink-400" title="{{ __('time_slots.cannot_delete_booked') }}">—</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="mt-5">{{ $timeSlots->links() }}</div>
    @else
        <div class="card-sc py-16 text-center">
            <p class="text-lg font-semibold text-ink-800">{{ __('time_slots.no_slots_available') }}</p>
            <p class="mt-1 text-ink-500">{{ __('time_slots.add_available_hours') }}</p>
            <a href="{{ route('portal.time-slots.create') }}" class="btn-brand mt-5 inline-block !px-5 !py-2.5 text-sm no-underline">
                {{ __('time_slots.add_first_slot') }}
            </a>
        </div>
    @endif
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const masterCheckbox = document.getElementById('masterCheckbox');
    const slotCheckboxes = document.querySelectorAll('.slot-checkbox');
    const bulkDeleteBtn = document.getElementById('bulkDeleteBtn');
    const selectedCount = document.getElementById('selectedCount');
    const bulkDeleteForm = document.getElementById('bulkDeleteForm');
    const selectedSlots = document.getElementById('selectedSlots');

    if (!masterCheckbox) return;

    function updateSelectedCount() {
        const checked = document.querySelectorAll('.slot-checkbox:checked').length;
        selectedCount.textContent = checked > 0 ? `{{ __('time_slots.selected') }}: ${checked}` : '';
        bulkDeleteBtn.classList.toggle('hidden', checked === 0);
        masterCheckbox.indeterminate = checked > 0 && checked < slotCheckboxes.length;
        masterCheckbox.checked = checked === slotCheckboxes.length;
    }

    masterCheckbox.addEventListener('change', function () {
        slotCheckboxes.forEach(cb => { if (!cb.disabled) cb.checked = masterCheckbox.checked; });
        updateSelectedCount();
    });

    document.getElementById('selectAllBtn').addEventListener('click', function () {
        slotCheckboxes.forEach(cb => { if (!cb.disabled) cb.checked = true; });
        updateSelectedCount();
    });

    document.getElementById('deselectAllBtn').addEventListener('click', function () {
        slotCheckboxes.forEach(cb => { cb.checked = false; });
        updateSelectedCount();
    });

    slotCheckboxes.forEach(cb => cb.addEventListener('change', updateSelectedCount));

    bulkDeleteBtn.addEventListener('click', function () {
        const checked = document.querySelectorAll('.slot-checkbox:checked');
        if (checked.length === 0 || !confirm('{{ __('appointments.are_you_sure') }}')) return;

        selectedSlots.innerHTML = '';
        checked.forEach(cb => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'slots[]';
            input.value = cb.value;
            selectedSlots.appendChild(input);
        });
        bulkDeleteForm.submit();
    });

    updateSelectedCount();
});
</script>
@endpush