@extends('layouts.admin')


 @section('content')




        <!-- ==================== MAIN CONTENT ==================== -->
        <main class="p-6 md:p-8">


            <!-- Page Header -->
            <div class="mb-8">

                <h2 class="text-3xl font-bold text-slate-900">
                    Visitors
                </h2>

                <p class="text-slate-500 mt-2">
                    Search and view visitor records and visit history.
                </p>

            </div>


            <!-- ==================== SEARCH ==================== -->
            <div class="bg-white rounded-xl border border-slate-200
                        shadow-sm p-5 mb-6">

                <label
                    for="visitorSearch"
                    class="block text-sm font-medium text-slate-700 mb-2"
                >
                    Search Visitors
                </label>


                <div class="relative">

                    <!-- Search Icon -->
                    <div
                        class="absolute inset-y-0 left-0
                               flex items-center pl-4
                               pointer-events-none"
                    >

                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="w-5 h-5 text-slate-400"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                            stroke-width="2"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M21 21l-4.35-4.35m2.35-5.65a7 7 0 11-14 0 7 7 0 0114 0z"
                            />
                        </svg>

                    </div>


                    <input
                        type="text"
                        id="visitorSearch"
                        name="search"
                        placeholder="Search by visitor name..."
                        hx-get="{{ route('visitors.history') }}"
                        hx-trigger="keyup changed delay:400ms"
                        hx-target="#visitorListContainer"
                        hx-swap="innerHTML"
                        class="w-full pl-11 pr-4 py-3
                               border border-slate-300
                               rounded-lg
                               text-slate-900
                               placeholder-slate-400
                               focus:outline-none
                               focus:ring-2
                               focus:ring-blue-500
                               focus:border-blue-500"
                    >

                </div>

            </div>


            <!-- ==================== VISITOR LIST ==================== -->
            <div
                class="bg-white rounded-xl
                       border border-slate-200
                       shadow-sm overflow-hidden"
            >


                <!-- List Header -->
                <div
                    class="px-6 py-5
                           border-b border-slate-200
                           flex items-center justify-between"
                >

                    <div>

                        <h3 class="text-lg font-semibold text-slate-900">
                            Visitor Records
                        </h3>

                        <p class="text-sm text-slate-500 mt-1">
                            Visitors are ordered by their latest visit.
                        </p>

                    </div>


                    <span
                        
                        class="text-sm text-slate-500"
                    >
                         {{ $visitors->total() }} visitors
                    </span>

                </div>


                
                <div id="visitorListContainer">

                @include('partials.visitor_list_search')

                </div>
                <!-- No Results Message -->
                

            </div>

        </main>

    </div>

</div>




 @endsection