<x-app-layout>
    <div class="py-12 bg-gray-50 min-h-screen">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8 space-y-6">
            
            <!-- Header Section -->
            <div class="bg-white p-8 rounded-2xl border border-gray-100 shadow-sm">
                <h2 class="text-2xl font-black text-gray-800 uppercase tracking-tight">Edit Pesanan</h2>
                <p class="text-sm text-gray-400 font-medium mt-1">Mengubah detail pesanan {{ $pesanan->kode_pesanan }}.</p>
            </div>

            <form action="{{ route('customer.pesanan.update', $pesanan->id) }}" method="POST" class="space-y-6">
                @csrf
                @method('PUT')
                
                <!-- Product List -->
                <div class="bg-white p-8 rounded-2xl border border-gray-100 shadow-sm space-y-4">
                    @foreach($produks as $produk)
                        @php
                            $detail = $pesanan->detailPesanan->firstWhere('produk_id', $produk->id);
                            $qty = $detail ? $detail->qty : 0;
                        @endphp
                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-2xl border border-gray-100">
                            <div class="flex-grow">
                                <h4 class="font-black text-gray-800 text-sm">{{ $produk->nama_produk }}</h4>
                                <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">{{ $produk->berat }} {{ $produk->satuan }}</p>
                                
                                <div class="mt-2 space-y-0.5">
                                    <p class="text-[10px] font-black text-gray-400 uppercase">Harga: Rp {{ number_format($produk->harga, 0, ',', '.') }}</p>
                                    @if($produk->min_qty_mitra > 0)
                                        <p class="text-[10px] font-black text-green-700 uppercase">Harga Mitra: Rp {{ number_format($produk->harga_mitra, 0, ',', '.') }} (Min. {{ $produk->min_qty_mitra }} pcs)</p>
                                    @endif
                                </div>
                            </div>
                            
                            <input type="number" 
                                   name="qty[{{ $produk->id }}]" 
                                   class="qty-input w-24 px-3 py-2 rounded-xl border border-gray-200 text-center font-black text-sm text-gray-800 focus:ring-2 focus:ring-green-700/20 focus:border-green-700" 
                                   value="{{ old('qty.'.$produk->id, $qty) }}" 
                                   min="0"
                                   data-harga="{{ $produk->harga }}"
                                   data-min-mitra="{{ $produk->min_qty_mitra }}"
                                   data-harga-mitra="{{ $produk->harga_mitra }}"
                                   oninput="hitungTotal()">
                        </div>
                    @endforeach
                </div>

                <!-- Shipping Details -->
                <div class="bg-white p-8 rounded-2xl border border-gray-100 shadow-sm space-y-6">
                    <h5 class="font-black text-gray-800 uppercase text-sm tracking-widest border-b border-gray-100 pb-4">Detail Pengiriman</h5>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Tanggal Kirim</label>
                            <input type="date" name="tanggal_kirim" required 
                                   value="{{ old('tanggal_kirim', $pesanan->tanggal_kirim) }}"
                                   class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm font-bold text-gray-800 focus:ring-2 focus:ring-green-700/20 focus:border-green-700">
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Catatan Tambahan (Opsional)</label>
                        <textarea name="catatan" rows="3" 
                                  class="w-full px-4 py-3 rounded-xl border border-gray-200 text-sm font-bold text-gray-800 focus:ring-2 focus:ring-green-700/20 focus:border-green-700" 
                                  placeholder="Contoh: Titip di pos satpam...">{{ old('catatan', $pesanan->catatan) }}</textarea>
                    </div>
                </div>

                <!-- Total & Submit -->
                <div class="bg-green-700 p-8 rounded-2xl flex flex-col sm:flex-row justify-between items-center gap-4 shadow-lg shadow-green-700/20">
                    <div class="text-white">
                        <p class="text-[10px] font-black uppercase tracking-widest opacity-80">Total Pembayaran</p>
                        <span id="total-display" class="text-2xl font-black">Rp 0</span>
                    </div>
                    <div class="flex gap-3">
                        <a href="{{ route('customer.pesanan.index') }}" class="bg-white/10 text-white px-6 py-3 rounded-xl font-black text-xs uppercase tracking-widest hover:bg-white/20 transition-all">Batal</a>
                        <button type="submit" class="bg-white text-green-700 px-8 py-3 rounded-xl font-black text-xs uppercase tracking-widest shadow-sm hover:bg-gray-50 transition-all active:scale-95">
                            Simpan Perubahan
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
        function hitungTotal() {
            let grandTotal = 0;
            document.querySelectorAll('.qty-input').forEach(input => {
                let qty = parseInt(input.value) || 0;
                let hargaNormal = parseInt(input.dataset.harga);
                let minMitra = parseInt(input.dataset.minMitra);
                let hargaMitra = parseInt(input.dataset.hargaMitra);
                
                let hargaSatuan = (minMitra > 0 && qty >= minMitra) ? hargaMitra : hargaNormal;
                grandTotal += (qty * hargaSatuan);
            });
            document.getElementById('total-display').innerText = 'Rp ' + grandTotal.toLocaleString('id-ID');
        }
        window.onload = hitungTotal;
    </script>
</x-app-layout>