@extends('layouts.admin')

@section('content')

<div class="min-h-screen bg-slate-50 p-6">

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

    <div class="mb-8 flex items-center justify-between">

        <div>
            <h1 class="text-2xl font-bold text-slate-900">
                Admin Management
            </h1>

            
        </div>


        <!-- Create Admin -->

        <button
            type="button"
            onclick="openCreateAdminModal()"
            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="h-5 w-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>

            Create Admin

        </button>

    </div>


    <!-- ==================== ADMIN LIST ==================== -->

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

        <div class="border-b border-slate-200 px-6 py-5">

            <h2 class="font-semibold text-slate-900">
                Admin Accounts
            </h2>

            <p class="mt-1 text-sm text-slate-500">
                Admins and their assigned sites.
            </p>

        </div>


        <div id="admin-list" class="divide-y divide-slate-200">

        @foreach ($admins as $admin)

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


            @endforeach
           


            


        </div>

    </div>

</div>



<!-- ====================================================== -->
<!-- CREATE ADMIN MODAL -->
<!-- ====================================================== -->

<div
    id="createAdminModal"
    class="fixed inset-0
           z-50
           hidden
           items-center
           justify-center
           bg-slate-900/50
           px-4"
>

    <div
        class="w-full max-w-lg
               rounded-2xl
               bg-white
               shadow-xl"
    >

        <!-- Modal Header -->

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

            <div>

                <h2 class="text-lg
                           font-semibold
                           text-slate-900">
                    Create Admin
                </h2>

                <p class="mt-1
                          text-sm
                          text-slate-500">
                    Create an admin account and assign a site.
                </p>

            </div>


            <button
                type="button"
                onclick="closeCreateAdminModal()"
                class="rounded-lg
                       p-2
                       text-slate-400
                       hover:bg-slate-100
                       hover:text-slate-600
                       transition"
            >

                <svg
                    class="h-5 w-5"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M6 18L18 6M6 6l12 12"
                    />
                </svg>

            </button>

        </div>


        <!-- Modal Body -->

        <div class="px-6 py-6">

            <div class="space-y-5">


                <!-- Name -->

                <div>

                    <label
                        for="adminName"
                        class="mb-2 block
                               text-sm
                               font-medium
                               text-slate-700"
                    >
                        Full Name
                    </label>

                    <input
                        id="adminName"
                        name="name"
                        type="text"
                        placeholder="Enter admin name"
                        class="w-full
                               rounded-lg
                               border border-slate-300
                               bg-white
                               px-4 py-3
                               text-sm
                               text-slate-900
                               outline-none
                               focus:border-blue-500
                               focus:ring-2
                               focus:ring-blue-200"
                    >

                </div>


                <!-- Email -->

                <div>

                    <label
                        for="adminEmail"
                        class="mb-2 block
                               text-sm
                               font-medium
                               text-slate-700"
                    >
                        Email Address
                    </label>

                    <input
                        id="adminEmail"
                        name="email"
                        type="email"
                        placeholder="Enter email address"
                        class="w-full
                               rounded-lg
                               border border-slate-300
                               bg-white
                               px-4 py-3
                               text-sm
                               text-slate-900
                               outline-none
                               focus:border-blue-500
                               focus:ring-2
                               focus:ring-blue-200"
                    >

                </div>


                <!-- Password -->

                <div>

                    <label
                        for="adminPassword"
                        class="mb-2 block
                               text-sm
                               font-medium
                               text-slate-700"
                    >
                        Password
                    </label>

                    <div class="relative">

                        <input
                            id="adminPassword"
                             name="password"
                            type="password"
                            placeholder="Enter password"
                            class="w-full
                                   rounded-lg
                                   border border-slate-300
                                   bg-white
                                   px-4 py-3
                                   pr-12
                                   text-sm
                                   text-slate-900
                                   outline-none
                                   focus:border-blue-500
                                   focus:ring-2
                                   focus:ring-blue-200"
                        >

                        <button
                            type="button"
                            onclick="toggleAdminPassword()"
                            class="absolute
                                   right-3
                                   top-1/2
                                   -translate-y-1/2
                                   text-slate-400
                                   hover:text-slate-600"
                        >
                            👁
                        </button>

                    </div>

                </div>


                <!-- Assign Site -->

                <div>

                    <label
                        for="adminSite"
                        class="mb-2 block
                               text-sm
                               font-medium
                               text-slate-700"
                    >
                        Assign Site
                    </label>

                    <select
                        id="adminSite"
                        name="site_id"
                        class="w-full
                               rounded-lg
                               border border-slate-300
                               bg-white
                               px-4 py-3
                               text-sm
                               text-slate-700
                               outline-none
                               focus:border-blue-500
                               focus:ring-2
                               focus:ring-blue-200"
                    >

                        <option value="">
                            Select a site
                        </option>

                        @foreach ($sites as $site)

                        <option value="{{ $site->id }}">
                            {{ $site->name }}
                        </option>

                        @endforeach
                    </select>

                </div>

            </div>

        </div>


        <!-- Modal Footer -->

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

            <button
                type="button"
                onclick="closeCreateAdminModal()"
                class="rounded-lg
                       border border-slate-200
                       bg-white
                       px-5 py-2.5
                       text-sm font-medium
                       text-slate-700
                       hover:bg-slate-100
                       transition"
            >
                Cancel
            </button>

            <button
                type="button"
                hx-post="{{ route('manage_admins.store') }}"
                hx-include="#adminName, #adminEmail, #adminPassword, #adminSite"
                hx-target="#admin-list"
                hx-swap="beforeend"
                hx-on::after-request="if(event.detail.successful) closeCreateAdminModal()"
                class="rounded-lg
                       bg-blue-600
                       px-5 py-2.5
                       text-sm font-semibold
                       text-white
                       hover:bg-blue-700
                       transition"
            >
                Create Admin
            </button>

        </div>

    </div>

</div>



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

<script>

    function openCreateAdminModal()
    {
        const modal = document.getElementById('createAdminModal');

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

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


    function closeCreateAdminModal()
    {
        const modal = document.getElementById('createAdminModal');

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

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


    function toggleAdminPassword()
    {
        const input = document.getElementById('adminPassword');

        if (input.type === 'password') {

            input.type = 'text';

        } else {

            input.type = 'password';

        }
    }


    // Close modal when clicking outside

    document
        .getElementById('createAdminModal')
        .addEventListener('click', function(event)
        {
            if (event.target === this) {

                closeCreateAdminModal();

            }
        });


    // Close with Escape

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

            closeCreateAdminModal();

        }
    });

</script>

@endsection