@extends('layouts.app')

@section('title', 'Pilih Metode Pembayaran Xendit')

@section('content')
<div class="max-w-4xl mx-auto px-4 py-8">
    <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
        {{-- Header --}}
        <div class="bg-gradient-to-r from-[#4663ac] to-[#c1d8f0] p-8 text-white">
            <div class="flex items-center gap-4">
                <div class="w-16 h-16 rounded-xl bg-white p-2 flex items-center justify-center">
                    <svg class="w-10 h-10 text-[#4663ac]" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88a9.947 9.947 0 0 1 12.28 0C16.43 19.18 14.03 20 12 20z"/>
                    </svg>
                </div>
                <div>
                    <h1 class="text-3xl font-bold">Pilih Metode Pembayaran</h1>
                    <p class="text-white/90 mt-1">Order #{{ $order->order_number }}</p>
                </div>
            </div>
        </div>

        {{-- Content --}}
        <div class="p-8">
            {{-- Order Summary --}}
            <div class="bg-gray-50 rounded-xl p-6 mb-8">
                <h2 class="text-lg font-semibold mb-4">Ringkasan Pesanan</h2>
                <div class="space-y-2">
                    <div class="flex justify-between">
                        <span class="text-gray-600">Total Pembayaran</span>
                        <span class="font-bold text-xl text-[#4663ac]">
                            Rp {{ number_format($order->total, 0, ',', '.') }}
                        </span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Status</span>
                        <span class="text-yellow-600 font-medium">Menunggu Pembayaran</span>
                    </div>
                </div>
            </div>

            {{-- Payment Methods --}}
            <h2 class="text-xl font-bold mb-4">Metode Pembayaran</h2>

            <form action="{{ route('checkout.xendit.process', $order->id) }}" method="POST" id="xenditForm">
                @csrf

                @php
                    $groupedChannels = collect($channels)->groupBy('type');
                @endphp

                {{-- Virtual Account --}}
                @if(isset($groupedChannels['virtual_account']))
                <div class="mb-6">
                    <h3 class="font-semibold mb-3 text-gray-700">Virtual Account</h3>
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                        @foreach($groupedChannels['virtual_account'] as $code => $channel)
                        <label class="payment-option border-2 rounded-xl p-4 cursor-pointer hover:border-[#4663ac] transition-all">
                            <input type="radio" name="channel" value="{{ $code }}" class="hidden">
                            <div class="text-center">
                                <div class="w-12 h-12 mx-auto mb-2 bg-gray-100 rounded-lg flex items-center justify-center">
                                    <span class="font-bold text-[#4663ac] text-sm">
                                        {{ explode(' ', $channel['name'])[0] }}
                                    </span>
                                </div>
                                <span class="text-sm font-medium block">{{ $channel['name'] }}</span>
                                <span class="text-xs text-gray-500 mt-1 block">{{ $channel['description'] }}</span>
                            </div>
                        </label>
                        @endforeach
                    </div>
                </div>
                @endif

                {{-- E-Wallet --}}
                @if(isset($groupedChannels['ewallet']))
                <div class="mb-6">
                    <h3 class="font-semibold mb-3 text-gray-700">E-Wallet</h3>
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                        @foreach($groupedChannels['ewallet'] as $code => $channel)
                        <label class="payment-option border-2 rounded-xl p-4 cursor-pointer hover:border-[#4663ac] transition-all">
                            <input type="radio" name="channel" value="{{ $code }}" class="hidden">
                            <div class="text-center">
                                <div class="w-12 h-12 mx-auto mb-2 bg-gray-100 rounded-lg flex items-center justify-center">
                                    <span class="font-bold text-[#4663ac] text-sm">
                                        {{ explode(' ', $channel['name'])[0] }}
                                    </span>
                                </div>
                                <span class="text-sm font-medium block">{{ $channel['name'] }}</span>
                                <span class="text-xs text-gray-500 mt-1 block">{{ $channel['description'] }}</span>
                            </div>
                        </label>
                        @endforeach
                    </div>
                </div>
                @endif

                {{-- QRIS --}}
                @if(isset($groupedChannels['qris']))
                <div class="mb-6">
                    <h3 class="font-semibold mb-3 text-gray-700">QRIS</h3>
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                        @foreach($groupedChannels['qris'] as $code => $channel)
                        <label class="payment-option border-2 rounded-xl p-4 cursor-pointer hover:border-[#4663ac] transition-all">
                            <input type="radio" name="channel" value="{{ $code }}" class="hidden">
                            <div class="text-center">
                                <div class="w-12 h-12 mx-auto mb-2 bg-gray-100 rounded-lg flex items-center justify-center">
                                    <span class="font-bold text-[#4663ac]">QRIS</span>
                                </div>
                                <span class="text-sm font-medium block">{{ $channel['name'] }}</span>
                                <span class="text-xs text-gray-500 mt-1 block">{{ $channel['description'] }}</span>
                            </div>
                        </label>
                        @endforeach
                    </div>
                </div>
                @endif

                {{-- Retail --}}
                @if(isset($groupedChannels['retail']))
                <div class="mb-8">
                    <h3 class="font-semibold mb-3 text-gray-700">Retail Outlet</h3>
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                        @foreach($groupedChannels['retail'] as $code => $channel)
                        <label class="payment-option border-2 rounded-xl p-4 cursor-pointer hover:border-[#4663ac] transition-all">
                            <input type="radio" name="channel" value="{{ $code }}" class="hidden">
                            <div class="text-center">
                                <div class="w-12 h-12 mx-auto mb-2 bg-gray-100 rounded-lg flex items-center justify-center">
                                    <span class="font-bold text-[#4663ac] text-sm">{{ $channel['name'] }}</span>
                                </div>
                                <span class="text-sm font-medium block">{{ $channel['name'] }}</span>
                                <span class="text-xs text-gray-500 mt-1 block">{{ $channel['description'] }}</span>
                            </div>
                        </label>
                        @endforeach
                    </div>
                </div>
                @endif

                {{-- Submit Button --}}
                <button type="submit" id="submitBtn" disabled
                        class="w-full py-4 bg-gradient-to-r from-[#4663ac] to-[#c1d8f0] text-white font-bold rounded-xl opacity-50 cursor-not-allowed transition-all">
                    Pilih Metode Pembayaran
                </button>
            </form>

            {{-- Payment Info --}}
            <div class="mt-6 p-4 bg-blue-50 rounded-xl">
                <div class="flex items-start gap-3">
                    <svg class="w-5 h-5 text-blue-600 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <div class="text-sm text-blue-800">
                        <p class="font-medium mb-1">Informasi Penting:</p>
                        <ul class="list-disc pl-4 space-y-1">
                            <li>Anda akan diarahkan ke halaman pembayaran Xendit</li>
                            <li>Pembayaran diproses secara real-time</li>
                            <li>Status pesanan akan otomatis terupdate setelah pembayaran sukses</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.payment-option {
    transition: all 0.2s ease;
}
.payment-option.active {
    border-color: #4663ac;
    background-color: #f0f4ff;
}
.payment-option input:checked + div {
    display: block;
}
.payment-option:has(input:checked) {
    border-color: #4663ac;
    background-color: #f0f4ff;
    transform: scale(1.02);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const radios = document.querySelectorAll('input[name="channel"]');
    const submitBtn = document.getElementById('submitBtn');

    radios.forEach(radio => {
        radio.addEventListener('change', function() {
            // Remove active class from all options
            document.querySelectorAll('.payment-option').forEach(opt => {
                opt.classList.remove('active', 'border-[#4663ac]', 'bg-[#f0f4ff]');
            });

            // Add active class to selected option
            this.closest('.payment-option').classList.add('active', 'border-[#4663ac]', 'bg-[#f0f4ff]');

            // Enable submit button
            submitBtn.disabled = false;
            submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
            submitBtn.classList.add('hover:opacity-90', 'cursor-pointer');
        });
    });
});
</script>
@endsection