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

<style>
.ts-wrapper.single .ts-control {
    min-height: 50px !important;
    border: 1px solid rgb(203 213 225);
    border-radius: 15px !important;
    padding: 0 16px !important;
    box-shadow: none;
    background: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
}

.ts-wrapper.focus .ts-control {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .2) !important;
}

.ts-control input {
    font-size: 16px !important;
}

.ts-dropdown {
    border-radius: 12px;
    border: 1px solid rgb(203 213 225);
    overflow: hidden;
}

.ts-dropdown .option {
    padding: 12px 16px;
}

.ts-dropdown-content {
    max-height: 125px !important;
}

.ts-dropdown .active {
    background: #eef2ff;
    color: #4338ca;
}
</style>

<div class="p-4 md:p-6">
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6">
        <div>
            <h1 class="text-3xl font-bold text-slate-900">Add Warranty Registration</h1>
        </div>
        <a href="lockora_warranty_registration.php"
            class="self-start inline-flex items-center gap-2 bg-white px-3 py-2 rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all duration-300">
            <i class="ri-arrow-left-line"></i> Back
        </a>
    </div>

    <div class="bg-white rounded-2xl shadow-md p-4 sm:p-6 md:p-8">
        <h2 class="text-2xl font-bold text-slate-900 mb-6">Warranty Registration Details</h2>

        <form id="dealerForm" method="POST" enctype="multipart/form-data" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
            
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">
                    Mobile Number <span class="text-red-500">*</span>
                </label>

                <input type="tel" name="mobile" maxlength="10" pattern="[0-9]{10}" placeholder="Enter mobile number"
                    oninput="this.value=this.value.replace(/[^0-9]/g,'').slice(0,10)"
                    class="w-full px-4 py-3 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">
                   Customer Name 
                </label>

            <input type="text"
                   name="full_name"
                   placeholder="Customer Name"
                   readonly
                   class="w-full px-4 py-3 rounded-xl border border-slate-300 bg-slate-100 text-slate-600 cursor-not-allowed">
       
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">
                    Order No 
                </label>
            
<select id="orderNo" name="order_no">
    <option value="">Search Order No...</option>
</select>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">
                    Serial Number
                </label>
            
<select id="serialNumber" name="serial_number">
    <option value="">Search Serial Number...</option>
</select>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">
                    Product Model 
                </label>

<select id="productModel" name="product_model">
    <option value="">Search model...</option>
</select>
            </div>

            <div class="w-full">
                <label class="mb-1 block text-sm font-medium text-slate-700">
                    Customer Type
                </label>

                <div class="relative">
<select id="customerTypeSelect">
    <option value="">Select Customer Type</option>
</select>
                </div>
            </div>

            <!-- Purchase Date -->
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">
                    Purchase Date
                </label>

               <input type="date"
                   name="purchase_date"
                   readonly
                   class="w-full px-4 py-3 rounded-xl border border-slate-300 bg-slate-100 text-slate-600 cursor-not-allowed">
            </div>

            <!-- Invoice Number -->
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">
                    Invoice Number <span class="text-[10px]">(not compulsory)</span>
                </label>

               <input type="text"
                       name="invoice_number"
                       placeholder="Invoice Number"
                       readonly
                       class="w-full px-4 py-3 rounded-xl border border-slate-300 bg-slate-100 text-slate-600 cursor-not-allowed">
            </div>


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

              <input type="email"
                       name="email"
                       placeholder="Email Address"
                       readonly
                       class="w-full px-4 py-3 rounded-xl border border-slate-300 bg-slate-100 text-slate-600 cursor-not-allowed">
            </div>

            <!-- Installation Date -->
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">
                    Installation Date 
                </label>

                <input type="date"
                       name="installation_date"
                       readonly
                       class="w-full px-4 py-3 rounded-xl border border-slate-300 bg-slate-100 text-slate-600 cursor-not-allowed">
                       
            </div>

            <!-- Installer Name -->
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-2">
                    Installer Name 
                </label>

               <input type="text"
                       name="installer_name"
                       placeholder="Installer Name"
                       readonly
                       class="w-full px-4 py-3 rounded-xl border border-slate-300 bg-slate-100 text-slate-600 cursor-not-allowed">
            </div>

            <!--<div class="col-span-full flex justify-end">-->
            <!--    <button type="submit"-->
            <!--        class="px-5 py-2.5 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-md hover:from-blue-600 hover:to-indigo-700 transition">-->
            <!--        Save-->
            <!--    </button>-->
            <!--</div>-->

        </form>
         <div class="rounded-lg border border-gray-200 shadow-sm mt-5 overflow-hidden">

            <!-- Table -->
            <div>

                <table class="w-full min-w-[1200px] whitespace-nowrap">

                    <!-- Table Head -->
                    <thead class="bg-gray-50 border-b border-gray-200">

                        <tr class="text-left">

                            <th
                                class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                Sr.no
                            </th>


                            <th
                                class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                Order ID
                            </th>

                            <th
                                class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                Product
                            </th>

                            <th
                                class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                Order Type
                            </th>

                            <th
                                class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                Amount
                            </th>

                            <th
                                class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                Payment Status
                            </th>

                            <th
                                class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                Order Status
                            </th>

                            <th
                                class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
                                Action
                            </th>

                        </tr>

                    </thead>

                    <tbody class="divide-y divide-gray-100 bg-white">

                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-6 py-4 font-semibold text-black-600 whitespace-nowrap">1</td>
                            <td class="px-6 py-4">
                                <div class="font-semibold text-gray-800">
                                    ORD-1000
                                </div>
                                <div class="text-xs text-gray-500 mt-1">
                                    07-06-2026
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm font-semibold text-indigo-600">LockOra L1 Core</div>
                                <div class="text-xs font-semibold text-sky-700 mt-1">Serial No: LO-001</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span
                                    class="px-3 py-1 rounded-full bg-blue-100 text-blue-700 text-xs font-medium">Dealer</span>
                            </td>
                            <td class="px-6 py-4 font-semibold text-green-600 whitespace-nowrap">₹10,999</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span
                                    class="px-3 py-1 rounded-full bg-yellow-100 text-yellow-700 text-xs font-medium">Pending</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span
                                    class="px-3 py-1 rounded-full bg-red-100 text-red-700 text-xs font-medium">Pending</span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex justify-center gap-2">
                                    <!--<button onclick="openOrderModal()"-->
                                    <!--    class="w-9 h-9 rounded-lg bg-yellow-50 text-yellow-600 flex items-center justify-center hover:shadow-sm">-->
                                    <!--    <i class="ri-file-list-3-line"></i>-->
                                    <!--</button>-->
                                    
                                    <!--<a href="view_lockora_order.php"-->
                                    <!--    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 flex items-center justify-center">-->
                                    <!--    <i class="ri-eye-line"></i>-->
                                    <!--</a>-->

                                    <a href="#"
                                        class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
                                        <i class="ri-pencil-line"></i>
                                    </a>

                                    <button onclick="deleteRow(this)"
                                        class="w-9 h-9 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition flex items-center justify-center">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>

                                </div>
                            </td>
                        </tr>

                    </tbody>

                </table>

            </div>

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

                <!-- Left -->
                <p class="text-sm text-gray-500">
                    Showing 1 to 4 of 62 tasks
                </p>

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

                    <button
                        class="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 transition">
                        <i class="ri-arrow-left-s-line"></i>
                    </button>

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

                    <button
                        class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">
                        2
                    </button>

                    <button
                        class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">
                        3
                    </button>

                    <button
                        class="w-9 h-9 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-100 transition">
                        4
                    </button>

                    <button
                        class="w-9 h-9 rounded-lg border border-gray-200 text-gray-500 hover:bg-gray-100 transition">
                        <i class="ri-arrow-right-s-line"></i>
                    </button>

                </div>

            </div>

        </div>
    </div>
</div>

<script>
    function deleteRow(button) {

        Swal.fire({

            title: "Delete Record?",
            text: "This row will be deleted.",
            icon: "warning",

            width: "320px",
            padding: "1rem",

            showCancelButton: true,
            scrollbarPadding: false,
            confirmButtonText: "Delete",
            cancelButtonText: "Cancel",

            confirmButtonColor: "#2563eb",
            cancelButtonColor: "#ef4444",

            customClass: {

                popup: "rounded-2xl",
                title: "text-lg font-semibold",
                htmlContainer: "text-sm text-gray-500",
                confirmButton: "px-4 py-2 rounded-lg text-sm",
                cancelButton: "px-4 py-2 rounded-lg text-sm"

            }

        }).then((result) => {

            if (result.isConfirmed) {

                button.closest("tr").remove();

                Swal.fire({

                    icon: "success",
                    title: "Deleted!",
                    text: "Record removed successfully.",

                    width: "300px",
                    padding: "1rem",

                    showConfirmButton: false,
                    timer: 1400

                });

            }

        });

    }

</script>

<script>
document.getElementById("dealerForm").addEventListener("submit", function(e) {
    e.preventDefault();

    const productModel = document.querySelector('[name="product_model"]').value.trim();
    const serialNumber = document.querySelector('[name="serial_number"]').value.trim();
    const purchaseDate = document.querySelector('[name="purchase_date"]').value;
    const invoiceNumber = document.querySelector('[name="invoice_number"]').value.trim();
    const fullName = document.querySelector('[name="full_name"]').value.trim();
    const mobile = document.querySelector('[name="mobile"]').value.trim();
    const email = document.querySelector('[name="email"]').value.trim();
    const installationDate = document.querySelector('[name="installation_date"]').value;
    const installerName = document.querySelector('[name="installer_name"]').value.trim();

if (!mobile && !orderTS.getValue() && !serialTS.getValue()) {
    return Swal.fire({
        icon: "warning",
        title: "Customer Required",
        text: "Enter Mobile Number or select Order No / Serial No.",
        width: "350px",
        padding: "1rem"
    });
}

if (mobile && !/^\d{10}$/.test(mobile)) {
    return Swal.fire({
        icon: "error",
        title: "Invalid Mobile Number",
        text: "Mobile number must be exactly 10 digits.",
        width: "350px",
        padding: "1rem"
    });
}
    Swal.fire({
        icon: "success",
        title: "Success!",
        text: "Warranty registration saved successfully.",
        confirmButtonColor: "#4F46E5",
        width: '350px',
        padding: '1rem'
    }).then(() => {
        this.submit();
    });
});
</script>

<script>
    const warrantyData = [
{
    mobile: "9876543210",
    customer_name: "Dev Mistry",
    order_no: "ORD-1002",
    serial_no: "SN100002",
    product_model: "Lockora Elite (L2+)",
    customer_type: "Dealer Customer",
    purchase_date: "2026-06-18",
    invoice_number: "INV-1002",
    email: "rahul@gmail.com",
    installation_date: "2026-06-20",
    installer_name: "Mahesh"
},
{
    mobile: "",
    customer_name: "Dev Patel",
    order_no: "ORD-1003",
    serial_no: "SN100003",
    product_model: "Lockora Pro Max (L3 Pro)",
    customer_type: "Dealer Customer",
    purchase_date: "2026-06-25",
    invoice_number: "INV-1003",
    email: "rahul@gmail.com",
    installation_date: "2026-06-28",
    installer_name: "Mahesh"
}
];

// ========= INPUT FIELDS =========
const mobileInput = document.querySelector('[name="mobile"]');
const fullName = document.querySelector('[name="full_name"]');
const purchaseDate = document.querySelector('[name="purchase_date"]');
const invoiceNumber = document.querySelector('[name="invoice_number"]');
const email = document.querySelector('[name="email"]');
const installationDate = document.querySelector('[name="installation_date"]');
const installerName = document.querySelector('[name="installer_name"]');

// ========= TOMSELECT OBJECTS =========
const orderTS = new TomSelect("#orderNo", {
    create: false,
    placeholder: "Search Order No...",
    openOnFocus: true
});

const serialTS = new TomSelect("#serialNumber", {
    create: false,
    placeholder: "Search Serial Number...",
    openOnFocus: true
});

const productTS = new TomSelect("#productModel", {
    create: false,
    placeholder: "Search model...",
    openOnFocus: true
});

const customerTypeTS = new TomSelect("#customerTypeSelect", {
    create: false,
    placeholder: "Search Customer Type...",
    openOnFocus: true
});

// ================================
// MOBILE SEARCH
// ================================
mobileInput.addEventListener("keyup", function () {

    if (this.value.length != 10) return;

    const records = warrantyData.filter(x => x.mobile === this.value);

    clearForm();

    orderTS.clearOptions();
    serialTS.clearOptions();
    productTS.clearOptions();

    records.forEach(item => {

        orderTS.addOption({
            value: item.order_no,
            text: item.order_no
        });

        serialTS.addOption({
            value: item.serial_no,
            text: item.serial_no
        });

        productTS.addOption({
            value: item.product_model,
            text: item.product_model
        });

    });

    if(records.length > 0){

        orderTS.setValue(records[0].order_no,true);

        fillCustomerData(records[0]);

    }

    orderTS.refreshOptions(false);
    serialTS.refreshOptions(false);
    productTS.refreshOptions(false);

});

function clearForm(){

    fullName.value="";
    purchaseDate.value="";
    invoiceNumber.value="";
    email.value="";
    installationDate.value="";
    installerName.value="";

    orderTS.clear();
    serialTS.clear();
    productTS.clear();
    customerTypeTS.clear();

}

function fillCustomerData(data){

    fullName.value = data.customer_name;
    purchaseDate.value = data.purchase_date;
    invoiceNumber.value = data.invoice_number;
    email.value = data.email;
    installationDate.value = data.installation_date;
    installerName.value = data.installer_name;

    productTS.setValue(data.product_model, true);
    customerTypeTS.setValue(data.customer_type, true);

    orderTS.setValue(data.order_no, true);
    serialTS.setValue(data.serial_no, true);

}
// ================================
// ORDER CHANGE
// ================================
orderTS.on("change", function (value) {

    if (!value) return;

    const record = warrantyData.find(item => item.order_no === value);

    if (!record) return;

    fillCustomerData(record);

    serialTS.setValue(record.serial_no, true);
    productTS.setValue(record.product_model, true);

});

// ================================
// SERIAL CHANGE
// ================================
serialTS.on("change", function (value) {

    if (!value) return;

    const record = warrantyData.find(item => item.serial_no === value);

    if (!record) return;

    fillCustomerData(record);

    orderTS.setValue(record.order_no, true);
    productTS.setValue(record.product_model, true);

});

// ================================
// PRODUCT CHANGE
// ================================
productTS.on("change", function (value) {

    if (!value) return;

    const record = warrantyData.find(item => item.product_model === value);

    if (!record) return;

    fillCustomerData(record);

    orderTS.setValue(record.order_no, true);
    serialTS.setValue(record.serial_no, true);

});

// ===============================
// LOAD ORDER & SERIAL
// ===============================

loadDropdowns();

function loadDropdowns(){

    orderTS.clearOptions();
    serialTS.clearOptions();
    productTS.clearOptions();
    customerTypeTS.clearOptions();

    const orderSet = new Set();
    const serialSet = new Set();
    const productSet = new Set();
    const typeSet = new Set();

    warrantyData.forEach(item=>{

        if(!orderSet.has(item.order_no)){
            orderTS.addOption({
                value:item.order_no,
                text:item.order_no
            });
            orderSet.add(item.order_no);
        }

        if(!serialSet.has(item.serial_no)){
            serialTS.addOption({
                value:item.serial_no,
                text:item.serial_no
            });
            serialSet.add(item.serial_no);
        }

        if(!productSet.has(item.product_model)){
            productTS.addOption({
                value:item.product_model,
                text:item.product_model
            });
            productSet.add(item.product_model);
        }

        if(!typeSet.has(item.customer_type)){
            customerTypeTS.addOption({
                value:item.customer_type,
                text:item.customer_type
            });
            typeSet.add(item.customer_type);
        }

    });

}
</script>

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