@extends('layouts.app')

@section('content')
    @if (session('message'))
        <div id='alert' class="alert alert-warning">
            {{ session('message') }}
        </div>
    @endif
    <div style="justify-content: space-between;"
        class="card p-4 m-2 bg-white d-flex flex-column flex-sm-row align-items-center gap-2 mb-2">
        <h2 class="fs-lg fw-medium mb-2 me-auto">
            Daftar Tamu
        </h2>
        <div>
            <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#datepicker-modal-preview"
                class="btn btn-primary">Cetak Per-Hari</a>
            <a href="{{ route('cetak_all') }}" class="btn btn-primary">Cetak Seluruh Tamu</a>
        </div>

        <div id="datepicker-modal-preview" class="modal fade" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2 class="fw-medium fs-base me-auto">
                            Filter berdasarkan tanggal
                        </h2>
                    </div>

                    <form method="POST" action="{{ route('cetak-tamu') }}">
                        @csrf
                        <div class="modal-body grid columns-12 gap-4 gap-y-3">
                            <div class="g-col-12 g-col-sm-6">
                                <label for="modal-datepicker-1" class="form-label">Pilih tanggal</label>
                                <input type="date" class="form-control" placeholder="yyyy-mm-dd" name="date" required>
                            </div>
                        </div>
                        <div class="modal-footer text-end">
                            <button type="button" data-bs-dismiss="modal"
                                class="btn btn-outline-secondary w-20 me-1">Batal</button>
                            <button type="submit" class="btn btn-primary">Cetak PDF</button>
                        </div>
                    </form>

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

    <div id="tamu-hari-ini" class="card p-5 m-2 table-responsive">
        <div style="justify-content: space-between;"
            class="intro-y d-flex flex-column flex-sm-row align-items-center gap-2 mb-5">
            <h2 class="fs-lg fw-medium mb-2 me-auto">
                Daftar Tamu Hari Ini : {{ $tamuTodayCount }}
            </h2>
            <button id="btnAll" class="btn btn-primary">Seluruh Tamu >></button>
        </div>
        <table id="tableToday" class="table table-hover border rounded-2">
            <thead>
                <tr>
                    <th class="text-center">No</th>
                    <th class="text-center">Nama</th>
                    <th class="text-center">NIP</th>
                    <th class="text-center">Asal Intansi</th>
                    <th class="text-center">No HP</th>
                    <th class="text-center">Status Pegawai</th>
                    <th class="text-center">Bidang</th>
                    <th class="text-center">Jabatan</th>
                    <th class="text-center">Keperluan</th>
                    <th class="text-center">Tujuan</th>
                    <th class="text-center">Tanggal</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($tamuToday as $item)
                    <tr>
                        <td class="text-center">{{ $loop->iteration }}</td>
                        <td class="text-center">{{ $item->nama }}</td>
                        <td class="text-center">{{ $item->nip ? $item->nip : '-' }}</td>
                        <td class="text-center">{{ $item->alamatAsalInstansi }}</td>
                        <td class="text-center">{{ $item->noHp }}</td>
                        <td class="text-center">{{ $item->statusPegawai }}</td>
                        <td class="text-center">{{ $item->bidang }}</td>
                        <td class="text-center">{{ $item->jabatan }}</td>
                        <td class="text-center">{{ $item->keperluan }}</td>
                        <td class="text-center">{{ $item->tujuan }}</td>
                        <td class="text-center">
                            {{ \Carbon\Carbon::parse($item->created_at)->format('j-n-Y (H:i)') }}
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div id="seluruh-tamu" class="card p-5 m-2 table-responsive">
        <div style="justify-content: space-between;"
            class="intro-y d-flex flex-column flex-sm-row align-items-center gap-2 mb-5">
            <h2 class="fs-lg fw-medium mb-2 me-auto">
                Daftar Seluruh Tamu : {{ $tamuCount }}
            </h2>
            <button id="btnToday" class="btn btn-primary">Tamu Hari Ini >></button>
        </div>
        <table id="tableAll" class="table table-hover border rounded-2">
            <thead>
                <tr>
                    <th class="text-center">No</th>
                    <th class="text-center">Nama</th>
                    <th class="text-center">NIP</th>
                    <th class="text-center">Asal Intansi</th>
                    <th class="text-center">No HP</th>
                    <th class="text-center">Status Pegawai</th>
                    <th class="text-center">Bidang</th>
                    <th class="text-center">Jabatan</th>
                    <th class="text-center">Keperluan</th>
                    <th class="text-center">Tujuan</th>
                    <th class="text-center">Tanggal</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($tamu as $item)
                    <tr>
                        <td class="text-center">{{ $loop->iteration }}</td>
                        <td class="text-center">{{ $item->nama }}</td>
                        <td class="text-center">{{ $item->nip ? $item->nip : '-' }}</td>
                        <td class="text-center">{{ $item->alamatAsalInstansi }}</td>
                        <td class="text-center">{{ $item->noHp }}</td>
                        <td class="text-center">{{ $item->statusPegawai }}</td>
                        <td class="text-center">{{ $item->bidang ? $item->bidang : '-' }}</td>
                        <td class="text-center">{{ $item->jabatan ? $item->jabatan : '-' }}</td>
                        <td class="text-center">{{ $item->keperluan }}</td>
                        <td class="text-center">{{ $item->tujuan }}</td>
                        <td class="text-center">
                            {{ \Carbon\Carbon::parse($item->created_at)->format('j-n-Y (H:i)') }}
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection

@section('pageScript')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var tableToday = document.getElementById('tamu-hari-ini');
            var tableAll = document.getElementById('seluruh-tamu');
            var btnToday = document.getElementById('btnToday');
            var btnAll = document.getElementById('btnAll');

            // Sembunyikan tabel tamu seluruh saat halaman dimuat
            tableToday.style.display = 'none';

            // Tampilkan tabel tamu hari ini dan sembunyikan tamu seluruh saat tombol "Tamu Hari Ini" ditekan
            btnToday.addEventListener('click', function() {
                tableToday.style.display = 'block';
                tableAll.style.display = 'none';
            });

            // Tampilkan tabel tamu seluruh dan sembunyikan tamu hari ini saat tombol "Seluruh Tamu" ditekan
            btnAll.addEventListener('click', function() {
                tableToday.style.display = 'none';
                tableAll.style.display = 'block';
            });
        });
    </script>
@endsection