<?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="px-0 py-3 md:p-2 lg:p-6">

    <!-- Header -->
    <div class="flex justify-between items-center mb-5">
<h1 class="text-2xl font-bold text-slate-900">
    Add Demo
</h1>

        <a href="puresaas_demo.php"
            class="flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 rounded-xl shadow-sm hover:bg-slate-50 transition">
            <i class="ri-arrow-left-line"></i>
            Back
        </a>
    </div>

    <!-- Card -->
    <div class="bg-white border border-slate-200 rounded-2xl p-6">

<h2 class="text-xl font-bold text-slate-900 mb-5">
    Demo Details
</h2>

        <form id="demoForm">

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

        <!-- Product Name -->
        <div>
            <label class="block mb-2 text-sm font-medium text-slate-700">
                Product Name <span class="text-red-500">*</span>
            </label>

            <select id="productSelect">
                <option value="">Select Product</option>
                <option>PureEstate</option>
                <option>BuliderPro</option>
                <option>SocietyPro</option>
            </select>
        </div>

        <!-- Full Name -->
        <div>
            <label class="block mb-2 text-sm font-medium text-slate-700">
                Full Name <span class="text-red-500">*</span>
            </label>

            <input type="text"
                id="fullName"
                placeholder="Enter Full Name"
                class="w-full h-12 px-4 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 outline-none text-sm">
        </div>

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

            <input type="email"
                id="email"
                placeholder="Enter Email"
                class="w-full h-12 px-4 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 outline-none text-sm">
        </div>

        <!-- Mobile No -->
        <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"
                id="mobile"
                maxlength="10"
                placeholder="Enter Mobile Number"
                class="w-full h-12 px-4 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 outline-none text-sm">
        </div>

        <!-- Demo Date -->
        <div>
            <label class="block mb-2 text-sm font-medium text-slate-700">
                Demo Date <span class="text-red-500">*</span>
            </label>

            <input type="date"
                id="demoDate"
                class="w-full h-12 px-4 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 outline-none text-sm">
        </div>

        <!-- Demo Time -->
        <div>
            <label class="block mb-2 text-sm font-medium text-slate-700">
                Demo Time <span class="text-red-500">*</span>
            </label>

            <input type="time"
                id="demoTime"
                class="w-full h-12 px-4 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 outline-none text-sm">
        </div>
        
        <!-- Reference -->
<!-- Reference -->
<div>
    <label class="block mb-2 text-sm font-medium text-slate-700">
        Reference
    </label>

    <input type="text"
        id="reference"
        placeholder="Enter Reference (Optional)"
        class="w-full h-12 px-4 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 outline-none text-sm">
</div>

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

    <input type="text"
        id="code"
        placeholder="Enter Code"
        class="w-full h-12 px-4 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 outline-none text-sm">
</div>

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

    <textarea
        id="description"
        rows="4"
        placeholder="Enter Description"
        class="w-full px-4 py-3 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 outline-none text-sm"></textarea>
</div>

    </div>

    <!-- Buttons -->
    <div class="flex justify-end gap-3 mt-8">

        <a href="lockora_demo_list.php"
            class="px-6 py-2.5 border border-slate-300 rounded-xl hover:bg-slate-50 transition">
            Cancel
        </a>

        <button type="submit"
            class="px-8 py-2.5 text-white rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 shadow-md hover:opacity-90 transition">
            Save
        </button>

    </div>

</form>

    </div>

</div>


<script>
    document.getElementById("demoForm").addEventListener("submit", function(e){

    e.preventDefault();

    const product = document.getElementById("productSelect").value;
    const fullName = document.getElementById("fullName").value.trim();
    const email = document.getElementById("email").value.trim();
    const mobile = document.getElementById("mobile").value.trim();
    const demoDate = document.getElementById("demoDate").value;
    const demoTime = document.getElementById("demoTime").value;
    const reference = document.getElementById("reference").value.trim();

    if(product === ""){
        Swal.fire({
            icon: "warning",
            title: "Missing infromation",
            text: "Please Select Product",
            width: "350px",
        });
        return;
    }

    if(fullName === ""){
        Swal.fire({
            icon: "warning",
            title: "Missing infromation",
            text: "Please Enter Full Name",
            width: "350px",
        });
        return;
    }

    if(email === ""){
         Swal.fire({
            icon: "warning",
            title: "Missing infromation",
            text: "Please Enter Email",
            width: "350px",
        });
        return;
    }

    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if(!emailPattern.test(email)){
         Swal.fire({
            icon: "warning",
            title: "Missing infromation",
            text: "Please Please Enter Valid Email",
            width: "350px",
        });
       
        return;
    }

    if(mobile === ""){
         Swal.fire({
            icon: "warning",
            title: "Missing infromation",
            text: "Please Enter Mobile Number",
            width: "350px",
        });
       
        return;
    }

    if(mobile.length != 10){
         Swal.fire({
            icon: "warning",
            title: "Missing infromation",
            text: "Mobile Number Must Be 10 Digits",
            width: "350px",
        });
      
        return;
    }

    if(demoDate === ""){
         Swal.fire({
            icon: "warning",
            title: "Missing infromation",
            text: "Please Select Demo Date",
            width: "350px",
        });
        
        return;
    }

    if(demoTime === ""){
         Swal.fire({
            icon: "warning",
            title: "Missing infromation",
            text: "Please Select Demo Time",
            width: "350px",
        });
        
        return;
    }

    Swal.fire({
        icon: "success",
        title: "Success",
        text: "Demo Added Successfully",
        confirmButtonColor: "#4f46e5",
        width: '350px'
    });

});
</script>

<script>
document.addEventListener("DOMContentLoaded", function () {

    const productSelect = new TomSelect("#productSelect", {
        create: false,
        maxOptions: 10,
        placeholder: "Search Product...",
        openOnFocus: true
    });

    productSelect.control.classList.add(
        "h-12",
        "rounded-xl",
        "border",
        "border-slate-300",
        "pl-10", // icon માટે space
        "text-sm"
    );

    productSelect.dropdown.classList.add(
        "z-[99999]",
        "rounded-xl",
        "border",
        "border-gray-200",
        "shadow-xl"
    );

});
</script>

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