<?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 Complaint</h1>
        </div>
        <a href="lockora_ticket_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">Complaint Details</h2>

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

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

            <!-- 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" name="mobile" maxlength="10" placeholder="Enter Mobile 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>

            <!-- Product Model -->
            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">
                    Product Model <span class="text-red-500">*</span>
                </label>
                <select id="product_model" name="product_model">
                    <option value="">Search Product Model</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 No -->
            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">Serial No <span class="text-red-500">*</span></label>
                <input type="text" name="serial_no" placeholder="Enter Serial No (e.g. LO-001)" 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>

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

            <!-- Complaint -->
            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">
                    Complaint Type <span class="text-red-500">*</span>
                </label>
                <select id="complaint" name="complaint">
                    <option value="">Search Complaint</option>
                    <option value="Fingerprint Issue">Fingerprint Issue</option>
                    <option value="App Connectivity">App Connectivity</option>
                    <option value="Lock Jam">Lock Jam</option>
                    <option value="Battery Issue">Battery Issue</option>
                    <option value="Installation Issue">Installation Issue</option>
                    <option value="Other">Other</option>
                </select>
            </div>

            <!-- Priority -->
            <!--<div>-->
            <!--    <label class="block mb-2 text-sm font-medium text-slate-700">-->
            <!--        Priority <span class="text-red-500">*</span>-->
            <!--    </label>-->
            <!--    <select id="priority" name="complaint">-->
            <!--        <option value="">Search Priority</option>-->
            <!--        <option value="Low">Low</option>-->
            <!--        <option value="Medium">Medium</option>-->
            <!--        <option value="High">High</option>-->
            <!--    </select>-->
            <!--</div>-->

            <!-- Date -->
            <div>
                <label class="block mb-2 text-sm font-medium text-slate-700">Complaint Date <span class="text-red-500">*</span></label>
                <input type="date" name="complaint_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>


            <!-- Description -->
            <div class="md:col-span-3">
                <label class="block mb-2 text-sm font-medium text-slate-700">
                    Description <span class="text-red-500">*</span>
                </label>
                <textarea name="description"
                    rows="3"
                    placeholder="Enter complaint description (optional)"
                    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 class="md:col-span-3 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>
</div>

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

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

new TomSelect("#complaint", {
    create: false,
    maxOptions: 100,
    openOnFocus: true,
    placeholder: "Search Complaint"
});
new TomSelect("#priority", {
    create: false,
    maxOptions: 100,
    openOnFocus: true,
    placeholder: "Search Priority"
});

new TomSelect("#status", {
    create: false,
    maxOptions: 100,
    openOnFocus: true,
    placeholder: "Search Status"
});
</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-4 !py-2 !rounded-lg !text-xs hover:!bg-blue-700'
        }
    });
}

document.getElementById('complaintForm').addEventListener('submit', function(e) {

    const customerName = document.querySelector('input[name="customer_name"]').value.trim();
    const mobile = document.querySelector('input[name="mobile"]').value.trim();
    const productModel = document.getElementById('product_model').value;
    const serialNo = document.querySelector('input[name="serial_no"]').value.trim();
    const complaintType = document.getElementById('complaint_type').value;
    const complaint = document.getElementById('complaint').value;
    const complaintDate = document.querySelector('input[name="complaint_date"]').value;
    const status = document.getElementById('status').value;

    if (customerName === '') {
        e.preventDefault();
        showAlert('Please enter Customer Name');
        return;
    }

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

    if (mobile.length !== 10) {
        e.preventDefault();
        showAlert('Enter valid 10 digit mobile number');
        return;
    }

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

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

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

    if (complaint === '') {
        e.preventDefault();
        showAlert('Please select Complaint');
        return;
    }

    if (complaintDate === '') {
        e.preventDefault();
        showAlert('Please select Date');
        return;
    }

    if (status === '') {
        e.preventDefault();
        showAlert('Please select Status');
        return;
    }
});
</script>

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