@extends('layouts.app')

@section('content')
    <x-common.page-breadcrumb pageTitle="{{ $title ?? 'Detail Produksi' }}" />

    @php
        $user = auth()->user();

        // ✅ Hanya Developer / Finishing yang boleh klik "Selesai"
        $canFinish = false;
        if ($user) {
            $canFinish =
                (method_exists($user, 'isDeveloper') && $user->isDeveloper()) ||
                (method_exists($user, 'hasRole') && $user->hasRole('Finishing')) ||
                (method_exists($user, 'isFinishing') && $user->isFinishing());
        }
    @endphp

    @if(session('success'))
        <div class="mb-4 rounded-lg bg-success-50 p-4 text-sm text-success-700 dark:bg-success-500/15 dark:text-success-500">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="mb-4 rounded-lg bg-error-50 p-4 text-sm text-error-700 dark:bg-error-500/15 dark:text-error-500">
            {{ session('error') }}
        </div>
    @endif

    <div class="grid grid-cols-1 gap-6 xl:grid-cols-3" x-data="productionDetail()">
        {{-- Main Info --}}
        <div class="xl:col-span-2 space-y-6">
            <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 items-center justify-between">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">{{ $order->invoice_number }}</h3>
                        <span class="inline-flex rounded-full px-3 py-1 text-xs font-medium {{ $order->getProductionStatusBadgeClass() }}">
                            {{ $order->getProductionStatusLabel() }}
                        </span>
                    </div>
                </div>

                <div class="p-5">
                    {{-- Order Items - Detailed --}}
                    <div class="mb-6">
                        <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
                            Detail Item ({{ $order->items->count() }} item)
                        </h4>

                        <div class="space-y-3">
                            @foreach($order->items as $item)
                                <div class="rounded-2xl border border-brand-200 bg-brand-50/70 p-5 shadow-sm dark:border-brand-500/30 dark:bg-brand-500/10">
                                    <div class="flex flex-wrap items-start justify-between gap-4">
                                        <div class="flex-1 min-w-[200px]">
                                            <div class="flex items-center gap-2">
                                                <div>
                                                    <p class="text-xs text-brand-600 dark:text-brand-400">File</p>
                                                    <p class="text-lg font-bold text-brand-800 dark:text-brand-300">{{ $item->file_name }}</p>
                                                </div>
                                                <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {{ $item->getProductionStatusBadgeClass() }}">
                                                    {{ $item->getProductionStatusLabel() }}
                                                </span>
                                            </div>
                                        </div>

                                        <div>
                                            <p class="text-xs text-brand-600 dark:text-brand-400">Produk</p>
                                            <p class="text-sm font-semibold text-brand-800 dark:text-brand-300">{{ $item->product_name }}</p>
                                        </div>

                                        <div>
                                            <p class="text-xs text-brand-600 dark:text-brand-400">Bahan</p>
                                            <p class="text-sm font-semibold text-brand-800 dark:text-brand-300">{{ $item->material_name ?? '-' }}</p>
                                        </div>

                                        <div>
                                            <p class="text-xs text-brand-600 dark:text-brand-400">Ukuran</p>
                                            <p class="text-sm font-semibold text-brand-800 dark:text-brand-300">{{ $item->size_description }}</p>
                                        </div>

                                        <div>
                                            <p class="text-xs text-brand-600 dark:text-brand-400">Sisi</p>
                                            @if(($item->sisi ?? 1) == 2)
                                                <span class="inline-flex items-center rounded-full bg-warning-100 px-2.5 py-0.5 text-sm font-bold text-warning-700 dark:bg-warning-500/20 dark:text-warning-400">
                                                    2 SISI
                                                </span>
                                            @else
                                                <p class="text-sm font-semibold text-brand-800 dark:text-brand-300">1 sisi</p>
                                            @endif
                                        </div>

                                        <div>
                                            <p class="text-xs text-brand-600 dark:text-brand-400">Qty</p>
                                            <p class="text-sm font-semibold text-brand-800 dark:text-brand-300">{{ $item->qty }} pcs</p>
                                        </div>
                                    </div>

                                    @if($item->finishing_note)
                                        <div class="mt-3 rounded-lg bg-white p-3 dark:bg-gray-800">
                                            <p class="text-xs font-semibold text-error-600 dark:text-error-400">CATATAN FINISHING</p>
                                            <p class="mt-1 text-sm font-medium text-gray-800 dark:text-white/90">{{ $item->finishing_note }}</p>
                                        </div>
                                    @endif

                                    {{-- Per-item action buttons --}}
                                    <div class="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-3">
                                        @if($item->canStartItemProduction())
                                            <button type="button"
                                                @click="confirmAction('{{ route('produksi.item.start', $item) }}', 'Mulai Cetak', 'Yakin ingin memulai cetak item &quot;{{ $item->file_name }}&quot;?', 'start')"
                                                class="flex w-full items-center justify-center gap-1.5 rounded-lg bg-brand-500 px-3 py-2 text-xs font-medium text-white hover:bg-brand-600">
                                                <svg class="size-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                                                </svg>
                                                Mulai Cetak
                                            </button>
                                        @endif

                                        @if($item->canMoveItemToFinishing())
                                            <button type="button"
                                                @click="confirmAction('{{ route('produksi.item.finishing', $item) }}', 'Lanjut ke Proses Finishing', 'Yakin ingin melanjutkan item &quot;{{ $item->file_name }}&quot; ke proses finishing?', 'forward')"
                                                class="flex w-full items-center justify-center gap-1.5 rounded-lg bg-blue-light-500 px-3 py-2 text-xs font-medium text-white hover:bg-blue-light-600">
                                                <svg class="size-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                                                </svg>
                                                Lanjut ke Finishing
                                            </button>
                                        @endif

                                        {{-- ✅ COMPLETE (PER ITEM) - hanya Finishing/Developer --}}
                                        @if($item->canMarkItemComplete())
                                            @if($canFinish)
                                                <button type="button"
                                                    @click="confirmAction('{{ route('produksi.item.complete', $item) }}', 'Selesai', 'Yakin item &quot;{{ $item->file_name }}&quot; sudah selesai?', 'complete')"
                                                    class="flex w-full items-center justify-center gap-1.5 rounded-lg bg-success-500 px-3 py-2 text-xs font-medium text-white hover:bg-success-600">
                                                    <svg class="size-3.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>
                                                    Selesai
                                                </button>
                                            @else
                                                <button type="button"
                                                    @click="denyFinish()"
                                                    class="flex w-full items-center justify-center gap-1.5 rounded-lg bg-gray-200 px-3 py-2 text-xs font-medium text-gray-600 cursor-pointer hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
                                                    title="Akses dibatasi">
                                                    <svg class="size-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M12 2a10 10 0 100 20 10 10 0 000-20z" />
                                                    </svg>
                                                    Selesai
                                                </button>
                                            @endif
                                        @endif

                                        @if($item->canRevertItemToPending())
                                            <button type="button"
                                                @click="confirmAction('{{ route('produksi.item.revert-pending', $item) }}', 'Kembali ke Antrian', 'Yakin ingin mengembalikan item &quot;{{ $item->file_name }}&quot; ke antrian?', 'revert')"
                                                class="flex w-full items-center justify-center gap-1.5 rounded-lg border border-warning-300 bg-warning-50 px-3 py-2 text-xs font-medium text-warning-700 hover:bg-warning-100 dark:border-warning-600 dark:bg-warning-500/10 dark:text-warning-400">
                                                <svg class="size-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
                                                </svg>
                                                Ke Antrian
                                            </button>
                                        @endif

                                        @if($item->canRevertItemToProsesCetak())
                                            <button type="button"
                                                @click="confirmAction('{{ route('produksi.item.revert-cetak', $item) }}', 'Kembali ke Proses Cetak', 'Yakin ingin mengembalikan item &quot;{{ $item->file_name }}&quot; ke proses cetak?', 'revert')"
                                                class="flex w-full items-center justify-center gap-1.5 rounded-lg border border-blue-light-300 bg-blue-light-50 px-3 py-2 text-xs font-medium text-blue-light-700 hover:bg-blue-light-100 dark:border-blue-light-600 dark:bg-blue-light-500/10 dark:text-blue-light-400">
                                                <svg class="size-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
                                                </svg>
                                                Ke Cetak
                                            </button>
                                        @endif

                                        @if($item->isSelesai())
                                            <span class="inline-flex items-center gap-1 text-xs text-success-600 dark:text-success-400">
                                                <svg class="size-3.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>
                                                Selesai {{ $item->item_finished_at?->format('H:i') }}
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                        <div>
                            <h4 class="text-sm font-semibold text-gray-500 dark:text-gray-400 mb-3">Data Pelanggan</h4>
                            <dl class="space-y-2">
                                <div>
                                    <dt class="text-xs text-gray-500">Nama</dt>
                                    <dd class="text-sm font-medium text-gray-800 dark:text-white/90">{{ $order->customer_name }}</dd>
                                </div>
                                @if($order->customer_phone)
                                    <div>
                                        <dt class="text-xs text-gray-500">Telepon</dt>
                                        <dd class="text-sm font-medium text-gray-800 dark:text-white/90">{{ $order->customer_phone }}</dd>
                                    </div>
                                @endif
                            </dl>
                        </div>

                        <div>
                            <h4 class="text-sm font-semibold text-gray-500 dark:text-gray-400 mb-3">Info Order</h4>
                            <dl class="space-y-2">
                                <div>
                                    <dt class="text-xs text-gray-500">Tanggal Order</dt>
                                    <dd class="text-sm font-medium text-gray-800 dark:text-white/90">{{ $order->created_at->format('d M Y H:i') }}</dd>
                                </div>
                                <div>
                                    <dt class="text-xs text-gray-500">Designer</dt>
                                    <dd class="text-sm font-medium text-gray-800 dark:text-white/90">{{ $order->designer->name ?? '-' }}</dd>
                                </div>
                                <div>
                                    <dt class="text-xs text-gray-500">Tanggal Bayar</dt>
                                    <dd class="text-sm font-medium text-gray-800 dark:text-white/90">{{ $order->paid_at?->format('d M Y H:i') ?? '-' }}</dd>
                                </div>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Sidebar --}}
        <div class="space-y-6">
            {{-- Info akses --}}
            @if(!$canFinish)
                <div class="rounded-2xl border border-warning-200 bg-warning-50 p-4 text-sm text-warning-800 dark:border-warning-900/40 dark:bg-warning-900/20 dark:text-warning-200">
                    <div class="flex gap-3">
                        <div class="mt-0.5">
                            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M12 2a10 10 0 100 20 10 10 0 000-20z" />
                            </svg>
                        </div>
                        <div>
                            <div class="font-semibold">Akses “Selesai” dibatasi</div>
                            <div class="mt-1 text-xs opacity-90">
                                Untuk menjaga validasi finishing, tombol <b>Selesai</b> hanya dapat diproses oleh <b>Tim Finishing</b> (atau <b>Developer</b>).
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- Item Progress Summary --}}
            @php $summary = $order->getItemStatusSummary(); @endphp
            @if($summary['total'] > 0)
                <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">
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Progress Item</h3>
                    </div>
                    <div class="p-5">
                        <div class="mb-4">
                            <div class="flex h-3 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
                                @if($summary['selesai'] > 0)
                                    <div class="bg-success-500" style="width: {{ ($summary['selesai'] / $summary['total']) * 100 }}%"></div>
                                @endif
                                @if($summary['finishing'] > 0)
                                    <div class="bg-blue-light-500" style="width: {{ ($summary['finishing'] / $summary['total']) * 100 }}%"></div>
                                @endif
                                @if($summary['proses_cetak'] > 0)
                                    <div class="bg-warning-500" style="width: {{ ($summary['proses_cetak'] / $summary['total']) * 100 }}%"></div>
                                @endif
                            </div>
                            <p class="mt-1 text-xs text-gray-500 text-right">{{ $summary['selesai'] }}/{{ $summary['total'] }} selesai</p>
                        </div>

                        <div class="space-y-2">
                            <div class="flex items-center justify-between text-sm">
                                <span class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                                    <span class="h-2.5 w-2.5 rounded-full bg-gray-400"></span>
                                    Antrian
                                </span>
                                <span class="font-medium text-gray-800 dark:text-white/90">{{ $summary['pending'] }}</span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                                    <span class="h-2.5 w-2.5 rounded-full bg-warning-500"></span>
                                    Proses Cetak
                                </span>
                                <span class="font-medium text-gray-800 dark:text-white/90">{{ $summary['proses_cetak'] }}</span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                                    <span class="h-2.5 w-2.5 rounded-full bg-blue-light-500"></span>
                                    Finishing
                                </span>
                                <span class="font-medium text-gray-800 dark:text-white/90">{{ $summary['finishing'] }}</span>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="flex items-center gap-2 text-gray-600 dark:text-gray-400">
                                    <span class="h-2.5 w-2.5 rounded-full bg-success-500"></span>
                                    Selesai
                                </span>
                                <span class="font-medium text-gray-800 dark:text-white/90">{{ $summary['selesai'] }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- Production Actions (Order-level) --}}
            <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">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Update Status Order</h3>
                </div>
                <div class="p-5 space-y-3">
                    @if($order->canStartProduction())
                        <button type="button"
                            @click="confirmAction('{{ route('produksi.start', $order) }}', 'Mulai Cetak', 'Yakin ingin memulai cetak order {{ $order->invoice_number }}? (Semua item akan dipindahkan)', 'start')"
                            class="flex w-full items-center justify-center gap-2 rounded-lg bg-warning-500 px-4 py-3 text-sm font-medium text-white hover:bg-warning-600">
                            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            Mulai Cetak (Semua)
                        </button>
                    @endif

                    @if($order->canMoveToFinishing())
                        <button type="button"
                            @click="confirmAction('{{ route('produksi.finishing', $order) }}', 'Lanjut ke Proses Finishing', 'Yakin ingin melanjutkan semua item ke proses finishing?', 'forward')"
                            class="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-light-500 px-4 py-3 text-sm font-medium text-white hover:bg-blue-light-600">
                            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                            </svg>
                            Lanjut ke Finishing (Semua)
                        </button>
                    @endif

                    {{-- ✅ COMPLETE (ORDER) - hanya Finishing/Developer --}}
                    @if($order->canMarkComplete())
                        @if($canFinish)
                            <button type="button"
                                @click="confirmAction('{{ route('produksi.complete', $order) }}', 'Selesai', 'Yakin semua item sudah selesai?', 'complete')"
                                class="flex w-full items-center justify-center gap-2 rounded-lg bg-success-500 px-4 py-3 text-sm font-medium text-white hover:bg-success-600">
                                <svg class="size-5" 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>
                                Selesai (Semua)
                            </button>
                        @else
                            <button type="button"
                                @click="denyFinish()"
                                class="flex w-full items-center justify-center gap-2 rounded-lg bg-gray-200 px-4 py-3 text-sm font-medium text-gray-600 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
                                title="Akses dibatasi">
                                <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M12 2a10 10 0 100 20 10 10 0 000-20z" />
                                </svg>
                                Selesai (Semua)
                            </button>
                        @endif
                    @endif

                    {{-- Revert Actions --}}
                    @if($order->canRevertToPending())
                        <div class="pt-3 border-t border-gray-200 dark:border-gray-700">
                            <p class="text-xs text-gray-500 mb-2">Kembalikan Status:</p>
                            <button type="button"
                                @click="confirmAction('{{ route('produksi.revert-pending', $order) }}', 'Kembali ke Antrian', 'Yakin ingin mengembalikan order ke antrian? Semua item akan direset.', 'revert')"
                                class="flex w-full items-center justify-center gap-2 rounded-lg border border-warning-300 bg-warning-50 px-4 py-2 text-sm font-medium text-warning-700 hover:bg-warning-100 dark:border-warning-600 dark:bg-warning-500/10 dark:text-warning-400">
                                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
                                </svg>
                                Kembali ke Antrian
                            </button>
                        </div>
                    @endif

                    @if($order->canRevertToProsesCetak())
                        <div class="pt-3 border-t border-gray-200 dark:border-gray-700">
                            <p class="text-xs text-gray-500 mb-2">Kembalikan Status:</p>
                            <button type="button"
                                @click="confirmAction('{{ route('produksi.revert-cetak', $order) }}', 'Kembali ke Proses Cetak', 'Yakin ingin mengembalikan order ke proses cetak?', 'revert')"
                                class="flex w-full items-center justify-center gap-2 rounded-lg border border-blue-light-300 bg-blue-light-50 px-4 py-2 text-sm font-medium text-blue-light-700 hover:bg-blue-light-100 dark:border-blue-light-600 dark:bg-blue-light-500/10 dark:text-blue-light-400">
                                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
                                </svg>
                                Kembali ke Proses Cetak
                            </button>
                        </div>
                    @endif

                    @if($order->isSelesai())
                        <div class="rounded-lg bg-success-50 p-4 text-center dark:bg-success-500/10">
                            <svg class="mx-auto size-10 text-success-500" 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>
                            <p class="mt-2 text-sm font-medium text-success-700 dark:text-success-400">Order Selesai</p>
                            <p class="text-xs text-success-600 dark:text-success-500">{{ $order->finished_at?->format('d M Y H:i') }}</p>
                        </div>
                    @endif

                    <a href="{{ route('produksi.index') }}"
                       class="flex w-full items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                        Kembali ke Daftar
                    </a>
                </div>
            </div>

            {{-- Timeline --}}
            <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">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Riwayat</h3>
                </div>
                <div class="p-5">
                    <div class="space-y-4">
                        <div class="flex gap-3">
                            <div class="flex h-8 w-8 items-center justify-center rounded-full bg-brand-100 text-brand-500 dark:bg-brand-500/20">
                                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                                </svg>
                            </div>
                            <div>
                                <p class="text-sm font-medium text-gray-800 dark:text-white/90">Order Dibuat</p>
                                <p class="text-xs text-gray-500">{{ $order->created_at->format('d M Y H:i') }}</p>
                            </div>
                        </div>

                        @if($order->isPaid())
                            <div class="flex gap-3">
                                <div class="flex h-8 w-8 items-center justify-center rounded-full bg-success-100 text-success-500 dark:bg-success-500/20">
                                    <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>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-800 dark:text-white/90">Pembayaran</p>
                                    <p class="text-xs text-gray-500">{{ $order->paid_at?->format('d M Y H:i') }}</p>
                                </div>
                            </div>
                        @endif

                        @if($order->spk_printed)
                            <div class="flex gap-3">
                                <div class="flex h-8 w-8 items-center justify-center rounded-full bg-blue-light-100 text-blue-light-500 dark:bg-blue-light-500/20">
                                    <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 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
                                    </svg>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-800 dark:text-white/90">SPK Dicetak</p>
                                    <p class="text-xs text-gray-500">{{ $order->spk_printed_at?->format('d M Y H:i') }}</p>
                                </div>
                            </div>
                        @endif

                        @if($order->started_at)
                            <div class="flex gap-3">
                                <div class="flex h-8 w-8 items-center justify-center rounded-full bg-warning-100 text-warning-500 dark:bg-warning-500/20">
                                    <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                    </svg>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-800 dark:text-white/90">Produksi Dimulai</p>
                                    <p class="text-xs text-gray-500">{{ $order->started_at->format('d M Y H:i') }}</p>
                                    <p class="text-xs text-gray-500">oleh {{ $order->operator->name ?? '-' }}</p>
                                </div>
                            </div>
                        @endif

                        @if($order->isFinishing() || $order->isSelesai())
                            <div class="flex gap-3">
                                <div class="flex h-8 w-8 items-center justify-center rounded-full bg-blue-light-100 text-blue-light-500 dark:bg-blue-light-500/20">
                                    <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                                    </svg>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-800 dark:text-white/90">Finishing</p>
                                </div>
                            </div>
                        @endif

                        @if($order->finished_at)
                            <div class="flex gap-3">
                                <div class="flex h-8 w-8 items-center justify-center rounded-full bg-success-100 text-success-500 dark:bg-success-500/20">
                                    <svg class="size-4" 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>
                                <div>
                                    <p class="text-sm font-medium text-gray-800 dark:text-white/90">Selesai</p>
                                    <p class="text-xs text-gray-500">{{ $order->finished_at->format('d M Y H:i') }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        {{-- Confirmation Modal --}}
        <div x-show="showModal"
            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"
            class="fixed inset-0 z-[99999] flex items-center justify-center bg-black/50 p-4"
            @click.self="showModal = false"
            style="display: none;">
            <div class="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900"
                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="mb-4 flex items-center gap-3">
                    <div :class="{
                        'bg-warning-100 text-warning-600': actionType === 'start' || actionType === 'revert',
                        'bg-blue-light-100 text-blue-light-600': actionType === 'forward',
                        'bg-success-100 text-success-600': actionType === 'complete'
                    }" class="flex h-12 w-12 items-center justify-center rounded-full">
                        <svg x-show="actionType === 'start'" class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                        <svg x-show="actionType === 'forward'" class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /></svg>
                        <svg x-show="actionType === 'complete'" class="size-6" 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>
                        <svg x-show="actionType === 'revert'" class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12" /></svg>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white" x-text="modalTitle"></h3>
                    </div>
                </div>

                <p class="mb-6 text-sm text-gray-600 dark:text-gray-400" x-text="modalMessage"></p>

                <div class="flex gap-3">
                    <button @click="showModal = false" type="button"
                        class="flex-1 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                        Batal
                    </button>
                    <form :action="actionUrl" method="POST" class="flex-1">
                        @csrf
                        <button type="submit"
                            :class="{
                                'bg-warning-500 hover:bg-warning-600': actionType === 'start' || actionType === 'revert',
                                'bg-blue-light-500 hover:bg-blue-light-600': actionType === 'forward',
                                'bg-success-500 hover:bg-success-600': actionType === 'complete'
                            }"
                            class="w-full rounded-lg px-4 py-2.5 text-sm font-medium text-white">
                            Ya, Lanjutkan
                        </button>
                    </form>
                </div>
            </div>
        </div>

        {{-- Deny Modal --}}
        <div x-show="denyModal"
            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"
            class="fixed inset-0 z-[99999] flex items-center justify-center bg-black/50 p-4"
            @click.self="denyModal = false"
            style="display:none;">
            <div class="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900"
                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="mb-4 flex items-center gap-3">
                    <div class="flex h-12 w-12 items-center justify-center rounded-full bg-warning-100 text-warning-700 dark:bg-warning-500/20 dark:text-warning-200">
                        <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M12 2a10 10 0 100 20 10 10 0 000-20z" />
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-800 dark:text-white" x-text="denyTitle"></h3>
                    </div>
                </div>

                <p class="mb-6 text-sm text-gray-600 dark:text-gray-400" x-text="denyMessage"></p>

                <button @click="denyModal = false" type="button"
                    class="w-full rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600">
                    Mengerti
                </button>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
function productionDetail() {
    return {
        showModal: false,
        modalTitle: '',
        modalMessage: '',
        actionUrl: '',
        actionType: 'start',

        denyModal: false,
        denyTitle: '',
        denyMessage: '',

        confirmAction(url, title, message, type) {
            this.actionUrl = url;
            this.modalTitle = title;
            this.modalMessage = message;
            this.actionType = type;
            this.showModal = true;
        },

        denyFinish() {
            this.denyTitle = 'Akses dibatasi';
            this.denyMessage = 'Anda tidak diizinkan menekan tombol “Selesai”. Proses “Selesai” hanya dapat dilakukan oleh Tim Finishing (atau Developer) untuk menjaga validasi hasil produksi.';
            this.denyModal = true;
        }
    }
}
</script>
@endpush