@extends('layouts.admin')

@section('title', 'Manage Sites')

@section('page-title', 'Manage Sites')

@section('content')

    <!-- ==================== PAGE HEADER ==================== -->

    <div class="mb-8">

        <div class="flex flex-col lg:flex-row
                    lg:items-center lg:justify-between gap-5">

            <div>

                <div class="flex items-center gap-3">

                    <div
                        class="w-11 h-11 rounded-xl
                               bg-blue-100 text-blue-600
                               flex items-center justify-center"
                    >
                        <svg
                            class="w-6 h-6"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M17.657 16.657L13.414 21l-4.243-4.343
                                   a8 8 0 1111.314 0z"
                            />
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                            />
                        </svg>
                    </div>

                    <div>

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

                        
                    </div>

                </div>

            </div>


           

        </div>

    </div>



    <!-- ==================== ADD SITE ==================== -->

    <div
        class="bg-white rounded-2xl
               border border-slate-200
               shadow-sm overflow-hidden mb-8"
    >

        <div
            class="px-6 py-5
                   border-b border-slate-200
                   flex items-center gap-3"
        >

            <div
                class="w-10 h-10 rounded-lg
                       bg-emerald-100 text-emerald-600
                       flex items-center justify-center"
            >

                <svg
                    class="w-5 h-5"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M12 4v16m8-8H4"
                    />
                </svg>

            </div>

            <div>

                <h3 class="text-lg font-semibold text-slate-900">
                    Add New Site
                </h3>

                <p class="text-sm text-slate-500">
                    Register a new visitor management location.
                </p>

            </div>

        </div>


        <form  hx-post="{{ route('manage_sites.store') }}"
               hx-target="#site-list"
               hx-swap="beforeend"
               hx-on::after-request="this.reset()"
               > 

            @csrf

            <div class="p-6">

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

                    <!-- Site Name -->

                    <div>

                        <label
                            for="site_name"
                            class="block text-sm font-semibold
                                   text-slate-700 mb-2"
                        >
                            Site Name
                        </label>

                        <input
                            type="text"
                            id="site_name"
                            name="name"
                            placeholder="Example: Taman Mutiara Residence"
                            class="w-full rounded-xl
                                   border border-slate-300
                                   px-4 py-3
                                   bg-slate-50
                                   focus:bg-white
                                   focus:outline-none
                                   focus:ring-2
                                   focus:ring-blue-500
                                   focus:border-blue-500
                                   transition"
                        >

                    </div>


                    <!-- Location -->

                    <div>

                        <label
                            for="location"
                            class="block text-sm font-semibold
                                   text-slate-700 mb-2"
                        >
                            Location
                        </label>

                        <input
                            type="text"
                            id="location"
                            name="address"
                            placeholder="Example: Johor Bahru, Johor"
                            class="w-full rounded-xl
                                   border border-slate-300
                                   px-4 py-3
                                   bg-slate-50
                                   focus:bg-white
                                   focus:outline-none
                                   focus:ring-2
                                   focus:ring-blue-500
                                   focus:border-blue-500
                                   transition"
                        >

                    </div>

                </div>


                <div class="mt-6 flex justify-end">

                    <button
                        type="submit"
                        class="inline-flex items-center gap-2
                               rounded-xl
                               bg-blue-600
                               px-6 py-3
                               font-semibold
                               text-white
                               shadow-sm
                               hover:bg-blue-700
                               hover:shadow-md
                               transition"
                    >

                        <svg
                            class="w-5 h-5"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M12 4v16m8-8H4"
                            />
                        </svg>

                        Add Site

                    </button>

                </div>

            </div>

        </form>

    </div>



    <!-- ==================== SITES ==================== -->

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

        <!-- Section Header -->

        <div
            class="px-6 py-5
                   border-b border-slate-200
                   flex flex-col sm:flex-row
                   sm:items-center
                   sm:justify-between gap-3"
        >

            <div>

                <h3 class="text-lg font-semibold text-slate-900">
                    Registered Sites
                </h3>

                <p class="text-sm text-slate-500 mt-1">
                    Select a QR code to view and download it.
                </p>

            </div>

        </div>



        <!-- ==================== SITE LIST ==================== -->

        <div class="p-4 sm:p-6">

            <div id="site-list" class="space-y-3">


               @foreach ($sites as $site)

              <x-site-row :site="$site" />

               @endforeach

            </div>

        </div>

    </div>



    <!-- ========================================================= -->
    <!-- ==================== QR MODAL =========================== -->
    <!-- ========================================================= -->

    <div
        id="qrModal"
        class="fixed inset-0 z-50 hidden
               items-center justify-center
               bg-slate-900/60 backdrop-blur-sm
               px-4"
    >

        <div
            id="qrModalContent"
            class="w-full max-w-md
                   bg-white rounded-2xl
                   shadow-2xl
                   overflow-hidden
                   transform transition"
        >

            <!-- Modal Header -->

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

                <div>

                    <h3
                        id="qrModalSiteName"
                        class="text-xl font-bold text-slate-900"
                    >
                        Site QR Code
                    </h3>

                    <p
                        id="qrModalSiteLocation"
                        class="text-sm text-slate-500 mt-1"
                    >
                        Location
                    </p>

                </div>


                <button
                    type="button"
                    onclick="closeQrModal()"
                    class="w-9 h-9
                           rounded-lg
                           text-slate-500
                           hover:bg-slate-100
                           hover:text-slate-900
                           transition
                           text-xl"
                    aria-label="Close QR modal"
                >
                    &times;
                </button>

            </div>



            <!-- Modal Body -->

            <div class="p-8 text-center">

               <p
              id="qrModalSiteUrl"
              class="text-xs
               font-medium
               text-slate-400
               mb-5"
               >
               QR URL
               </p>


                <!-- QR Placeholder -->

                <div
               class="mx-auto
               w-64 h-64
               rounded-2xl
               border border-slate-200
               bg-white
                shadow-sm
               flex items-center
                 justify-center
              overflow-hidden"
            >
            <img
            id="qrModalImage"
            src=""
            alt="Site QR Code"
           class="w-56 h-56 object-contain"
             >
          </div>


                <p class="text-sm text-slate-500 mt-5">
                    Visitors can scan this QR code to access
                    the manual registration form for this site.
                </p>

            </div>



            <!-- Modal Footer -->

            <div
                class="px-6 py-5
                       bg-slate-50
                       border-t border-slate-200
                       flex justify-end"
            >

                <button
                    type="button"
                    id="downloadQrButton"
                    class="inline-flex items-center
                           gap-2
                           rounded-xl
                           bg-blue-600
                           px-5 py-3
                           text-sm font-semibold
                           text-white
                           hover:bg-blue-700
                           transition"
                >

                    <svg
                        class="w-5 h-5"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1
                               M12 12V3
                               M8 7l4-4 4 4"
                        />
                    </svg>

                    Download QR Code

                </button>

            </div>

        </div>

    </div>



    <!-- ==================== QR MODAL JAVASCRIPT ==================== -->

    <script>

        const qrModal = document.getElementById('qrModal');

        const qrModalSiteName =
            document.getElementById('qrModalSiteName');

        const qrModalSiteLocation =
            document.getElementById('qrModalSiteLocation');

        const qrModalSiteUrl =
        document.getElementById('qrModalSiteUrl');

        const qrModalImage =
        document.getElementById('qrModalImage');


        const downloadQrButton =
        document.getElementById('downloadQrButton');

        let currentQrImage = '';


        function openQrModal(siteName, location, url, qrImage)

        {

        console.log('QR IMAGE:', qrImage);
        qrModalSiteName.textContent = siteName;

         qrModalSiteLocation.textContent = location;

         qrModalSiteUrl.textContent = url;

         qrModalImage.src =  qrImage;

         currentQrImage = qrImage;

         qrModal.classList.remove('hidden');

         qrModal.classList.add('flex');

         document.body.classList.add('overflow-hidden');


         }
        function closeQrModal()
        {
            qrModal.classList.add('hidden');

            qrModal.classList.remove('flex');

            document.body.classList.remove('overflow-hidden');
        }


        qrModal.addEventListener('click', function(event)
        {
            if (event.target === qrModal) {

                closeQrModal();

            }
        });


        document.addEventListener('keydown', function(event)
        {
            if (event.key === 'Escape') {

                closeQrModal();

            }
        });




        downloadQrButton.addEventListener('click', function()
         {
        if (!currentQrImage) {
        return;
         }

         const link = document.createElement('a');

        link.href = currentQrImage;
        link.download = currentQrImage.split('/').pop();

         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link);
        });

    </script>

@endsection