@extends('layouts.admin')

@section('content')

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

    <!-- Back to Visitors -->
    <div class="mb-6">

        <a
            href="{{ route('visitors.history') }}"
            class="inline-flex items-center gap-2
                   text-sm font-medium text-slate-600
                   hover:text-slate-900 transition"
        >
            ← Back to Visitors
        </a>

    </div>


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

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

        <p class="text-slate-500 mt-2">
            View visitor information and visit history.
        </p>

    </div>


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

        <div class="flex flex-col md:flex-row gap-6">

            <!-- Visitor Photo -->
            <div class="shrink-0">

                <div
                    class="w-32 h-32 rounded-xl
                           bg-slate-100
                           border border-slate-200
                           overflow-hidden"
                >

                    @if ($visitor->photo_path)

                        <button
                        type="button"
                        onclick="openVisitorPhoto()"
                        class="w-full h-full cursor-zoom-in"
                       >
                     <img
                     src="{{ asset('storage/' . $visitor->photo_path) }}"
                     alt="{{ $visitor->name }}"
                     class="w-full h-full object-cover"
                     >
                    </button>
                    @else

                        <div
                            class="w-full h-full
                                   flex items-center justify-center
                                   text-slate-400 text-sm"
                        >
                            No Photo
                        </div>

                    @endif

                </div>

            </div>


            <!-- Visitor Information -->
            <div class="flex-1">

                <h3 class="text-2xl font-bold text-slate-900">
                    {{ $visitor->name }}
                </h3>

                <div class="mt-4 space-y-3">

                    <!-- IC / Passport -->
                    <div>

                        <p class="text-xs font-medium text-slate-400 uppercase">
                            IC / Passport
                        </p>

                        <p class="text-sm text-slate-700 mt-1">
                            {{ $visitor->identity_number }}
                        </p>

                    </div>


                    <!-- Phone -->
                    <div>

                        <p class="text-xs font-medium text-slate-400 uppercase">
                            Phone
                        </p>

                        <p class="text-sm text-slate-700 mt-1">
                            {{ $visitor->phone_number }}
                        </p>

                    </div>


                    <!-- Address -->
                    <div>

                        <p class="text-xs font-medium text-slate-400 uppercase">
                            Address
                        </p>

                        <p class="text-sm text-slate-700 mt-1">
                            {{ $visitor->address }}
                        </p>

                    </div>

                </div>

            </div>

        </div>

    </div>


    <!-- Visit History Header -->
    <div class="mb-4">

        <h3 class="text-xl font-bold text-slate-900">
            Visit History
        </h3>

        <p class="text-sm text-slate-500 mt-1">
            {{ $visits->total() }}
            {{ $visits->total() == 1 ? 'visit' : 'visits' }}
        </p>

    </div>


    <!-- Visit Records -->
    <div class="space-y-4">

        @forelse ($visits as $visit)

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

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

                    <!-- Date -->
                    <div>

                        <p class="text-xs font-medium text-slate-400 uppercase">
                            Date
                        </p>

                        <p class="text-sm font-medium text-slate-900 mt-1">
                            {{ $visit->created_at->format('d F Y') }}
                        </p>

                    </div>


                    <!-- Status -->
                    <div>

                        <p class="text-xs font-medium text-slate-400 uppercase">
                            Status
                        </p>

                        <p class="text-sm text-slate-700 mt-1">
                            {{ ucwords(str_replace('_', ' ', $visit->status)) }}
                        </p>

                    </div>


                    <!-- Purpose -->
                    <div>

                        <p class="text-xs font-medium text-slate-400 uppercase">
                            Purpose
                        </p>

                        <p class="text-sm text-slate-700 mt-1">
                            {{ $visit->purpose }}
                        </p>

                    </div>

                </div>

            </div>

        @empty

            <div
                class="bg-white rounded-xl
                       border border-slate-200
                       shadow-sm p-8 text-center"
            >

                <p class="text-sm text-slate-500">
                    No visit history found.
                </p>

            </div>

        @endforelse

    </div>


    <!-- Pagination -->
    @if ($visits->hasPages())

        <div class="mt-6">

            {{ $visits->links() }}

        </div>

    @endif

</main>

<!-- Visitor Photo Modal -->
<div
    id="visitorPhotoModal"
    class="fixed inset-0 z-50 hidden
           bg-black/80
           items-center justify-center
           p-6"
    onclick="closeVisitorPhoto()"
>
    <div
        class="relative max-w-4xl max-h-[90vh]"
        onclick="event.stopPropagation()"
    >
        <button
            type="button"
            onclick="closeVisitorPhoto()"
            class="absolute -top-4 -right-4
                   w-10 h-10
                   rounded-full
                   bg-white
                   text-slate-700
                   shadow-lg
                   flex items-center justify-center
                   text-xl
                   hover:bg-slate-100"
        >
            ×
        </button>

        <img
            id="visitorPhotoModalImage"
            src=""
            alt="Visitor Photo"
            class="max-w-full max-h-[85vh]
                   rounded-xl
                   shadow-2xl"
        >
    </div>
</div>



<script>
    function openVisitorPhoto() {
        const modal = document.getElementById('visitorPhotoModal');
        const modalImage = document.getElementById('visitorPhotoModalImage');
        const visitorImage = document.querySelector(
            'button[onclick="openVisitorPhoto()"] img'
        );

        modalImage.src = visitorImage.src;

        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    function closeVisitorPhoto() {
        const modal = document.getElementById('visitorPhotoModal');

        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }
</script>




@endsection