<?php include 'header.php'; ?>

<!-- Tom Select CSS -->
<style>

    /* Wrapper */

    .ts-wrapper {

        width: 100%;

    }

    /* Main Control */

    .ts-wrapper.single .ts-control {

        height: 56px !important;
        min-height: 56px !important;

        border-radius: 16px !important;

        border: 1px solid #cbd5e1 !important;

        background: #ffffff !important;

        padding: 0 18px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        box-shadow: none !important;

        transition: all 0.2s ease;

    }

    /* Focus */

    .ts-wrapper.single.focus .ts-control {

        border-color: #8b5cf6 !important;

        box-shadow: 0 0 0 3px rgba(139,92,246,0.12) !important;

    }

    /* Input */

    .ts-wrapper.single .ts-control input {

        font-size: 14px !important;

        color: #334155 !important;

        background: transparent !important;

    }

    /* Placeholder */

    .ts-control .item {

        color: #94a3b8 !important;

        font-size: 14px !important;

    }

    /* Dropdown */

    .ts-dropdown {

        margin-top: 8px !important;

        border-radius: 18px !important;

        overflow: hidden !important;

        border: 1px solid #e2e8f0 !important;

        background: #fff !important;

        box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;

    }

    /* Search Box Area */

    .ts-dropdown .dropdown-input-wrap {

        padding: 12px !important;

        background: #f3e8ff !important;

    }

    /* Search Input */

    .ts-dropdown .dropdown-input {

        width: 100% !important;

        height: 42px !important;

        border-radius: 12px !important;

        border: 1px solid #d8b4fe !important;

        padding: 0 14px !important;

        font-size: 14px !important;

        outline: none !important;

    }

    /* Options */

    .ts-dropdown .option {

        padding: 14px 18px !important;

        font-size: 14px !important;

        color: #334155 !important;

        transition: 0.2s;

    }

    .ts-dropdown .option:hover {

        background: #f5f3ff !important;

        color: #7c3aed !important;

    }

    .ts-dropdown .active {

        background: #ede9fe !important;

        color: #7c3aed !important;

    }

    /* Arrow */

    .ts-wrapper.single .ts-control:after {

        right: 18px !important;

        border-width: 5px 5px 0 5px !important;

        border-color: #7c3aed transparent transparent transparent !important;

    }

</style>

<div class="px-0 py-3 md:p-4 lg:p-6 bg-gray-100 min-h-screen">

    <!-- Header -->
    <div class="flex items-center justify-between mb-6">

        <div>

            <h1 class="text-3xl font-bold text-slate-900">
                Add Unit
            </h1>

        </div>

        <!-- Back Button -->
        <a href="lockora_units.php"
            class="h-11 px-5 rounded-xl bg-white border border-slate-200 shadow-sm hover:shadow-md transition flex items-center gap-2 text-sm font-medium text-slate-700">

            <i class="ri-arrow-left-line"></i>
            Back

        </a>

    </div>

    <!-- Main Card -->
    <div class="bg-white rounded-[28px] shadow-lg border border-slate-200 p-6 md:p-10">

        <!-- Card Title -->
        <div class="mb-10">

            <h2 class="text-4xl font-bold text-slate-900">
                Unit Details
            </h2>

        </div>

        <!-- Form -->
        <form action="" method="POST">

            <!-- Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                <!-- Unit Name -->
                <div>

                    <input type="text"
                        placeholder="Unit Name"
                        class="w-full h-14 rounded-2xl border border-slate-300 bg-white px-5 text-sm text-slate-700 placeholder:text-slate-400 outline-none focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition">

                </div>

                <!-- Type -->
                <div>

                    <select id="type">

                        <option value="">
                            Select Type
                        </option>

                        <option value="Service">
                            Service
                        </option>

                        <option value="Product">
                            Product
                        </option>

                        <option value="Subscription">
                            Subscription
                        </option>

                    </select>

                </div>

            </div>

            <!-- Description -->
            <div class="mt-5">

                <textarea rows="5"
                    placeholder="Description"
                    class="w-full rounded-2xl border border-slate-300 bg-white px-5 py-4 text-sm text-slate-700 placeholder:text-slate-400 outline-none resize-none focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition"></textarea>

            </div>

            <!-- Divider -->
            <div class="border-t border-slate-200 my-8"></div>

            <!-- Save Button -->
            <div class="flex justify-end">

                <button type="submit"
                    class="h-12 px-8 rounded-2xl bg-gradient-to-r from-violet-500 to-purple-600 hover:from-violet-600 hover:to-purple-700 text-white text-sm font-semibold shadow-lg hover:shadow-violet-300 transition-all duration-300 flex items-center gap-2">

                    Save

                    <i class="ri-check-line"></i>

                </button>

            </div>

        </form>

    </div>

</div>

<!-- Tom Select -->
<script>

    const type = new TomSelect("#type", {

        create: false,

        maxOptions: 10,

        placeholder: "Select Type",

        openOnFocus: true,

        dropdownParent: "body"

    });

    type.on("dropdown_open", function () {

        const controlRect = type.control.getBoundingClientRect();

        type.dropdown.style.position = "absolute";

        type.dropdown.style.width =
            controlRect.width + "px";

        type.dropdown.style.top =
            (controlRect.bottom + window.scrollY + 8) + "px";

        type.dropdown.style.left =
            (controlRect.left + window.scrollX) + "px";

        type.dropdown.style.zIndex = "99999";

    });

</script>

<?php include 'footer.php'; ?>