@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-8 text-center text-gray-800">Checkout Pesanan</h1>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <!-- Order Summary -->
        <div class="md:col-span-1 order-2 md:order-1">
            <div class="bg-white rounded-lg shadow-lg p-6 sticky top-24">
                <h2 class="text-xl font-bold mb-4 border-b pb-2">Ringkasan Pesanan</h2>
                <div class="space-y-4 mb-4">
                    @foreach($items as $item)
                    @php
                        $variation = $item['variation'] ?? null;
                        $variationText = '';
                        
                        if (!empty($variation)) {
                            $decoded = $variation;
                            if (is_string($variation)) {
                                $json = json_decode($variation, true);
                                if (json_last_error() === JSON_ERROR_NONE && is_array($json)) {
                                    $decoded = $json;
                                }
                            }

                            if (is_array($decoded)) {
                                $parts = [];
                                foreach ($decoded as $k => $v) {
                                    $parts[] = "$k: $v";
                                }
                                $variationText = implode(', ', $parts);
                            } else {
                                $variationText = (string)$decoded;
                            }
                        }

                        $imageUrl = null;
                        $videoUrl = null;
                        
                        if ($item['product']->image) {
                             $imageUrl = $item['product']->image;
                        } elseif ($item['product']->video) {
                             $videoUrl = $item['product']->video;
                        }
                    @endphp
                    <div class="flex gap-4">
                        @if($imageUrl)
                            <img src="{{ $item['product']->image }}" alt="{{ $item['product']->name }}" class="w-16 h-16 object-cover rounded" onerror="this.onerror=null; this.src='https://via.placeholder.com/64?text=No+Image';">
                        @elseif($item['product']->video)
                            <video src="{{ $item['product']->video }}#t=1" class="w-16 h-16 object-cover rounded" muted preload="metadata"></video>
                        @else
                            <div class="w-16 h-16 bg-gray-200 rounded flex items-center justify-center text-gray-400">
                                <i class="fas fa-image"></i>
                            </div>
                        @endif
                        <div class="flex-1">
                            <h3 class="font-semibold text-sm">{{ $item['product']->name }}</h3>

                            <p class="text-gray-500 text-xs mt-1">Qty: {{ $item['quantity'] }}</p>
                            <p class="text-yellow-600 font-bold text-sm">{{ \App\Models\Setting::get('currency_symbol', 'Rp') }} {{ number_format($item['subtotal'], 0, ',', '.') }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="border-t pt-4">
                    <div class="flex justify-between font-bold text-lg">
                        <span>Total</span>
                        <span class="text-yellow-600">{{ \App\Models\Setting::get('currency_symbol', 'Rp') }} {{ number_format($total, 0, ',', '.') }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Checkout Form -->
        <div class="md:col-span-2 order-1 md:order-2">
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-xl font-bold mb-6 border-b pb-2">Data Penerima</h2>
                <form id="checkoutForm" action="{{ route('checkout.process') }}" method="POST">
                    @csrf
                    <!-- Hidden Items for Processing -->
                    @foreach($items as $index => $item)
                        @php
                            $variationValue = $item['variation'] ?? '';
                            if (is_array($variationValue)) {
                                $variationValue = json_encode($variationValue);
                            }
                        @endphp
                        <input type="hidden" name="items[{{ $index }}][product_id]" value="{{ $item['product']->id }}">
                        <input type="hidden" name="items[{{ $index }}][quantity]" value="{{ $item['quantity'] }}">
                        <input type="hidden" name="items[{{ $index }}][variation]" value="{{ $variationValue }}">
                        <input type="hidden" name="items[{{ $index }}][subtotal]" value="{{ $item['subtotal'] }}">
                    @endforeach
                    <input type="hidden" name="total_amount" value="{{ $total }}">

                    <div class="grid grid-cols-1 gap-6">
                        <!-- Nama Lengkap -->
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nama Lengkap Penerima</label>
                            <input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-yellow-500 focus:border-yellow-500">
                        </div>

                        <!-- No HP -->
                        <div>
                            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Nomor HP Aktif / WhatsApp</label>
                            <input type="tel" id="phone" name="phone" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-yellow-500 focus:border-yellow-500">
                        </div>

                        <!-- Alamat Lengkap -->
                        <div>
                            <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Alamat Lengkap (Jalan, No. Rumah, RT/RW)</label>
                            <textarea id="address" name="address" rows="3" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-yellow-500 focus:border-yellow-500"></textarea>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- Kecamatan -->
                            <div>
                                <label for="district" class="block text-sm font-medium text-gray-700 mb-1">Kecamatan</label>
                                <input type="text" id="district" name="district" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-yellow-500 focus:border-yellow-500">
                            </div>

                            <!-- Kota/Kabupaten -->
                            <div>
                                <label for="city" class="block text-sm font-medium text-gray-700 mb-1">Kota / Kabupaten</label>
                                <input type="text" id="city" name="city" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-yellow-500 focus:border-yellow-500">
                            </div>
                        </div>

                        <!-- Provinsi -->
                        <div>
                            <label for="province" class="block text-sm font-medium text-gray-700 mb-1">Provinsi</label>
                            <select id="province" name="province" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-yellow-500 focus:border-yellow-500">
                                <option value="">Pilih Provinsi</option>
                                @foreach($provinces as $province)
                                    <option value="{{ $province }}">{{ $province }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!-- Courier Selection -->
                        <div>
                            <label for="courier" class="block text-sm font-medium text-gray-700 mb-1">Kurir Pengiriman</label>
                            <select id="courier" name="courier" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-yellow-500 focus:border-yellow-500">
                                <option value="">Pilih Kurir</option>
                                @foreach($couriers as $courier)
                                    <option value="{{ $courier->name }}">{{ $courier->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <!-- Payment Buttons -->
                    <div class="mt-8 space-y-4">
                        <button type="button" onclick="openPaymentModal()" class="w-full bg-yellow-600 text-white font-bold py-3 rounded-lg hover:bg-yellow-700 transition shadow-lg flex items-center justify-center gap-2">
                            <i class="fas fa-credit-card"></i> Pembayaran Via Website
                        </button>
                        
                        <button type="button" onclick="processWhatsAppCheckout()" class="w-full bg-green-500 text-white font-bold py-3 rounded-lg hover:bg-green-600 transition shadow-lg flex items-center justify-center gap-2">
                            <i class="fab fa-whatsapp"></i> Pembayaran Via WhatsApp
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Payment Modal -->
<div id="paymentModal" class="fixed inset-0 z-50 hidden bg-gray-900 bg-opacity-75 flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <div class="p-6">
            <div class="flex justify-between items-center mb-6 border-b pb-4">
                <h3 class="text-xl font-bold text-gray-800">Informasi Pembayaran</h3>
                <button onclick="closePaymentModal()" class="text-gray-500 hover:text-red-500">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>

            <div class="space-y-6">
                <!-- QRIS -->
                @if($qrisImage)
                <div class="flex flex-col items-center justify-center bg-gray-50 p-4 rounded-lg border">
                    <h4 class="font-bold text-gray-700 mb-2">Scan QRIS</h4>
                    @php
                        $qrisUrl = $qrisImage;
                        if ($qrisUrl && !filter_var($qrisUrl, FILTER_VALIDATE_URL)) {
                            $qrisUrl = asset($qrisUrl);
                        }
                    @endphp
                    <img src="{{ $qrisUrl }}" alt="QRIS Payment" class="max-w-[250px] rounded shadow-sm">
                </div>
                @endif

                <!-- Bank Transfer -->
                <div>
                    <h4 class="font-bold text-gray-700 mb-3">Transfer Bank</h4>
                    <div class="grid grid-cols-1 gap-3">
                        @foreach($banks as $bank)
                        <div class="flex items-center gap-4 p-3 border rounded-lg hover:bg-gray-50 transition">
                            @if($bank->logo)
                            <img src="{{ $bank->logo }}" alt="{{ $bank->bank_name }}" class="h-8 w-12 object-contain">
                            @else
                            <div class="h-8 w-12 bg-gray-200 flex items-center justify-center rounded text-xs font-bold text-gray-500">BANK</div>
                            @endif
                            <div>
                                <p class="font-bold text-gray-800">{{ $bank->bank_name }}</p>
                                <div class="flex items-center gap-2">
                                    <p class="text-sm font-mono text-gray-600">{{ $bank->account_number }}</p>
                                    <button onclick="navigator.clipboard.writeText('{{ $bank->account_number }}'); alert('Nomor rekening disalin!')" class="text-blue-500 hover:text-blue-700 text-xs" title="Salin">
                                        <i class="far fa-copy"></i>
                                    </button>
                                </div>
                                <p class="text-xs text-gray-500">a.n {{ $bank->account_holder }}</p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
                    <p class="text-sm text-yellow-800">
                        <i class="fas fa-info-circle mr-1"></i>
                        Silakan lakukan pembayaran sesuai total tagihan. Pesanan Anda akan diproses setelah pembayaran dikonfirmasi.
                    </p>
                </div>

                <button onclick="submitWebsiteOrder()" class="w-full bg-yellow-600 text-white font-bold py-3 rounded-lg hover:bg-yellow-700 transition shadow-lg">
                    Konfirmasi Pesanan
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    function openPaymentModal() {
        const form = document.getElementById('checkoutForm');
        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }
        document.getElementById('paymentModal').classList.remove('hidden');
    }

    function closePaymentModal() {
        document.getElementById('paymentModal').classList.add('hidden');
    }

    function submitWebsiteOrder() {
        const form = document.getElementById('checkoutForm');
        // Add a hidden input to indicate website payment
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'payment_method';
        input.value = 'website';
        form.appendChild(input);
        
        form.submit();
    }

    function processWhatsAppCheckout() {
        const form = document.getElementById('checkoutForm');
        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }

        // Add a hidden input to indicate whatsapp payment
        let input = form.querySelector('input[name="payment_method"]');
        if (!input) {
            input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'payment_method';
            form.appendChild(input);
        }
        input.value = 'whatsapp';
        
        form.submit();
    }
</script>
@endsection