@extends('layouts.app')

@section('content')
    <div class="p-4 sm:p-6 lg:p-8">
        <!-- Header -->
        <div class="mb-6">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900 flex items-center gap-2">
                        🔨 Produksi
                    </h1>
                    <p class="text-gray-500 mt-1">Kelola order produksi dan tracking status pengerjaan</p>
                </div>
                <div class="flex gap-2">
                    <a href="{{ route('productions.kanban') }}"
                        class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2">
                            </path>
                        </svg>
                        Kanban View
                    </a>
                </div>
            </div>
        </div>

        <!-- Stats Cards -->
        @php
            $labels = \App\Models\ProductionOrder::getAllStatusLabels();
        @endphp
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4 mb-6">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-gray-500">{{ $labels['pending'] }}</p>
                        <p class="text-2xl font-bold text-gray-600">{{ $stats['pending'] }}</p>
                    </div>
                    <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-yellow-600">{{ $labels['queued'] }}</p>
                        <p class="text-2xl font-bold text-yellow-600">{{ $stats['queued'] }}</p>
                    </div>
                    <div class="w-10 h-10 bg-yellow-50 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10">
                            </path>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-orange-600">{{ $labels['in_progress'] }}</p>
                        <p class="text-2xl font-bold text-orange-600">{{ $stats['in_progress'] }}</p>
                    </div>
                    <div class="w-10 h-10 bg-orange-50 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-green-600">{{ $labels['completed'] }}</p>
                        <p class="text-2xl font-bold text-green-600">{{ $stats['completed'] }}</p>
                    </div>
                    <div class="w-10 h-10 bg-green-50 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <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"></path>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-blue-600">{{ $labels['ready_for_pickup'] }}</p>
                        <p class="text-2xl font-bold text-blue-600">{{ $stats['ready_for_pickup'] }}</p>
                    </div>
                    <div class="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4">
                            </path>
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
            <form action="{{ route('productions.index') }}" method="GET" class="flex flex-wrap gap-4">
                <div class="flex-1 min-w-[200px]">
                    <label class="block text-xs font-medium text-gray-500 mb-1">Cari</label>
                    <input type="text" name="search" value="{{ request('search') }}"
                        placeholder="Kode order, produk, atau pelanggan..."
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                </div>
                <div class="w-40">
                    <label class="block text-xs font-medium text-gray-500 mb-1">Status</label>
                    <select name="status"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                        @php
                            $labels = \App\Models\ProductionOrder::getAllStatusLabels();
                        @endphp
                        <option value="">Semua Status</option>
                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Aktif</option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>
                            {{ $labels['pending'] }}
                        </option>
                        <option value="queued" {{ request('status') == 'queued' ? 'selected' : '' }}>{{ $labels['queued'] }}
                        </option>
                        <option value="in_progress" {{ request('status') == 'in_progress' ? 'selected' : '' }}>
                            {{ $labels['in_progress'] }}
                        </option>
                        <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>
                            {{ $labels['completed'] }}
                        </option>
                        <option value="ready_for_pickup" {{ request('status') == 'ready_for_pickup' ? 'selected' : '' }}>
                            {{ $labels['ready_for_pickup'] }}
                        </option>
                        <option value="delivered" {{ request('status') == 'delivered' ? 'selected' : '' }}>
                            {{ $labels['delivered'] }}
                        </option>
                    </select>
                </div>
                <div class="w-40">
                    <label class="block text-xs font-medium text-gray-500 mb-1">Ditugaskan Ke</label>
                    <select name="assigned_to"
                        class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                        <option value="">Semua</option>
                        @foreach($users as $user)
                            <option value="{{ $user->id }}" {{ request('assigned_to') == $user->id ? 'selected' : '' }}>
                                {{ $user->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="flex items-end gap-2">
                    <button type="submit"
                        class="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors">
                        Filter
                    </button>
                    <a href="{{ route('productions.index') }}"
                        class="px-4 py-2 bg-gray-100 text-gray-600 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors">
                        Reset
                    </a>
                </div>
            </form>
        </div>

        <!-- Bulk Actions -->
        <div id="bulkActions"
            class="bg-red-50 border border-red-200 rounded-xl p-4 mb-6 hidden flex items-center justify-between">
            <span class="text-sm text-red-700 font-medium"><span id="selectedCount">0</span> item terpilih</span>
            <form id="bulkDeleteForm" action="{{ route('productions.bulk-destroy') }}" method="POST"
                onsubmit="return confirm('Apakah Anda yakin ingin menghapus item yang dipilih beserta file-nya?')">
                @csrf
                <div id="bulkDeleteInputs"></div>
                <button type="submit"
                    class="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700 transition-colors">
                    Hapus Terpilih
                </button>
            </form>
        </div>

        <!-- Productions Table -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            @if($productions->isEmpty())
                <div class="text-center py-12">
                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z">
                        </path>
                    </svg>
                    <h3 class="mt-2 text-sm font-medium text-gray-900">Belum ada order produksi</h3>
                    <p class="mt-1 text-sm text-gray-500">Order produksi akan muncul saat ada transaksi dengan produk
                        custom/service</p>
                </div>
            @else
                <div class="space-y-4 p-4 md:hidden">
                    @foreach($productions as $production)
                        @php
                            $orderNote = trim((string) ($production->customer_notes
                                ?? $production->notes
                                ?? ($production->transaction->note ?? '')));
                        @endphp
                        <div class="rounded-2xl border border-gray-200 bg-white p-4 shadow-sm">
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <div class="flex items-center gap-2">
                                        <input type="checkbox" value="{{ $production->id }}"
                                            class="check-item rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                        <a href="{{ route('productions.show', $production) }}"
                                            class="text-sm font-semibold text-indigo-600 hover:text-indigo-800 break-words">
                                            {{ $production->order_code }}
                                        </a>
                                    </div>
                                    <p class="mt-1 text-sm font-medium text-gray-900">{{ $production->product_name }}</p>
                                    <p class="mt-1 text-xs text-gray-500">
                                        {{ $production->transaction->customer_name ?? 'Walk-in' }} •
                                        {{ $production->transaction->transaction_code ?? '-' }}
                                    </p>
                                </div>
                                <select onchange="quickUpdateStatus({{ $production->id }}, this.value)"
                                    class="w-32 shrink-0 rounded-lg border border-gray-300 px-2 py-1.5 text-xs focus:border-indigo-500 focus:ring-indigo-500">
                                    <option value="" disabled>Status</option>
                                    <option value="pending" {{ $production->status == 'pending' ? 'selected' : '' }}>{{ $labels['pending'] }}</option>
                                    <option value="queued" {{ $production->status == 'queued' ? 'selected' : '' }}>{{ $labels['queued'] }}</option>
                                    <option value="in_progress" {{ $production->status == 'in_progress' ? 'selected' : '' }}>{{ $labels['in_progress'] }}</option>
                                    <option value="completed" {{ $production->status == 'completed' ? 'selected' : '' }}>{{ $labels['completed'] }}</option>
                                    <option value="ready_for_pickup" {{ $production->status == 'ready_for_pickup' ? 'selected' : '' }}>{{ $labels['ready_for_pickup'] }}</option>
                                    <option value="delivered" {{ $production->status == 'delivered' ? 'selected' : '' }}>{{ $labels['delivered'] }}</option>
                                </select>
                            </div>

                            <div class="mt-4 grid grid-cols-1 gap-3 text-sm text-gray-600">
                                <div>
                                    <p class="text-[11px] font-semibold uppercase tracking-wide text-gray-400">Ukuran</p>
                                    <p class="mt-1 text-gray-900">{{ $production->formatted_size ?: '-' }}</p>
                                </div>
                                <div>
                                    <p class="text-[11px] font-semibold uppercase tracking-wide text-gray-400">Catatan Order</p>
                                    <p class="mt-1 break-words text-gray-900">{{ $orderNote !== '' ? $orderNote : '-' }}</p>
                                </div>
                                <div>
                                    <p class="text-[11px] font-semibold uppercase tracking-wide text-gray-400">Tanggal</p>
                                    <p class="mt-1 text-gray-900">{{ $production->created_at->format('d/m/Y') }}</p>
                                </div>
                            </div>

                            <div class="mt-4 flex flex-wrap items-center gap-2">
                                <a href="{{ route('productions.show', $production) }}"
                                    class="inline-flex items-center rounded-lg border border-indigo-200 bg-indigo-50 px-3 py-2 text-sm font-medium text-indigo-700">
                                    Detail
                                </a>
                                @if($production->file_path)
                                    <a href="{{ route('productions.download', $production) }}"
                                        class="inline-flex items-center rounded-lg border border-green-200 bg-green-50 px-3 py-2 text-sm font-medium text-green-700">
                                        Download File
                                    </a>
                                @endif
                                <button onclick="openUploadModal('{{ $production->id }}')"
                                    class="inline-flex items-center rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-sm font-medium text-blue-700">
                                    {{ $production->file_path ? 'Ganti File' : 'Upload File' }}
                                </button>
                                <button
                                    onclick="renameProduct({{ $production->id }}, '{{ addslashes($production->product_name) }}')"
                                    class="inline-flex items-center rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm font-medium text-gray-700">
                                    Ubah Nama
                                </button>
                                <form action="{{ route('productions.destroy', $production) }}" method="POST"
                                    onsubmit="return confirm('Hapus produksi ini beserta filenya?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                        class="inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm font-medium text-red-700">
                                        Hapus
                                    </button>
                                </form>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="hidden md:block overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-center w-10">
                                    <input type="checkbox" id="checkAll"
                                        class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Produk</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Pelanggan</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Ukuran</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Catatan Order</th>
                                <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    File</th>
                                <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach($productions as $production)
                                @php
                                    $rowClass = match ($production->status) {
                                        'pending' => 'bg-white hover:bg-gray-50',
                                        'queued' => 'bg-yellow-100 hover:bg-yellow-200', // Adjusted to darker yellow
                                        'in_progress' => 'bg-orange-100 hover:bg-orange-200', // Dikerjakan: Darker Orange
                                        'completed' => 'bg-green-100 hover:bg-green-200', // Selesai: Darker Green
                                        'ready_for_pickup' => 'bg-blue-100 hover:bg-blue-200', // Siap Ambil: Darker Blue
                                        'delivered' => 'bg-red-100 hover:bg-red-200', // Diambil: Darker Red
                                        'cancelled' => 'bg-gray-100 hover:bg-gray-200',
                                        default => 'bg-white hover:bg-gray-50'
                                    };
                                @endphp
                                <tr class="{{ $rowClass }} transition-colors border-b border-gray-200">
                                    <td class="px-4 py-3 text-center">
                                        <input type="checkbox" value="{{ $production->id }}"
                                            class="check-item rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <div class="flex flex-col gap-1">
                                            <a href="{{ route('productions.show', $production) }}"
                                                class="text-sm font-medium text-indigo-600 hover:text-indigo-800">
                                                {{ $production->order_code }}
                                            </a>
                                            <span
                                                class="text-xs text-gray-500">{{ $production->created_at->format('d/m/Y') }}</span>
                                        </div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="flex flex-wrap items-center gap-1 group">
                                            <div class="text-sm font-medium text-gray-900">{{ $production->product_name }}</div>
                                            <button
                                                onclick="renameProduct({{ $production->id }}, '{{ addslashes($production->product_name) }}')"
                                                class="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-indigo-600 transition-opacity p-0.5"
                                                title="Ubah Nama Tampilan">
                                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z">
                                                    </path>
                                                </svg>
                                            </button>
                                        </div>
                                        @if($production->quantity > 1)
                                            <div class="text-xs text-gray-500">Qty: {{ $production->quantity }}</div>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">
                                            {{ $production->transaction->customer_name ?? 'Walk-in' }}
                                        </div>
                                        <div class="text-xs text-gray-500">{{ $production->transaction->transaction_code ?? '-' }}
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap">
                                        @if($production->formatted_size)
                                            <span class="text-sm text-gray-900">{{ $production->formatted_size }}</span>
                                        @else
                                            <span class="text-sm text-gray-400">-</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3">
                                        @php
                                            $orderNote = trim((string) ($production->customer_notes
                                                ?? $production->notes
                                                ?? ($production->transaction->note ?? '')));
                                        @endphp
                                        <div class="text-xs text-gray-900 max-w-[220px] truncate"
                                            title="{{ $orderNote }}">
                                            {{ $orderNote !== '' ? $orderNote : '-' }}
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-center">
                                        <div class="flex items-center justify-center gap-2">
                                            @if($production->file_path)
                                                <a href="{{ route('productions.download', $production) }}"
                                                    class="p-1.5 bg-green-50 text-green-600 rounded-lg hover:bg-green-100 transition-colors"
                                                    title="Download File">
                                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                                                    </svg>
                                                </a>
                                                <button onclick="openUploadModal('{{ $production->id }}')"
                                                    class="p-1.5 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 transition-colors"
                                                    title="Ganti File">
                                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12">
                                                        </path>
                                                    </svg>
                                                </button>
                                            @else
                                                <button onclick="openUploadModal('{{ $production->id }}')"
                                                    class="p-1.5 bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition-colors"
                                                    title="Upload File">
                                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
                                                    </svg>
                                                </button>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 whitespace-nowrap text-right">
                                        <div class="flex items-center justify-end gap-2">
                                            <select onchange="quickUpdateStatus({{ $production->id }}, this.value)"
                                                class="text-xs border border-gray-300 rounded-md px-2 py-1 focus:ring-2 focus:ring-indigo-500 focus:border-transparent w-24">
                                                <option value="" disabled>Status</option>
                                                <option value="pending" {{ $production->status == 'pending' ? 'selected' : '' }}>
                                                                {{ $labels['pending'] }}</option>
                                                <option value="queued" {{ $production->status == 'queued' ? 'selected' : '' }}>{{ $labels['queued'] }}
                                                </option>
                                                <option value="in_progress" {{ $production->status == 'in_progress' ? 'selected' : '' }}>{{ $labels['in_progress'] }}</option>
                                                <option value="completed" {{ $production->status == 'completed' ? 'selected' : '' }}>
                                                                {{ $labels['completed'] }}</option>
                                                <option value="ready_for_pickup" {{ $production->status == 'ready_for_pickup' ? 'selected' : '' }}>{{ $labels['ready_for_pickup'] }}</option>
                                                <option value="delivered" {{ $production->status == 'delivered' ? 'selected' : '' }}>
                                                                {{ $labels['delivered'] }}</option>
                                            </select>
                                            <a href="{{ route('productions.show', $production) }}"
                                                class="text-indigo-600 hover:text-indigo-900 p-1" title="Detail">
                                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
                                                    </path>
                                                </svg>
                                            </a>
                                            <form action="{{ route('productions.destroy', $production) }}" method="POST"
                                                class="inline-block"
                                                onsubmit="return confirm('Hapus produksi ini beserta filenya?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="text-red-500 hover:text-red-700 p-1" title="Hapus">
                                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                                    </svg>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="px-4 py-3 border-t border-gray-200">
                    {{ $productions->links() }}
                </div>
            @endif
        </div>
    </div>

    @push('scripts')
        <!-- Upload Modal -->
        <div id="uploadModal" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog"
            aria-modal="true">
            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"
                    onclick="closeUploadModal()"></div>
                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
                <div
                    class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                    <form id="uploadForm" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                            <div class="sm:flex sm:items-start">
                                <div
                                    class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10">
                                    <svg class="h-6 w-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12">
                                        </path>
                                    </svg>
                                </div>
                                <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                                    <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Upload File
                                        Produksi</h3>
                                    <div class="mt-2">
                                        <p class="text-sm text-gray-500 mb-4">Upload file desain atau dokumen pendukung untuk
                                            produksi ini. Format: JPG, PNG, PDF, ZIP (Max 10MB).</p>
                                        <input type="file" name="file" class="w-full text-sm text-gray-500
                                                                    file:mr-4 file:py-2 file:px-4
                                                                    file:rounded-full file:border-0
                                                                    file:text-sm file:font-semibold
                                                                    file:bg-indigo-50 file:text-indigo-700
                                                                    hover:file:bg-indigo-100" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                            <button type="submit"
                                class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
                                Upload
                            </button>
                            <button type="button" onclick="closeUploadModal()"
                                class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                                Batal
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <script>
            // Bulk Delete Logic
            const checkAll = document.getElementById('checkAll');
            const checkItems = document.querySelectorAll('.check-item');
            const bulkActions = document.getElementById('bulkActions');
            const selectedCount = document.getElementById('selectedCount');
            const bulkDeleteInputs = document.getElementById('bulkDeleteInputs');

            function updateBulkActions() {
                const checked = document.querySelectorAll('.check-item:checked');
                selectedCount.textContent = checked.length;

                if (checked.length > 0) {
                    bulkActions.classList.remove('hidden');
                    // Create hidden inputs
                    bulkDeleteInputs.innerHTML = '';
                    checked.forEach(cb => {
                        const input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = 'ids[]';
                        input.value = cb.value;
                        bulkDeleteInputs.appendChild(input);
                    });
                } else {
                    bulkActions.classList.add('hidden');
                    bulkDeleteInputs.innerHTML = '';
                }
            }

            checkAll.addEventListener('change', function () {
                checkItems.forEach(cb => {
                    cb.checked = this.checked;
                });
                updateBulkActions();
            });

            checkItems.forEach(cb => {
                cb.addEventListener('change', updateBulkActions);
            });

            function openUploadModal(id) {
                document.getElementById('uploadForm').action = `/productions/${id}/upload`;
                document.getElementById('uploadModal').classList.remove('hidden');
            }

            function closeUploadModal() {
                document.getElementById('uploadModal').classList.add('hidden');
            }

            function quickUpdateStatus(productionId, status) {
                if (!status) return;

                fetch(`/productions/${productionId}/quick-status`, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ status: status })
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            location.reload();
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('Gagal mengupdate status');
                    });
            }

            function renameProduct(id, currentName) {
                const newName = prompt('Masukkan nama produk custom baru (hanya untuk tampilan di produksi):', currentName);
                if (newName && newName.trim() !== '' && newName !== currentName) {
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = `/productions/${id}/rename`;

                    const csrfToken = document.createElement('input');
                    csrfToken.type = 'hidden';
                    csrfToken.name = '_token';
                    csrfToken.value = document.querySelector('meta[name="csrf-token"]').content;

                    const methodInput = document.createElement('input');
                    methodInput.type = 'hidden';
                    methodInput.name = '_method';
                    methodInput.value = 'PATCH';

                    const nameInput = document.createElement('input');
                    nameInput.type = 'hidden';
                    nameInput.name = 'product_name';
                    nameInput.value = newName.trim();

                    form.appendChild(csrfToken);
                    form.appendChild(methodInput);
                    form.appendChild(nameInput);
                    document.body.appendChild(form);
                    form.submit();
                }
            }
        </script>
    @endpush
@endsection