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

<style>
    .ts-control{
        min-height: 44px;
        border-radius: 12px !important;
        padding: 10px 14px !important;
    }
    
    .ts-wrapper.single .ts-control{
        padding-left: 14px !important;
    }
    
    .ts-dropdown{
        border-radius: 12px !important;
    }
</style>

<!-- Page Wrapper -->
<div class="px-0 py-3 md:p-2 lg:p-6">

    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-5 bg-white p-4 rounded-lg border border-gray-200">

    <!-- Title -->
    <div>
        <h1 class="text-2xl font-bold text-gray-800">
            Return Order
        </h1>
        <p class="text-sm text-gray-500">
            View and manage all return order requests and status updates
        </p>
    </div>

        <!-- Actions -->
        <div class="flex flex-col sm:flex-row gap-3">

            <!-- Search -->
            <div class="relative">
                <input type="text" placeholder="Search here..." id="searchInput"
                    class="w-full sm:w-[220px] pl-10 pr-4 py-2.5 rounded-xl border border-gray-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none text-sm">
                <i class="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
            </div>

        </div>

    </div>
    
    <!-- Quick Action Buttons -->
    <div class="bg-white rounded-2xl border border-gray-200 p-4 mb-5">
        <div class="flex flex-wrap gap-3">
        
            <!-- Pending Return -->
            <button id="btn-pending" onclick="filterReturn('pending')"
                class="filter-btn flex items-center gap-2 px-5 h-11 rounded-xl bg-yellow-50 text-yellow-700 border border-yellow-200 hover:bg-yellow-100 transition text-sm font-medium">
                <i class="ri-time-line text-lg"></i>
                Pending Return <span class="px-2 py-0.5 text-xs rounded-full bg-yellow-300 text-black">1</span>
            </button>
        
            <!-- Approved Return -->
            <button id="btn-approved" onclick="filterReturn('approved')"
                class="filter-btn flex items-center gap-2 px-5 h-11 rounded-xl bg-green-50 text-green-700 border border-green-200 hover:bg-green-100 transition text-sm font-medium">
                <i class="ri-checkbox-circle-line text-lg"></i>
                Approved Return <span class="px-2 py-0.5 text-xs rounded-full bg-green-300 text-black">1</span>
            </button>
            
            <button id="btn-ongoing" onclick="filterReturn('ongoing')"
                class="filter-btn flex items-center gap-2 px-5 h-11 rounded-xl bg-blue-50 text-blue-700 border border-blue-200 hover:bg-blue-100 transition text-sm font-medium">
                <i class="ri-loader-4-line text-lg"></i>
                Ongoing Return
                <span class="px-2 py-0.5 text-xs rounded-full bg-blue-300 text-black">1</span>
            </button>
            
            <!-- Total -->
            <button id="btn-all" onclick="filterReturn('all')"
                class="filter-btn flex items-center gap-2 px-5 h-11 rounded-xl bg-slate-100 text-slate-700 border border-slate-200 hover:bg-slate-200 transition text-sm font-medium">
                <i class="ri-file-list-3-line text-lg"></i>
                Total Return <span class="px-2 py-0.5 text-xs rounded-full bg-slate-300 text-black">2</span>
            </button>
        
        </div>
    </div>

    <!-- Table Card -->
    <div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-x-auto overflow-y-hidden">

        <div class="overflow-x-auto">
           <table class="w-full whitespace-normal">

                <!-- 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">
            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 Model
        </th>

        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
            Customer Name
        </th>
        
        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
            Customer Type
        </th>

        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
            Return Date
        </th>

        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">
            Status
        </th>

        <th class="px-6 py-4 text-xs font-semibold text-gray-500 uppercase tracking-wider text-center whitespace-nowrap min-w-[220px]">
            Action
        </th>

    </tr>
</thead>

                <!-- Table Body -->
                <tbody class="divide-y divide-gray-100 bg-white">
 <tr class="hover:bg-gray-50 transition" data-return="pending">

    <!-- Sr No -->
    <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
        1
    </td>

    <!-- Order ID -->
    <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
        ORD-1001
    </td>

    <!-- Product Model -->
    <td class="px-6 py-4 whitespace-nowrap">
        <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>

<!-- Customer Name -->
<td class="px-6 py-4 whitespace-nowrap">
    <div class="text-sm font-semibold text-gray-800">
        Dev Mistry
    </div>
    <div class="text-xs text-gray-500 mt-1">
        9876543210
    </div>
</td>
    
    <!-- Customer Type -->
<td class="px-6 py-4 whitespace-nowrap">
 <span class="px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-medium">
                Dealer Customer
            </span>
</td>

    <!-- Return Date -->
    <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
        15-06-2026
    </td>

    <!-- Status -->
    <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 whitespace-nowrap">
            Pending
        </span>
    </td>

    <!-- Action -->
    <td class="px-6 py-4 whitespace-nowrap">
        <div class="flex items-center justify-center gap-2">
            
<button
    type="button"
    onclick="openApproveModal()"
    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center"
    title="Approve">
    <i class="ri-file-list-3-line"></i>
</button>

            <!-- View -->
            <a href="view_lockora_return_order.php"
                class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 transition flex items-center justify-center">
                <i class="ri-eye-line"></i>
            </a>

        </div>
    </td>

</tr>
<tr class="hover:bg-gray-50 transition" data-return="approved">

    <!-- Sr No -->
    <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
        2
    </td>

    <!-- Order ID -->
    <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
        ORD-1002
    </td>

    <!-- Product Model -->
    <td class="px-6 py-4 whitespace-nowrap">
        <div class="text-sm font-semibold text-indigo-600">
            LockOra L2+
        </div>
        <div class="text-xs font-semibold text-sky-700 mt-1">
            Serial No: LO-002
        </div>
    </td>

<!-- Customer Name -->
<td class="px-6 py-4 whitespace-nowrap">
    <div class="text-sm font-semibold text-gray-800">
        Raj Patel
    </div>
    <div class="text-xs text-gray-500 mt-1">
        9123456780
    </div>
</td>
     <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
     <span class="px-3 py-1 rounded-full bg-orange-100 text-orange-700 text-xs font-medium">
                Sales Partner Customer
    </span>
    </td>


    <!-- Return Date -->
    <td class="px-6 py-4 text-sm text-gray-700 whitespace-nowrap">
        16-06-2026
    </td>

    <!-- Status -->
    <td class="px-6 py-4 whitespace-nowrap">
        <span class="px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-medium whitespace-nowrap">
            Approved
        </span>
    </td>

    <!-- Action -->
    <td class="px-6 py-4 whitespace-nowrap">
        <div class="flex items-center justify-center gap-2">
<button
    type="button"
    onclick="openApproveModal()"
    class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center"
    title="Approve">
    <i class="ri-file-list-3-line"></i>
</button>

            <a href="view_lockora_return_order.php"
                class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 transition flex items-center justify-center">
                <i class="ri-eye-line"></i>
            </a>

        </div>
    </td>

</tr>

<tr class="hover:bg-gray-50 transition" data-return="ongoing">

    <td class="px-6 py-4 text-sm">3</td>
    <td class="px-6 py-4 text-sm">ORD-1002</td>

    <td class="px-6 py-4">
        <div class="text-sm font-semibold text-indigo-600">
            LockOra L2+
        </div>
        <div class="text-xs font-semibold text-sky-700 mt-1">
            Serial No: LO-002
        </div>
    </td>

<!-- Customer Name -->
<td class="px-6 py-4 whitespace-nowrap">
    <div class="text-sm font-semibold text-gray-800">
        Parth Mistry
    </div>
    <div class="text-xs text-gray-500 mt-1">
        9123456780
    </div>
</td>

    <td class="px-6 py-4">
        <span class="px-3 py-1 rounded-full bg-blue-100 text-blue-700 text-xs font-medium">
            Sales Partner Customer
        </span>
    </td>

    <td class="px-6 py-4 text-sm">16-06-2026</td>

    <td class="px-6 py-4">
        <span class="px-3 py-1 rounded-full bg-blue-100 text-blue-700 text-xs font-medium">
            Ongoing
        </span>
    </td>

    <td class="px-6 py-4">
        <div class="flex items-center justify-center gap-2">
            <button
                type="button"
                onclick="openApproveModal()"
                class="w-9 h-9 rounded-lg bg-green-50 text-green-600 hover:bg-green-100 transition flex items-center justify-center"
                title="Approve">
                <i class="ri-file-list-3-line"></i>
            </button>

            <a href="view_lockora_return_order.php"
                class="w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
                <i class="ri-eye-line"></i>
            </a>
        </div>
    </td>

</tr>
           

                    <!-- Empty State -->
                    <tr id="installationEmptyRow" style="display:none;">
                        <td colspan="7" class="px-6 py-16 text-center">
                            <div class="flex flex-col items-center gap-3">
                                <div class="w-16 h-16 rounded-2xl bg-gray-100 flex items-center justify-center">
                                    <i class="ri-tools-line text-3xl text-gray-400"></i>
                                </div>
                                <p class="text-base font-semibold text-gray-700">No Records Found</p>
                                <p id="installationEmptyMsg" class="text-sm text-gray-400">No records match the selected filter.</p>
                            </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">

            <p class="text-sm text-gray-500" id="showingText">Showing all records</p>

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


<!-- Approve Modal -->
<div id="approveModal"
    class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50">

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

        <div class="flex items-center justify-between mb-4">
            <h3 id="actionModalTitle" class="text-lg font-semibold text-gray-800">
                Approve Return Request
            </h3>

            <button onclick="closeApproveModal()"
                class="text-gray-500 hover:text-red-500 text-xl">
                <i class="ri-close-line"></i>
            </button>
        </div>
        
        <div class="mb-5">
            <label class="block text-sm font-medium text-gray-500 mb-2">
                Current Status
            </label>
        
            <span id="currentStatusBadge"
                class="inline-flex px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-700">
                Pending
            </span>
        </div>
        
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2">
                Status <span class="text-red-500">*</span>
            </label>
        
            <select id="statusSelect" placeholder="Select Status">
                <option value="">Select Status</option>
                <option value="approved">Approved</option>
                <option value="ongoing">Ongoing</option>
                <option value="pending">Pending</option>
            </select>
        </div>
        
        <div id="reasonSection" class="hidden mt-4">
            <label id="reasonLabel"
                class="block text-sm font-medium text-gray-700 mb-2">
                Reason <span class="text-red-500">*</span>
            </label>
        
            <textarea
                id="statusReason"
                rows="4"
                class="w-full rounded-xl border border-gray-300 px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none"
                placeholder="Enter reason..."></textarea>
        </div>

        <div class="flex justify-end gap-3">

            <button onclick="closeApproveModal()"
                class="px-4 py-2 rounded-xl border border-gray-300 text-gray-700 hover:bg-gray-100">
                Cancel
            </button>

            <button id="submitActionBtn"
                onclick="submitAction()"
                class="px-5 py-2 rounded-xl bg-blue-600 text-white hover:bg-blue-700 transition">
                Approve
            </button>

        </div>

    </div>

</div>

<script>
    new TomSelect("#statusSelect", {
        create: false,
        sortField: {
            field: "text",
            direction: "asc"
        },
        placeholder: "Select Status"
    });
</script>

<script>
    const statusTom = document.querySelector("#statusSelect").tomselect;

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

    const section = document.getElementById("reasonSection");
    const label = document.getElementById("reasonLabel");
    const textarea = document.getElementById("statusReason");

    if(value === ""){
        section.classList.add("hidden");
        textarea.value = "";
        return;
    }

    section.classList.remove("hidden");

    switch(value){

        case "approved":
            label.innerHTML = 'Approval Reason <span class="text-red-500">*</span>';
            textarea.placeholder = "Enter approval reason...";
            break;

        case "pending":
            label.innerHTML = 'Pending Reason <span class="text-red-500">*</span>';
            textarea.placeholder = "Why is it pending?";
            break;

        case "ongoing":
            label.innerHTML = 'Ongoing Reason <span class="text-red-500">*</span>';
            textarea.placeholder = "Enter ongoing process details...";
            break;

        case "rejected":
            label.innerHTML = 'Reject Reason <span class="text-red-500">*</span>';
            textarea.placeholder = "Enter reject reason...";
            break;

        case "completed":
            label.innerHTML = 'Completion Remark <span class="text-red-500">*</span>';
            textarea.placeholder = "Enter completion remark...";
            break;
    }

});
</script>

<script>
    function openApproveModal() {
        const modal = document.getElementById("approveModal");
    
        modal.classList.remove("hidden");
        modal.classList.add("flex");
    }

    function closeApproveModal() {
        const modal = document.getElementById("approveModal");
    
        modal.classList.remove("flex");
        modal.classList.add("hidden");
    }

    function submitAction() {
        alert("Return request submitted successfully.");
    
        closeApproveModal();
    }
</script>

<script>
function filterReturn(status) {

    const rows = document.querySelectorAll("tbody tr[data-return]");

    rows.forEach(row => {

        const rowStatus = row.getAttribute("data-return");

        if (status === "all") {
            row.style.display = "";
        } else if (rowStatus === status) {
            row.style.display = "";
        } else {
            row.style.display = "none";
        }

    });
}


// Default Load
filterReturn("pending");
</script>


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