@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 class="flex items-center gap-4">
                    <a href="{{ route('productions.index') }}" class="text-gray-400 hover:text-gray-600 transition-colors">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                        </svg>
                    </a>
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900">{{ $production->order_code }}</h1>
                        <p class="text-gray-500 mt-1">Detail Order Produksi</p>
                    </div>
                </div>
                <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium
                    @if($production->status == 'pending') bg-gray-100 text-gray-800
                    @elseif($production->status == 'queued') bg-yellow-100 text-yellow-800
                    @elseif($production->status == 'in_progress') bg-blue-100 text-blue-800
                    @elseif($production->status == 'completed') bg-green-100 text-green-800
                    @elseif($production->status == 'ready_for_pickup') bg-purple-100 text-purple-800
                    @elseif($production->status == 'delivered') bg-teal-100 text-teal-800
                    @else bg-red-100 text-red-800
                    @endif">
                    {{ $production->status_label }}
                </span>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Main Info -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Product Info -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h2 class="font-semibold text-gray-900">📦 Informasi Produk</h2>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-2 gap-6">
                            <div>
                                <p class="text-sm text-gray-500">Nama Produk</p>
                                <p class="text-lg font-medium text-gray-900">{{ $production->product_name }}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">Jumlah</p>
                                <p class="text-lg font-medium text-gray-900">{{ $production->quantity }} pcs</p>
                            </div>
                            @if($production->width && $production->height)
                                <div>
                                    <p class="text-sm text-gray-500">Ukuran</p>
                                    <p class="text-lg font-medium text-gray-900">{{ $production->formatted_size }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">Luas</p>
                                    <p class="text-lg font-medium text-gray-900">{{ number_format($production->area, 2) }}
                                        {{ $production->size_unit }}²</p>
                                </div>
                            @endif
                        </div>
                        @if($production->description)
                            <div class="mt-4 pt-4 border-t border-gray-200">
                                <p class="text-sm text-gray-500">Deskripsi</p>
                                <p class="mt-1 text-gray-700">{{ $production->description }}</p>
                            </div>
                        @endif
                        @if($production->customer_notes || ($production->transaction && $production->transaction->note))
                            <div class="mt-4 pt-4 border-t border-gray-200">
                                <p class="text-sm text-gray-500 mb-2">Catatan Pelanggan</p>
                                @if($production->customer_notes)
                                    <div class="text-gray-700 bg-yellow-50 p-3 rounded-lg border border-yellow-200 mb-2">
                                        <span class="font-medium text-xs text-yellow-800 block mb-1">Catatan Produk:</span>
                                        {{ $production->customer_notes }}
                                    </div>
                                @endif
                                @if($production->transaction && $production->transaction->note)
                                    <div class="text-gray-700 bg-blue-50 p-3 rounded-lg border border-blue-200">
                                        <span class="font-medium text-xs text-blue-800 block mb-1">Catatan Order:</span>
                                        {{ $production->transaction->note }}
                                    </div>
                                @endif
                            </div>
                        @endif
                        @if($production->file_path)
                            <div class="mt-4 pt-4 border-t border-gray-200">
                                <p class="text-sm text-gray-500 mb-2">File Design</p>
                                <a href="{{ route('productions.download', $production) }}"
                                    class="inline-flex items-center px-4 py-2 bg-indigo-50 text-indigo-600 rounded-lg hover:bg-indigo-100 transition-colors">
                                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
                                        </path>
                                    </svg>
                                    Download File
                                </a>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Transaction Info -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h2 class="font-semibold text-gray-900">🧾 Informasi Transaksi</h2>
                    </div>
                    <div class="p-6">
                        @if($production->transaction)
                            <div class="grid grid-cols-2 gap-6">
                                <div>
                                    <p class="text-sm text-gray-500">Kode Transaksi</p>
                                    <p class="text-lg font-medium text-indigo-600">
                                        {{ $production->transaction->transaction_code }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">Pelanggan</p>
                                    <p class="text-lg font-medium text-gray-900">
                                        {{ $production->transaction->customer_name ?? 'Walk-in Customer' }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">Tanggal Order</p>
                                    <p class="text-gray-900">{{ $production->transaction->created_at->format('d M Y, H:i') }}
                                    </p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500">Status Pembayaran</p>
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                            @if($production->transaction->payment_status == 'paid') bg-green-100 text-green-800
                                            @elseif($production->transaction->payment_status == 'partial') bg-yellow-100 text-yellow-800
                                            @else bg-red-100 text-red-800
                                            @endif">
                                        {{ $production->transaction->payment_status_label ?? $production->transaction->payment_status }}
                                    </span>
                                </div>
                                @if($production->transaction->down_payment > 0)
                                    <div>
                                        <p class="text-sm text-gray-500">DP / Uang Muka</p>
                                        <p class="text-lg font-medium text-green-600">Rp
                                            {{ number_format($production->transaction->down_payment, 0, ',', '.') }}</p>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-500">Sisa Pembayaran</p>
                                        <p class="text-lg font-medium text-red-600">Rp
                                            {{ number_format($production->transaction->remaining_amount, 0, ',', '.') }}</p>
                                    </div>
                                @endif
                            </div>
                        @else
                            <p class="text-gray-500">Data transaksi tidak tersedia</p>
                        @endif
                    </div>
                </div>

                <!-- Activity Log -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h2 class="font-semibold text-gray-900">📋 Riwayat Aktivitas</h2>
                    </div>
                    <div class="p-6">
                        @if($production->logs->isEmpty())
                            <p class="text-gray-500 text-center py-4">Belum ada aktivitas</p>
                        @else
                            <div class="space-y-4">
                                @foreach($production->logs as $log)
                                    <div class="flex gap-4">
                                        <div class="flex-shrink-0">
                                            <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center">
                                                <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor"
                                                    viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="flex-1">
                                            <div class="flex items-center gap-2">
                                                <span class="font-medium text-gray-900">{{ $log->status_change }}</span>
                                                <span class="text-xs text-gray-500">{{ $log->created_at->diffForHumans() }}</span>
                                            </div>
                                            @if($log->user)
                                                <p class="text-sm text-gray-500">oleh {{ $log->user->name }}</p>
                                            @endif
                                            @if($log->notes)
                                                <p class="text-sm text-gray-600 mt-1 bg-gray-50 p-2 rounded">{{ $log->notes }}</p>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Sidebar Actions -->
            <div class="space-y-6">
                <!-- Update Status -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h2 class="font-semibold text-gray-900">🔄 Update Status</h2>
                    </div>
                    <div class="p-6">
                        <form action="{{ route('productions.update-status', $production) }}" method="POST">
                            @csrf
                            @method('PATCH')
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Status Baru</label>
                                <select name="status"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                                    @php
                                        $labels = \App\Models\ProductionOrder::getAllStatusLabels();
                                    @endphp
                                    <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>
                                    <option value="cancelled" {{ $production->status == 'cancelled' ? 'selected' : '' }}>❌
                                        {{ $labels['cancelled'] }}</option>
                                </select>
                            </div>
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Catatan (Opsional)</label>
                                <textarea name="notes" rows="2"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                                    placeholder="Tambahkan catatan..."></textarea>
                            </div>
                            <button type="submit"
                                class="w-full px-4 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors">
                                Update Status
                            </button>
                        </form>
                    </div>
                </div>

                <!-- Assignment -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h2 class="font-semibold text-gray-900">👤 Penugasan</h2>
                    </div>
                    <div class="p-6">
                        <form action="{{ route('productions.update-assignment', $production) }}" method="POST">
                            @csrf
                            @method('PATCH')
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Ditugaskan Ke</label>
                                <select name="assigned_to"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                                    <option value="">-- Pilih Staff --</option>
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}" {{ $production->assigned_to == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <button type="submit"
                                class="w-full px-4 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors">
                                Simpan Penugasan
                            </button>
                        </form>
                    </div>
                </div>

                <!-- Priority & Estimation -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h2 class="font-semibold text-gray-900">⚡ Prioritas & Estimasi</h2>
                    </div>
                    <div class="p-6 space-y-4">
                        <form action="{{ route('productions.update-priority', $production) }}" method="POST">
                            @csrf
                            @method('PATCH')
                            <div class="mb-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Prioritas (0-10)</label>
                                <div class="flex gap-2">
                                    <input type="number" name="priority" min="0" max="10"
                                        value="{{ $production->priority }}"
                                        class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                                    <button type="submit"
                                        class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
                                        Simpan
                                    </button>
                                </div>
                            </div>
                        </form>

                        <form action="{{ route('productions.update-estimation', $production) }}" method="POST">
                            @csrf
                            @method('PATCH')
                            <div class="mb-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Estimasi Selesai</label>
                                <div class="flex gap-2">
                                    <input type="date" name="estimated_completion"
                                        value="{{ $production->estimated_completion?->format('Y-m-d') }}"
                                        class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                                    <button type="submit"
                                        class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors">
                                        Simpan
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Internal Notes -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h2 class="font-semibold text-gray-900">📝 Catatan Internal</h2>
                    </div>
                    <div class="p-6">
                        <form action="{{ route('productions.update-notes', $production) }}" method="POST">
                            @csrf
                            @method('PATCH')
                            <div class="mb-4">
                                <textarea name="notes" rows="4"
                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
                                    placeholder="Catatan untuk tim produksi...">{{ $production->notes }}</textarea>
                            </div>
                            <button type="submit"
                                class="w-full px-4 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors">
                                Simpan Catatan
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection