

<?php $__env->startSection('title', 'Daftar Antrean Servis'); ?>

<?php $__env->startSection('content'); ?>


<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6">
    <div>
        <h1 class="text-xl font-bold text-gray-900">Antrean Servis</h1>
        <p class="text-sm text-gray-500 mt-0.5">
            Total <?php echo e($tickets->total()); ?> tiket
            <?php if($status): ?> dengan status <strong><?php echo e($status); ?></strong> <?php endif; ?>
        </p>
    </div>
    <a href="<?php echo e(route('tickets.create')); ?>"
       class="inline-flex items-center gap-2 bg-brand-600 hover:bg-brand-700
              text-white text-sm font-semibold rounded-xl px-4 py-2.5 transition self-start sm:self-auto">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
        </svg>
        Tiket Baru
    </a>
</div>


<?php
    $statusConfig = [
        'Pickup Requested' => ['bg' => 'bg-purple-100', 'text' => 'text-purple-800', 'dot' => 'bg-purple-400'],
        'Pending'   => ['bg' => 'bg-yellow-100', 'text' => 'text-yellow-800', 'dot' => 'bg-yellow-400'],
        'Checking'  => ['bg' => 'bg-sky-100',    'text' => 'text-sky-800',    'dot' => 'bg-sky-400'],
        'Repairing' => ['bg' => 'bg-blue-100',   'text' => 'text-blue-800',   'dot' => 'bg-blue-400'],
        'Ready'     => ['bg' => 'bg-green-100',  'text' => 'text-green-800',  'dot' => 'bg-green-400'],
        'Picked Up' => ['bg' => 'bg-gray-100',   'text' => 'text-gray-700',   'dot' => 'bg-gray-400'],
        'Cancelled' => ['bg' => 'bg-red-100',    'text' => 'text-red-800',    'dot' => 'bg-red-400'],
    ];
?>

<div class="flex gap-1.5 flex-wrap mb-4">
    <a href="<?php echo e(route('admin.tickets.index', array_filter(['search' => $search]))); ?>"
       class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition
              <?php echo e(!$status
                  ? 'bg-brand-600 text-white shadow-sm'
                  : 'bg-white text-gray-600 border border-gray-200 hover:bg-gray-50'); ?>">
        Semua
        <span class="text-xs <?php echo e(!$status ? 'bg-white/20 text-white' : 'bg-gray-100 text-gray-600'); ?>

                    rounded-full px-1.5 py-0.5 font-semibold leading-none">
            <?php echo e($counts->sum()); ?>

        </span>
    </a>
    <?php $__currentLoopData = $statuses; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $s): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    <?php $cfg = $statusConfig[$s]; ?>
    <a href="<?php echo e(route('admin.tickets.index', array_filter(['status' => $s, 'search' => $search]))); ?>"
       class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition
              <?php echo e($status === $s
                  ? $cfg['bg'] . ' ' . $cfg['text'] . ' shadow-sm ring-1 ring-inset ring-current/20'
                  : 'bg-white text-gray-600 border border-gray-200 hover:bg-gray-50'); ?>">
        <span class="w-2 h-2 rounded-full <?php echo e($cfg['dot']); ?>"></span>
        <?php echo e($s); ?>

        <?php if($counts->get($s, 0) > 0): ?>
        <span class="text-xs <?php echo e($status === $s ? 'bg-white/40' : 'bg-gray-100 text-gray-600'); ?>

                    rounded-full px-1.5 py-0.5 font-semibold leading-none">
            <?php echo e($counts->get($s, 0)); ?>

        </span>
        <?php endif; ?>
    </a>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>


<div x-data="{
        q: <?php echo \Illuminate\Support\Js::from($search ?? '')->toHtml() ?>,
        loading: false,
        timer: null,
        onInput() {
            clearTimeout(this.timer);
            this.timer = setTimeout(() => this.doSearch(), 400);
        },
        clearQ() { this.q = ''; this.doSearch(); },
        async doSearch() {
            this.loading = true;
            const params = new URLSearchParams(window.location.search);
            this.q ? params.set('search', this.q) : params.delete('search');
            params.delete('page');
            try {
                const r = await fetch('/admin/tickets?' + params, {
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });
                const html = await r.text();
                const w = document.getElementById('ticket-list-wrapper');
                w.innerHTML = html;
                Alpine.initTree(w);
                history.replaceState({}, '', '?' + params);
            } catch (e) { console.error(e); }
            finally { this.loading = false; }
        }
    }" class="mb-5">

    <div class="relative max-w-sm">
        
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none"
             fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
        </svg>

        <input type="text"
               x-model="q"
               @input="onInput()"
               placeholder="Cari tiket, nama, merekâ€¦"
               autocomplete="off"
               class="w-full pl-9 pr-10 py-2.5 text-sm border border-gray-200 rounded-xl bg-white
                      focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent
                      placeholder-gray-400 transition">

        
        <div x-show="loading" class="absolute right-3 top-1/2 -translate-y-1/2">
            <svg class="animate-spin w-4 h-4 text-brand-500" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                <path class="opacity-75" fill="currentColor"
                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
            </svg>
        </div>

        
        <button x-show="q && !loading"
                @click="clearQ()"
                class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>
    </div>
</div>


<div id="ticket-list-wrapper">
    <?php echo $__env->make('admin.tickets._list', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
</div>


<div x-show="$store.cancelModal.modal"
     x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center p-4"
     role="dialog" aria-modal="true">

    
    <div class="absolute inset-0 bg-black/40 backdrop-blur-sm"
         @click="$store.cancelModal.close()"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
    </div>

    
    <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-md p-6"
         @click.stop
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95">

        <div class="flex items-start justify-between mb-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667
                                 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.072
                                 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                    </svg>
                </div>
                <div>
                    <h3 class="font-semibold text-gray-900">Batalkan Tiket</h3>
                    <p class="text-xs text-gray-500" x-text="$store.cancelModal.ticketCode"></p>
                </div>
            </div>
            <button @click="$store.cancelModal.close()"
                    class="text-gray-400 hover:text-gray-600 w-8 h-8 flex items-center justify-center
                           rounded-lg hover:bg-gray-100 transition -mt-1 -mr-1">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        <p class="text-sm text-gray-600 mb-4">
            Tindakan ini tidak dapat dibatalkan. Masukkan alasan pembatalan tiket ini.
        </p>

        <form :action="`<?php echo e(url('admin/tickets')); ?>/${$store.cancelModal.ticketId}/cancel`"
              method="POST"
              @submit.prevent="$store.cancelModal.reason.trim().length >= 5 && $el.submit()">
            <?php echo csrf_field(); ?>
            <?php echo method_field('PATCH'); ?>

            <label class="block text-sm font-medium text-gray-700 mb-1.5">
                Alasan Pembatalan <span class="text-red-500">*</span>
            </label>
            <textarea name="cancel_reason"
                      x-ref="cancelReasonField"
                      x-model="$store.cancelModal.reason"
                      rows="3"
                      placeholder="Contoh: Pelanggan mencabut permintaan servisâ€¦"
                      class="w-full rounded-xl border border-gray-300 px-3.5 py-2.5 text-sm resize-none
                             focus:outline-none focus:ring-2 focus:ring-red-400 focus:border-transparent
                             transition"></textarea>

            <p class="text-xs mt-1 transition"
               :class="$store.cancelModal.reason.length > 0 && $store.cancelModal.reason.trim().length < 5
                       ? 'text-red-500' : 'text-gray-400'">
                Minimal 5 karakter
                <span x-text="`(${$store.cancelModal.reason.length}/500)`"></span>
            </p>

            <div class="flex gap-2 mt-5">
                <button type="button" @click="$store.cancelModal.close()"
                        class="flex-1 border border-gray-300 text-gray-700 font-medium text-sm
                               rounded-xl py-2.5 hover:bg-gray-50 transition">
                    Kembali
                </button>
                <button type="submit"
                        :disabled="$store.cancelModal.reason.trim().length < 5"
                        :class="$store.cancelModal.reason.trim().length < 5
                            ? 'bg-red-300 cursor-not-allowed'
                            : 'bg-red-600 hover:bg-red-700 cursor-pointer'"
                        class="flex-1 text-white font-semibold text-sm rounded-xl py-2.5 transition">
                    Ya, Batalkan
                </button>
            </div>
        </form>

    </div>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('head'); ?>
<style>[x-cloak]{display:none!important}</style>
<script>
document.addEventListener('alpine:init', () => {
    Alpine.store('cancelModal', {
        modal:      false,
        ticketId:   null,
        ticketCode: '',
        reason:     '',
        open(id, code) {
            this.ticketId   = id;
            this.ticketCode = code;
            this.reason     = '';
            this.modal      = true;
            // Focus textarea after Alpine renders
            setTimeout(() => {
                const el = document.querySelector('[x-ref="cancelReasonField"]');
                if (el) el.focus();
            }, 80);
        },
        close() { this.modal = false; }
    });
});
</script>
<?php $__env->stopPush(); ?>

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