@extends('layouts.app')

@section('title', 'Checkout - ' . setting('store_name'))

@section('content')
<div class="bg-slate-50 min-h-screen py-12 sm:py-20" 
     x-data="checkoutHandler({
        addresses: {{ $addresses->toJson() }},
        shippingMode: '{{ setting('shipping_mode', 'auto') }}',
        flatRate: {{ setting('shipping_flat_rate', 0) }},
        freeMin: {{ setting('shipping_free_min_order', 0) }},
        subtotal: {{ $subtotal }}
     })">
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl sm:text-4xl font-extrabold text-slate-900 mb-10 tracking-tight">Checkout</h1>

        @if ($errors->any())
            <div class="mb-10 p-6 bg-red-50 border-l-4 border-red-500 rounded-2xl">
                <p class="text-sm font-bold text-red-800 mb-2">Terjadi kesalahan pada data Anda:</p>
                <ul class="list-disc list-inside text-xs text-red-600 space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('checkout.store') }}" method="POST" id="checkout-form" x-ref="checkoutForm">
            @csrf
            <div class="flex flex-col lg:flex-row gap-12">
                <!-- Left Column: Shipping & Payment -->
                <div class="flex-grow space-y-8">
                    
                    <!-- 1. Shipping Address -->
                    <div class="bg-white p-6 sm:p-8 rounded-3xl border border-slate-100 shadow-sm">
                        <div class="flex justify-between items-center mb-6">
                            <h2 class="text-xl font-bold text-slate-900 flex items-center gap-3">
                                <span class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm">1</span>
                                Alamat Pengiriman
                            </h2>
                            <a href="{{ url('/profile') }}" class="text-sm font-bold text-primary hover:underline">Kelola Alamat</a>
                        </div>

                        @if($addresses->isEmpty())
                            <div class="p-10 text-center bg-slate-50 rounded-2xl border-2 border-dashed border-slate-200">
                                <p class="text-slate-500 mb-6 font-medium">Anda belum menambahkan alamat pengiriman.</p>
                                <a href="{{ url('/profile') }}" class="inline-block px-8 py-3 bg-primary text-white font-bold rounded-xl shadow-lg shadow-primary/20">Tambah Alamat Baru</a>
                            </div>
                        @else
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                @foreach($addresses as $address)
                                    <label class="relative p-5 rounded-2xl border-2 cursor-pointer transition-all"
                                           :class="selectedAddressId == {{ $address->id }} ? 'border-primary bg-primary/5' : 'border-slate-100 hover:border-slate-200'">
                                        <input type="radio" name="address_id" value="{{ $address->id }}" class="hidden" 
                                               @change="selectAddress({{ $address->toJson() }})"
                                               :checked="selectedAddressId == {{ $address->id }}">
                                        <div class="flex flex-col h-full">
                                            <div class="flex justify-between items-start mb-2">
                                                <span class="font-bold text-slate-900">{{ $address->label }}</span>
                                                <template x-if="selectedAddressId == {{ $address->id }}">
                                                    <svg class="h-5 w-5 text-primary" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
                                                </template>
                                            </div>
                                            <p class="text-sm text-slate-900 font-bold mb-1">{{ $address->recipient_name }}</p>
                                            <p class="text-xs text-slate-500 mb-2">{{ $address->phone }}</p>
                                            <p class="text-xs text-slate-600 line-clamp-2">{{ $address->address }}, {{ $address->city }}</p>
                                        </div>
                                    </label>
                                @endforeach
                            </div>
                        @endif

                        <!-- Hidden Fields for Order Submission -->
                        <input type="hidden" name="recipient_name" x-model="form.recipient_name">
                        <input type="hidden" name="recipient_phone" x-model="form.recipient_phone">
                        <input type="hidden" name="shipping_address" x-model="form.shipping_address">
                        <input type="hidden" name="province" x-model="form.province">
                        <input type="hidden" name="city" x-model="form.city">
                        <input type="hidden" name="district" x-model="form.district">
                        <input type="hidden" name="postal_code" x-model="form.postal_code">
                        <input type="hidden" name="biteship_area_id" x-model="form.biteship_area_id">
                    </div>

                    <!-- 2. Shipping Option (For Flat/Free/Manual/Auto) -->
                    <template x-if="shippingMode === 'auto'">
                        <div class="bg-white p-6 sm:p-8 rounded-3xl border border-slate-100 shadow-sm">
                            <h2 class="text-xl font-bold text-slate-900 flex items-center gap-3 mb-6">
                                <span class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm">2</span>
                                Opsi Pengiriman
                            </h2>

                            <div x-show="!form.biteship_area_id" class="p-4 bg-yellow-50 text-yellow-700 text-sm rounded-xl border border-yellow-100 mb-4">
                                Silakan pilih alamat yang memiliki area pengiriman terdaftar untuk melihat ongkir.
                            </div>

                            <div x-show="loadingRates" class="flex justify-center py-10">
                                <svg class="animate-spin h-8 w-8 text-primary" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                            </div>

                            <div class="space-y-3" x-show="!loadingRates && rates.length > 0">
                                <template x-for="rate in rates" :key="rate.company + rate.type">
                                    <label class="flex items-center justify-between p-4 rounded-xl border-2 cursor-pointer transition-all"
                                           :class="selectedRateId === (rate.company + rate.type) ? 'border-primary bg-primary/5' : 'border-slate-50 hover:border-slate-100'">
                                        <input type="radio" :value="rate.price" class="hidden" 
                                               @change="selectRate(rate)">
                                        <div class="flex items-center gap-4">
                                            <div class="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center font-bold text-[10px] uppercase text-slate-400">
                                                <span x-text="rate.company"></span>
                                            </div>
                                            <div>
                                                <p class="text-sm font-bold text-slate-900" x-text="rate.company + ' ' + rate.type"></p>
                                                <p class="text-xs text-slate-400" x-text="'Estimasi ' + rate.duration"></p>
                                            </div>
                                        </div>
                                        <p class="font-bold text-primary" x-text="formatCurrency(rate.price)"></p>
                                    </label>
                                </template>
                            </div>

                            <div x-show="!loadingRates && rates.length === 0 && form.biteship_area_id" class="text-center py-10">
                                <p class="text-slate-400 text-sm italic">Tidak ada kurir tersedia untuk rute ini.</p>
                            </div>
                        </div>
                    </template>

                    <template x-if="shippingMode === 'manual'">
                        <div class="bg-white p-6 sm:p-8 rounded-3xl border border-slate-100 shadow-sm">
                            <h2 class="text-xl font-bold text-slate-900 flex items-center gap-3 mb-6">
                                <span class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm">2</span>
                                Ongkos Kirim (Manual)
                            </h2>
                            <p class="text-sm text-slate-500 mb-4">{{ setting('shipping_manual_label', 'Silakan masukkan nominal ongkir sesuai kesepakatan.') }}</p>
                            <div class="relative">
                                <span class="absolute left-4 top-1/2 -translate-y-1/2 font-bold text-slate-400">Rp</span>
                                <input type="number" name="shipping_cost" x-model.number="form.shipping_cost" class="w-full pl-12 pr-4 py-4 bg-slate-50 border-none rounded-2xl focus:ring-2 focus:ring-primary/20 font-bold" placeholder="0">
                            </div>
                        </div>
                    </template>

                    <template x-if="['flat', 'free'].includes(shippingMode)">
                        <div class="bg-white p-6 sm:p-8 rounded-3xl border border-slate-100 shadow-sm">
                            <h2 class="text-xl font-bold text-slate-900 flex items-center gap-3 mb-6">
                                <span class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm">2</span>
                                Info Pengiriman
                            </h2>
                            <div class="flex items-center gap-4 p-5 rounded-2xl bg-slate-50 border border-slate-100">
                                <div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary">
                                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0a2 2 0 01-2 2H6a2 2 0 01-2-2m16 0l-8 4-8-4"/></svg>
                                </div>
                                <div>
                                    <p class="text-sm font-bold text-slate-900" x-text="shippingMode === 'free' ? 'Gratis Ongkir' : 'Pengiriman Flat Rate'"></p>
                                    <p class="text-xs text-slate-500" x-text="shippingMode === 'free' ? 'Pesanan Anda memenuhi syarat gratis ongkos kirim.' : 'Tarif pengiriman tetap ke seluruh wilayah.'"></p>
                                </div>
                            </div>
                        </div>
                    </template>

                    <!-- Hidden Fields for Shipping Details -->
                    <input type="hidden" name="shipping_cost" x-model="form.shipping_cost">
                    <input type="hidden" name="courier" x-model="form.courier">
                    <input type="hidden" name="courier_service" x-model="form.courier_service">
                    <input type="hidden" name="courier_service_name" x-model="form.courier_service_name">
                    <input type="hidden" name="estimated_days" x-model="form.estimated_days">

                    <!-- 3. Payment Method -->
                    <div class="bg-white p-6 sm:p-8 rounded-3xl border border-slate-100 shadow-sm">
                        <h2 class="text-xl font-bold text-slate-900 flex items-center gap-3 mb-6">
                            <span class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm">3</span>
                            Metode Pembayaran
                        </h2>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <!-- Hidden Field for Submission -->
                            <input type="hidden" name="payment_method" x-model="form.payment_method">

                            @if(setting('payment_manual_transfer'))
                                <label class="flex items-center gap-4 p-5 rounded-2xl border-2 cursor-pointer transition-all"
                                       :class="form.payment_method === 'manual_transfer' ? 'border-primary bg-primary/5' : 'border-slate-50 hover:border-slate-100'">
                                    <input type="radio" value="manual_transfer" x-model="form.payment_method" class="hidden">
                                    <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                                    </div>
                                    <div>
                                        <p class="text-sm font-bold text-slate-900">Transfer Bank</p>
                                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Verifikasi Manual</p>
                                    </div>
                                </label>
                            @endif

                            @if(setting('payment_manual_qris'))
                                <label class="flex items-center gap-4 p-5 rounded-2xl border-2 cursor-pointer transition-all"
                                       :class="form.payment_method === 'manual_qris' ? 'border-primary bg-primary/5' : 'border-slate-50 hover:border-slate-100'">
                                    <input type="radio" value="manual_qris" x-model="form.payment_method" class="hidden">
                                    <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-600">
                                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"/></svg>
                                    </div>
                                    <div>
                                        <p class="text-sm font-bold text-slate-900">Scan QRIS</p>
                                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Verifikasi Manual</p>
                                    </div>
                                </label>
                            @endif

                            @if(setting('payment_gateway'))
                                <label class="flex items-center gap-4 p-5 rounded-2xl border-2 cursor-pointer transition-all"
                                       :class="form.payment_method === 'payment_gateway' ? 'border-primary bg-primary/5' : 'border-slate-50 hover:border-slate-100'">
                                    <input type="radio" value="payment_gateway" x-model="form.payment_method" class="hidden">
                                    <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                                    </div>
                                    <div>
                                        <p class="text-sm font-bold text-slate-900">Otomatis</p>
                                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">VA, E-Wallet, Retail</p>
                                    </div>
                                </label>
                            @endif
                        </div>
                    </div>

                    <!-- 4. Notes -->
                    <div class="bg-white p-6 sm:p-8 rounded-3xl border border-slate-100 shadow-sm">
                        <h2 class="text-xl font-bold text-slate-900 flex items-center gap-3 mb-6">
                            <span class="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center text-sm">4</span>
                            Catatan Pesanan
                        </h2>
                        <textarea name="notes" x-model="form.notes" rows="3" class="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl focus:ring-2 focus:ring-primary/20 text-sm" placeholder="Catatan untuk penjual (opsional)..."></textarea>
                    </div>

                </div>

                <!-- Right Column: Summary -->
                <div class="w-full lg:w-96">
                    <div class="bg-white p-8 rounded-[2rem] border border-slate-100 shadow-xl shadow-slate-200/50 sticky top-28">
                        <h3 class="text-xl font-bold text-slate-900 mb-8">Ringkasan Pesanan</h3>
                        
                        <div class="space-y-4 mb-8">
                            <div class="flex justify-between text-sm">
                                <span class="text-slate-500">Subtotal Produk</span>
                                <span class="font-bold text-slate-900" x-text="formatCurrency(subtotal)"></span>
                            </div>
                            <div class="flex justify-between text-sm">
                                <span class="text-slate-500">Ongkos Kirim</span>
                                <span class="font-bold text-slate-900" x-text="form.shipping_cost > 0 ? formatCurrency(form.shipping_cost) : (shippingMode === 'free' ? 'Gratis' : '-')"></span>
                            </div>
                            <div class="border-t border-slate-100 pt-4 flex justify-between items-end">
                                <span class="text-slate-900 font-bold">Total Tagihan</span>
                                <span class="text-2xl font-black text-primary" x-text="formatCurrency(subtotal + form.shipping_cost)"></span>
                            </div>
                        </div>

                        <button type="button" 
                                @click="submitOrder"
                                class="w-full flex justify-center items-center py-5 bg-primary text-white font-bold rounded-2xl shadow-xl shadow-primary/20 hover:scale-105 active:scale-95 transition-all disabled:opacity-50">
                            <template x-if="!submitting">
                                <span>Buat Pesanan Sekarang</span>
                            </template>
                            <template x-if="submitting">
                                <div class="flex items-center gap-2">
                                    <svg class="animate-spin h-5 w-5 text-white" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                                    <span>Memproses...</span>
                                </div>
                            </template>
                        </button>
                        
                        <p class="text-[10px] text-slate-400 mt-6 text-center leading-relaxed">
                            Dengan menekan tombol di atas, Anda menyetujui syarat dan ketentuan yang berlaku di toko kami.
                        </p>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('checkoutHandler', (config) => ({
            addresses: config.addresses,
            shippingMode: config.shippingMode,
            flatRate: config.flatRate,
            freeMin: config.freeMin,
            subtotal: config.subtotal,
            
            selectedAddressId: null,
            loadingRates: false,
            rates: [],
            selectedRateId: null,
            submitting: false,

            form: {
                recipient_name: '',
                recipient_phone: '',
                shipping_address: '',
                province: '',
                city: '',
                district: '',
                postal_code: '',
                biteship_area_id: '',
                shipping_cost: 0,
                payment_method: 'manual_transfer',
                courier: '',
                courier_service: '',
                courier_service_name: '',
                estimated_days: '',
                notes: ''
            },

            init() {
                // Initial logic for flat/free shipping
                if (this.shippingMode === 'flat') {
                    this.form.shipping_cost = this.flatRate;
                } else if (this.shippingMode === 'free') {
                    if (this.subtotal >= this.freeMin) {
                        this.form.shipping_cost = 0;
                    } else {
                        this.form.shipping_cost = this.flatRate;
                    }
                }

                // Select primary address by default
                const primary = this.addresses.find(a => a.is_primary);
                if (primary) {
                    this.selectAddress(primary);
                } else if (this.addresses.length > 0) {
                    this.selectAddress(this.addresses[0]);
                }
            },

            selectAddress(address) {
                this.selectedAddressId = address.id;
                this.form.recipient_name = address.recipient_name;
                this.form.recipient_phone = address.phone;
                this.form.shipping_address = address.address;
                this.form.province = address.province;
                this.form.city = address.city;
                this.form.district = address.district;
                this.form.postal_code = address.postal_code;
                this.form.biteship_area_id = address.biteship_area_id;

                if (this.shippingMode === 'auto' && address.biteship_area_id) {
                    this.fetchRates();
                } else if (this.shippingMode === 'auto') {
                    this.rates = [];
                    this.form.shipping_cost = 0;
                }
            },

            async fetchRates() {
                this.loadingRates = true;
                this.rates = [];
                this.selectedRateId = null;
                this.form.shipping_cost = 0;

                try {
                    const response = await axios.post('{{ route('checkout.rates') }}', {
                        destination_area_id: this.form.biteship_area_id
                    }, {
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    });

                    if (response.data.success) {
                        this.rates = response.data.data;
                    }
                } catch (e) {
                    console.error('Error fetching rates:', e);
                    alert('Gagal mengambil data ongkir. Silakan coba lagi.');
                } finally {
                    this.loadingRates = false;
                }
            },

            selectRate(rate) {
                this.selectedRateId = rate.company + rate.type;
                this.form.shipping_cost = rate.price;
                this.form.courier = rate.company;
                this.form.courier_service = rate.type;
                this.form.courier_service_name = rate.company + ' ' + rate.type;
                this.form.estimated_days = rate.duration;
            },

            formatCurrency(val) {
                return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(val);
            },

            get canSubmit() {
                if (!this.selectedAddressId) return false;
                if (this.shippingMode === 'auto' && !this.selectedRateId) return false;
                if (this.shippingMode === 'manual' && (this.form.shipping_cost === null || this.form.shipping_cost === undefined)) return false;
                if (!this.form.payment_method) return false;
                return true;
            },

            submitOrder() {
                if (!this.selectedAddressId) {
                    alert('Silakan pilih alamat pengiriman terlebih dahulu.');
                    return;
                }
                if (this.shippingMode === 'auto' && !this.selectedRateId) {
                    alert('Silakan pilih opsi pengiriman (kurir) terlebih dahulu.');
                    return;
                }
                if (!this.form.payment_method) {
                    alert('Silakan pilih metode pembayaran terlebih dahulu.');
                    return;
                }

                if (this.submitting) return;
                
                this.submitting = true;
                this.$refs.checkoutForm.submit();
            }
        }));
    });
</script>
@endpush
@endsection