@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">
                Host Management
            </h1>

        </div>


        <!-- Create Host -->

        <button
            type="button"
            onclick="openCreateHostModal()"
            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 Host

        </button>

    </div>


    <!-- ==================== HOST 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">
                Hosts
            </h2>

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

        </div>


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

            @foreach ($hosts as $host)

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

            @endforeach

        </div>

    </div>

</div>



<!-- ====================================================== -->
<!-- CREATE HOST MODAL -->
<!-- ====================================================== -->

<div
    id="createHostModal"
    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 Host

                </h2>

                <p class="mt-1
                          text-sm
                          text-slate-500">

                    Create a host and assign a site.

                </p>

            </div>


            <button
                type="button"
                onclick="closeCreateHostModal()"
                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="hostName"
                        class="mb-2 block
                               text-sm
                               font-medium
                               text-slate-700"
                    >

                        Full Name

                    </label>

                    <input
                        id="hostName"
                        name="name"
                        type="text"
                        placeholder="Enter host 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>


                <!-- Assign Site -->

                <div>

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

                        Assign Site

                    </label>

                    <select
                        id="hostSite"
                        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="closeCreateHostModal()"
                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_hosts.store') }}"
                hx-include="#hostName, #hostSite"
                hx-target="#host-list"
                hx-swap="beforeend"
                hx-on::after-request="if(event.detail.successful) closeCreateHostModal()"
                class="rounded-lg
                       bg-blue-600
                       px-5 py-2.5
                       text-sm font-semibold
                       text-white
                       hover:bg-blue-700
                       transition"
            >

                Create Host

            </button>

        </div>

    </div>

</div>



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

<script>

    function openCreateHostModal()
    {
        const modal = document.getElementById('createHostModal');

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

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


    function closeCreateHostModal()
    {
        const modal = document.getElementById('createHostModal');

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

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


    // Close modal when clicking outside

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

                closeCreateHostModal();

            }
        });


    // Close with Escape

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

            closeCreateHostModal();

        }
    });

</script>

@endsection