@extends('layouts.yellow')
@section('content')
<div class="container-fluid py-2">
    <div class="row justify-content-center">
        <div class="col-12 col-lg-10">
            
            <!-- Tarjeta principal simplificada -->
            <div class="card border-0 shadow-sm rounded-3 overflow-hidden">
                <div class="card-header  text-white py-4">
                    <h2 class="mb-0 fs-4 fw-semibold">
                        <i class="bi bi-credit-card me-2"></i>
                        {{ __('create-payment.titleView') }}
                    </h2>
                </div>

                <div class="card-body p-4">
                    <!-- Sección gráfica minimalista -->
                    <div class="text-center mb-5">

                        <img src="{{asset('img/money2.png')}}" 
                             alt="Payment System"
                             class="img-fluid w-40"
                             style="max-width: 200px; opacity: 0.9;">
                    </div>

                    <!-- Formulario con espaciado limpio -->
                    <div class="px-lg-4">
                        <x-PaymentForm 
                            :currencies="$currencies" 
                            :paymentMethods="$paymentMethods" 
                            :doctors="$doctors"
                            :payment="$payment"
                            class="payment-form-style">
                        </x-PaymentForm>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .payment-form-style {
        background: #f8f9fa;
        border-radius: 0.5rem;
        padding: 2rem;
    }

    .card {
        transition: transform 0.2s ease;
        border: 1px solid rgba(66, 69, 164, 0.15);
    }

    .card:hover {
        transform: translateY(-2px);
    }

    .bg-00416A {
        background: #00416A;
        background: linear-gradient(135deg, #00416A 0%, #4245A4 100%);
    }

    .rounded-3 {
        border-radius: 1rem !important;
    }

    @media (max-width: 768px) {
        .card-body {
            padding: 1.5rem !important;
        }
        
        .payment-form-style {
            padding: 1rem;
        }
    }
</style>

<script src="{{ asset('js/create-payment.js') }}" defer></script>
@endsection