@extends('layouts.app')

@section('title', 'Payment')

@section('content')
<div class="container py-5">
    {{-- Progress Steps --}}
    @include('storefront.checkout.partials.checkout-progress', ['current' => 'payment'])

    {{-- Page Header --}}
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
        <div>
            <h1 class="h3 fw-800 mb-1">
                <i class="fas fa-credit-card text-primary me-2"></i>Payment
            </h1>
            <p class="text-muted small mb-0">
                Choose your payment method to complete the order
            </p>
        </div>
        <span class="badge bg-warning text-dark">
            <i class="fas fa-clock me-1"></i>
            Checkout expires {{ $checkout->expires_at->diffForHumans() }}
        </span>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            <strong>Please fix the following errors:</strong>
            <ul class="mb-0 mt-1">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row g-4">
        {{-- Left: Payment Methods --}}
        <div class="col-lg-7">
            @include('storefront.checkout.partials.payment-method', [
                'checkout' => $checkout,
                'availablePaymentMethods' => $availablePaymentMethods,
                'gateways' => $gateways,
                'paymentSettings' => $paymentSettings,
                'walletBalance' => $walletBalance,
                'walletCanCoverCheckout' => $walletCanCoverCheckout,
            ])
        </div>

        {{-- Right: Payment Summary --}}
        <div class="col-lg-5">
            @include('storefront.checkout.partials.payment-summary', ['checkout' => $checkout])
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .fw-600 { font-weight: 600; }
    .fw-700 { font-weight: 700; }
    .fw-800 { font-weight: 800; }
</style>
@endpush