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

        <form id="orderForm" method="POST" class="grid grid-cols-1 md:grid-cols-3 gap-5">

            <!-- Product -->
            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">Product <span class="text-red-500">*</span></label>
                <select id="product_select" name="product">
                    <option value="">Search Product</option>
                    <option value="LockOra L1 Core">LockOra L1 Core</option>
                    <option value="LockOra L2+">LockOra L2+</option>
                    <option value="LockOra L3 Pro">LockOra L3 Pro</option>
                    <option value="LockOra L4 Ultra">LockOra L4 Ultra</option>
                </select>
            </div>

            <!-- Serial Number -->
            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">Serial Number <span class="text-red-500">*</span></label>
                <input type="text" name="serial_no" placeholder="Enter Serial Number"
                    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>

            <!-- Order Type -->
            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">Order Type <span class="text-red-500">*</span></label>
                <select id="order_type_select" name="order_type">
                    <option value="">Search Order Type</option>
                    <option value="Dealer">Dealer</option>
                    <option value="Customer">Website Customer</option>
                    <option value="Sales Partner">Sales Partner</option>
                </select>
            </div>

            <!-- Amount -->
            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">Amount <span class="text-red-500">*</span></label>
                <input type="text" name="amount" placeholder="Enter Amount" 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>

            <!-- Customer / Dealer / Partner Name -->
            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">Customer / Dealer / Partner Name <span class="text-red-500">*</span></label>
                <input type="text" name="party_name" placeholder="Enter Name"
                    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>

            <!-- Contact Number -->
            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">Contact Number <span class="text-red-500">*</span></label>
                <input type="tel" name="contact_number" maxlength="10" placeholder="Enter Contact Number" 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>

            <!-- Quantity -->
            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">Quantity <span class="text-red-500">*</span></label>
                <input type="text" name="quantity" placeholder="Enter Quantity" 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>
            
            <!-- Billing Address -->
<div class="md:col-span-3 mt-4">

    <h3 class="text-lg font-semibold text-slate-900 mb-4">
        Billing Address
    </h3>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-5">

        <!-- Landmark -->
        <div>
            <label class="block mb-2 text-sm font-medium text-slate-700">
                Landmark <span class="text-red-500">*</span>
            </label>
            <input type="text"
                id="billing_landmark"
                name="billing_landmark"
                placeholder="Enter Landmark"
                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>

        <!-- City -->
        <div>
            <label class="block mb-2 text-sm font-medium text-slate-700">
                City <span class="text-red-500">*</span>
            </label>
            <input type="text"
                id="billing_city"
                name="billing_city"
                placeholder="Enter City"
                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>

        <!-- State -->
        <div>
            <label class="block mb-2 text-sm font-medium text-slate-700">
                State <span class="text-red-500">*</span>
            </label>
            <input type="text"
                id="billing_state"
                 name="billing_state"
                placeholder="Enter State"
                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>

        <!-- Pincode -->
        <div>
            <label class="block mb-2 text-sm font-medium text-slate-700">
                Pincode <span class="text-red-500">*</span>
            </label>
            <input type="text"
                id="billing_pincode"
                name="billing_pincode"
                maxlength="6"
                oninput="this.value=this.value.replace(/[^0-9]/g,'')"
                placeholder="Enter Pincode"
                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>

        <!-- Full Address -->
        <div class="md:col-span-2">
            <label class="block mb-2 text-sm font-medium text-slate-700">
                Full Address <span class="text-red-500">*</span>
            </label>
            <textarea id="billing_address"
                rows="3"
                placeholder="Enter Full Address"
                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"></textarea>
        </div>

    </div>

</div>

<!-- Same Address Checkbox -->
<div class="md:col-span-3">
    <label class="inline-flex items-center gap-3 cursor-pointer">

        <input type="checkbox"
            id="sameAddress"
            class="w-4 h-4 text-blue-600 rounded border-slate-300">

        <span class="text-sm font-medium text-slate-700">
            Shipping Address Same As Billing Address
        </span>

    </label>
</div>

<!-- Shipping Address -->
<div class="md:col-span-3">

    <h3 class="text-lg font-semibold text-slate-900 mb-4">
        Shipping Address <span class="text-red-500">*</span>
    </h3>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-5">

        <!-- Landmark -->
        <div>
            <label class="block mb-2 text-sm font-medium text-slate-700">
                Landmark 
            </label>
            <input type="text"
                id="shipping_landmark"
                name="shipping_landmark"
                placeholder="Enter Landmark"
                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>

        <!-- City -->
        <div>
            <label class="block mb-2 text-sm font-medium text-slate-700">
                City
            </label>
            <input type="text"
                id="shipping_city"
                name="shipping_city"
                placeholder="Enter City"
                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>

        <!-- State -->
        <div>
            <label class="block mb-2 text-sm font-medium text-slate-700">
                State
            </label>
            <input type="text"
                id="shipping_state"
                name="shipping_state"   
                placeholder="Enter State"
                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>

        <!-- Pincode -->
        <div>
            <label class="block mb-2 text-sm font-medium text-slate-700">
                Pincode
            </label>
            <input type="text"
                id="shipping_pincode"
                name="shipping_pincode"
                maxlength="6"
                placeholder="Enter Pincode"
                  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>

        <!-- Full Address -->
        <div class="md:col-span-2">
            <label class="block mb-2 text-sm font-medium text-slate-700">
                Full Address
            </label>
            <textarea id="shipping_address"
            name="shipping_address"
                rows="3"
                placeholder="Enter Full Address"
                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"></textarea>
        </div>

    </div>

</div>

                       

            <!-- Action Buttons -->
            <div class="md:col-span-3 flex justify-end gap-4 mt-6">

                <a href="lockora_orders.php"
                    class="px-8 py-3 rounded-xl border border-gray-300 text-gray-700 hover:bg-gray-50 transition">
                    Cancel
                </a>

                <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">
                    Create Order
                </button>

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

<script>
document.getElementById("sameAddress").addEventListener("change", function () {

    const checked = this.checked;

    const shippingLandmark = document.getElementById("shipping_landmark");
    const shippingCity = document.getElementById("shipping_city");
    const shippingState = document.getElementById("shipping_state");
    const shippingPincode = document.getElementById("shipping_pincode");
    const shippingAddress = document.getElementById("shipping_address");

    shippingLandmark.value = checked ? document.getElementById("billing_landmark").value : "";
    shippingCity.value = checked ? document.getElementById("billing_city").value : "";
    shippingState.value = checked ? document.getElementById("billing_state").value : "";
    shippingPincode.value = checked ? document.getElementById("billing_pincode").value : "";
    shippingAddress.value = checked ? document.getElementById("billing_address").value : "";

    // Readonly Toggle
    shippingLandmark.readOnly = checked;
    shippingCity.readOnly = checked;
    shippingState.readOnly = checked;
    shippingPincode.readOnly = checked;
    shippingAddress.readOnly = checked;
});
</script>

<script>
new TomSelect("#product_select", {
    create: false,
    maxOptions: 100,
    openOnFocus: true,
    placeholder: "Search Product"
});

new TomSelect("#order_type_select", {
    create: false,
    maxOptions: 100,
    openOnFocus: true,
    placeholder: "Search Order Type"
});

</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 product = document.getElementById('product_select').value;
    const serialNo = document.querySelector('input[name="serial_no"]').value.trim();
    const orderType = document.getElementById('order_type_select').value;
    const amount = document.querySelector('input[name="amount"]').value.trim();
    const partyName = document.querySelector('input[name="party_name"]').value.trim();
    const contactNumber = document.querySelector('input[name="contact_number"]').value.trim();
    const quantity = document.querySelector('input[name="quantity"]').value.trim();
    const billingLandmark = document.getElementById('billing_landmark').value.trim();
    const billingCity = document.getElementById('billing_city').value.trim();
    const billingState = document.getElementById('billing_state').value.trim();
    const billingPincode = document.getElementById('billing_pincode').value.trim();
    const billingAddress = document.getElementById('billing_address').value.trim();
    
    const shippingLandmark = document.getElementById('shipping_landmark').value.trim();
    const shippingCity = document.getElementById('shipping_city').value.trim();
    const shippingState = document.getElementById('shipping_state').value.trim();
    const shippingPincode = document.getElementById('shipping_pincode').value.trim();
    const shippingAddress = document.getElementById('shipping_address').value.trim();



    if (product === '') {
        e.preventDefault();
        showAlert('Please select Product');
        return;
    }

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

    if (orderType === '') {
        e.preventDefault();
        showAlert('Please select Order Type');
        return;
    }

    if (amount === '') {
        e.preventDefault();
        showAlert('Please enter Amount');
        return;
    }

    if (partyName === '') {
        e.preventDefault();
        showAlert('Please enter Customer / Dealer / Partner Name');
        return;
    }

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

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

    if (quantity === '') {
        e.preventDefault();
        showAlert('Please enter Quantity');
        return;
    }

  // Billing Address Validation

if (billingLandmark === '') {
    e.preventDefault();
    showAlert('Please enter Billing Landmark');
    return;
}

if (billingCity === '') {
    e.preventDefault();
    showAlert('Please enter Billing City');
    return;
}

if (billingState === '') {
    e.preventDefault();
    showAlert('Please enter Billing State');
    return;
}

if (billingPincode === '') {
    e.preventDefault();
    showAlert('Please enter Billing Pincode');
    return;
}

if (billingPincode.length !== 6) {
    e.preventDefault();
    showAlert('Please enter valid 6 digit Billing Pincode');
    return;
}

if (billingAddress === '') {
    e.preventDefault();
    showAlert('Please enter Billing Address');
    return;
}

// Shipping Address Validation

if (shippingLandmark === '') {
    e.preventDefault();
    showAlert('Please enter Shipping Landmark');
    return;
}

if (shippingCity === '') {
    e.preventDefault();
    showAlert('Please enter Shipping City');
    return;
}

if (shippingState === '') {
    e.preventDefault();
    showAlert('Please enter Shipping State');
    return;
}

if (shippingPincode === '') {
    e.preventDefault();
    showAlert('Please enter Shipping Pincode');
    return;
}

if (shippingPincode.length !== 6) {
    e.preventDefault();
    showAlert('Please enter valid 6 digit Shipping Pincode');
    return;
}

if (shippingAddress === '') {
    e.preventDefault();
    showAlert('Please enter Shipping Address');
    return;
}

});
</script>

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