@extends('layouts.app')

@section('content')
    <div class="p-4 sm:p-6 lg:p-8 h-full">
        <!-- 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 - Kanban Board
                    </h1>
                    <p class="text-gray-500 mt-1">Drag & drop untuk update status (coming soon)</p>
                </div>
                <div class="flex gap-2">
                    <a href="{{ route('productions.index') }}"
                        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="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
                        </svg>
                        List View
                    </a>
                </div>
            </div>
        </div>

        <!-- Kanban Board -->
        <div class="flex gap-4 overflow-x-auto pb-4" style="min-height: calc(100vh - 220px);">
            @php
                $labels = \App\Models\ProductionOrder::getAllStatusLabels();
                $columnConfigs = [
                    'pending' => ['title' => '⏳ ' . $labels['pending'], 'bg' => 'bg-gray-100', 'border' => 'border-gray-300'],
                    'queued' => ['title' => '📋 ' . $labels['queued'], 'bg' => 'bg-yellow-100', 'border' => 'border-yellow-300'],
                    'in_progress' => ['title' => '🔧 ' . $labels['in_progress'], 'bg' => 'bg-orange-100', 'border' => 'border-orange-300'],
                    'completed' => ['title' => '✅ ' . $labels['completed'], 'bg' => 'bg-green-100', 'border' => 'border-green-300'],
                    'ready_for_pickup' => ['title' => '📦 ' . $labels['ready_for_pickup'], 'bg' => 'bg-blue-100', 'border' => 'border-blue-300'],
                ];
            @endphp

            @foreach($columnConfigs as $status => $config)
                <div class="flex-shrink-0 w-72">
                    <div class="{{ $config['bg'] }} rounded-xl border-2 {{ $config['border'] }} h-full flex flex-col">
                        <!-- Column Header -->
                        <div class="px-4 py-3 border-b {{ $config['border'] }}">
                            <div class="flex items-center justify-between">
                                <h3 class="font-semibold text-gray-900">{{ $config['title'] }}</h3>
                                <span
                                    class="inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-gray-600 bg-white rounded-full shadow-sm">
                                    {{ $columns[$status]->count() }}
                                </span>
                            </div>
                        </div>

                        <!-- Column Content -->
                        <div class="flex-1 overflow-y-auto p-3 space-y-3" data-status="{{ $status }}">
                            @forelse($columns[$status] as $production)
                                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-3 cursor-pointer hover:shadow-md transition-shadow"
                                    data-production-id="{{ $production->id }}">
                                    <!-- Card Header -->
                                    <div class="flex items-start justify-between mb-2">
                                        <a href="{{ route('productions.show', $production) }}"
                                            class="text-xs font-medium text-indigo-600 hover:text-indigo-800">
                                            {{ $production->order_code }}
                                        </a>
                                        @if($production->priority > 5)
                                            <span
                                                class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">
                                                🔥 Urgent
                                            </span>
                                        @endif
                                    </div>

                                    <!-- Product Name -->
                                    <div class="flex items-start justify-between mb-2 group">
                                        <h4 class="font-medium text-gray-900 text-sm line-clamp-2">
                                            {{ $production->product_name }}
                                        </h4>
                                        <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 shrink-0"
                                            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>

                                    <!-- Customer -->
                                    @if($production->transaction && $production->transaction->customer_name)
                                        <p class="text-xs text-gray-500 mb-2 flex items-center">
                                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                            </svg>
                                            {{ $production->transaction->customer_name }}
                                        </p>
                                    @endif

                                    <!-- Size if available -->
                                    @if($production->formatted_size)
                                        <p class="text-xs text-gray-500 mb-2 flex items-center">
                                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                    d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4">
                                                </path>
                                            </svg>
                                            {{ $production->formatted_size }}
                                        </p>
                                    @endif

                                    @php
                                        $quickNote = trim((string) ($production->customer_notes
                                            ?? $production->notes
                                            ?? ($production->transaction->note ?? '')));
                                    @endphp
                                    @if($quickNote !== '')
                                        <div class="mb-2 rounded-md border border-amber-200 bg-amber-50 px-2 py-1.5">
                                            <p class="text-[10px] font-semibold uppercase tracking-wide text-amber-700">Catatan
                                                Order</p>
                                            <p class="text-xs text-amber-900 leading-4 mt-0.5 break-words">
                                                {{ \Illuminate\Support\Str::limit($quickNote, 70) }}
                                            </p>
                                        </div>
                                    @endif

                                    <!-- Card Footer -->
                                    <div class="flex items-center justify-between pt-2 border-t border-gray-100 mt-2">
                                        <!-- Assigned User -->
                                        @if($production->assignedUser)
                                            <div class="flex items-center">
                                                <div class="w-5 h-5 bg-indigo-100 rounded-full flex items-center justify-center">
                                                    <span
                                                        class="text-xs font-medium text-indigo-600">{{ substr($production->assignedUser->name, 0, 1) }}</span>
                                                </div>
                                                <span
                                                    class="text-xs text-gray-500 ml-1">{{ Str::limit($production->assignedUser->name, 10) }}</span>
                                            </div>
                                        @else
                                            <span class="text-xs text-gray-400">Belum ditugaskan</span>
                                        @endif

                                        <!-- Estimated Date -->
                                        @if($production->estimated_completion)
                                            <span
                                                class="text-xs {{ $production->estimated_completion->isPast() ? 'text-red-600 font-medium' : 'text-gray-500' }}">
                                                {{ $production->estimated_completion->format('d/m') }}
                                            </span>
                                        @endif
                                    </div>

                                    <!-- Quick Status Buttons -->
                                    <div class="flex gap-1 mt-2 pt-2 border-t border-gray-100">
                                        @if($status !== 'ready_for_pickup')
                                            @php
                                                $nextStatuses = [
                                                    'pending' => 'queued',
                                                    'queued' => 'in_progress',
                                                    'in_progress' => 'completed',
                                                    'completed' => 'ready_for_pickup',
                                                ];
                                                $nextStatus = $nextStatuses[$status] ?? null;
                                            @endphp
                                            @if($nextStatus)
                                                <button onclick="updateStatus({{ $production->id }}, '{{ $nextStatus }}')"
                                                    class="flex-1 px-2 py-1 text-xs bg-indigo-50 text-indigo-600 rounded hover:bg-indigo-100 transition-colors">
                                                    Next →
                                                </button>
                                            @endif
                                        @else
                                            <button onclick="updateStatus({{ $production->id }}, 'delivered')"
                                                class="flex-1 px-2 py-1 text-xs bg-red-50 text-red-600 rounded hover:bg-red-100 transition-colors">
                                                ✓ Diambil
                                            </button>
                                        @endif
                                        <a href="{{ route('productions.show', $production) }}"
                                            class="px-2 py-1 text-xs bg-gray-50 text-gray-600 rounded hover:bg-gray-100 transition-colors">
                                            Detail
                                        </a>
                                    </div>
                                </div>
                            @empty
                                <div class="text-center py-8 text-gray-400">
                                    <svg class="mx-auto h-8 w-8 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4">
                                        </path>
                                    </svg>
                                    <p class="text-xs">Kosong</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    @push('scripts')
        <script>
            function updateStatus(productionId, status) {
                fetch('/productions/bulk-update-status', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        production_id: productionId,
                        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