<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detail Pesanan - Raja Futsal</title>

    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <style>
        * {
            font-family: 'Inter', sans-serif;
        }

        body {
            background-color: #f9fafb;
        }

        .nav-link {
            transition: all 0.2s ease;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .nav-link:hover {
            background-color: #fff7ed;
            color: #ea580c;
        }

        .active-nav {
            background-color: #fff7ed;
            color: #ea580c;
            font-weight: 600;
        }

        .status-badge {
            transition: all 0.2s ease;
        }

        .status-badge:hover {
            transform: scale(1.05);
        }

        .action-btn {
            transition: all 0.2s ease;
        }

        .action-btn:hover {
            transform: translateY(-2px);
        }

        .product-image {
            transition: all 0.3s ease;
        }

        .product-image:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>

    <!-- NAVBAR -->
    <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 shadow-sm sticky top-0 z-50 w-full">
        <div class="px-4 sm:px-6 lg:px-8 py-3">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <a href="{{ route('penjual.pesanan-masuk') }}" class="flex items-center gap-2 text-gray-600 hover:text-orange-600 transition">
                        <i class="fas fa-arrow-left"></i>
                        <span>Kembali</span>
                    </a>
                    <div class="w-10 h-10 bg-gradient-to-br from-orange-500 to-orange-600 rounded-lg flex items-center justify-center shadow-md">
                        <span class="text-white font-bold text-lg">R</span>
                    </div>
                    <div>
                        <h1 class="font-bold text-lg text-gray-800">Raja Futsal</h1>
                        <p class="text-xs text-gray-500">Detail Pesanan</p>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- MAIN CONTENT -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

        <!-- HEADER -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-100 p-6 mb-6">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div>
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
                            <i class="fas fa-clipboard-list text-orange-600 text-xl"></i>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500">Kode Pesanan</p>
                            <h2 class="text-2xl font-bold text-gray-800">{{ $pesanan->kode_pesanan }}</h2>
                        </div>
                    </div>
                    <p class="text-gray-500 flex items-center gap-2">
                        <i class="far fa-calendar-alt text-orange-400"></i>
                        {{ $pesanan->created_at->format('d F Y H:i') }} WIB
                    </p>
                </div>

                @php
                    $statusIcon = match($pesanan->status) {
                        'pending' => 'fa-clock',
                        'diproses' => 'fa-spinner fa-spin',
                        'dikirim' => 'fa-truck',
                        'selesai' => 'fa-check-circle',
                        'dibatalkan' => 'fa-times-circle',
                        default => 'fa-circle'
                    };

                    $statusColor = match($pesanan->status) {
                        'pending' => 'bg-yellow-100 text-yellow-700',
                        'diproses' => 'bg-blue-100 text-blue-700',
                        'dikirim' => 'bg-purple-100 text-purple-700',
                        'selesai' => 'bg-green-100 text-green-700',
                        'dibatalkan' => 'bg-red-100 text-red-700',
                        default => 'bg-gray-100 text-gray-700'
                    };
                @endphp

                <div class="text-right">
                    <span class="status-badge inline-block px-4 py-2 rounded-full text-sm font-semibold {{ $statusColor }} border flex items-center gap-2">
                        <i class="fas {{ $statusIcon }}"></i>
                        {{ strtoupper($pesanan->status) }}
                    </span>
                    @if($pesanan->no_resi)
                        <p class="text-sm text-gray-500 mt-2">
                            <i class="fas fa-barcode mr-1"></i>
                            No. Resi: {{ $pesanan->no_resi }}
                        </p>
                    @endif
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- LEFT COLUMN - PRODUCTS -->
            <div class="lg:col-span-2 space-y-6">
                <!-- PRODUK DARI PENJUAL INI -->
                <div class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden">
                    <div class="px-6 py-4 bg-gradient-to-r from-orange-50 to-white border-b border-gray-100">
                        <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                            <i class="fas fa-box text-orange-500"></i>
                            Produk Anda dalam Pesanan Ini
                        </h3>
                    </div>

                    <div class="divide-y divide-gray-100">
                        @foreach($pesanan->detail as $detail)
                            @if($detail->produk && $detail->produk->user_id == auth()->id())
                                @php
                                    $foto = null;
                                    if(!empty($detail->produk->foto)){
                                        $first = explode('|', $detail->produk->foto)[0];
                                        $foto = str_contains($first, ':') ? explode(':', $first)[1] : $first;
                                    }
                                @endphp
                                <div class="p-6 flex flex-col sm:flex-row gap-4">
                                    <div class="w-24 h-24 rounded-lg bg-gray-100 overflow-hidden flex-shrink-0 product-image">
                                        @if($foto)
                                            <img src="{{ asset('storage/'.$foto) }}" class="w-full h-full object-cover" alt="Product">
                                        @else
                                            <div class="w-full h-full flex items-center justify-center">
                                                <i class="fas fa-box text-gray-400 text-2xl"></i>
                                            </div>
                                        @endif
                                    </div>

                                    <div class="flex-1">
                                        <div class="flex flex-col sm:flex-row sm:justify-between gap-2">
                                            <div>
                                                <h4 class="font-semibold text-gray-800">{{ $detail->nama_produk }}</h4>
                                                <div class="flex flex-wrap items-center gap-3 mt-1 text-sm text-gray-500">
                                                    <span>{{ $detail->qty }} x Rp {{ number_format($detail->harga, 0, ',', '.') }}</span>
                                                    @if($detail->warna || $detail->ukuran)
                                                        <span>•</span>
                                                        <span>
                                                            @if($detail->warna) Warna: {{ $detail->warna }} @endif
                                                            @if($detail->ukuran) @if($detail->warna), @endif Ukuran: {{ $detail->ukuran }} @endif
                                                        </span>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="text-right">
                                                <p class="text-sm text-gray-500">Subtotal</p>
                                                <p class="font-bold text-orange-600">Rp {{ number_format($detail->subtotal, 0, ',', '.') }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </div>

                    <div class="px-6 py-4 bg-gray-50 border-t border-gray-100">
                        <div class="flex justify-between items-center">
                            <span class="font-medium text-gray-700">Total Produk Anda:</span>
                            <span class="text-xl font-bold text-orange-600">
                                Rp {{ number_format($pesanan->detail->filter(function($d) {
                                    return $d->produk && $d->produk->user_id == auth()->id();
                                })->sum('subtotal'), 0, ',', '.') }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- PRODUK DARI PENJUAL LAIN (jika ada) -->
                @php
                    $produkLain = $pesanan->detail->filter(function($detail) {
                        return !$detail->produk || $detail->produk->user_id != auth()->id();
                    });
                @endphp

                @if($produkLain->count() > 0)
                    <div class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden">
                        <div class="px-6 py-4 bg-gray-50 border-b border-gray-100">
                            <h3 class="font-semibold text-gray-700 flex items-center gap-2">
                                <i class="fas fa-store text-gray-500"></i>
                                Produk dari Penjual Lain
                            </h3>
                        </div>

                        <div class="divide-y divide-gray-100">
                            @foreach($produkLain as $detail)
                                <div class="p-6">
                                    <div class="flex justify-between">
                                        <div>
                                            <h4 class="font-medium text-gray-700">{{ $detail->nama_produk }}</h4>
                                            <p class="text-sm text-gray-500 mt-1">
                                                {{ $detail->qty }} x Rp {{ number_format($detail->harga, 0, ',', '.') }}
                                            </p>
                                        </div>
                                        <p class="font-medium text-gray-600">Rp {{ number_format($detail->subtotal, 0, ',', '.') }}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>

            <!-- RIGHT COLUMN - CUSTOMER INFO & PAYMENT -->
            <div class="space-y-6">
                <!-- INFO PELANGGAN -->
                <div class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden">
                    <div class="px-6 py-4 bg-gradient-to-r from-orange-50 to-white border-b border-gray-100">
                        <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                            <i class="fas fa-user text-orange-500"></i>
                            Informasi Pelanggan
                        </h3>
                    </div>

                    <div class="p-6 space-y-4">
                        <div>
                            <p class="text-xs text-gray-500 mb-1">Nama</p>
                            <p class="font-medium text-gray-800">{{ $pesanan->user->name ?? '-' }}</p>
                        </div>

                        <div>
                            <p class="text-xs text-gray-500 mb-1">Email</p>
                            <p class="font-medium text-gray-800">{{ $pesanan->user->email ?? '-' }}</p>
                        </div>

                        <div>
                            <p class="text-xs text-gray-500 mb-1">No. Telepon</p>
                            <p class="font-medium text-gray-800">{{ $pesanan->user->no_hp ?? '-' }}</p>
                        </div>

                        @if($pesanan->alamat)
                            <div>
                                <p class="text-xs text-gray-500 mb-1">Alamat Pengiriman</p>
                                <p class="font-medium text-gray-800">
                                    {{ $pesanan->alamat->nama_penerima ?? $pesanan->user->name }}<br>
                                    {{ $pesanan->alamat->alamat_lengkap ?? '-' }}<br>
                                    @if($pesanan->alamat)
                                        {{ $pesanan->alamat->kota ?? '' }}, {{ $pesanan->alamat->provinsi ?? '' }} {{ $pesanan->alamat->kode_pos ?? '' }}
                                    @endif
                                </p>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- INFO PEMBAYARAN -->
                @if($pesanan->pembayaran)
                    <div class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden">
                        <div class="px-6 py-4 bg-gradient-to-r from-orange-50 to-white border-b border-gray-100">
                            <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                                <i class="fas fa-credit-card text-orange-500"></i>
                                Informasi Pembayaran
                            </h3>
                        </div>

                        <div class="p-6 space-y-4">
                            <div>
                                <p class="text-xs text-gray-500 mb-1">Metode Pembayaran</p>
                                <p class="font-medium text-gray-800">{{ $pesanan->pembayaran->metode ?? 'Transfer Bank' }}</p>
                            </div>

                            <div>
                                <p class="text-xs text-gray-500 mb-1">Status Pembayaran</p>
                                @php
                                    $paymentStatus = $pesanan->pembayaran->status ?? 'pending';
                                    $paymentColor = match($paymentStatus) {
                                        'pending' => 'bg-yellow-100 text-yellow-700',
                                        'success' => 'bg-green-100 text-green-700',
                                        'failed' => 'bg-red-100 text-red-700',
                                        default => 'bg-gray-100 text-gray-700'
                                    };
                                @endphp
                                <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold {{ $paymentColor }}">
                                    {{ ucfirst($paymentStatus) }}
                                </span>
                            </div>

                            @if($pesanan->pembayaran->bukti_transfer)
                                <div>
                                    <p class="text-xs text-gray-500 mb-2">Bukti Transfer</p>
                                    <a href="{{ asset('storage/'.$pesanan->pembayaran->bukti_transfer) }}" target="_blank"
                                       class="inline-flex items-center gap-2 text-orange-600 hover:text-orange-700">
                                        <i class="fas fa-image"></i>
                                        Lihat Bukti Transfer
                                    </a>
                                </div>
                            @endif

                            <div>
                                <p class="text-xs text-gray-500 mb-1">Total Pembayaran</p>
                                <p class="text-xl font-bold text-orange-600">Rp {{ number_format($pesanan->total_harga, 0, ',', '.') }}</p>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- ACTION BUTTONS -->
                <div class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden">
                    <div class="px-6 py-4 bg-gradient-to-r from-orange-50 to-white border-b border-gray-100">
                        <h3 class="font-semibold text-gray-800 flex items-center gap-2">
                            <i class="fas fa-cog text-orange-500"></i>
                            Aksi
                        </h3>
                    </div>

                    <div class="p-6 space-y-3">
                        @if(in_array($pesanan->status, ['pending', 'diproses', 'dikirim']))
                            <button onclick="openUpdateStatusModal()"
                                    class="w-full px-4 py-3 bg-orange-100 text-orange-700 rounded-lg hover:bg-orange-200 transition flex items-center justify-center gap-2 font-medium">
                                <i class="fas fa-edit"></i>
                                Update Status
                            </button>
                        @endif

                        @if($pesanan->status == 'pending')
                            <button onclick="updateStatus('diproses')"
                                    class="w-full px-4 py-3 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition flex items-center justify-center gap-2 font-medium">
                                <i class="fas fa-check"></i>
                                Proses Pesanan
                            </button>
                        @endif

                        @if($pesanan->status == 'diproses')
                            <button onclick="openResiModal()"
                                    class="w-full px-4 py-3 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition flex items-center justify-center gap-2 font-medium">
                                <i class="fas fa-truck"></i>
                                Kirim Pesanan
                            </button>
                        @endif

                        @if($pesanan->status == 'pending')
                            <button onclick="updateStatus('dibatalkan')"
                                    class="w-full px-4 py-3 border-2 border-red-200 text-red-600 rounded-lg hover:bg-red-50 transition flex items-center justify-center gap-2 font-medium">
                                <i class="fas fa-times"></i>
                                Batalkan Pesanan
                            </button>
                        @endif

                        <a href="{{ route('penjual.pesanan-masuk') }}"
                           class="w-full px-4 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition flex items-center justify-center gap-2 font-medium">
                            <i class="fas fa-arrow-left"></i>
                            Kembali ke Daftar
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL UPDATE STATUS -->
    <div id="statusModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" style="display: none;">
        <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
            <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <i class="fas fa-edit text-orange-500"></i>
                Update Status Pesanan
            </h3>

            <form id="statusForm" method="POST" action="{{ route('penjual.update-status', $pesanan->id) }}">
                @csrf

                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Status Pesanan</label>
                    <select name="status" id="statusSelect" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500">
                        <option value="pending" {{ $pesanan->status == 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="diproses" {{ $pesanan->status == 'diproses' ? 'selected' : '' }}>Diproses</option>
                        <option value="dikirim" {{ $pesanan->status == 'dikirim' ? 'selected' : '' }}>Dikirim</option>
                        <option value="selesai" {{ $pesanan->status == 'selesai' ? 'selected' : '' }}>Selesai</option>
                        <option value="dibatalkan" {{ $pesanan->status == 'dibatalkan' ? 'selected' : '' }}>Dibatalkan</option>
                    </select>
                </div>

                <div class="mb-4" id="resiField" @style(['display' => $pesanan->status == 'dikirim' ? 'block' : 'none'])>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Nomor Resi</label>
                    <input type="text" name="no_resi" id="noResi" value="{{ $pesanan->no_resi ?? '' }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
                        placeholder="Masukkan nomor resi">
                </div>

                <div class="flex gap-3">
                    <button type="button" onclick="closeModal()" class="flex-1 px-4 py-2 border-2 border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition font-medium">
                        Batal
                    </button>
                    <button type="submit" class="flex-1 px-4 py-2 bg-gradient-to-r from-orange-500 to-orange-600 text-white rounded-lg hover:from-orange-600 hover:to-orange-700 transition font-medium">
                        Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- MODAL INPUT RESI -->
    <div id="resiModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" style="display: none;">
        <div class="bg-white rounded-xl p-6 max-w-md w-full mx-4">
            <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <i class="fas fa-truck text-orange-500"></i>
                Input Nomor Resi
            </h3>

            <form id="resiForm" method="POST" action="{{ route('penjual.update-status', $pesanan->id) }}">
                @csrf

                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Nomor Resi</label>
                    <input type="text" name="no_resi" id="resiInput" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500" placeholder="Masukkan nomor resi" required>
                </div>

                <input type="hidden" name="status" value="dikirim">

                <div class="flex gap-3">
                    <button type="button" onclick="closeResiModal()" class="flex-1 px-4 py-2 border-2 border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition font-medium">
                        Batal
                    </button>
                    <button type="submit" class="flex-1 px-4 py-2 bg-gradient-to-r from-orange-500 to-orange-600 text-white rounded-lg hover:from-orange-600 hover:to-orange-700 transition font-medium">
                        Kirim
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- LOADING SPINNER -->
    <div id="loadingSpinner" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[2000]" style="display: none;">
        <div class="bg-white p-6 rounded-xl shadow-xl text-center">
            <div class="spinner mx-auto mb-4"></div>
            <p class="text-gray-700 font-medium">Memproses...</p>
        </div>
    </div>

    <style>
        .spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #f97316;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>

    <script>
        // Update status functions
        function updateStatus(status) {
            let confirmMessage = '';
            let title = '';

            if (status === 'dibatalkan') {
                title = 'Batalkan Pesanan';
                confirmMessage = 'Apakah Anda yakin ingin membatalkan pesanan ini? Stok produk akan dikembalikan.';
            } else if (status === 'diproses') {
                title = 'Proses Pesanan';
                confirmMessage = 'Proses pesanan ini?';
            }

            Swal.fire({
                title: title,
                text: confirmMessage,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#f97316',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'Ya, Lanjutkan',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    showLoading();

                    fetch('{{ route("penjual.update-status", $pesanan->id) }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({ status: status })
                    })
                    .then(response => response.json())
                    .then(data => {
                        hideLoading();

                        if (data.success) {
                            Swal.fire({
                                title: 'Berhasil!',
                                text: data.message,
                                icon: 'success',
                                confirmButtonColor: '#f97316'
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                title: 'Gagal!',
                                text: data.message,
                                icon: 'error',
                                confirmButtonColor: '#f97316'
                            });
                        }
                    })
                    .catch(error => {
                        hideLoading();
                        Swal.fire({
                            title: 'Error!',
                            text: 'Terjadi kesalahan sistem',
                            icon: 'error',
                            confirmButtonColor: '#f97316'
                        });
                    });
                }
            });
        }

        // Modal functions
        function openUpdateStatusModal() {
            document.getElementById('statusModal').style.display = 'flex';
        }

        function closeModal() {
            document.getElementById('statusModal').style.display = 'none';
        }

        function openResiModal() {
            document.getElementById('resiModal').style.display = 'flex';
        }

        function closeResiModal() {
            document.getElementById('resiModal').style.display = 'none';
        }

        // Tampilkan field resi jika status dikirim
        document.getElementById('statusSelect')?.addEventListener('change', function() {
            document.getElementById('resiField').style.display = this.value === 'dikirim' ? 'block' : 'none';
        });

        // Loading functions
        function showLoading() {
            document.getElementById('loadingSpinner').style.display = 'flex';
        }

        function hideLoading() {
            document.getElementById('loadingSpinner').style.display = 'none';
        }

        // Close modals when clicking outside
        window.addEventListener('click', function(event) {
            const statusModal = document.getElementById('statusModal');
            const resiModal = document.getElementById('resiModal');

            if (event.target === statusModal) {
                closeModal();
            }

            if (event.target === resiModal) {
                closeResiModal();
            }
        });
    </script>

</body>
</html>
