@extends('layouts.yellow')
@section('content')
<style>
    /* Asegúrate que @font-face para 'Open Sans Regular' esté definido globalmente */

    /* Variables inspiradas en tu CSS de referencia */
    :root { /* O scope a .terms-modal */
        --azul-primario: #2A4E6D;   /* Azul oscuro profesional */
        --azul-secundario: #3B6EA5;  /* Azul corporativo */
        --azul-destacado: #4A90E2;  /* Azul brillante para efectos */
        --azul-suave: #E3F2FD;      /* Azul claro para fondos */
        --texto-gris-suave: #6c757d; /* Gris secundario para texto */
        --blanco: #ffffff;
        --negro-transparente: rgba(0, 0, 0, 0.65); /* Backdrop un poco más oscuro */
        --rojo-advertencia: #dc3545;
        --degradado-azul: linear-gradient(135deg, #4A90E2 0%, #2A4E6D 100%);

        --modal-border-radius: 12px; /* Un poco más redondeado */
        --modal-shadow: 0 8px 25px rgba(42, 78, 109, 0.15); /* Sombra suave */
        --base-padding: 1rem; /* 16px */
        --body-padding: 1.5rem; /* 24px */
        --header-padding: 1.25rem; /* 20px */
        --footer-padding: 1rem; /* 16px */
        --button-padding: 0.65rem 1.5rem; /* Ajuste de padding botones */
        --button-border-radius: 25px; /* Botones más redondeados (pills) */
        --text-line-height: 1.7;
        --transition-speed: 0.25s;
    }

    .terms-modal-backdrop {
        position: fixed;
        inset: 0;
        background-color: var(--negro-transparente);
        z-index: 1040;
        /* Podrías añadir animación fade-in si quieres */
        /* animation: fadeIn 0.3s ease-out; */
    }
    /* @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } */

    .terms-modal {
        font-family: 'Open Sans Regular', sans-serif; /* Aplicar fuente */
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        max-width: 800px;
        background-color: var(--blanco);
        border-radius: var(--modal-border-radius);
        box-shadow: var(--modal-shadow);
        z-index: 1050;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* Clave para que el border-radius funcione bien */
    }

    .terms-modal-header {
        padding: var(--header-padding);
        /* border-bottom: 1px solid #e0e0e0; */ /* Eliminado, el gradiente crea separación */
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--degradado-azul); /* Gradiente como en card-header */
        color: var(--blanco);
        flex-shrink: 0;
    }
     .terms-modal-header h3 {
         font-weight: 600; /* Un poco más de peso */
         margin: 0;
     }

    .terms-modal-body {
        padding: var(--body-padding);
        overflow-y: auto;
        flex-grow: 1;
        color: #333; /* Color de texto principal */
        line-height: var(--text-line-height);
        scrollbar-width: thin; /* Firefox */
        scrollbar-color: var(--azul-secundario) #f1f1f1; /* Firefox */
    }

    /* Scrollbar estilo Webkit (Chrome, Safari, Edge) */
    .terms-modal-body::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    .terms-modal-body::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 5px;
    }
    .terms-modal-body::-webkit-scrollbar-thumb {
        background: var(--azul-secundario); /* Color principal para scroll */
        border-radius: 5px;
        border: 2px solid #f1f1f1;
    }
    .terms-modal-body::-webkit-scrollbar-thumb:hover {
        background: var(--azul-primario); /* Oscurecer en hover */
    }

    .terms-modal-footer {
        padding: var(--footer-padding);
        /* border-top: 1px solid #e0e0e0; */ /* Eliminado, el cambio de fondo separa */
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--azul-suave); /* Fondo azul claro */
        flex-shrink: 0;
    }

    /* Estilos del contenido */
    .terms-content h2 {
        color: var(--azul-primario);
        margin-top: 1.5em;
        margin-bottom: 0.8em;
        font-weight: 600;
    }
     .terms-content h2:first-child {
         margin-top: 0;
     }
    .terms-content p { margin-bottom: 1em; }
    .terms-content ul, .terms-content ol {
        margin-bottom: 1em;
        padding-left: 25px;
    }
    .terms-content li { margin-bottom: 0.5em; }

    /* Botones con estilo premium */
    .btn-accept, .btn-reject {
        border: none;
        padding: var(--button-padding);
        border-radius: var(--button-border-radius);
        cursor: pointer;
        font-weight: 600; /* Un poco más de peso */
        transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1); /* Transición suave */
        text-transform: uppercase; /* Opcional: mayúsculas */
        letter-spacing: 0.5px; /* Opcional: espaciado letras */
        font-size: 0.9rem;
        display: inline-flex; /* Para alinear texto e íconos si los hubiera */
        align-items: center;
        justify-content: center;
    }

    .btn-accept {
        background: var(--degradado-azul); /* Acción principal destacada */
        color: var(--blanco);
        box-shadow: 0 4px 10px rgba(42, 78, 109, 0.2);
    }
    .btn-accept:hover {
        box-shadow: 0 6px 15px rgba(42, 78, 109, 0.3);
        transform: scale(1.03); /* Ligero zoom */
        filter: brightness(1.1); /* Hacerlo un poco más brillante */
    }

    .btn-reject {
        background-color: transparent; /* Estilo Outline */
        color: var(--azul-secundario);
        border: 2px solid var(--azul-secundario);
    }
    .btn-reject:hover {
        background-color: var(--azul-suave); /* Relleno suave al pasar */
        color: var(--azul-primario);
        border-color: var(--azul-primario);
        transform: scale(1.03); /* Ligero zoom */
    }

    /* Feedback al hacer clic */
    .btn-accept:active, .btn-reject:active {
         transform: scale(0.98); /* Encoger ligeramente */
         filter: brightness(0.95);
    }

    /* Textos específicos */
    .warning-text {
        color: var(--rojo-advertencia);
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .confirmation-text {
        font-style: italic;
        color: var(--texto-gris-suave);
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }
</style>

<div class="container mt-5">
    <div class="terms-modal-backdrop" id="termsBackdrop"></div>
    <div class="terms-modal" id="termsModal">
        <div class="terms-modal-header">
            <h3 class="m-0">{{ $terms->getTitle() }}</h3>
        </div>
        <div class="terms-modal-body">
            <p class="mb-4">{{ __('terms.instructions') }}</p>

            <div class="terms-content">
                {!! $terms->getContent() !!}
            </div>

            {{-- Textos movidos debajo del contenido para mejor flujo --}}
            <p class="confirmation-text mt-4">{{ __('terms.confirmation') }}</p>
            <p class="warning-text">{{ __('terms.reject_confirmation') }}</p>
        </div>
        <div class="terms-modal-footer">
            <form id="termsForm" action="{{ route('terms.process', ['id' => $terms->id]) }}" method="POST" style="display: contents;">
                @csrf
                <input type="hidden" name="action" id="termsAction" value="reject">

                {{-- Botón Rechazar (menos prominente) --}}
                <button type="button" onclick="submitForm('reject')" class="btn-reject">
                    {{ __('terms.reject') }}
                </button>
                 {{-- Botón Aceptar (más prominente) --}}
                <button type="button" onclick="submitForm('accept')" class="btn-accept">
                    {{ __('terms.accept') }}
                </button>
            </form>
        </div>
    </div>
</div>

<script>
    function submitForm(action) {
        document.getElementById('termsAction').value = action;
        document.getElementById('termsForm').submit();
    }
</script>
@endsection