<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard Admin | Haji Apud</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-stone-50 text-gray-800 font-sans flex h-screen overflow-hidden relative">

    <aside class="w-64 bg-gray-950 text-white flex flex-col z-20">
        <div class="h-20 flex items-center px-6 border-b border-gray-800">
            <span class="text-2xl font-bold font-serif text-amber-500">Haji Apud.</span>
        </div>
        <nav class="flex-1 px-4 py-6 space-y-2">
            <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-3 bg-gray-800 text-white px-4 py-3 rounded-xl font-medium">
                <i class="fas fa-home w-5"></i> Dashboard
            </a>
            <a href="{{ route('admin.dashboard') }}#kelola-produk" class="flex items-center gap-3 text-gray-400 hover:bg-gray-800 hover:text-white px-4 py-3 rounded-xl font-medium transition-colors">
                <i class="fas fa-box w-5"></i> Kelola Produk
            </a>
            <a href="{{ route('admin.article.index') }}" class="flex items-center gap-3 text-gray-400 hover:bg-gray-800 hover:text-white px-4 py-3 rounded-xl font-medium transition-colors">
                <i class="fas fa-newspaper w-5"></i> Kelola Artikel
            </a>
        </nav>
        <div class="p-4 border-t border-gray-800">
            <form action="{{ route('logout') }}" method="POST">
                @csrf
                <button type="submit" class="flex items-center gap-3 text-red-400 hover:text-red-300 w-full px-4 py-2 font-medium">
                    <i class="fas fa-sign-out-alt w-5"></i> Logout
                </button>
            </form>
        </div>
    </aside>

    <main class="flex-1 flex flex-col h-screen overflow-y-auto scroll-smooth">
        <header class="h-20 bg-white shadow-sm flex items-center justify-between px-8 z-10 sticky top-0">
            <h2 class="text-xl font-bold text-gray-800">Ringkasan Toko</h2>
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-amber-100 text-amber-700 rounded-full flex items-center justify-center font-bold">A</div>
                <span class="font-medium text-sm">Admin Web</span>
            </div>
        </header>

        <div class="p-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                <div class="bg-white p-6 rounded-2xl shadow-sm border border-stone-100 flex items-center gap-4">
                    <div class="w-14 h-14 bg-blue-100 text-blue-600 rounded-xl flex items-center justify-center text-2xl"><i class="fas fa-shopping-bag"></i></div>
                    <div>
                        <p class="text-stone-500 text-sm font-medium">Total Pesanan</p>
                        <p class="text-2xl font-bold text-gray-900">{{ count($orders) }}</p>
                    </div>
                </div>
                <div class="bg-white p-6 rounded-2xl shadow-sm border border-stone-100 flex items-center gap-4">
                    <div class="w-14 h-14 bg-green-100 text-green-600 rounded-xl flex items-center justify-center text-2xl"><i class="fas fa-wallet"></i></div>
                    <div>
                        <p class="text-stone-500 text-sm font-medium">Pendapatan Kotor</p>
                        <p class="text-2xl font-bold text-gray-900">Rp {{ number_format($orders->sum('total_amount'), 0, ',', '.') }}</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-3xl border border-stone-100 shadow-sm overflow-hidden mb-8">
                <div class="px-6 py-5 border-b border-stone-100 flex justify-between items-center">
                    <h3 class="font-bold text-lg text-gray-900">Daftar Pesanan Masuk</h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead class="bg-stone-50 text-stone-500 text-sm">
                            <tr>
                                <th class="px-6 py-4 font-semibold">Pelanggan & Invoice</th>
                                <th class="px-6 py-4 font-semibold">Tanggal</th>
                                <th class="px-6 py-4 font-semibold">Total Nilai</th>
                                <th class="px-6 py-4 font-semibold text-center">Bukti Bayar</th>
                                <th class="px-6 py-4 font-semibold text-center">Status / Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-stone-100 text-sm">
                            @foreach($orders as $order)
                            <tr class="hover:bg-stone-50 transition-colors">
                                <td class="px-6 py-4">
                                    <div class="font-bold text-gray-900 mb-1">{{ $order->order_number }}</div>
                                    <div class="text-stone-600 text-xs font-medium">{{ $order->customer_name }}</div>
                                    
                                    @if($order->customer_phone)
                                        @php
                                            // Format nomor HP ke 62 untuk WhatsApp
                                            $phone = preg_replace('/[^0-9]/', '', $order->customer_phone);
                                            if (substr($phone, 0, 1) === '0') {
                                                $phone = '62' . substr($phone, 1);
                                            }
                                            // Merangkai teks sapaan otomatis
                                            $waMessage = "Halo Kak {$order->customer_name},\n\nKami dari *Haji Apud* telah menerima pesanan Anda dengan No. Invoice: *{$order->order_number}* senilai *Rp " . number_format($order->total_amount, 0, ',', '.') . "*.\n\nPesanan Anda akan segera kami proses. Terima kasih!";
                                        @endphp
                                        <a href="https://wa.me/{{ $phone }}?text={{ urlencode($waMessage) }}" target="_blank" class="inline-flex items-center gap-1.5 mt-2 bg-green-50 text-green-600 hover:bg-green-100 border border-green-200 px-2.5 py-1 rounded-md text-xs font-bold transition-colors">
                                            <i class="fab fa-whatsapp text-sm"></i> Chat WA
                                        </a>
                                    @endif
                                </td>
                                <td class="px-6 py-4 text-stone-600">{{ $order->created_at->format('d M Y, H:i') }}</td>
                                <td class="px-6 py-4 font-semibold text-green-600">Rp {{ number_format($order->total_amount, 0, ',', '.') }}</td>
                                <td class="px-6 py-4 text-center">
                                    @if($order->payment_proof)
                                        <a href="{{ asset('storage/' . $order->payment_proof) }}" target="_blank" class="group relative block w-12 h-12 mx-auto rounded-lg overflow-hidden border border-stone-200 shadow-sm bg-white" title="Lihat Bukti Transfer">
                                            <img src="{{ asset('storage/' . $order->payment_proof) }}" alt="Bukti" class="w-full h-full object-cover group-hover:scale-110 transition-transform">
                                            <div class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                                                <i class="fas fa-search text-white text-xs"></i>
                                            </div>
                                        </a>
                                    @else
                                        <span class="text-xs text-stone-400 italic">Tidak ada</span>
                                    @endif
                                </td>
                                <td class="px-6 py-4">
                                    <form action="{{ route('admin.order.status', $order->id) }}" method="POST" class="flex items-center justify-center gap-2">
                                        @csrf
                                        <select name="status" class="bg-white border border-stone-300 text-stone-700 text-xs font-bold rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-36 p-2.5 uppercase">
                                            <option value="pending" {{ $order->status == 'pending' ? 'selected' : '' }}>Pending</option>
                                            <option value="waiting_confirmation" {{ $order->status == 'waiting_confirmation' ? 'selected' : '' }}>Menunggu Konfirmasi</option>
                                            <option value="paid" {{ $order->status == 'paid' ? 'selected' : '' }}>Dibayar</option>
                                            <option value="processing" {{ $order->status == 'processing' ? 'selected' : '' }}>Proses</option>
                                            <option value="shipped" {{ $order->status == 'shipped' ? 'selected' : '' }}>Dikirim</option>
                                            <option value="delivered" {{ $order->status == 'delivered' ? 'selected' : '' }}>Terkirim</option>
                                            <option value="completed" {{ $order->status == 'completed' ? 'selected' : '' }}>Selesai</option>
                                            <option value="cancelled" {{ $order->status == 'cancelled' ? 'selected' : '' }}>Batal</option>
                                        </select>
                                        <button type="submit" class="bg-gray-900 hover:bg-amber-600 text-white w-9 h-9 rounded-lg flex items-center justify-center transition-colors shadow-sm" title="Simpan Status">
                                            <i class="fas fa-save"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                            @if(count($orders) == 0)
                            <tr>
                                <td colspan="5" class="px-6 py-10 text-center text-stone-500">Belum ada pesanan masuk.</td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>

            <div id="kelola-produk" class="bg-white rounded-3xl border border-stone-100 shadow-sm overflow-hidden mb-8 mt-8">
                <div class="px-6 py-5 border-b border-stone-100 flex justify-between items-center bg-stone-50">
                    <h3 class="font-bold text-lg text-gray-900"><i class="fas fa-box-open text-amber-600 mr-2"></i> Kelola Produk Toko</h3>
                    <a href="{{ route('admin.product.create') }}" class="bg-gray-950 hover:bg-terracotta-600 text-white px-5 py-2.5 rounded-xl text-sm font-bold transition-colors flex items-center gap-2">
                        <i class="fas fa-plus"></i> Tambah Produk
                    </a>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead class="bg-white text-stone-500 text-sm border-b border-stone-100">
                            <tr>
                                <th class="px-6 py-4 font-semibold w-16">Foto</th>
                                <th class="px-6 py-4 font-semibold">Nama Produk</th>
                                <th class="px-6 py-4 font-semibold text-center">Harga</th>
                                <th class="px-6 py-4 font-semibold text-center w-48">Update Stok</th>
                                <th class="px-6 py-4 font-semibold text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-stone-100 text-sm bg-white">
                            @foreach($products as $product)
                            <tr class="hover:bg-stone-50 transition-colors">
                                <td class="px-6 py-4">
                                    @if($product->image)
                                        <img src="{{ asset('storage/' . $product->image) }}" alt="Foto Produk" class="w-12 h-12 object-cover rounded-lg border border-stone-200 shadow-sm">
                                    @else
                                        <div class="w-12 h-12 bg-stone-100 rounded-lg flex items-center justify-center text-stone-400"><i class="fas fa-image"></i></div>
                                    @endif
                                </td>
                                <td class="px-6 py-4 font-bold text-gray-900">
                                    {{ $product->name }}
                                    <div class="text-xs text-stone-400 font-normal mt-1">Stok: {{ $product->stock }} | {{ $product->weight }}g</div>
                                </td>
                                <td class="px-6 py-4 text-center font-medium text-stone-600">Rp {{ number_format($product->price, 0, ',', '.') }}</td>
                                <td class="px-6 py-4">
                                    <form action="{{ route('admin.product.stock', $product->id) }}" method="POST" class="flex items-center justify-center gap-2">
                                        @csrf
                                        <input type="number" name="stock" value="{{ $product->stock }}" min="0" class="bg-white border border-stone-300 text-stone-900 text-sm font-bold rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-20 p-2 text-center" required>
                                        <button type="submit" class="bg-gray-900 hover:bg-amber-600 text-white w-9 h-9 rounded-lg flex items-center justify-center transition-colors shadow-sm" title="Simpan Stok">
                                            <i class="fas fa-save"></i>
                                        </button>
                                    </form>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <div class="flex items-center justify-center gap-2">
                                        <a href="{{ route('admin.product.edit', $product->id) }}" class="text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-800 w-8 h-8 rounded-lg flex items-center justify-center transition-colors" title="Edit Produk">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <form action="{{ route('admin.product.destroy', $product->id) }}" method="POST" onsubmit="return confirm('PERINGATAN: Apakah Anda yakin ingin menghapus produk ini secara permanen?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="text-red-600 bg-red-50 hover:bg-red-100 hover:text-red-800 w-8 h-8 rounded-lg flex items-center justify-center transition-colors" title="Hapus Produk">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </main>

    @if(session('success'))
        <div id="toast" class="fixed top-24 right-5 bg-green-600 text-white px-6 py-4 rounded-xl shadow-2xl z-50 flex items-center gap-3 transition-opacity duration-500">
            <i class="fas fa-check-circle text-xl"></i>
            <span class="font-medium">{{ session('success') }}</span>
        </div>
        <script>
            setTimeout(() => {
                document.getElementById('toast').style.opacity = '0';
                setTimeout(() => document.getElementById('toast').remove(), 500);
            }, 3000);
        </script>
    @endif

</body>
</html>