{{-- Kasir Dashboard (Fokus: SIAP DIAMBIL) --}}
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

@php
    $readyTotal = 0;
    if (isset($ready_for_pickup_orders)) {
        $readyTotal = method_exists($ready_for_pickup_orders, 'total')
            ? (int) $ready_for_pickup_orders->total()
            : (int) collect($ready_for_pickup_orders)->count();
    }
@endphp

{{-- ===== Banner ===== --}}
<div class="mb-6 rounded-2xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-white/[0.03]" style="font-family:'Poppins',sans-serif;">
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div class="min-w-0 flex-1">
            <div class="inline-flex items-center gap-2 rounded-full bg-success-50 px-3 py-1 text-xs font-semibold text-success-700 dark:bg-success-500/15 dark:text-success-300">
                <span class="inline-flex size-2 rounded-full bg-success-500"></span>
                Kasir Mode
            </div>
            <p class="mt-2 text-sm font-semibold text-gray-800 dark:text-white/90">
                ✅ Prioritas utama: <span class="text-success-700 dark:text-success-300">Infokan ke costumer</span>
                <span class="text-gray-500 dark:text-gray-400 font-normal">— pastikan order yang selesai cepat diambil customer.</span>
            </p>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                Tips: Klik invoice untuk cek detail. Gunakan tombol WA untuk mengabari customer.
            </p>
        </div>

        <div class="flex flex-wrap items-center gap-2 justify-end">
            <a href="{{ route('kasir.index') }}"
               class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2 text-sm font-semibold text-white shadow-theme-xs transition hover:bg-brand-600"
               title="Buka menu Kasir (Tagihan)">
                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
                Buka Kasir
            </a>

            <a href="https://wa.me/628990799960" target="_blank" rel="noopener noreferrer"
               class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-800 transition hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:hover:bg-white/[0.03]"
               title="Bantuan via WhatsApp">
                <svg class="size-4" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347M12.051 21.785h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26C2.168 6.442 6.603 2.008 12.055 2.008c2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884"/>
                </svg>
                Bantuan
            </a>
        </div>
    </div>
</div>

{{-- ===== PRIORITY SECTION: SIAP DIAMBIL ===== --}}
<div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
    <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div class="min-w-0">
                <div class="flex items-center gap-3">
                    <div class="flex size-10 items-center justify-center rounded-xl bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-300">
                        <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                    </div>

                    <div class="min-w-0">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
                            Siap Diambil
                            <span class="ml-2 inline-flex items-center rounded-full bg-success-50 px-2.5 py-0.5 text-xs font-semibold text-success-700 dark:bg-success-500/15 dark:text-success-300">
                                {{ $readyTotal }} Order
                            </span>
                        </h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Order yang sudah selesai dan menunggu pengambilan. (Ini yang paling penting.)
                        </p>
                    </div>
                </div>
            </div>

            <div class="w-full sm:w-[380px]">
                <form method="GET" action="{{ route('dashboard') }}">
                    <div class="flex gap-2">
                        <x-form.input
                            name="pickup_search"
                            :value="request('pickup_search')"
                            placeholder="Cari invoice / pelanggan..."
                            class="!h-10 !text-sm !py-0 flex-1"
                        >
                            <x-slot:prefix>
                                <svg class="size-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <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>
                            </x-slot:prefix>

                            @if(request('pickup_search'))
                                <x-slot:suffix>
                                    <a href="{{ route('dashboard') }}"
                                       class="flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                                       title="Hapus filter">
                                        <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </a>
                                </x-slot:suffix>
                            @endif
                        </x-form.input>

                        <button type="submit"
                                class="inline-flex items-center gap-2 rounded-lg bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-black dark:bg-gray-700 dark:hover:bg-gray-600">
                            Lihat
                            <span class="text-white/70">→</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr class="border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900/40">
                    <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">Invoice</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">Pelanggan</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">Order</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">Selesai</th>
                    <th class="px-5 py-3 text-right text-xs font-semibold uppercase tracking-wide text-gray-500">Aksi</th>
                </tr>
            </thead>

            <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                @forelse($ready_for_pickup_orders ?? [] as $order)
                    @php
                        $waRaw = $order->wa_notified_at ?? null;
                        $waSent = !is_null($waRaw) && $waRaw !== '' && $waRaw !== '0000-00-00 00:00:00';
                        $notifyUrl = route('orders.notify-wa', $order);
                    @endphp

                    <tr class="hover:bg-gray-50 dark:hover:bg-white/[0.02]">
                        <td class="px-5 py-4">
                            <a href="{{ route('orders.show', $order) }}"
                               class="text-sm font-semibold text-brand-600 hover:text-brand-700 dark:text-brand-400 hover:underline">
                                {{ $order->invoice_number }}
                            </a>

                            <div class="mt-1 flex flex-wrap items-center gap-2">
                                <span class="inline-flex items-center rounded-full bg-success-50 px-2 py-0.5 text-[10px] font-semibold text-success-700 dark:bg-success-500/15 dark:text-success-300">
                                    READY
                                </span>

                                <span
                                    id="wa-badge-{{ $order->id }}"
                                    class="inline-flex items-center rounded-full bg-brand-50 px-2 py-0.5 text-[10px] font-semibold text-brand-700 dark:bg-brand-500/15 dark:text-brand-300"
                                    style="{{ $waSent ? '' : 'display:none;' }}"
                                >
                                    TERKIRIM
                                </span>
                            </div>
                        </td>

                        <td class="px-5 py-4 text-sm font-medium text-gray-800 dark:text-white/90">
                            {{ $order->customer_name }}
                        </td>

                        <td class="px-5 py-4 text-sm text-gray-500 dark:text-gray-400">
                            {{ $order->created_at?->format('d M H:i') ?? '-' }}
                        </td>

                        <td class="px-5 py-4 text-sm text-gray-500 dark:text-gray-400">
                            {{ $order->finished_at?->format('d M H:i') ?? '-' }}
                        </td>

                        <td class="px-5 py-4">
                            <div class="flex items-center justify-end gap-2">
                                @if($order->customer_phone)
                                    @if($waSent)
                                        <span
                                            class="inline-flex items-center gap-1.5 rounded-lg bg-gray-400 px-3 py-2 text-xs font-semibold text-white shadow-theme-xs cursor-not-allowed opacity-80"
                                            title="Sudah diinfokan"
                                        >
                                            <svg class="size-4" viewBox="0 0 24 24" fill="currentColor">
                                                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.520.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.520-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.510-.173-.008-.371-.010-.57-.010-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347"/>
                                            </svg>
                                            TERKIRIM
                                        </span>
                                    @else
                                        <a
                                            id="wa-btn-{{ $order->id }}"
                                            href="{{ $notifyUrl }}"
                                            onclick="return waInstantNotify(this, 'wa-badge-{{ $order->id }}');"
                                            class="inline-flex items-center gap-1.5 rounded-lg bg-success-500 px-3 py-2 text-xs font-semibold text-white shadow-theme-xs hover:bg-success-600"
                                            style="color:#fff;"
                                            title="Kirim WA ke {{ $order->customer_name }}"
                                        >
                                            <svg class="size-4" viewBox="0 0 24 24" fill="currentColor">
                                                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.940 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.390-1.475-.883-.788-1.480-1.761-1.653-2.059-.173-.297-.018-.458.130-.606.134-.133.298-.347.446-.520.149-.174.198-.298.298-.497.099-.198.050-.371-.025-.520-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.500-.669-.510-.173-.008-.371-.010-.570-.010-.198 0-.520.074-.792.372-.272.297-1.040 1.016-1.040 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.200 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.360.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.570-.347"/>
                                            </svg>
                                            <span data-wa-label>WA</span>
                                        </a>
                                    @endif
                                @endif

                                <button type="button"
                                        @click="$dispatch('open-confirm-modal', {
                                            title: 'Konfirmasi Pengambilan',
                                            description: 'Apakah anda yakin ingin menandai order {{ $order->invoice_number }} sebagai sudah diambil?',
                                            action: '{{ route('orders.mark-picked-up', $order) }}',
                                            confirmText: 'Ya, Sudah Diambil',
                                            color: 'success'
                                        })"
                                        class="inline-flex items-center gap-1.5 rounded-lg bg-brand-500 px-3 py-2 text-xs font-semibold text-white shadow-theme-xs hover:bg-brand-600"
                                        style="color:#fff;">
                                    <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                    </svg>
                                    Tandai Sudah diambil
                                </button>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-5 py-10 text-center">
                            <div class="flex flex-col items-center gap-2">
                                <div class="flex size-12 items-center justify-center rounded-full bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400">
                                    <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                </div>
                                <p class="text-sm font-semibold text-gray-700 dark:text-gray-300">
                                    @if(request('pickup_search'))
                                        Tidak ada order siap diambil untuk pencarian “{{ request('pickup_search') }}”
                                    @else
                                        Tidak ada order yang siap diambil
                                    @endif
                                </p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">Kalau kosong, berarti aman. ✅</p>
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if(isset($ready_for_pickup_orders) && method_exists($ready_for_pickup_orders, 'hasPages') && $ready_for_pickup_orders->hasPages())
        <div class="border-t border-gray-200 px-5 py-4 dark:border-gray-800">
            {{ $ready_for_pickup_orders->appends(['pickup_search' => request('pickup_search')])->links() }}
        </div>
    @endif
</div>

{{-- JS: klik WA -> instant UI (tanpa refresh) + buka notify di tab baru --}}
<script>
function waInstantNotify(anchor, badgeId) {
    if (anchor.dataset.sent === '1') return false;
    anchor.dataset.sent = '1';

    anchor.classList.remove('bg-success-500', 'hover:bg-success-600');
    anchor.classList.add('bg-gray-400', 'cursor-not-allowed', 'opacity-80');
    anchor.style.pointerEvents = 'none';

    const label = anchor.querySelector('[data-wa-label]');
    if (label) label.textContent = 'TERKIRIM';

    const badge = document.getElementById(badgeId);
    if (badge) badge.style.display = 'inline-flex';

    window.open(anchor.href, '_blank', 'noopener,noreferrer');

    return false;
}
</script>

<script>
let lastOrderIds = new Set();

function playNotif(){
    const ctx = new (window.AudioContext || window.webkitAudioContext)();
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();

    osc.connect(gain);
    gain.connect(ctx.destination);

    osc.frequency.value = 880;
    osc.type = "sine";

    osc.start();

    gain.gain.exponentialRampToValueAtTime(
        0.00001,
        ctx.currentTime + 1
    );
}

function checkOrders(){
    fetch(window.location.href)
    .then(res => res.text())
    .then(html => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html,'text/html');

        const rows = doc.querySelectorAll("tbody tr");
        let newOrder = false;

        rows.forEach(row => {
            const invoice = row.querySelector("a")?.textContent;
            if (invoice && !lastOrderIds.has(invoice)) {
                newOrder = true;
                lastOrderIds.add(invoice);
            }
        });

        if (newOrder) {
            playNotif();
        }

        const currentRows = document.querySelectorAll("tbody tr");

        currentRows.forEach(row => {
            const badge = row.querySelector('[id^="wa-badge"]');
            if (badge && badge.style.display === "none") {
                row.style.background = "#fff8e1";
            }
        });
    });
}

setInterval(checkOrders,10000);
</script>

{{-- Footer --}}
<div class="mt-12 border-t border-gray-200 pt-6 text-center text-xs text-gray-500 dark:border-gray-800 dark:text-gray-400">
    <p>
        © 2026 <span class="font-semibold text-gray-700 dark:text-gray-300">aplikasipercetakan.com</span>.
        All rights reserved.
    </p>
</div>
@once
    @includeIf('partials.attendance-popup')
@endonce
{{-- Confirmation Modal: diletakkan di luar section/dashboard --}}
<x-ui.confirm />
