<?php if (isset($component)) { $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da = $component; } ?>
<?php $component = $__env->getContainer()->make(App\View\Components\AppLayout::class, []); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Query Management</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
    <style>
        .card-active {
            border-color: #3b82f6 !important;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="bg-gray-100">

<div class="container mx-auto mt-10 px-6">
    <h2 class="text-3xl font-bold text-gray-800 mb-6">Query Management</h2>

    <?php if(session('success')): ?>
        <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4" role="alert">
            <p><?php echo e(session('success')); ?></p>
        </div>
    <?php elseif(session('error')): ?>
        <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4" role="alert">
            <p><?php echo e(session('error')); ?></p>
        </div>
    <?php endif; ?>

    <!-- Query Count Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 text-center mb-6">
        <div onclick="filterQueries('All', this)" class="p-6 bg-white rounded-lg shadow-md border hover:border-blue-400 cursor-pointer">
            <h3 class="text-xl font-semibold text-gray-700">All Queries</h3>
            <p class="text-2xl font-bold text-blue-600"><?php echo e($totalCount); ?></p>
        </div>
        <div onclick="filterQueries('User', this)" class="p-6 bg-white rounded-lg shadow-md border hover:border-blue-400 cursor-pointer">
            <h3 class="text-xl font-semibold text-gray-700">User Queries</h3>
            <p class="text-2xl font-bold text-blue-600"><?php echo e($userCount); ?></p>
        </div>
        <div onclick="filterQueries('Vendor', this)" class="p-6 bg-white rounded-lg shadow-md border hover:border-blue-400 cursor-pointer">
            <h3 class="text-xl font-semibold text-gray-700">Vendor Queries</h3>
            <p class="text-2xl font-bold text-blue-600"><?php echo e($vendorCount); ?></p>
        </div>
        <div onclick="filterQueries('Driver', this)" class="p-6 bg-white rounded-lg shadow-md border hover:border-blue-400 cursor-pointer">
            <h3 class="text-xl font-semibold text-gray-700">Driver Queries</h3>
            <p class="text-2xl font-bold text-blue-600"><?php echo e($driverCount); ?></p>
        </div>
    </div>

    <hr class="my-8">

    <!-- Display Queries Table -->
    <h4 class="text-2xl font-semibold text-gray-800 mb-4">Existing Queries</h4>
    <div class="overflow-x-auto">
        <table id="queryTable" class="min-w-full bg-white border rounded-lg shadow-md">
            <thead>
                <tr class="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
                    <th class="py-3 px-6 text-left">ID</th>
                    <th class="py-3 px-6 text-left">Sender ID</th>
                    <th class="py-3 px-6 text-left">Name</th>
                    <th class="py-3 px-6 text-left">Phone</th>
                    <th class="py-3 px-6 text-left">Email</th>
                    <th class="py-3 px-6 text-left">Type</th>
                    <th class="py-3 px-6 text-left">Description</th>
                    <th class="py-3 px-6 text-left">Status</th>
                    <th class="py-3 px-6 text-center">Actions</th>
                </tr>
            </thead>
            <tbody class="text-gray-600 text-sm font-light">
                <?php $__currentLoopData = $queries; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $query): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <tr class="border-b border-gray-200 hover:bg-gray-100" data-type="<?php echo e($query->type); ?>">
                        <td class="py-3 px-6"><?php echo e($query->ID); ?></td>
                        <td class="py-3 px-6"><?php echo e($query->sendor_ID); ?></td>
                        <td class="py-3 px-6"><?php echo e($query->name); ?></td>
                        <td class="py-3 px-6"><?php echo e($query->phone); ?></td>
                        <td class="py-3 px-6"><?php echo e($query->email); ?></td>
                        <td class="py-3 px-6"><?php echo e($query->type); ?></td>
                        <td class="py-3 px-6"><?php echo e($query->description); ?></td>
                        <td class="py-3 px-6">
                            <span class="text-xs px-3 py-1 rounded-full <?php echo e($query->status === 'A' ? 'bg-green-200 text-green-700' : 'bg-red-200 text-red-700'); ?>">
                                <?php echo e($query->status === 'A' ? 'Active' : 'Closed'); ?>

                            </span>
                        </td>
                        <td class="py-3 px-6 text-center">
                            <button onclick="openEditModal(<?php echo e($query->ID); ?>, '<?php echo e($query->status); ?>')" class="bg-yellow-500 text-white px-3 py-1 rounded-md text-sm">Edit</button>
                            <button onclick="deleteQuery(<?php echo e($query->ID); ?>)" class="bg-red-500 text-white px-3 py-1 rounded-md text-sm">Delete</button>
                        </td>
                    </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Edit Status Modal -->
<div class="fixed z-10 inset-0 overflow-y-auto hidden" id="editStatusModal">
    <div class="flex items-end justify-center min-h-screen">
        <div class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-all sm:max-w-lg sm:w-full">
            <div class="px-4 py-5">
                <h3 class="text-lg leading-6 font-medium text-gray-900">Edit Query Status</h3>
                <form id="editStatusForm">
                    <?php echo csrf_field(); ?>
                    <?php echo method_field('PUT'); ?>
                    <input type="hidden" id="queryId" name="queryId">
                    <div class="mt-4">
                        <label for="newStatus" class="block text-sm font-medium text-gray-700">Status</label>
                        <select id="newStatus" name="newStatus" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="A">Active</option>
                            <option value="C">Closed</option>
                        </select>
                    </div>
                    <div class="mt-4 flex justify-end">
                        <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">Update Status</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        $('#queryTable').DataTable();
    });

    function filterQueries(type) {
        $('#queryTable').DataTable().columns(5).search(type === 'All' ? '' : type).draw();
    }

    function openEditModal(id, currentStatus) {
        $('#queryId').val(id);
        $('#newStatus').val(currentStatus);
        $('#editStatusModal').toggleClass('hidden');
    }

   $('#editStatusForm').submit(async function (event) {
    event.preventDefault();
    const id = $('#queryId').val();
    const newStatus = $('#newStatus').val();

    try {
        const response = await fetch(`<?php echo e(url('querymanagement')); ?>/${id}`, {
            method: 'PUT',
            headers: { 'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>', 'Content-Type': 'application/json' },
            body: JSON.stringify({ status: newStatus })
        });
    } catch (error) {
        alert('Error updating status');
    } finally {
        location.reload();  // Refresh the window after the request completes
    }
});

async function deleteQuery(id) {
    if (confirm('Are you sure you want to delete this query?')) {
        try {
            const response = await fetch(`<?php echo e(url('querymanagement')); ?>/${id}`, {
                method: 'DELETE',
                headers: { 'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>' }
            });
        } catch (error) {
            alert('Error deleting query');
        } finally {
            location.reload();  // Refresh the window after the request completes
        }
    }
}

</script>
</body>
</html>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da)): ?>
<?php $component = $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da; ?>
<?php unset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da); ?>
<?php endif; ?>
<?php /**PATH /home/u152672654/domains/drycleaneo.com/public_html/admin/resources/views/components/query_management.blade.php ENDPATH**/ ?>