@extends('layouts.app')
@section('title', 'Daftar Tamu')

@section('content')
    @if (session('message'))
        <div id='alert' class="alert alert-warning">{{ session('message') }}</div>
    @endif

    <div
        class="card p-4 m-2 bg-white d-flex flex-column flex-sm-row align-items-center justify-content-between gap-2 mb-3 shadow-sm">
        <h2 class="fs-4 fw-semibold mb-2 mb-sm-0 text-primary">📋 Daftar Tamu</h2>
        <div class="d-flex gap-2">
            <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#datepicker-modal-preview"
                class="btn btn-outline-primary"><i class="fas fa-calendar-day me-1"></i> Cetak Per-Hari</a>
            <a href="{{ route('tamu.cetak_all') }}" class="btn btn-primary"><i class="fas fa-print me-1"></i> Cetak
                Seluruh</a>
        </div>
    </div>

    <div id="datepicker-modal-preview" class="modal fade" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title fw-semibold">Filter Berdasarkan Tanggal</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <form method="POST" action="{{ route('tamu.cetak') }}">
                    @csrf
                    <div class="modal-body">
                        <label for="date" class="form-label">Pilih Tanggal</label>
                        <input type="date" class="form-control" name="date" required>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">Cetak PDF</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @include('components.table-tamu', [
        'id' => 'tableToday',
        'wrapperId' => 'tamu-hari-ini',
        'title' => 'Tamu Hari Ini: ' . $tamuTodayCount,
        'btnId' => 'btnAll',
        'btnText' => 'Lihat Seluruh Tamu',
        'data' => $tamuToday,
        'hidden' => false,
    ])

    @include('components.table-tamu', [
        'id' => 'tableAll',
        'wrapperId' => 'seluruh-tamu',
        'title' => 'Seluruh Tamu: ' . $tamuCount,
        'btnId' => 'btnToday',
        'btnText' => 'Lihat Tamu Hari Ini',
        'data' => $tamuAll,
        'hidden' => true,
    ])
@endsection

@push('pageScripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const btnToday = document.getElementById('btnToday');
            const btnAll = document.getElementById('btnAll');
            const todayWrap = document.getElementById('tamu-hari-ini');
            const allWrap = document.getElementById('seluruh-tamu');

            const tableOptions = {
                ordering: false,
                responsive: false,
                autoWidth: false,
                scrollX: true,
                pageLength: 10,
                order: [
                    [0, 'asc']
                ],
                language: {
                    emptyTable: "Belum ada data yang dapat ditampilkan 😴",
                    lengthMenu: "",
                    zeroRecords: "Data tidak ditemukan",
                    info: "",
                    infoEmpty: "Tidak ada data tamu",
                    infoFiltered: "",
                    search: "Cari:",
                    paginate: {
                        first: `<i class="fa fa-angles-left"></i>`,
                        last: `<i class="fa fa-angles-right"></i>`,
                        next: `<i class="fa fa-chevron-right"></i>`,
                        previous: `<i class="fa fa-chevron-left"></i>`
                    }
                },
                renderer: 'bootstrap',
                dom: `
                <"datatable-header d-flex flex-wrap justify-content-between align-items-center mb-2"
                    l<"dataTables_filter-container"f>>
                <"table-responsive"t>
                <"datatable-footer d-flex justify-content-between align-items-center mt-3"ip>
            `
            };

            const dtToday = new DataTable('#tableToday', tableOptions);
            const dtAll = new DataTable('#tableAll', tableOptions);

            function switchTable(showEl, hideEl, dt) {

                document.documentElement.classList.add('freeze-scroll');
                document.body.classList.add('freeze-scroll');

                resetState(showEl);
                resetState(hideEl);

                // posisi awal tabel baru (di atas)
                showEl.classList.add('enter');

                // force reflow
                void showEl.offsetWidth;

                // animasi keluar tabel lama
                hideEl.classList.add('out');

                // tunggu sedikit agar animasi lebih smooth
                setTimeout(() => {
                    showEl.classList.add('show');
                }, 120);

                // selesai animasi
                setTimeout(() => {

                    hideEl.classList.add('hidden');
                    hideEl.classList.remove('out');

                    showEl.classList.remove('enter');

                    dt.columns.adjust().draw();

                    document.documentElement.classList.remove('freeze-scroll');
                    document.body.classList.remove('freeze-scroll');

                }, 650); // lebih panjang biar smooth
            }

            function resetState(el) {
                el.classList.remove('enter', 'show', 'out', 'hidden');
                el.style.visibility = 'visible';
            }


            btnAll.addEventListener('click', () => {
                switchTable(allWrap, todayWrap, dtAll);
            });

            btnToday.addEventListener('click', () => {
                switchTable(todayWrap, allWrap, dtToday);
            });

        });
    </script>
@endpush