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

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

    <!-- Header -->
    <div class="max-w-7xl mx-auto mb-6">

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

            <div>

                <h1 class="text-3xl font-bold tracking-tight text-slate-800">
                   Add Business Type
                </h1>

            </div>

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

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

                Back

            </a>

        </div>

    </div>

    <!-- Main Grid -->
    <div class="max-w-7xl mx-auto grid grid-cols-1 xl:grid-cols-12 gap-6 items-start">

        <!-- Left Form -->
        <div class="xl:col-span-4">

            <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden sticky top-5">

                <!-- Card Header -->
                <div class="px-6 py-5 border-b border-slate-100">

                    <h2 class="text-lg font-semibold text-slate-800">
                        Add Business Type
                    </h2>

                </div>

                <!-- Form -->
                <form id="countryForm" class="p-6 space-y-5">

                    <!-- Country -->
                    <div>

                        <label class="block text-sm font-medium text-slate-600 mb-2">
                            Business type
                        </label>

                        <div class="relative">

                            <i class="ri-earth-line absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>

                            <input
                                type="text"
                                id="country"
                                placeholder="Enter Business Type"
                                class="w-full h-11 rounded-2xl border border-slate-200 bg-slate-50 focus:bg-white focus:border-indigo-500 pl-11 pr-4 text-sm outline-none transition-all">

                        </div>

                    </div>

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

                        <button
                            type="submit"
                            class="inline-flex items-center gap-2 h-10 px-5 rounded-xl bg-gradient-to-r from-indigo-600 to-blue-500 hover:opacity-95 text-white text-sm font-medium shadow-lg shadow-indigo-100 transition-all">

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

                            Save

                        </button>

                    </div>

                </form>

            </div>

        </div>

        <!-- Right Table -->
        <div class="xl:col-span-8">

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

                <!-- Header -->
                <div class="px-6 py-5 border-b border-slate-100">

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

                        <div>

                            <h2 class="text-lg font-semibold text-slate-800">
                               Business Type List
                            </h2>

                        </div>

                    </div>

                </div>

                <!-- Table -->
                <div class="overflow-x-auto">

                    <table class="w-full min-w-[650px]">

                        <thead class="bg-slate-50">

                            <tr>

                                <th class="px-6 py-4 text-left text-xs font-semibold uppercase text-slate-500">
                                    Sr.no
                                </th>

                                <th class="px-6 py-4 text-left text-xs font-semibold uppercase text-slate-500">
                                   Business Type
                                </th>

                                <th class="px-6 py-4 text-center text-xs font-semibold uppercase text-slate-500">
                                    Action
                                </th>

                            </tr>

                        </thead>

                        <tbody class="divide-y divide-slate-100">

                            <tr class="hover:bg-slate-50 transition">

                                <td class="px-6 py-4 text-sm font-medium text-slate-700">
                                    01
                                </td>
                            
                                <td class="px-6 py-4 text-sm text-slate-600">
                                    IT Services
                                </td>
                            
                                <td class="px-6 py-4">
                            
                                    <div class="flex items-center justify-center gap-2">
                            
                                        <!-- Edit -->
                                        <button
                                            class="w-10 h-10 rounded-xl bg-blue-50 text-blue-600 hover:bg-blue-100 transition flex items-center justify-center">
                            
                                            <i class="ri-edit-line"></i>
                            
                                        </button>
                            
                                        <!-- Delete -->
                                        <button onclick="deleteRow(this)"
                                            class="w-10 h-10 rounded-xl bg-red-50 text-red-600 hover:bg-red-100 transition flex items-center justify-center">
                            
                                            <i class="ri-delete-bin-6-line"></i>
                            
                                        </button>
                            
                                    </div>
                            
                                </td>
                            
                            </tr>

                        </tbody>

                    </table>

                </div>

                <!-- Footer -->
                <div class="px-6 py-4 border-t border-slate-100 flex flex-col md:flex-row md:items-center md:justify-between gap-4">

                    <p class="text-sm text-slate-500">
                        Showing 1 to 10 of 24 entries
                    </p>

                    <!-- Pagination -->
                    <div class="flex items-center gap-2">

                        <button
                            class="w-9 h-9 rounded-xl border border-slate-200 hover:bg-slate-50 flex items-center justify-center text-slate-500">

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

                        </button>

                        <button
                            class="w-9 h-9 rounded-xl bg-gradient-to-r from-indigo-600 to-blue-500 text-white text-sm font-medium">
                            1
                        </button>

                        <button
                            class="w-9 h-9 rounded-xl border border-slate-200 hover:bg-slate-50 text-sm">
                            2
                        </button>

                        <button
                            class="w-9 h-9 rounded-xl border border-slate-200 hover:bg-slate-50 flex items-center justify-center text-slate-500">

                            <i class="ri-arrow-right-s-line"></i>

                        </button>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>
<script>

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

        create: false,
        maxOptions: 10,
        placeholder: "Search State...",

        openOnFocus: false,
        dropdownParent: "body",

        closeAfterSelect: true,

        onType: function(str) {

            if (str.trim().length > 0) {

                this.open();

            } else {

                this.close();

            }

        },

        onItemAdd: function() {

            this.control_input.value = "";

            this.control_input.setAttribute(
                "readonly",
                "readonly"
            );

            this.blur();
            this.close();

        },

        onDropdownOpen: function() {

            this.control_input.removeAttribute(
                "readonly"
            );

        }

    });


    /* CONTROL STYLE */
    stateSelect.control.classList.add(
        "flex",
        "items-center",
        "h-10",
        "w-full",
        "rounded-xl",
        "border",
        "border-gray-200",
        "bg-white",
        "px-3",
        "text-[13px]",
        "text-gray-700"
    );


    /* DROPDOWN STYLE */
    stateSelect.dropdown.classList.add(
        "z-[99999]",
        "overflow-hidden",
        "rounded-xl",
        "border",
        "border-gray-200",
        "bg-white",
        "shadow-xl"
    );


    /* INPUT STYLE */
    stateSelect.control_input.classList.add(
        "w-full",
        "bg-transparent",
        "text-[13px]",
        "text-gray-700",
        "placeholder:text-gray-400",
        "focus:outline-none"
    );


    /* DROPDOWN POSITION FIX */
    stateSelect.on("dropdown_open", function() {

        const controlRect =
            stateSelect.control.getBoundingClientRect();

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

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

        stateSelect.dropdown.style.top =
            (controlRect.bottom + window.scrollY + 5) + "px";

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

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

    });

</script>

<script>

    function deleteRow(button) {

        Swal.fire({

            title: 'Delete ?',
            text: "This record will be deleted permanently.",
            icon: 'warning',

            showCancelButton: true,

            confirmButtonColor: '#ef4444',
            cancelButtonColor: '#64748b',

            confirmButtonText: 'Delete',
            cancelButtonText: 'Cancel',

            width: '320px',
    didOpen: () => {

                document.querySelector('.swal2-popup').style.borderRadius = '10px';

                document.querySelector('.swal2-confirm').style.borderRadius = '8px';

            }

        }).then((result) => {

            if (result.isConfirmed) {

                const row =
                    button.closest('tr');

                row.remove();

                Swal.fire({

                    icon: 'success',
                    title: 'Deleted!',
                    text: 'Lead Source deleted successfully.',

                    timer: 1500,
                    showConfirmButton: false,

                    width: '320px',

    didOpen: () => {

                document.querySelector('.swal2-popup').style.borderRadius = '10px';

                document.querySelector('.swal2-confirm').style.borderRadius = '8px';

            }

                });

            }

        });

    }

</script>

<script>

document.getElementById("countryForm").addEventListener("submit", function(e) {

    e.preventDefault();

    const country = document.getElementById("country");

    // Remove red border
    country.classList.remove(
        "border-red-500",
        "focus:border-red-500"
    );

    // Validation
    if (country.value.trim() === "") {

        country.classList.add(
            "border-red-500",
            "focus:border-red-500"
        );

        country.focus();

        Swal.fire({

            icon: 'warning',
            title: 'Lead Source Required',
            text: 'Please enter lead source',

            width: '320px',

            confirmButtonColor: '#4f46e5',

            didOpen: () => {

                document.querySelector('.swal2-popup').style.borderRadius = '10px';

                document.querySelector('.swal2-confirm').style.borderRadius = '8px';

            }

        });

        return;

    }

    // Success
    Swal.fire({

        icon: 'success',
        title: 'Success!',
        text: 'Country saved successfully.',

        timer: 1500,
        showConfirmButton: false,

        width: '320px',

          didOpen: () => {

                document.querySelector('.swal2-popup').style.borderRadius = '10px';

                document.querySelector('.swal2-confirm').style.borderRadius = '8px';

            }

    });

    // Reset
    this.reset();

});

</script>

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