@extends('layouts.dashboardnew')

@section('content')

<div class="row g-4">
    <div class="col-12">

        {{-- Indicador de progreso --}}
        <div class="d-flex justify-content-center align-items-center gap-2 mb-4 flex-wrap">
            <div class="d-flex align-items-center gap-2 text-success">
                <span class="badge rounded-circle bg-success d-inline-flex align-items-center justify-content-center" style="width:32px;height:32px;">
                    <i class="fa-solid fa-check"></i>
                </span>
                <span class="fw-semibold d-none d-sm-inline">Datos de envío</span>
            </div>
            <span class="border-top border-2 border-success" style="width:50px;"></span>
            <div class="d-flex align-items-center gap-2 text-info">
                <span class="badge rounded-circle bg-info d-inline-flex align-items-center justify-content-center fw-bold" style="width:32px;height:32px;">2</span>
                <span class="fw-semibold d-none d-sm-inline">Método de pago</span>
            </div>
        </div>

        <form method="POST" action="{{ route('carrito-pago-save') }}">
            {{ csrf_field() }}

            <div class="row g-4">

                {{-- ============ COLUMNA IZQUIERDA: PASO 2 ============ --}}
                <div class="col-lg-7">

                    <div class="mb-4">
                        <h2 class="fw-bold mb-1">Método de pago</h2>
                        <p class="text-muted mb-0">Selecciona cómo deseas pagar tu pedido</p>
                    </div>

                    {{-- Resumen de envío (datos del paso 1, en modo lectura) --}}
                    <div class="card border-0 shadow-sm rounded-4 mb-4">
                        <div class="card-body p-4">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <h6 class="d-flex align-items-center gap-2 mb-0 text-uppercase fw-bold">
                                    <span class="badge bg-success-subtle text-success-emphasis rounded-3 p-2 fs-6">
                                        <i class="fa-solid fa-circle-check"></i>
                                    </span>
                                    Datos de envío
                                </h6>
                                <a href="{{ route('carrito-carrito') }}" class="btn btn-sm btn-link text-decoration-none">
                                    <i class="fa-solid fa-pen-to-square me-1"></i> Editar
                                </a>
                            </div>

                            <div class="row g-2 small">
                                <div class="col-md-6">
                                    <span class="text-muted">Nombre:</span>
                                    <strong>{{ $datosPaso1['nombre'] ?? '' }} {{ $datosPaso1['apellido'] ?? '' }}</strong>
                                </div>
                                <div class="col-md-6">
                                    <span class="text-muted">Celular:</span>
                                    <strong>{{ $datosPaso1['telefono'] ?? '' }}</strong>
                                </div>
                                <div class="col-md-6">
                                    <span class="text-muted">Correo:</span>
                                    <strong>{{ $datosPaso1['correo'] ?? '' }}</strong>
                                </div>
                                @if(!empty($datosPaso1['direccion']))
                                <div class="col-md-6">
                                    <span class="text-muted">Dirección:</span>
                                    <strong>{{ $datosPaso1['direccion'] }}</strong>
                                </div>
                                @endif
                                @if(!empty($datosPaso1['ciudad']))
                                <div class="col-md-6">
                                    <span class="text-muted">Ciudad:</span>
                                    <strong>{{ $datosPaso1['ciudad'] }}</strong>
                                </div>
                                @endif
                                @if(!empty($datosPaso1['envio']))
                                <div class="col-12 mt-2">
                                    <span class="text-muted d-block">Nota:</span>
                                    <em>{{ $datosPaso1['envio'] }}</em>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    {{-- Cupón --}}
                    @if($cupones->count() > 0)
                    <div class="card border-0 shadow-sm rounded-4 mb-4">
                        <div class="card-body p-4">
                            <h6 class="card-title d-flex align-items-center gap-2 mb-3 text-uppercase fw-bold">
                                <span class="badge bg-info-subtle text-info-emphasis rounded-3 p-2 fs-6">
                                    <i class="fa-solid fa-tag"></i>
                                </span>
                                Cupón de descuento
                            </h6>
                            <select class="form-select select2-single" name="cupon">
                                <option value="" selected disabled>Seleccione un cupón (opcional)</option>
                                @foreach($cupones as $cupon)
                                    <option value="{{$cupon->id}}">{{$cupon->cupon->titulo}} ({{ ($cupon->cupon->descuento * 100) }}%)</option>
                                @endforeach
                            </select>
                            <button type="button" class="btn btn-outline-info btn-sm mt-3" data-bs-toggle="modal" data-bs-target="#codigodescuento">
                                <i class="fa-solid fa-user-tie me-1"></i> Tengo un código Influencer
                            </button>
                        </div>
                    </div>
                    @else
                    <div class="card border-0 shadow-sm rounded-4 mb-4">
                        <div class="card-body p-4">
                            <button type="button" class="btn btn-outline-info w-100" data-bs-toggle="modal" data-bs-target="#codigodescuento">
                                <i class="fa-solid fa-user-tie me-1"></i> Aplicar código Influencer
                            </button>
                        </div>
                    </div>
                    @endif

                    {{-- Métodos de pago --}}
                    <div class="card border-0 shadow-sm rounded-4 mb-4">
                        <div class="card-body p-4">
                            <h6 class="card-title d-flex align-items-center gap-2 mb-3 text-uppercase fw-bold">
                                <span class="badge bg-info-subtle text-info-emphasis rounded-3 p-2 fs-6">
                                    <i class="fa-solid fa-credit-card"></i>
                                </span>
                                Selecciona un método de pago
                            </h6>

                            <div class="row g-3">
                                @foreach($metodosPagos as $metodo)
                                <div class="col-md-6">
                                    <input type="radio" class="btn-check" name="radio" id="pm-{{$metodo->id}}" value="{{$metodo->id}}" autocomplete="off" required>
                                    <label class="btn btn-outline-info w-100 text-start p-3 d-flex align-items-center gap-3" for="pm-{{$metodo->id}}">
                                        <span class="fs-4">
                                            <i class="fa-solid {{ $metodo->id == 3 ? 'fa-bolt' : ($metodo->id == 1 ? 'fa-money-bill-wave' : 'fa-credit-card') }}"></i>
                                        </span>
                                        <span class="d-flex flex-column">
                                            <span class="fw-semibold">{{$metodo->nombre}}</span>
                                            @if($metodo->id == 3 && $metodo->aprobado_automatico == 1)
                                            <span class="small opacity-75">Aprobación automática</span>
                                            @endif
                                        </span>
                                    </label>
                                </div>
                                @endforeach
                            </div>

                            <div class="alert alert-light border mt-4 mb-0 d-flex align-items-center gap-2">
                                <i class="fa-solid fa-shield-halved text-success fs-5"></i>
                                <small class="mb-0 text-muted">Tus datos de pago están protegidos. La información se procesa de forma segura.</small>
                            </div>
                        </div>
                    </div>

                    {{-- Navegación --}}
                    <div class="d-flex flex-column flex-md-row justify-content-between gap-2 mt-3">
                        <a href="{{ route('carrito-carrito') }}" class="btn btn-outline-secondary">
                            <i class="fa-solid fa-arrow-left me-1"></i> Volver a datos
                        </a>
                        <button type="submit" class="btn btn-info text-white px-4 fw-semibold">
                            <i class="fa-solid fa-lock me-1"></i> Confirmar pedido
                        </button>
                    </div>

                </div>

                {{-- ============ COLUMNA DERECHA: RESUMEN ============ --}}
                <div class="col-lg-5">
                    @include('carrito.resumen')
                </div>

            </div>
        </form>

    </div>
</div>

@endsection