@extends('layouts.app')

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

    @php
        $category = $category ?? request('category', 'all');
        $categories = [
            'all' => 'Semua',
            'versant' => 'Versant',
            'indoor' => 'Indoor',
            'outdoor' => 'Outdoor',
        ];

        $prettyProduct = function ($text) {
            $s = trim((string) ($text ?? ''));
            if ($s === '') return '-';

            $s = str_replace(['_', '-', '/'], ' ', $s);
            $s = preg_replace('/\b(OUTDOOR|INDOOR|VERSANT)(?=[A-Z0-9])/i', '$1 ', $s);
            $s = preg_replace('/([a-z])([A-Z])/', '$1 $2', $s);
            $s = preg_replace('/([A-Za-z])\s*(UV|PVC|GSM)(?=\d)/i', '$1 $2', $s);
            $s = preg_replace('/\bFLEKSI\s*(BENNER|BANNER)\b/i', 'FLEKSI $1', $s);
            $s = preg_replace('/(\d+)\s*[xX]\s*(\d+)\s*(\d+)\s*pcs\b/i', '$1x$2 $3pcs', $s);
            $s = preg_replace('/([A-Za-z])(\d)/', '$1 $2', $s);
            $s = preg_replace('/(\d)([A-Za-z])/', '$1 $2', $s);
            $s = preg_replace('/(\d+)\s*[xX]\s*(\d+)/', '$1x$2', $s);
            $s = preg_replace('/\s+/', ' ', trim($s));
            $s = ucwords(strtolower($s));
            $s = preg_replace('/\bGsm\b/', 'GSM', $s);
            $s = preg_replace('/\bPvc\b/', 'PVC', $s);
            $s = preg_replace('/\bUv\b/', 'UV', $s);
            $s = preg_replace('/\b(\d+)\s+GSM\b/', '$1GSM', $s);
            $s = preg_replace('/\bFleksi(Benner|Banner)\b/i', 'Fleksi Banner', $s);
            $s = preg_replace('/\bFleksi\s+Benner\b/i', 'Fleksi Banner', $s);
            $s = preg_replace('/\b(\d+)\s+Pcs\b/i', '$1pcs', $s);
            $s = preg_replace('/\s+/', ' ', $s);

            return trim($s);
        };
    @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="mb-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div class="flex items-center gap-1 rounded-xl bg-gray-100 p-1 dark:bg-gray-800 w-fit">
            <a href="{{ route('produksi.index', ['mode' => 'per_invoice', 'search' => $search, 'category' => $category]) }}"
                class="rounded-lg px-4 py-2 text-sm font-medium transition-colors {{ $viewMode === 'per_invoice' ? 'bg-white text-gray-800 shadow-sm dark:bg-gray-700 dark:text-white' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }}">
                Per Invoice
            </a>
            <a href="{{ route('produksi.index', ['mode' => 'per_item', 'search' => $search, 'category' => $category]) }}"
                class="rounded-lg px-4 py-2 text-sm font-medium transition-colors {{ $viewMode === 'per_item' ? 'bg-white text-gray-800 shadow-sm dark:bg-gray-700 dark:text-white' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300' }}">
                Per Item/File
            </a>
        </div>

        <form action="{{ route('produksi.index') }}" method="GET" class="flex items-center gap-2" id="searchForm">
            <input type="hidden" name="mode" value="{{ $viewMode }}">
            <input type="hidden" name="category" value="{{ $category }}">

            <div class="flex items-center gap-2">
                <x-form.input
                    name="search"
                    id="searchInput"
                    placeholder="Cari file, customer, catatan..."
                    :value="$search ?? ''"
                    :prefix="'<svg class=\'fill-gray-500 dark:fill-gray-400\' width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' fill=\'none\'><path fill-rule=\'evenodd\' clip-rule=\'evenodd\' d=\'M3.04175 9.37363C3.04175 5.87693 5.87711 3.04199 9.37508 3.04199C12.8731 3.04199 15.7084 5.87693 15.7084 9.37363C15.7084 12.8703 12.8731 15.7053 9.37508 15.7053C5.87711 15.7053 3.04175 12.8703 3.04175 9.37363ZM9.37508 1.54199C5.04902 1.54199 1.54175 5.04817 1.54175 9.37363C1.54175 13.6991 5.04902 17.2053 9.37508 17.2053C11.2674 17.2053 13.003 16.5344 14.357 15.4176L17.177 18.238C17.4699 18.5309 17.9448 18.5309 18.2377 18.238C18.5306 17.9451 18.5306 17.4703 18.2377 17.1774L15.418 14.3573C16.5365 13.0033 17.2084 11.2669 17.2084 9.37363C17.2084 5.04817 13.7011 1.54199 9.37508 1.54199Z\' fill=\'\' /></svg>'"
                    class="!h-10 w-64"
                />
            </div>

            <x-ui.button type="submit" size="sm">Cari</x-ui.button>

            @if($search)
                <a href="{{ route('produksi.index', ['mode' => $viewMode, 'category' => $category]) }}"
                   class="inline-flex items-center justify-center rounded-lg px-4 py-3 text-sm font-medium bg-white text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:ring-gray-700 dark:hover:bg-white/[0.03]">
                    Reset
                </a>
            @endif
        </form>
    </div>

    <div class="mb-6 flex flex-wrap items-center gap-2">
        @foreach($categories as $key => $label)
            <a href="{{ request()->fullUrlWithQuery(['category' => $key, 'page' => null]) }}"
               class="rounded-full px-4 py-2 text-sm font-medium ring-1 ring-inset transition
               {{ $category === $key
                    ? 'bg-brand-500 text-white ring-brand-500'
                    : 'bg-white text-gray-700 ring-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:bg-white/[0.03]' }}">
                {{ $label }}
            </a>
        @endforeach
    </div>

    @if($search)
        <div class="mb-4 rounded-lg bg-brand-50 px-4 py-3 text-sm text-brand-700 dark:bg-brand-500/10 dark:text-brand-400">
            Hasil pencarian: <strong>"{{ $search }}"</strong>
        </div>
    @endif

    @if($viewMode === 'per_invoice')
        <div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
            <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 bg-warning-50 dark:bg-warning-500/10 rounded-t-2xl">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-warning-700 dark:text-warning-400">Antrian</h3>
                        <span class="inline-flex items-center justify-center rounded-full bg-warning-500 px-2.5 py-0.5 text-xs font-medium text-white">
                            {{ $pendingOrders->count() }}
                        </span>
                    </div>
                    <p class="text-sm text-warning-600 dark:text-warning-400/80">Order siap dikerjakan, tampil penuh ke bawah</p>
                </div>
                <div class="space-y-3 p-4">
                    @forelse($pendingOrders as $order)
                        <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition hover:border-brand-200 hover:shadow-md dark:border-gray-800 dark:bg-gray-900/40 dark:hover:border-brand-500/30">
                            <div class="mb-3">
                                <a href="{{ route('produksi.show', $order) }}" class="text-sm font-bold text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300">
                                    {{ $order->invoice_number }}
                                </a>
                                <p class="text-xs text-gray-500">{{ $order->customer_name }}</p>
                            </div>

                            <div class="mb-3 space-y-1">
                                @foreach($order->activeItems->take(2) as $item)
                                    <div class="text-xs break-words whitespace-normal leading-snug">
                                        <span class="font-medium text-gray-700 dark:text-gray-300">
                                            {{ $prettyProduct($item->product_name) }}
                                        </span>
                                        <span class="text-gray-500">- {{ $item->file_name }} ({{ $item->qty }}pcs)</span>
                                        @if(($item->sisi ?? 1) == 2)
                                            <span class="inline-flex items-center rounded bg-warning-100 px-1 py-0.5 text-[10px] font-bold text-warning-700 dark:bg-warning-500/20 dark:text-warning-400">2 SISI</span>
                                        @endif
                                        @if($item->finishing_note)
                                            <span class="text-brand-600 dark:text-brand-400">• {{ $item->finishing_note }}</span>
                                        @endif
                                    </div>
                                @endforeach
                                @if($order->activeItems->count() > 2)
                                    <span class="text-xs text-gray-500">+{{ $order->activeItems->count() - 2 }} item lainnya</span>
                                @endif
                            </div>

                            <button
                                type="button"
                                class="flex w-full items-center justify-center gap-2 rounded-lg bg-brand-500 px-3 py-2 text-sm font-medium text-white hover:bg-brand-600"
                                data-action-url="{{ route('produksi.start', $order) }}"
                                data-action-title="Mulai Cetak"
                                data-action-message="Yakin ingin memulai cetak order {{ $order->invoice_number }}?"
                                data-action-type="start"
                                onclick="openProductionModal(this)">
                                <svg class="size-4" 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
                            </button>
                        </div>
                    @empty
                        <div class="p-8 text-center text-sm text-gray-500 dark:text-gray-400">Tidak ada antrian</div>
                    @endforelse
                </div>
            </div>

            <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 bg-blue-light-50 dark:bg-blue-light-500/10 rounded-t-2xl">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-blue-light-700 dark:text-blue-light-400">Proses Cetak</h3>
                        <span class="inline-flex items-center justify-center rounded-full bg-blue-light-500 px-2.5 py-0.5 text-xs font-medium text-white">
                            {{ $prosesOrders->count() }}
                        </span>
                    </div>
                    <p class="text-sm text-blue-light-600 dark:text-blue-light-400/80">Sedang dicetak, siap dilanjutkan ke finishing</p>
                </div>
                <div class="space-y-3 p-4">
                    @forelse($prosesOrders as $order)
                        <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition hover:border-brand-200 hover:shadow-md dark:border-gray-800 dark:bg-gray-900/40 dark:hover:border-brand-500/30">
                            <div class="mb-3">
                                <a href="{{ route('produksi.show', $order) }}" class="text-sm font-bold text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300">
                                    {{ $order->invoice_number }}
                                </a>
                                <p class="text-xs text-gray-500">{{ $order->customer_name }}</p>
                            </div>

                            <div class="mb-3 space-y-1">
                                @foreach($order->activeItems->take(2) as $item)
                                    <div class="text-xs break-words whitespace-normal leading-snug">
                                        <span class="font-medium text-gray-700 dark:text-gray-300">
                                            {{ $prettyProduct($item->product_name) }}
                                        </span>
                                        <span class="text-gray-500">- {{ $item->file_name }} ({{ $item->qty }}pcs)</span>
                                        @if(($item->sisi ?? 1) == 2)
                                            <span class="inline-flex items-center rounded bg-warning-100 px-1 py-0.5 text-[10px] font-bold text-warning-700 dark:bg-warning-500/20 dark:text-warning-400">2 SISI</span>
                                        @endif
                                    </div>
                                @endforeach
                                @if($order->activeItems->count() > 2)
                                    <span class="text-xs text-gray-500">+{{ $order->activeItems->count() - 2 }} item lainnya</span>
                                @endif
                            </div>

                            <div class="space-y-2">
                                <button
                                    type="button"
                                    class="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-light-500 px-3 py-2 text-sm font-medium text-white hover:bg-blue-light-600"
                                    data-action-url="{{ route('produksi.finishing', $order) }}"
                                    data-action-title="Lanjut ke Proses Finishing"
                                    data-action-message="Yakin ingin melanjutkan order {{ $order->invoice_number }} ke proses finishing?"
                                    data-action-type="forward"
                                    onclick="openProductionModal(this)">
                                    Lanjut ke Finishing
                                </button>

                                <button
                                    type="button"
                                    class="flex w-full items-center justify-center gap-2 rounded-lg border border-warning-300 bg-warning-50 px-3 py-1.5 text-xs font-medium text-warning-700 hover:bg-warning-100 dark:border-warning-600 dark:bg-warning-500/10 dark:text-warning-400 dark:hover:bg-warning-500/20"
                                    data-action-url="{{ route('produksi.revert-pending', $order) }}"
                                    data-action-title="Kembali ke Antrian"
                                    data-action-message="Yakin ingin mengembalikan order {{ $order->invoice_number }} ke antrian? (Status akan kembali ke pending)"
                                    data-action-type="revert"
                                    onclick="openProductionModal(this)">
                                    Kembali ke Antrian
                                </button>
                            </div>
                        </div>
                    @empty
                        <div class="p-8 text-center text-sm text-gray-500 dark:text-gray-400">Tidak ada yang dicetak</div>
                    @endforelse
                </div>
            </div>
        </div>
    @else
        <div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
            <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 bg-warning-50 dark:bg-warning-500/10 rounded-t-2xl">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-warning-700 dark:text-warning-400">Antrian</h3>
                        <span class="inline-flex items-center justify-center rounded-full bg-warning-500 px-2.5 py-0.5 text-xs font-medium text-white">
                            {{ $pendingItems->count() }}
                        </span>
                    </div>
                    <p class="text-sm text-warning-600 dark:text-warning-400/80">Item siap dikerjakan, tampil penuh ke bawah</p>
                </div>
                <div class="space-y-3 p-4">
                    @forelse($pendingItems as $item)
                        <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition hover:border-brand-200 hover:shadow-md dark:border-gray-800 dark:bg-gray-900/40 dark:hover:border-brand-500/30">
                            <div class="mb-2">
                                <p class="text-base font-bold text-gray-800 dark:text-white break-words">{{ $item->file_name }}</p>
                                <a href="{{ route('produksi.show', $item->order) }}" class="text-xs font-medium text-brand-600 hover:text-brand-700 dark:text-brand-400">
                                    {{ $item->order->invoice_number }}
                                </a>
                                <span class="text-xs text-gray-500"> - {{ $item->order->customer_name }}</span>
                            </div>

                            <div class="mb-3 space-y-1 text-xs text-gray-600 dark:text-gray-400">
                                <div class="break-words whitespace-normal">
                                    <span class="font-semibold text-gray-800 dark:text-gray-200">Produk:</span>
                                    <span>{{ $prettyProduct($item->product_name) }}</span>
                                </div>

                                @if($item->material_name)
                                    <div class="break-words whitespace-normal">
                                        <span class="font-semibold text-gray-800 dark:text-gray-200">Bahan:</span>
                                        <span>{{ $item->material_name }}</span>
                                    </div>
                                @endif

                                <div class="break-words whitespace-normal">
                                    <span class="font-semibold text-gray-800 dark:text-gray-200">Ukuran:</span>
                                    <span>{{ $item->size_description }}</span>
                                </div>

                                <div class="flex flex-wrap items-center gap-2">
                                    <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-300">
                                        Qty: {{ $item->qty }} pcs
                                    </span>

                                    @if(($item->sisi ?? 1) == 2)
                                        <span class="inline-flex items-center rounded-full bg-warning-100 px-2 py-0.5 text-[11px] font-bold text-warning-700 dark:bg-warning-500/20 dark:text-warning-400">
                                            2 SISI
                                        </span>
                                    @endif
                                </div>
                            </div>

                            @if($item->finishing_note)
                                <div class="mb-3 rounded-lg bg-error-50 px-3 py-2 dark:bg-error-500/10">
                                    <p class="text-xs font-semibold text-error-600 dark:text-error-400">FINISHING:</p>
                                    <p class="text-xs text-error-700 dark:text-error-300 break-words">{{ $item->finishing_note }}</p>
                                </div>
                            @endif

                            <button
                                type="button"
                                class="flex w-full items-center justify-center gap-2 rounded-lg bg-brand-500 px-3 py-2 text-sm font-medium text-white hover:bg-brand-600"
                                data-action-url="{{ route('produksi.item.start', $item) }}"
                                data-action-title="Mulai Cetak"
                                data-action-message="{{ 'Yakin ingin memulai cetak item &quot;' . e($item->file_name) . '&quot;?' }}"
                                data-action-type="start"
                                onclick="openProductionModal(this)">
                                Mulai Cetak
                            </button>
                        </div>
                    @empty
                        <div class="p-8 text-center text-sm text-gray-500 dark:text-gray-400">Tidak ada antrian</div>
                    @endforelse
                </div>
            </div>

            <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 bg-blue-light-50 dark:bg-blue-light-500/10 rounded-t-2xl">
                    <div class="flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-blue-light-700 dark:text-blue-light-400">Proses Cetak</h3>
                        <span class="inline-flex items-center justify-center rounded-full bg-blue-light-500 px-2.5 py-0.5 text-xs font-medium text-white">
                            {{ $prosesItems->count() }}
                        </span>
                    </div>
                    <p class="text-sm text-blue-light-600 dark:text-blue-light-400/80">Sedang dicetak, siap dilanjutkan ke finishing</p>
                </div>
                <div class="space-y-3 p-4">
                    @forelse($prosesItems as $item)
                        <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition hover:border-brand-200 hover:shadow-md dark:border-gray-800 dark:bg-gray-900/40 dark:hover:border-brand-500/30">
                            <div class="mb-2">
                                <p class="text-base font-bold text-gray-800 dark:text-white break-words">{{ $item->file_name }}</p>
                                <a href="{{ route('produksi.show', $item->order) }}" class="text-xs font-medium text-brand-600 hover:text-brand-700 dark:text-brand-400">
                                    {{ $item->order->invoice_number }}
                                </a>
                                <span class="text-xs text-gray-500"> - {{ $item->order->customer_name }}</span>
                            </div>

                            <div class="mb-3 space-y-1 text-xs text-gray-600 dark:text-gray-400">
                                <div class="break-words whitespace-normal">
                                    <span class="font-semibold text-gray-800 dark:text-gray-200">Produk:</span>
                                    <span>{{ $prettyProduct($item->product_name) }}</span>
                                </div>

                                @if($item->material_name)
                                    <div class="break-words whitespace-normal">
                                        <span class="font-semibold text-gray-800 dark:text-gray-200">Bahan:</span>
                                        <span>{{ $item->material_name }}</span>
                                    </div>
                                @endif

                                <div class="break-words whitespace-normal">
                                    <span class="font-semibold text-gray-800 dark:text-gray-200">Ukuran:</span>
                                    <span>{{ $item->size_description }}</span>
                                </div>

                                <div class="flex flex-wrap items-center gap-2">
                                    <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-300">
                                        Qty: {{ $item->qty }} pcs
                                    </span>

                                    @if(($item->sisi ?? 1) == 2)
                                        <span class="inline-flex items-center rounded-full bg-warning-100 px-2 py-0.5 text-[11px] font-bold text-warning-700 dark:bg-warning-500/20 dark:text-warning-400">
                                            2 SISI
                                        </span>
                                    @endif
                                </div>
                            </div>

                            @if($item->finishing_note)
                                <div class="mb-3 rounded-lg bg-error-50 px-3 py-2 dark:bg-error-500/10">
                                    <p class="text-xs font-semibold text-error-600 dark:text-error-400">FINISHING:</p>
                                    <p class="text-xs text-error-700 dark:text-error-300 break-words">{{ $item->finishing_note }}</p>
                                </div>
                            @endif

                            <div class="space-y-2">
                                <button
                                    type="button"
                                    class="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-light-500 px-3 py-2 text-sm font-medium text-white hover:bg-blue-light-600"
                                    data-action-url="{{ route('produksi.item.finishing', $item) }}"
                                    data-action-title="Lanjut ke Proses Finishing"
                                    data-action-message="{{ 'Yakin ingin melanjutkan item &quot;' . e($item->file_name) . '&quot; ke proses finishing?' }}"
                                    data-action-type="forward"
                                    onclick="openProductionModal(this)">
                                    Lanjut ke Finishing
                                </button>

                                <button
                                    type="button"
                                    class="flex w-full items-center justify-center gap-2 rounded-lg border border-warning-300 bg-warning-50 px-3 py-1.5 text-xs font-medium text-warning-700 hover:bg-warning-100 dark:border-warning-600 dark:bg-warning-500/10 dark:text-warning-400 dark:hover:bg-warning-500/20"
                                    data-action-url="{{ route('produksi.item.revert-pending', $item) }}"
                                    data-action-title="Kembali ke Antrian"
                                    data-action-message="{{ 'Yakin ingin mengembalikan item &quot;' . e($item->file_name) . '&quot; ke antrian?' }}"
                                    data-action-type="revert"
                                    onclick="openProductionModal(this)">
                                    Kembali ke Antrian
                                </button>
                            </div>
                        </div>
                    @empty
                        <div class="p-8 text-center text-sm text-gray-500 dark:text-gray-400">Tidak ada yang dicetak</div>
                    @endforelse
                </div>
            </div>
        </div>
    @endif

    <div id="productionActionModal" class="fixed inset-0 z-[99999] hidden items-center justify-center bg-black/50 p-4">
        <div class="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
            <div class="mb-4 flex items-center gap-3">
                <div id="productionActionIconWrap" class="flex h-12 w-12 items-center justify-center rounded-full bg-brand-100 text-brand-600">
                    <svg id="iconStart" 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 id="iconForward" class="size-6 hidden" 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 id="iconRevert" class="size-6 hidden" 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 id="productionActionTitle" class="text-lg font-semibold text-gray-800 dark:text-white"></h3>
                </div>
            </div>

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

            <div class="flex gap-3">
                <button type="button"
                    onclick="closeProductionModal()"
                    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 id="productionActionForm" method="POST" class="flex-1">
                    @csrf
                    <button id="productionActionSubmit"
                        type="submit"
                        class="w-full rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600">
                        Ya, Lanjutkan
                    </button>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    function openProductionModal(button) {
        const modal = document.getElementById('productionActionModal');
        const title = document.getElementById('productionActionTitle');
        const message = document.getElementById('productionActionMessage');
        const form = document.getElementById('productionActionForm');
        const submit = document.getElementById('productionActionSubmit');
        const iconWrap = document.getElementById('productionActionIconWrap');
        const iconStart = document.getElementById('iconStart');
        const iconForward = document.getElementById('iconForward');
        const iconRevert = document.getElementById('iconRevert');

        const actionUrl = button.getAttribute('data-action-url') || '';
        const actionTitle = button.getAttribute('data-action-title') || '';
        const actionMessage = button.getAttribute('data-action-message') || '';
        const actionType = button.getAttribute('data-action-type') || 'start';

        title.textContent = actionTitle;
        message.innerHTML = actionMessage;
        form.setAttribute('action', actionUrl);

        iconStart.classList.add('hidden');
        iconForward.classList.add('hidden');
        iconRevert.classList.add('hidden');

        iconWrap.className = 'flex h-12 w-12 items-center justify-center rounded-full';

        if (actionType === 'forward') {
            iconWrap.classList.add('bg-blue-light-100', 'text-blue-light-600');
            submit.className = 'w-full rounded-lg bg-blue-light-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-blue-light-600';
            iconForward.classList.remove('hidden');
        } else if (actionType === 'revert') {
            iconWrap.classList.add('bg-warning-100', 'text-warning-600');
            submit.className = 'w-full rounded-lg bg-warning-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-warning-600';
            iconRevert.classList.remove('hidden');
        } else {
            iconWrap.classList.add('bg-brand-100', 'text-brand-600');
            submit.className = 'w-full rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600';
            iconStart.classList.remove('hidden');
        }

        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    function closeProductionModal() {
        const modal = document.getElementById('productionActionModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }

    document.addEventListener('click', function (e) {
        const modal = document.getElementById('productionActionModal');
        if (e.target === modal) {
            closeProductionModal();
        }
    });

    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
            closeProductionModal();
        }
    });
</script>
@endpush