<?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 Installation</h1>
        </div>
        <a href="lockora_installation.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">Installation Details</h2>

        <form id="orderForm" method="POST" class="grid grid-cols-1 md:grid-cols-3 gap-5">
            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">Mobile No <span
                        class="text-red-500">*</span></label>
                <input type="tel" name="contact_number" maxlength="10" placeholder="Enter Mobile No"
                    oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                    class="w-full h-11 px-4 rounded-xl border border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none">
            </div>
            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">Customer Name </label>
                <input type="text" name="party_name" readonly
                    class="w-full h-11 px-4 rounded-xl border border-slate-200 bg-gray-50 cursor-not-allowed">
            </div>
            
            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">
                    Order No
                </label>
            
                <!--<input type="text"-->
                <!--       name="order_no"-->
                <!--       class="w-full h-11 px-4 rounded-xl border border-slate-200 bg-gray-50">-->
                       
                       <select id="orderNo" >
    <option value="">Select Order No</option>
</select>
            </div>

            <!-- Serial Number -->
            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">Serial No </label>
                <!--<input type="text" name="serial_no"-->
                <!--    class="w-full h-11 px-4 rounded-xl border border-slate-200 bg-gray-50">-->
                <select id="serialNo" >
    <option value="">Select Serial No</option>
</select>
            </div>
            
                        <!-- Model -->
            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">Product Model </label>
                <!--<input type="text" name="product"-->
                <!--    class="w-full h-11 px-4 rounded-xl border border-slate-200 bg-gray-50">-->
                <select id="productModel" >
    <option value="">Select Product Model</option>
</select>
            </div>
            


            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">Customer Type </label>
                <input type="text" name="customer_type" readonly
                    class="w-full h-11 px-4 rounded-xl border border-slate-200 bg-gray-50 cursor-not-allowed">
            </div>

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

                <input type="email" name="email" readonly
                    class="w-full h-11 px-4 rounded-xl border border-slate-200 bg-gray-50 cursor-not-allowed focus:outline-none">
            </div>

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

                <input type="text" name="landmark" readonly
                    class="w-full h-11 px-4 rounded-xl border border-slate-200 bg-gray-50 cursor-not-allowed focus:outline-none">
            </div>

            <!-- City -->
            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">City</label>
                <input type="text" name="city" readonly
                    class="w-full h-11 px-4 rounded-xl border border-slate-200 bg-gray-50 cursor-not-allowed focus:outline-none">
            </div>

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

                <input type="text" name="pincode" maxlength="6" readonly
                    class="w-full h-11 px-4 rounded-xl border border-slate-200 bg-gray-50 cursor-not-allowed focus:outline-none">
            </div>

            <!-- Address -->
            <div class="md:col-span-3">
                <label class="block mb-2 text-sm font-medium text-slate-700">
                    Address
                </label>

                <textarea name="address" rows="3" readonly
                    class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-gray-50 cursor-not-allowed focus:outline-none resize-none"></textarea>
            </div>
            
            

            <!--<div class="md:col-span-3 flex justify-end gap-4 mt-6">-->
            <!--    <button type="submit"-->
            <!--        class="px-8 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-md hover:shadow-lg 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>

<!-- Order Details Modal -->
<div id="orderModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50 p-4">

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

        <!-- Header -->
        <div class="flex items-center justify-between px-5 py-4 border-b border-b-gray-200">
            <h3 class="text-lg font-semibold text-gray-800">
                Order Details
            </h3>

            <button onclick="closeOrderModal()">
                <i class="ri-close-line text-2xl"></i>
            </button>
        </div>

        <!-- Body -->
        <div class="p-5 space-y-4">
            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">
                    Installation Date
                </label>
                <input type="date" name="installation_date"
                    class="w-full h-11 px-4 rounded-xl border border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none">
            </div>

            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">
                    Installation Time
                </label>
                <input type="time" name="installation_time"
                    class="w-full h-11 px-4 rounded-xl border border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none">
            </div>

            <div class="md:col-span-3">
                <label class="block mb-2 text-sm font-medium text-slate-700">
                    Additional Notes
                </label>
                <textarea name="additional_notes" rows="4" placeholder="Enter Additional Notes"
                    class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none resize-none"></textarea>
            </div>

        </div>

        <!-- Footer -->
        <div class="px-5 py-4 border-t border-t-gray-200 flex justify-end gap-3">

            <button class="px-5 h-10 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 text-white">
                Select Order
            </button>

        </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>

    const orderTS = new TomSelect("#orderNo", {
    create: false,
    placeholder: "Search Order No"
});

const serialTS = new TomSelect("#serialNo", {
    create: false,
    placeholder: "Search Serial No"
});

const modelTS = new TomSelect("#productModel", {
    create: false,
    placeholder: "Search Product Model"
});
</script>

<script>
let customerData = [
{
mobile:"9876543210",
order_no:"ORD1001",
serial_no:"LO001",
product_model:"Lockora L1 Core",
name:"Rahul Patel",
customer_type:"Dealer",
email:"rahul@gmail.com",
landmark:"Iskon",
city:"Ahmedabad",
pincode:"380015",
address:"Satellite Ahmedabad"
},
{
mobile:"",
order_no:"ORD1002",
serial_no:"LO002",
product_model:"Lockora L2 Elite",
name:"Dev Patel",
customer_type:"Dealer",
email:"rahul@gmail.com",
landmark:"Iskon",
city:"Ahmedabad",
pincode:"380015",
address:"Satellite Ahmedabad"
},
{
mobile:"",
order_no:"ORD2001",
serial_no:"LO101",
product_model:"Lockora L3 Pro",
name:"Amit Shah",
customer_type:"Customer",
email:"amit@gmail.com",
landmark:"CG Road",
city:"Ahmedabad",
pincode:"380009",
address:"Navrangpura"
}
];

    document.querySelector("[name='contact_number']").addEventListener("keyup",function(){

let mobile=this.value;

if(mobile.length!=10)
    return;

let data=customerData.filter(x=>x.mobile==mobile);

orderTS.clear();
orderTS.clearOptions();

serialTS.clear();
serialTS.clearOptions();

modelTS.clear();
modelTS.clearOptions();

orderTS.addOption({value:"",text:"Search Order No"});
serialTS.addOption({value:"",text:"Search Serial No"});
modelTS.addOption({value:"",text:"Search Product Model"});

data.forEach(item=>{

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

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

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

});
if(data.length > 0){

    orderTS.setValue(data[0].order_no);

    fillCustomer(data[0]);

}

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

});

function fillCustomer(item){

document.querySelector("[name='party_name']").value=item.name;
document.querySelector("[name='customer_type']").value=item.customer_type;
document.querySelector("[name='email']").value=item.email;
document.querySelector("[name='landmark']").value=item.landmark;
document.querySelector("[name='city']").value=item.city;
document.querySelector("[name='pincode']").value=item.pincode;
document.querySelector("[name='address']").value=item.address;

}

orderTS.on("change",function(value){

let item=customerData.find(x=>x.order_no==value);

if(item){

serialTS.setValue(item.serial_no,true);
modelTS.setValue(item.product_model,true);

fillCustomer(item);

}

});

serialTS.on("change",function(value){

let item=customerData.find(x=>x.serial_no==value);

if(item){

orderTS.setValue(item.order_no,true);
modelTS.setValue(item.product_model,true);

fillCustomer(item);

}

});

modelTS.on("change",function(value){

let item=customerData.find(x=>x.product_model==value);

if(item){

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

fillCustomer(item);

}

});

orderTS.on("change", function(value){

    let item = customerData.find(x => x.order_no === value);

    if(!item) return;

    document.querySelector("[name='contact_number']").value = item.mobile;

    serialTS.setValue(item.serial_no, true);
    modelTS.setValue(item.product_model, true);

    fillCustomer(item);

});

serialTS.on("change", function(value){

    let item = customerData.find(x => x.serial_no === value);

    if(!item) return;

    document.querySelector("[name='contact_number']").value = item.mobile;

    orderTS.setValue(item.order_no, true);
    modelTS.setValue(item.product_model, true);

    fillCustomer(item);

});

customerData.forEach(item => {

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

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

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

});

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

// orderTS.refreshOptions(false);
// serialTS.refreshOptions(false);
</script>

<script>
function openOrderModal() {

    document.getElementById("orderModal").classList.remove("hidden");
    document.getElementById("orderModal").classList.add("flex");

    document.body.style.overflow = "hidden";

}

function closeOrderModal() {

    document.getElementById("orderModal").classList.add("hidden");
    document.getElementById("orderModal").classList.remove("flex");

    document.body.style.overflow = "";

}

window.addEventListener("click", function(e) {

    const modal = document.getElementById("orderModal");

    if (e.target === modal) {
        closeOrderModal();
    }

});
</script>

<script>
function showAlert(message) {
    Swal.fire({
        icon: 'warning',
        title: 'Validation',
        text: message,
        width: '350px',
        padding: '1rem',
        confirmButtonText: 'OK',
        buttonsStyling: false,
        customClass: {
            popup: '!rounded-xl !p-3',
            icon: '!scale-75',
            title: '!text-md !font-semibold',
            htmlContainer: '!text-md',
            confirmButton: '!bg-blue-600 !text-white !px-6 !py-3 !rounded-lg !text-xs hover:!bg-blue-700'
        }
    });
}
document.getElementById('orderForm').addEventListener('submit', function(e) {

    const contactNumber = document.querySelector('input[name="contact_number"]').value.trim();

    if (contactNumber === '') {
        e.preventDefault();
        showAlert('Please enter Mobile Number');
        return;
    }

    if (contactNumber.length !== 10) {
        e.preventDefault();
        showAlert('Please enter valid 10 digit Mobile Number');
        return;
    }

});
</script>

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