<?php $__env->startSection('title', 'All tickets - Centipid ISP CRM'); ?>
<?php $__env->startSection('breadcrumb_parent', 'CUSTOMERS'); ?>
<?php $__env->startSection('breadcrumb_current', 'Tickets'); ?>

<?php $__env->startSection('content'); ?>
<div class="space-y-6">
    <!-- Header & Action Row -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-extrabold text-white tracking-tight">All <span class="text-orange-500">tickets</span></h1>
            <p class="text-xs text-slate-400 mt-1">Search and filter the full support inbox.</p>
        </div>
        <div class="flex items-center gap-3">
            <button onclick="alert('Exporting tickets...')" class="flex items-center gap-2 bg-[#1c1c1f] hover:bg-[#26262a] text-slate-300 font-semibold text-xs px-4 py-2.5 rounded-xl border border-[#2a2a2e] transition-all">
                <i data-lucide="download" class="w-4 h-4 text-slate-400"></i>
                <span>Export</span>
            </button>
            <button onclick="openNewTicketModal()" class="flex items-center gap-2 btn-orange font-bold text-xs px-4 py-2.5 rounded-xl shadow-lg shadow-orange-500/20">
                <i data-lucide="plus" class="w-4 h-4"></i>
                <span>New ticket</span>
            </button>
        </div>
    </div>

    <!-- Ticket KPI Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-5">
        <div class="custom-card p-5 rounded-2xl border-l-4 border-l-orange-500">
            <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">OPEN</p>
            <p class="text-3xl font-extrabold text-white mt-1"><?php echo e($openCount); ?></p>
            <p class="text-[11px] text-slate-500 mt-1">awaiting first response</p>
        </div>

        <div class="custom-card p-5 rounded-2xl border-l-4 border-l-amber-500">
            <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">IN PROGRESS</p>
            <p class="text-3xl font-extrabold text-amber-400 mt-1"><?php echo e($inProgressCount); ?></p>
            <p class="text-[11px] text-slate-500 mt-1">being worked on</p>
        </div>

        <div class="custom-card p-5 rounded-2xl border-l-4 border-l-rose-500">
            <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">URGENT</p>
            <p class="text-3xl font-extrabold text-rose-400 mt-1"><?php echo e($urgentCount); ?></p>
            <p class="text-[11px] text-slate-500 mt-1">unresolved, urgent</p>
        </div>

        <div class="custom-card p-5 rounded-2xl border-l-4 border-l-emerald-500">
            <p class="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">RESOLVED</p>
            <p class="text-3xl font-extrabold text-emerald-400 mt-1"><?php echo e($resolvedCount); ?></p>
            <p class="text-[11px] text-slate-500 mt-1">closed out</p>
        </div>
    </div>

    <!-- Filter Tabs Bar -->
    <div class="flex flex-col md:flex-row gap-4 items-center justify-between">
        <?php $selectedStatus = request('status', 'All'); ?>
        <div class="flex items-center gap-1 bg-[#161618] p-1 rounded-xl border border-[#2a2a2e] overflow-x-auto">
            <a href="<?php echo e(route('admin.tickets.index', ['status' => 'All'])); ?>" class="px-3.5 py-1.5 rounded-lg text-xs font-bold transition-all <?php echo e($selectedStatus === 'All' ? 'bg-[#2a2a2e] text-white' : 'text-slate-400 hover:text-white'); ?>">
                All <span class="text-[10px] opacity-70"><?php echo e($tickets->total()); ?></span>
            </a>
            <a href="<?php echo e(route('admin.tickets.index', ['status' => 'Open'])); ?>" class="px-3.5 py-1.5 rounded-lg text-xs font-bold transition-all <?php echo e($selectedStatus === 'Open' ? 'bg-[#2a2a2e] text-white' : 'text-slate-400 hover:text-white'); ?>">
                Open <span class="text-[10px] opacity-70"><?php echo e($openCount); ?></span>
            </a>
            <a href="<?php echo e(route('admin.tickets.index', ['status' => 'In Progress'])); ?>" class="px-3.5 py-1.5 rounded-lg text-xs font-bold transition-all <?php echo e($selectedStatus === 'In Progress' ? 'bg-[#2a2a2e] text-white' : 'text-slate-400 hover:text-white'); ?>">
                In progress <span class="text-[10px] opacity-70"><?php echo e($inProgressCount); ?></span>
            </a>
            <a href="<?php echo e(route('admin.tickets.index', ['status' => 'Resolved'])); ?>" class="px-3.5 py-1.5 rounded-lg text-xs font-bold transition-all <?php echo e($selectedStatus === 'Resolved' ? 'bg-[#2a2a2e] text-white' : 'text-slate-400 hover:text-white'); ?>">
                Resolved <span class="text-[10px] opacity-70"><?php echo e($resolvedCount); ?></span>
            </a>
        </div>

        <form action="<?php echo e(route('admin.tickets.index')); ?>" method="GET" class="flex items-center gap-2 w-full md:w-auto">
            <div class="relative w-80">
                <i data-lucide="search" class="w-4 h-4 absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-500"></i>
                <input type="text" name="search" value="<?php echo e(request('search')); ?>" placeholder="Search tickets..." class="w-full bg-[#161618] border border-[#2a2a2e] text-slate-200 text-xs rounded-xl pl-10 pr-4 py-2 focus:outline-none focus:border-orange-500">
            </div>
        </form>
    </div>

    <!-- Data Table -->
    <div class="custom-card rounded-2xl overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs text-slate-300">
                <thead class="bg-[#1c1c1f] text-slate-400 uppercase text-[10px] font-extrabold tracking-wider border-b border-[#2a2a2e]">
                    <tr>
                        <th class="py-4 px-6">TICKET</th>
                        <th class="py-4 px-6">SUBSCRIBER</th>
                        <th class="py-4 px-6">ASSIGNEE</th>
                        <th class="py-4 px-6">STATUS</th>
                        <th class="py-4 px-6">PRIORITY</th>
                        <th class="py-4 px-6 text-right">UPDATED</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-[#2a2a2e] font-medium">
                    <?php $__empty_1 = true; $__currentLoopData = $tickets; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $t): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <tr class="hover:bg-[#1f1f23] transition-colors">
                            <td class="py-4 px-6">
                                <p class="text-xs font-mono font-bold text-orange-500"><?php echo e($t->ticket_number); ?></p>
                                <p class="text-xs font-bold text-white mt-0.5"><?php echo e($t->subject); ?></p>
                            </td>
                            <td class="py-4 px-6 text-white font-semibold">
                                <?php echo e($t->subscriber_name ?? 'Guest User'); ?>

                            </td>
                            <td class="py-4 px-6 text-slate-300">
                                <?php echo e($t->assignee ?? 'Unassigned'); ?>

                            </td>
                            <td class="py-4 px-6">
                                <?php if($t->status === 'Open'): ?>
                                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-orange-500/10 text-orange-400 border border-orange-500/20">Open</span>
                                <?php elseif($t->status === 'In Progress'): ?>
                                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-amber-500/10 text-amber-400 border border-amber-500/20">In Progress</span>
                                <?php elseif($t->status === 'Resolved'): ?>
                                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">Resolved</span>
                                <?php else: ?>
                                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-[#222226] text-slate-400 border border-[#2a2a2e]"><?php echo e($t->status); ?></span>
                                <?php endif; ?>
                            </td>
                            <td class="py-4 px-6">
                                <?php if($t->priority === 'Critical' || $t->priority === 'High'): ?>
                                    <span class="text-rose-400 font-bold flex items-center gap-1">
                                        <i data-lucide="alert-circle" class="w-3.5 h-3.5"></i> <?php echo e($t->priority); ?>

                                    </span>
                                <?php else: ?>
                                    <span class="text-slate-400"><?php echo e($t->priority); ?></span>
                                <?php endif; ?>
                            </td>
                            <td class="py-4 px-6 text-right font-mono text-slate-500 text-[11px]">
                                <?php echo e($t->updated_at->diffForHumans()); ?>

                            </td>
                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="6" class="py-12 text-center text-slate-500">
                                <i data-lucide="inbox" class="w-8 h-8 mx-auto text-slate-600 mb-2"></i>
                                <span>No tickets yet. The first one will show up here.</span>
                            </td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>

        <div class="p-4 border-t border-[#2a2a2e]">
            <?php echo e($tickets->links()); ?>

        </div>
    </div>
</div>

<!-- Modal: New Support Ticket -->
<div id="newTicketModal" class="fixed inset-0 z-[9999] hidden bg-black/80 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="custom-panel rounded-2xl max-w-lg w-full p-6 shadow-2xl space-y-4">
        <div class="flex items-center justify-between border-b border-[#2a2a2e] pb-3">
            <h3 class="text-base font-bold text-white flex items-center gap-2">
                <i data-lucide="plus-circle" class="w-5 h-5 text-orange-500"></i>
                <span>Open New Ticket</span>
            </h3>
            <button onclick="closeNewTicketModal()" class="text-slate-400 hover:text-white">&times;</button>
        </div>

        <form action="<?php echo e(route('admin.tickets.store')); ?>" method="POST" class="space-y-4">
            <?php echo csrf_field(); ?>
            <div>
                <label class="block text-xs font-semibold text-slate-300 mb-1">Subject *</label>
                <input type="text" name="subject" required placeholder="e.g. No internet since morning" class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-300 mb-1">Subscriber *</label>
                <select name="subscriber_id" class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                    <option value="">-- Search Subscriber by Name or Phone --</option>
                    <?php $__currentLoopData = $subscribers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $s): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <option value="<?php echo e($s->id); ?>"><?php echo e($s->name); ?> (<?php echo e($s->phone); ?>)</option>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </select>
            </div>

            <div>
                <label class="block text-xs font-semibold text-slate-300 mb-1">Description *</label>
                <textarea name="description" rows="3" required placeholder="What's going on, when did it start, what's already been tried..." class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2 focus:border-orange-500 focus:outline-none"></textarea>
            </div>

            <div class="grid grid-cols-3 gap-3">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Assignee</label>
                    <input type="text" name="assignee" value="Sanjay Network Tech" class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2 focus:border-orange-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Priority</label>
                    <select name="priority" class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2 focus:border-orange-500 focus:outline-none">
                        <option value="Low">Low</option>
                        <option value="Normal" selected>Normal</option>
                        <option value="High">High</option>
                        <option value="Critical">Critical</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Initial Status</label>
                    <select name="status" class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2 focus:border-orange-500 focus:outline-none">
                        <option value="Open">Open</option>
                        <option value="In Progress">In Progress</option>
                        <option value="Urgent">Urgent</option>
                    </select>
                </div>
            </div>

            <!-- SMS Notification Switches matching spec -->
            <div class="p-3 bg-[#0f0f10] border border-[#2a2a2e] rounded-xl space-y-2 text-xs">
                <label class="flex items-center justify-between cursor-pointer">
                    <span class="text-slate-300 font-semibold">Notify on create &bull; <span class="text-slate-500 font-normal">Send SMS when ticket is opened</span></span>
                    <input type="checkbox" name="notify_create" checked class="rounded border-[#2a2a2e] text-orange-500 bg-[#161618]">
                </label>
                <label class="flex items-center justify-between cursor-pointer pt-2 border-t border-[#2a2a2e]">
                    <span class="text-slate-300 font-semibold">Notify on resolve &bull; <span class="text-slate-500 font-normal">Send SMS when ticket is resolved</span></span>
                    <input type="checkbox" name="notify_resolve" checked class="rounded border-[#2a2a2e] text-orange-500 bg-[#161618]">
                </label>
            </div>

            <div class="flex items-center justify-end gap-3 pt-3 border-t border-[#2a2a2e]">
                <button type="button" onclick="closeNewTicketModal()" class="px-4 py-2 text-xs font-semibold text-slate-400 hover:text-white">Cancel</button>
                <button type="submit" class="btn-orange text-xs px-5 py-2.5 rounded-xl">Create Ticket</button>
            </div>
        </form>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
    function openNewTicketModal() {
        document.getElementById('newTicketModal').classList.remove('hidden');
    }
    function closeNewTicketModal() {
        document.getElementById('newTicketModal').classList.add('hidden');
    }
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\RentEz\Desktop\projects\billingCRM\resources\views/admin/tickets/index.blade.php ENDPATH**/ ?>