@extends('layouts.app')

@section('title', 'San Patricio Seguros')

@section('content')
    @include('solicitudes_emision.spinner')
    <div class="container">
        @include('solicitudes_emision.banner', ['name' =>  $solicitudAPI['Nombre'], 'title' => 'Vamos a declarar la patente de tu moto','reCotizar' => $reCotizar])

        <form action="/solicitudes-emision/update" method="POST">
            @csrf
            <input type="hidden" name="solicitud_id" value="{{ $solicitud_id }}">
            <input type="hidden" name="numeroDocumento" value="{{ $numeroDocumento }}">
            <div class="payment-form mt-4">
                <div class="mb-3">
                    <label for="Patente" class="form-label">Patente</label>
                    <input type="text" class="form-control" id="Patente" name="Patente" value="{{ $solicitudAPI['Patente'] ?? '' }}" required>
                </div>
                <div class="text-center">
                    <button type="submit" class="btn btn-primary btn-lg">Guardar</button>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/banner.css') }}">
@endsection

<style>
    .btn-option {
        width: 100%;
        max-width: 200px;
        height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 2px solid transparent;
        background-color: white;
        color: #000;
        transition: background-color 0.3s, color 0.3s, border-color 0.3s;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .btn-option:hover, .btn-option.btn-primary {
        background-color: #2e3640; /* Azul de San Patricio */
        color: white;
        border-color: #2e3640; /* Azul de San Patricio */
    }
    .icon-container {
        text-align: center;
    }
    .label-container {
        text-align: center;
        margin-top: 10px;
        font-size: 1.1em;
    }
    .payment-option {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .payment-option:hover {
        color: white !important;
    }
    .form-label {
        font-weight: bold;
    }
    .form-control {
        border-radius: 8px;
    }
    .payment-form {
        margin-top: 20px;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .payment-form h4 {
        margin-bottom: 20px;
    }
</style>