@extends('layouts.app')

@section('title', 'Secure Payment - Texora')

@section('content')
<main class="txp-page" data-txp-page>
    <section class="txp-hero txp-hero--dark" data-txp-hero>
        <div class="txp-shell txp-hero-grid">
            <div>
                <span class="txp-kicker txp-reveal">Secure payment</span>
                <h1 class="txp-title txp-reveal">Complete your order<span class="txp-dot">.</span></h1>
            </div>
            <p class="txp-lede txp-reveal">Order #{{ $order->order_number }} / Total balance {{ $order->currency }} {{ number_format($order->total_amount) }}</p>
        </div>
    </section>

    <section class="txp-section txp-dark" x-data="{ selectedMethod: null }" data-txp-section>
        <div class="txp-shell txp-hero-grid">
            <div>
                <div class="txp-card mb-8">
                    <small>Service summary</small>
                    <h3>{{ $order->service->name }}</h3>
                    <p>{{ $order->package->name }}</p>
                    <div class="txp-card-meta">
                        <span>Amount due</span>
                        <span>{{ $order->currency }} {{ number_format($order->total_amount) }}</span>
                    </div>
                </div>

                <span class="txp-kicker">Payment method</span>
                <div class="space-y-4">
                    @foreach($paymentMethods as $method)
                        <button
                            type="button"
                            @click="selectedMethod = {{ $method->id }}"
                            :class="selectedMethod === {{ $method->id }} ? 'border-[#37d5a7] bg-white/10' : 'border-white/10 bg-white/5'"
                            class="flex w-full items-center justify-between border p-5 text-left transition hover:border-[#37d5a7]/60"
                        >
                            <span class="flex items-center gap-4">
                                @if($method->logo)
                                    <img src="{{ asset('storage/' . $method->logo) }}" loading="lazy" class="h-10 w-10 object-contain bg-white/10 p-1" alt="{{ $method->name }}">
                                @else
                                    <span class="grid h-10 w-10 place-items-center bg-white/10 text-white">$</span>
                                @endif
                                <strong class="text-white">{{ $method->name }}</strong>
                            </span>
                            <span class="text-white/40">Select</span>
                        </button>
                    @endforeach
                </div>
            </div>

            <div>
                <div x-show="!selectedMethod" class="txp-card min-h-[420px] items-center justify-center text-center">
                    <small>Waiting</small>
                    <h3>Choose a method</h3>
                    <p>Your payment instructions will appear here.</p>
                </div>

                @foreach($paymentMethods as $method)
                    <div x-show="selectedMethod === {{ $method->id }}" class="txp-card" style="display:none;">
                        <small>Payment details</small>
                        <h3>{{ $method->name }}</h3>
                        <div class="my-8 space-y-4">
                            <div>
                                <span class="txp-label">Account name</span>
                                <p class="text-xl font-black">{{ $method->account_name ?? 'Not Set' }}</p>
                            </div>
                            <div>
                                <span class="txp-label">Account number</span>
                                <p class="text-2xl font-black text-[#1710e6]">{{ $method->account_number ?? 'Not Set' }}</p>
                            </div>
                            <div>
                                <span class="txp-label">Instructions</span>
                                <p>{{ $method->instructions ?? 'Please transfer the exact amount and upload screenshot below.' }}</p>
                            </div>
                        </div>

                        <form action="{{ route('payment.manual.submit', $order) }}" method="POST" enctype="multipart/form-data" class="txp-form">
                            @csrf
                            <input type="hidden" name="payment_method_id" value="{{ $method->id }}">
                            <label class="txp-label" for="screenshot-{{ $method->id }}">Upload payment screenshot</label>
                            <input id="screenshot-{{ $method->id }}" type="file" name="screenshot" class="txp-input" required>
                            <button type="submit" class="txp-button">Confirm Payment Submission</button>
                        </form>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
</main>
@endsection