@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold text-gray-900 mb-8">Checkout</h1>

    <div class="grid md:grid-cols-3 gap-6">
        <!-- Form -->
        <div class="md:col-span-2">
            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
                <form action="{{ route('orders.store') }}" method="POST" id="checkout-form">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $product->id }}">

                    <!-- Dynamic Input Fields -->
                    @foreach($inputConfigs as $config)
                    <div class="mb-5">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            {{ $config->field_label }}
                            @if($config->is_required)<span class="text-red-500">*</span>@endif
                        </label>
                        
                        @if($config->field_type === 'select')
                        <select name="{{ $config->field_name }}" 
                                {{ $config->is_required ? 'required' : '' }}
                                class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#0C951E] focus:border-[#0C951E]">
                            <option value="">Pilih...</option>
                        </select>
                        @else
                        <input type="{{ $config->field_type }}" 
                               name="{{ $config->field_name }}" 
                               placeholder="{{ $config->placeholder }}"
                               {{ $config->is_required ? 'required' : '' }}
                               class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#0C951E] focus:border-[#0C951E] @error($config->field_name) border-red-300 @enderror">
                        @endif
                        
                        @if($config->help_text)
                        <p class="text-xs text-gray-500 mt-1">{{ $config->help_text }}</p>
                        @endif
                        @error($config->field_name)
                        <p class="text-sm text-red-500 mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    @endforeach

                    <!-- WhatsApp -->
                    <div class="mb-5">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Nomor WhatsApp <span class="text-red-500">*</span>
                        </label>
                        <input type="tel" name="whatsapp" required
                               placeholder="08xxxxxxxxxx"
                               class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#0C951E] focus:border-[#0C951E]">
                        <p class="text-xs text-gray-500 mt-1">Untuk notifikasi status pesanan</p>
                    </div>

                    <!-- Payment Method -->
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-3">Metode Pembayaran <span class="text-red-500">*</span></label>
                        <div class="space-y-2">
                            <label class="flex items-center p-4 border border-gray-300 rounded-xl cursor-pointer hover:border-[#0C951E] hover:bg-green-50 transition-all">
                                <input type="radio" name="payment_method" value="qris" required class="w-5 h-5 text-[#0C951E] focus:ring-[#0C951E]">
                                <span class="ml-3 font-medium">QRIS</span>
                            </label>
                            <label class="flex items-center p-4 border border-gray-300 rounded-xl cursor-pointer hover:border-[#0C951E] hover:bg-green-50 transition-all">
                                <input type="radio" name="payment_method" value="bank_transfer" required class="w-5 h-5 text-[#0C951E] focus:ring-[#0C951E]">
                                <span class="ml-3 font-medium">Transfer Bank</span>
                            </label>
                            <label class="flex items-center p-4 border border-gray-300 rounded-xl cursor-pointer hover:border-[#0C951E] hover:bg-green-50 transition-all">
                                <input type="radio" name="payment_method" value="e_wallet" required class="w-5 h-5 text-[#0C951E] focus:ring-[#0C951E]">
                                <span class="ml-3 font-medium">E-Wallet (OVO/DANA/GoPay)</span>
                            </label>
                        </div>
                    </div>

                    <button type="submit" class="w-full py-3.5 bg-[#0C951E] hover:bg-[#0a7d18] text-white rounded-xl font-bold text-lg transition-colors">
                        Buat Pesanan
                    </button>
                </form>
            </div>
        </div>

        <!-- Order Summary -->
        <div>
            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 sticky top-24">
                <h3 class="font-bold text-gray-900 mb-4">Ringkasan Pesanan</h3>
                
                <div class="mb-4 pb-4 border-b border-gray-100">
                    <p class="text-sm text-gray-500 mb-1">{{ $brand->brand }}</p>
                    <p class="font-semibold text-gray-900">{{ $product->name }}</p>
                </div>

                <div class="space-y-2 mb-4 pb-4 border-b border-gray-100">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Harga</span>
                        <span class="font-semibold">Rp {{ number_format($product->price, 0, ',', '.') }}</span>
                    </div>
                    @if($product->discount_price && $product->discount_price < $product->price)
                    <div class="flex justify-between text-sm text-red-600">
                        <span>Diskon</span>
                        <span class="font-semibold">- Rp {{ number_format($product->price - $product->discount_price, 0, ',', '.') }}</span>
                    </div>
                    @endif
                </div>

                <div class="flex justify-between items-center">
                    <span class="font-semibold text-gray-900">Total</span>
                    <span class="text-2xl font-bold text-[#0C951E]">
                        Rp {{ number_format($product->discount_price ?? $product->price, 0, ',', '.') }}
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection