<?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">

    <!-- Page Header -->
    <div class="flex items-center justify-between mb-6">

        <h1 class="text-2xl font-bold text-gray-900">
            Add Demo
        </h1>

        <a href="lockora_demo.php"
            class="inline-flex items-center gap-2 bg-white px-4 py-2.5 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>

    <!-- Form Card -->
    <div class="bg-white rounded-3xl border border-gray-200 shadow-sm p-8">

        <!-- Policy Details -->
        <h2 class="text-2xl font-bold text-gray-900 mb-8">
           Demo Details
        </h2>

<form id="demoForm">

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

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

            <input type="text"
                name="full_name"
                placeholder="Enter full name"
                class="w-full h-12 px-4 rounded-xl border border-gray-300">
        </div>

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

       <input type="tel"
            name="mobile"
            maxlength="10"
            placeholder="Enter mobile number"
            oninput="this.value=this.value.replace(/[^0-9]/g,'').slice(0,10)"
            class="w-full h-12 px-4 rounded-xl border border-gray-300">
        </div>

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

    <select id="business_type" name="business_type">
        <option value="">Search Customer Type</option>
        <option value="Company Customer">Company Customer</option>
        <option value="Dealer Customer">Dealer Customer</option>
        <option value="Sales Partner Customer">Sales Partner Customer</option>
    </select>
</div>

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

            <input type="date"
                name="preferred_date"
                class="w-full h-12 px-4 rounded-xl border border-gray-300">
        </div>

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

            <input type="time"
                name="preferred_time"
                class="w-full h-12 px-4 rounded-xl border border-gray-300">
        </div>

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

<div class="h-auto flex flex-wrap gap-6 rounded-xl px-4 py-3">

    <label class="flex items-center gap-2 cursor-pointer">
        <input type="radio" name="demo_for" value="Home Visit">
        <span>Site Visit</span>
    </label>

    <label class="flex items-center gap-2 cursor-pointer">
        <input type="radio" name="demo_for" value="Call">
        <span>Video Call</span>
    </label>

</div>
        </div>
    </div>
    
    <!-- Site Visit Address Section -->
<div id="siteVisitFields" class="hidden mt-6">

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        <!-- Shop / House No -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
                Shop / House No <span class="text-red-500">*</span>
            </label>
            <input type="text"
                name="house_no"
                placeholder="Enter Shop / House No"
                class="w-full h-12 px-4 rounded-xl border border-gray-300">
        </div>

        <!-- Society / Complex No -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
                Society / Complex No <span class="text-red-500">*</span>
            </label>
            <input type="text"
                name="society_no"
                placeholder="Enter Society / Complex No"
                class="w-full h-12 px-4 rounded-xl border border-gray-300">
        </div>

        <!-- Landmark -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
                Landmark <span class="text-red-500">*</span>
            </label>
            <input type="text"
                name="landmark"
                placeholder="Enter Landmark"
                class="w-full h-12 px-4 rounded-xl border border-gray-300">
        </div>

        <!-- City -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
                City <span class="text-red-500">*</span>
            </label> 
            <input type="text"
                name="site_city"
                placeholder="Enter City"
                class="w-full h-12 px-4 rounded-xl border border-gray-300">
        </div>

        <!-- State -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
                State <span class="text-red-500">*</span>
            </label>
            <input type="text"
                name="state"
                placeholder="Enter State"
                class="w-full h-12 px-4 rounded-xl border border-gray-300">
        </div>

        <!-- Country -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
                Country <span class="text-red-500">*</span>
            </label>
            <input type="text"
                name="country"
                placeholder="Enter Country"
                class="w-full h-12 px-4 rounded-xl border border-gray-300">
        </div>

        <!-- Pincode -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
                Pincode <span class="text-red-500">*</span>
            </label>
            <input type="text"
                name="pincode"
                maxlength="6"
                placeholder="Enter Pincode"
                class="w-full h-12 px-4 rounded-xl border border-gray-300">
        </div>

    </div>

</div>
    
        <!-- Buttons -->
    <div class="flex justify-end gap-4 mt-10">

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

        <button type="button"
            onclick="validateForm()"
            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>

</div>

<script>
new TomSelect("#business_type", {
    create: false,
    maxOptions: 100,
    openOnFocus: true,   // focus par open nai thay
    placeholder: "Search Customer Type"
});
</script>

<script>
function showAlert(message) {
    Swal.fire({
        icon: 'warning',
        title: 'Required',
        text: message,
        width: '350px',
        confirmButtonText: 'OK',
        buttonsStyling: false,
        customClass: {
            popup: '!rounded-xl',
            confirmButton: '!bg-blue-600 !text-white !px-4 !py-2 !rounded-lg'
        }
    });
}

function validateForm() {

    const form = document.getElementById('demoForm');

    const fullName = form.full_name.value.trim();
    const mobile = form.mobile.value.trim();
    const customerType = document.getElementById('business_type').tomselect.getValue();
    const preferredDate = form.preferred_date.value;
    const preferredTime = form.preferred_time.value;
    const demoFor = document.querySelector('input[name="demo_for"]:checked');

    // Full Name
    if (fullName === '') {
        showAlert('Please enter full name');
        return;
    }

    // Mobile
    if (mobile === '') {
        showAlert('Please enter mobile number');
        return;
    }

    if (!/^[0-9]{10}$/.test(mobile)) {
        showAlert('Please enter valid 10 digit mobile number');
        return;
    }

    // Customer Type
    if (!customerType) {
        showAlert('Please select customer type');
        return;
    }

    // Date
    if (preferredDate === '') {
        showAlert('Please select preferred date');
        return;
    }

    // Time
    if (preferredTime === '') {
        showAlert('Please select preferred time');
        return;
    }

    // Demo Via
    if (!demoFor) {
        showAlert('Please select demo via');
        return;
    }

    // Site Visit Validation
    if (demoFor.value === 'Home Visit') {

        if (form.house_no.value.trim() === '') {
            showAlert('Please enter Shop / House No');
            return;
        }

        if (form.society_no.value.trim() === '') {
            showAlert('Please enter Society / Complex No');
            return;
        }

        if (form.landmark.value.trim() === '') {
            showAlert('Please enter Landmark');
            return;
        }

        if (form.site_city.value.trim() === '') {
            showAlert('Please enter City');
            return;
        }

        if (form.state.value.trim() === '') {
            showAlert('Please enter State');
            return;
        }

        if (form.country.value.trim() === '') {
            showAlert('Please enter Country');
            return;
        }

        if (!/^[0-9]{6}$/.test(form.pincode.value.trim())) {
            showAlert('Please enter valid 6 digit pincode');
            return;
        }
    }

    // Success
    Swal.fire({
        icon: 'success',
        title: 'Demo Added Successfully',
        text: 'All validations passed',
        width: '350px',
        showConfirmButton: false,
        timer: 1500
    }).then(() => {

        // Database save mate
        form.submit();

    });
}
</script>

<script>
document.querySelectorAll('input[name="demo_for"]').forEach(radio => {

    radio.addEventListener('change', function() {

        const siteVisitFields = document.getElementById('siteVisitFields');

        if (this.value === 'Home Visit') {
            siteVisitFields.classList.remove('hidden');
        } else {
            siteVisitFields.classList.add('hidden');
        }

    });

});
</script>

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