@extends('layouts.register-base')

@section('content')
    <!-- Imagen arriba del formulario -->

    <div class="flex justify-center mb-4">
        <img src="{{ asset('img/logo.png') }}" alt="Logo">
    </div>

    <!-- Formulario de Registro -->
    <form method="POST" action="{{ route('register') }}">
        @csrf

        <!-- Tipo de Usuario -->
        <div class="flex items-center mb-4">
            <div class="flex items-center mr-12">
                <input type="radio" id="empresa" name="role" value="empresa" checked class="mr-2">
                <label for="empresa" class="text-sm font-medium">{{ __('Empresa') }}</label>
            </div>
            <div class="flex items-center ml-4">
                <input type="radio" id="particular" name="role" value="usuario" class="mr-2">
                <label for="particular" class="text-sm font-medium">{{ __('Particular') }}</label>
            </div>
        </div>

        <!-- Campos del formulario según tipo de usuario -->
        <div id="form-container" class="space-y-4">

            <!-- Empresa -->
            <div id="empresa-form" class="user-form">
                <div class="accordion" id="empresaAccordion">

                    <!-- Acordeón para Información de la Empresa -->
                    <div class="accordion-item border rounded shadow-sm mb-3">
                        <h2 class="accordion-header" id="empresaHeadingOne">
                            <button class="accordion-button fw-bold bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#empresaCollapseOne" aria-expanded="true" aria-controls="empresaCollapseOne">
                                {{ __('Información de la Empresa') }}
                            </button>
                        </h2>
                        <div id="empresaCollapseOne" class="accordion-collapse collapse show" aria-labelledby="empresaHeadingOne" data-bs-parent="#empresaAccordion">
                            <div class="accordion-body p-4 bg-light">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <x-input-label for="name" :value="__('Nombre de la empresa:')" />
                                        <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus placeholder="Nombre de la empresa" />
                                        <x-input-error :messages="$errors->get('name')" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-input-label for="cif" :value="__('Código de identificación fiscal (CIF):')" />
                                        <x-text-input id="cif" class="block mt-1 w-full" type="text" name="cif" :value="old('cif')" required placeholder="CIF" />
                                        <x-input-error :messages="$errors->get('cif')" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-input-label for="society_type" :value="__('Tipo de Sociedad:')" />
                                        <select id="society_type" name="society_type" class="block mt-1 w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" required>
                                            <option value="" disabled selected>Seleccione el tipo de sociedad</option>
                                            <option value="SL">{{ __('Sociedad Limitada (SL)') }}</option>
                                            <option value="SA">{{ __('Sociedad Anónima (SA)') }}</option>
                                            <option value="SLL">{{ __('Sociedad Limitada Laboral (SLL)') }}</option>
                                            <option value="SAL">{{ __('Sociedad Anónima Laboral (SAL)') }}</option>
                                            <option value="SC">{{ __('Sociedad Colectiva (SC)') }}</option>
                                            <option value="SCP">{{ __('Sociedad Civil Privada (SCP)') }}</option>
                                            <option value="C.B.">{{ __('Comunidad de Bienes (C.B.)') }}</option>
                                            <option value="Coop">{{ __('Sociedad Cooperativa') }}</option>
                                            <option value="Autónomo">{{ __('Autónomo') }}</option>
                                        </select>
                                        <x-input-error :messages="$errors->get('society_type')" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-input-label for="phone" :value="__('Teléfono:')" />
                                        <x-text-input id="phone" class="block mt-1 w-full" type="text" name="phone" :value="old('phone')" required placeholder="Teléfono" />
                                        <x-input-error :messages="$errors->get('phone')" class="mt-2" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Acordeón para Ubicación de la Empresa -->
                    <div class="accordion-item border rounded shadow-sm mb-3">
                        <h2 class="accordion-header" id="empresaHeadingTwo">
                            <button class="accordion-button collapsed fw-bold  bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#empresaCollapseTwo" aria-expanded="false" aria-controls="empresaCollapseTwo">
                                {{ __('Ubicación de la Empresa') }}
                            </button>
                        </h2>
                        <div id="empresaCollapseTwo" class="accordion-collapse collapse" aria-labelledby="empresaHeadingTwo" data-bs-parent="#empresaAccordion">
                            <div class="accordion-body p-4 bg-light">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <x-input-label for="localidad" :value="__('Localidad:')" />
                                        <x-text-input id="localidad" class="block mt-1 w-full" type="text" name="localidad" :value="old('localidad')" required placeholder="Localidad" />
                                        <x-input-error :messages="$errors->get('localidad')" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-input-label for="poblacion" :value="__('Provincia:')" />
                                        <x-text-input id="poblacion" class="block mt-1 w-full" type="text" name="poblacion" :value="old('poblacion')" required placeholder="Provincia" />
                                        <x-input-error :messages="$errors->get('poblacion')" class="mt-2" />
                                    </div>

                                    <div>
                                        <x-input-label for="address" :value="__('Dirección:')" />
                                        <x-text-input id="address" class="block mt-1 w-full" type="text" name="address" :value="old('address')" required placeholder="Dirección" />
                                        <x-input-error :messages="$errors->get('address')" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-input-label for="comunidad_autonoma" :value="__('Comunidad Autónoma:')" />
                                        <select id="comunidad_autonoma" name="comunidad_autonoma" class="block mt-1 w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" required>
                                            <option value="" disabled selected>Seleccione una comunidad autonoma</option>
                                            <option value="Andalucía">Andalucía</option>
                                            <option value="Aragón">Aragón</option>
                                            <option value="Asturias">Asturias</option>
                                            <option value="Islas Baleares">Islas Baleares</option>
                                            <option value="Canarias">Canarias</option>
                                            <option value="Cantabria">Cantabria</option>
                                            <option value="Castilla-La Mancha">Castilla-La Mancha</option>
                                            <option value="Castilla y León">Castilla y León</option>
                                            <option value="Cataluña">Cataluña</option>
                                            <option value="Extremadura">Extremadura</option>
                                            <option value="Galicia">Galicia</option>
                                            <option value="Madrid">Madrid</option>
                                            <option value="Murcia">Murcia</option>
                                            <option value="Navarra">Navarra</option>
                                            <option value="La Rioja">La Rioja</option>
                                            <option value="País Vasco">País Vasco</option>
                                            <option value="Valencia">Valencia</option>
                                            <option value="Ceuta">Ceuta</option>
                                            <option value="Melilla">Melilla</option>
                                            <option value="Excede">Se excede del ámbito territorial</option>
                                        </select>
                                        <x-input-error :messages="$errors->get('comunidad_autonoma')" class="mt-2" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Acordeón para Tipo de Sociedad y Teléfono -->
                    {{-- <div class="accordion-item border rounded shadow-sm mb-3">
                        <h2 class="accordion-header" id="empresaHeadingThree">
                            <button class="accordion-button collapsed fw-bold text-primary bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#empresaCollapseThree" aria-expanded="false" aria-controls="empresaCollapseThree">
                                {{ __('Información de Contacto') }}
                            </button>
                        </h2>
                        <div id="empresaCollapseThree" class="accordion-collapse collapse" aria-labelledby="empresaHeadingThree" data-bs-parent="#empresaAccordion">
                            <div class="accordion-body p-4 bg-light">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <x-input-label for="society_type" :value="__('Tipo de Sociedad:')" />
                                        <select id="society_type" name="society_type" class="block mt-1 w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" required>
                                            <option value="" disabled selected>Seleccione el tipo de sociedad</option>
                                            <option value="SL">{{ __('Sociedad Limitada (SL)') }}</option>
                                            <option value="SA">{{ __('Sociedad Anónima (SA)') }}</option>
                                            <option value="SLL">{{ __('Sociedad Limitada Laboral (SLL)') }}</option>
                                            <option value="SAL">{{ __('Sociedad Anónima Laboral (SAL)') }}</option>
                                            <option value="SC">{{ __('Sociedad Colectiva (SC)') }}</option>
                                            <option value="SCP">{{ __('Sociedad Civil Privada (SCP)') }}</option>
                                            <option value="C.B.">{{ __('Comunidad de Bienes (C.B.)') }}</option>
                                            <option value="Coop">{{ __('Sociedad Cooperativa') }}</option>
                                            <option value="Autónomo">{{ __('Autónomo') }}</option>
                                        </select>
                                        <x-input-error :messages="$errors->get('society_type')" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-input-label for="phone" :value="__('Teléfono')" />
                                        <x-text-input id="phone" class="block mt-1 w-full" type="text" name="phone" :value="old('phone')" required placeholder="Teléfono" />
                                        <x-input-error :messages="$errors->get('phone')" class="mt-2" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> --}}

                    <!-- Acordeón para Correo y Contraseña -->
                    <div class="accordion-item border rounded shadow-sm mb-3">
                        <h2 class="accordion-header" id="empresaHeadingFour">
                            <button class="accordion-button collapsed fw-bold  bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#empresaCollapseFour" aria-expanded="false" aria-controls="empresaCollapseFour">
                                {{ __('Credenciales de Acceso') }}
                            </button>
                        </h2>
                        <div id="empresaCollapseFour" class="accordion-collapse collapse" aria-labelledby="empresaHeadingFour" data-bs-parent="#empresaAccordion">
                            <div class="accordion-body p-4 bg-light">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <x-input-label for="email" :value="__('Correo electrónico:')" />
                                        <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required placeholder="Correo electrónico" />
                                        <x-input-error :messages="$errors->get('email')" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-input-label for="password" :value="__('Contraseña:')" />
                                        <x-text-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="new-password" placeholder="Contraseña" />
                                        <x-input-error :messages="$errors->get('password')" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-input-label for="password_confirmation" :value="__('Confirmar Contraseña:')" />
                                        <x-text-input id="password_confirmation" class="block mt-1 w-full" type="password" name="password_confirmation" required autocomplete="new-password" placeholder="Confirmar contraseña" />
                                        <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Para Empresa -->
<div class="form-group mt-4">
    <input type="checkbox" name="privacy_policy_accepted_at" id="privacy_policy_accepted_at_empresa" required>
    <label for="privacy_policy_accepted_at_empresa">
        He leído y acepto el
        <button type="button" id="openModalButtonEmpresa" class="btn-link">Aviso de Privacidad</button>
    </label>
</div>


                </div>
            </div>



            <!-- Particular -->
            <div id="particular-form" class="user-form hidden">
                <div class="accordion" id="particularAccordion">

                    <!-- Acordeón para Información Personal -->
                    <div class="accordion-item border rounded shadow-sm mb-3">
                        <h2 class="accordion-header" id="particularHeadingOne">
                            <button class="accordion-button fw-bold  bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#particularCollapseOne" aria-expanded="true" aria-controls="particularCollapseOne">
                                {{ __('Información Personal') }}
                            </button>
                        </h2>
                        <div id="particularCollapseOne" class="accordion-collapse collapse show" aria-labelledby="particularHeadingOne" data-bs-parent="#particularAccordion">
                            <div class="accordion-body p-4 bg-light">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <x-input-label for="name" :value="__('Nombre:')" />
                                        <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus placeholder="Nombre" />
                                        <x-input-error :messages="$errors->get('name')" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-input-label for="first_surname" :value="__('Apellidos:')" />
                                        <x-text-input id="first_surname" class="block mt-1 w-full" type="text" name="first_surname" :value="old('first_surname')" required placeholder="Apellidos" />
                                        <x-input-error :messages="$errors->get('first_surname')" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-input-label for="dni" :value="__('DNI:')" />
                                        <x-text-input id="dni" class="block mt-1 w-full" type="text" name="dni" :value="old('dni')" required placeholder="DNI" />
                                        <x-input-error :messages="$errors->get('dni')" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-input-label for="phone" :value="__('Teléfono:')" />
                                        <x-text-input id="phone" class="block mt-1 w-full" type="text" name="phone" :value="old('phone')" required placeholder="Teléfono" />
                                        <x-input-error :messages="$errors->get('phone')" class="mt-2" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Acordeón para Ubicación Personal -->
                    <div class="accordion-item border rounded shadow-sm mb-3">
                        <h2 class="accordion-header" id="particularHeadingTwo">
                            <button class="accordion-button collapsed fw-bold  bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#particularCollapseTwo" aria-expanded="false" aria-controls="particularCollapseTwo">
                                {{ __('Ubicación Personal') }}
                            </button>
                        </h2>
                        <div id="particularCollapseTwo" class="accordion-collapse collapse" aria-labelledby="particularHeadingTwo" data-bs-parent="#particularAccordion">
                            <div class="accordion-body p-4 bg-light">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <x-input-label for="localidad" :value="__('Localidad:')" />
                                        <x-text-input id="localidad" class="block mt-1 w-full" type="text" name="localidad" :value="old('localidad')" required placeholder="Localidad" />
                                        <x-input-error :messages="$errors->get('localidad')" class="mt-2" />
                                    </div>

                                    <div>
                                        <x-input-label for="poblacion" :value="__('Provincia:')" />
                                        <x-text-input id="poblacion" class="block mt-1 w-full" type="text" name="poblacion" :value="old('poblacion')" required placeholder="Provincia" />
                                        <x-input-error :messages="$errors->get('poblacion')" class="mt-2" />
                                    </div>

                                    <div>
                                        <x-input-label for="address" :value="__('Dirección:')" />
                                        <x-text-input id="address" class="block mt-1 w-full" type="text" name="address" :value="old('address')" required placeholder="Dirección" />
                                        <x-input-error :messages="$errors->get('address')" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-input-label for="comunidad_autonoma" :value="__('Comunidad Autónoma:')" />
                                        <select id="comunidad_autonoma" name="comunidad_autonoma" class="block mt-1 w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" required>
                                            <option value="" disabled selected>Seleccione una comunidad autonoma</option>
                                            <option value="Andalucía">Andalucía</option>
                                            <option value="Aragón">Aragón</option>
                                            <option value="Asturias">Asturias</option>
                                            <option value="Islas Baleares">Islas Baleares</option>
                                            <option value="Canarias">Canarias</option>
                                            <option value="Cantabria">Cantabria</option>
                                            <option value="Castilla-La Mancha">Castilla-La Mancha</option>
                                            <option value="Castilla y León">Castilla y León</option>
                                            <option value="Cataluña">Cataluña</option>
                                            <option value="Extremadura">Extremadura</option>
                                            <option value="Galicia">Galicia</option>
                                            <option value="Madrid">Madrid</option>
                                            <option value="Murcia">Murcia</option>
                                            <option value="Navarra">Navarra</option>
                                            <option value="La Rioja">La Rioja</option>
                                            <option value="País Vasco">País Vasco</option>
                                            <option value="Valencia">Valencia</option>
                                            <option value="Ceuta">Ceuta</option>
                                            <option value="Melilla">Melilla</option>
                                            <option value="Excede">Se excede del ámbito territorial</option>
                                        </select>
                                        <x-input-error :messages="$errors->get('comunidad_autonoma')" class="mt-2" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Acordeón para Credenciales de Acceso -->
                    <div class="accordion-item border rounded shadow-sm mb-3">
                        <h2 class="accordion-header" id="particularHeadingThree">
                            <button class="accordion-button collapsed fw-bold  bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#particularCollapseThree" aria-expanded="false" aria-controls="particularCollapseThree">
                                {{ __('Credenciales de Acceso') }}
                            </button>
                        </h2>
                        <div id="particularCollapseThree" class="accordion-collapse collapse" aria-labelledby="particularHeadingThree" data-bs-parent="#particularAccordion">
                            <div class="accordion-body p-4 bg-light">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <x-input-label for="email" :value="__('Correo electrónico:')" />
                                        <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required placeholder="Correo electrónico" />
                                        <x-input-error :messages="$errors->get('email')" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-input-label for="password" :value="__('Contraseña:')" />
                                        <x-text-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="new-password" placeholder="Contraseña" />
                                        <x-input-error :messages="$errors->get('password')" class="mt-2" />
                                    </div>
                                    <div>
                                        <x-input-label for="password_confirmation" :value="__('Confirmar Contraseña:')" />
                                        <x-text-input id="password_confirmation" class="block mt-1 w-full" type="password" name="password_confirmation" required autocomplete="new-password" placeholder="Confirmar contraseña" />
                                        <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                   <!-- Para Particular -->
<div class="form-group mt-4">
    <input type="checkbox" name="privacy_policy_accepted_at" id="privacy_policy_accepted_at_particular" required>
    <label for="privacy_policy_accepted_at_particular">
        He leído y acepto el
        <button type="button" id="openModalButtonParticular" class="btn-link">Aviso de Privacidad</button>
    </label>
</div>

                </div>
            </div>
        </div>


        <!-- Botón de Registro -->
        <div class="flex items-center justify-end mt-4">
            <x-primary-button class="ml-3">
                {{ __('Registrarse') }}
            </x-primary-button>
        </div>
    </form>


    <div id="customModal" class="custom-modal">
        <div class="custom-modal-content">
            <span class="custom-modal-close" id="closeModal">&times;</span>
            <h3 class="custom-modal-title">Aviso de Privacidad</h3>
            <div class="custom-modal-body">
                <p>La entidad responsable del tratamiento de sus datos es <strong>Moneleg SL</strong>. Sus datos se utilizarán para registrarle y gestionar el <strong>Plan AHORRO CON CAES</strong>.</p>
                <p>Usted tiene derecho a acceder, rectificar, y suprimir sus datos, así como a la limitación de su tratamiento, oponerse al mismo y a su portabilidad.</p>
                {{-- <p>Para más información, consulte nuestro <a href="#" class="modal-link">aviso completo de privacidad</a>.</p> --}}
            </div>
            <div class="custom-modal-footer">
                <button id="closeModalButton" class="btn btn-primary">Cerrar</button>
            </div>
        </div>
    </div>



    <div class="mt-4 text-sm text-center text-gray-600">
        {{ __('¿Ya tienes una cuenta?') }}
        <a href="{{ route('login') }}" class="text-indigo-600 hover:text-indigo-900 flex items-center justify-center mt-2">
            <i class="fas fa-sign-in-alt mr-1"></i>
            {{ __('Inicia Sesión') }}
        </a>
    </div>







    <style>

.flex.items-center.mb-4 {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    margin-top: 3.5rem; /* Margen superior adicional */
    justify-content: center; /* Centra los elementos */
}

.flex.items-center.mb-4 input[type="radio"] {
    appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #1a2a50;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 8px; /* Espacio entre el radio y la etiqueta */
}

.flex.items-center.mb-4 input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px; /* Ajuste del tamaño del círculo interior */
    height: 10px;
    background-color: #1a2a50; /* Color del círculo interior al hacer clic */
    border-radius: 50%;
    transform: translate(-50%, -50%); /* Centrado del círculo */
    transition: all 0.3s ease;
}

.flex.items-center.mb-4 label {
    font-size: 1rem;
    font-weight: 500;
    color: #1a2a50; /* Color del texto */
    cursor: pointer;
}


.accordion-item.border.rounded.shadow-sm.mb-3 .accordion-button {
    display: flex;
    justify-content: center; /* Centra el texto horizontalmente */
    align-items: center; /* Centra el texto verticalmente */
    font-weight: bold;
    color: #1a2a50; /* Color del texto */
    background-color: #f8f9fa; /* Fondo tenue */
    font-size: 0.9rem; /* Aumenta el tamaño del texto */
    padding: 1rem; /* Aumenta el espacio alrededor del texto */
    min-height: 1.5rem; /* Ajusta la altura mínima del botón */
    text-align: center; /* Centra el texto */
    width: 100%; /* Ocupa el ancho completo del contenedor */
    border-radius: 0.5rem; /* Bordes redondeados */
}

.accordion-item.border.rounded.shadow-sm.mb-3 .accordion-button:focus {
    box-shadow: none;
}


.form-group a {
    text-decoration: underline; /* Subraya el enlace */
    color: #1a2a50; /* Ajusta el color si deseas */
    font-weight: bold; /* Opcional: negrita para destacarlo */
}

.custom-modal {
    display: none; /* Ocultar por defecto */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.custom-modal-content {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    max-width: 800px; /* Más ancho */
    width: 100%;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
}

.custom-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 25px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
}

.custom-modal-close:hover {
    color: #000;
}

.custom-modal-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

.custom-modal-body {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    text-align: justify;
}

.custom-modal-body p {
    margin-bottom: 15px;
}

.modal-link {
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
}

.modal-link:hover {
    color: #0056b3;
}

.custom-modal-footer {
    text-align: center;
    margin-top: 20px;
}

.btn-primary {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.btn-primary:hover {
    background-color: #0056b3;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


    </style>


    <!-- Script para alternar entre los formularios -->
    <script>

document.addEventListener('DOMContentLoaded', function () {
    const modal = document.getElementById('customModal');
    const closeModal = document.getElementById('closeModal');
    const closeModalButton = document.getElementById('closeModalButton');

    // Asegúrate de que el modal esté oculto inicialmente
    modal.style.display = 'none';

    // Función para mostrar el modal
    function showModal() {
        modal.style.display = 'flex';
    }

    // Asigna el evento de clic para cada botón
    const openModalButtonEmpresa = document.getElementById('openModalButtonEmpresa');
    if (openModalButtonEmpresa) {
        openModalButtonEmpresa.addEventListener('click', showModal);
    }

    const openModalButtonParticular = document.getElementById('openModalButtonParticular');
    if (openModalButtonParticular) {
        openModalButtonParticular.addEventListener('click', showModal);
    }

    // Cierra el modal al hacer clic en la "X" o el botón "Cerrar"
    closeModal.addEventListener('click', () => (modal.style.display = 'none'));
    closeModalButton.addEventListener('click', () => (modal.style.display = 'none'));

    // Cierra el modal al hacer clic fuera de su contenido
    window.addEventListener('click', function (event) {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    });
});




document.addEventListener('DOMContentLoaded', function () {

    // Selección de los elementos del DOM
    const roleRadios = document.querySelectorAll('input[name="role"]');
    const empresaForm = document.getElementById('empresa-form');
    const particularForm = document.getElementById('particular-form');
    const empresaFields = document.querySelectorAll('#empresa-form input, #empresa-form select');
    const particularFields = document.querySelectorAll('#particular-form input, #particular-form select');

    // Función para actualizar la visibilidad del formulario
    function updateFormVisibility() {
        const selectedRole = document.querySelector('input[name="role"]:checked').value;

        if (selectedRole === 'empresa') {
            empresaForm.classList.remove('hidden');
            particularForm.classList.add('hidden');
            enableFields(empresaFields);
            disableFields(particularFields);
        } else {
            empresaForm.classList.add('hidden');
            particularForm.classList.remove('hidden');
            enableFields(particularFields);
            disableFields(empresaFields);
        }
    }

    // Función para deshabilitar campos
    function disableFields(fields) {
        fields.forEach(field => {
            field.disabled = true;
            field.removeAttribute('required'); // Elimina el atributo 'required'
        });
    }

    // Función para habilitar campos
    function enableFields(fields) {
        fields.forEach(field => {
            field.disabled = false;
            if (field.hasAttribute('data-required')) {
                field.setAttribute('required', 'required'); // Vuelve a añadir 'required' si es necesario
            }
        });
    }

    // Añadir event listeners a los radios
    roleRadios.forEach(radio => {
        radio.addEventListener('change', updateFormVisibility);
    });

    // Inicializa la visibilidad del formulario al cargar la página
    updateFormVisibility();
});



    </script>
@endsection



{{-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <style>
        .modal {
            z-index: 1055 !important;
        }
        .modal-backdrop {
            z-index: 1050 !important;
        }
    </style>
</head>
<body>

    <div class="modal fade" id="privacyModal" tabindex="-1" aria-labelledby="privacyModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="privacyModalLabel">Aviso de Privacidad</h5>

                </div>
                <div class="modal-body">
                    <p>La entidad responsable del tratamiento de sus datos es Moneleg SL. Sus datos se utilizarán para registrarle y gestionar el Plan AHORRA CON CAES.</p>
                    <p>Usted tiene derecho a acceder, rectificar, y suprimir sus datos, así como a la limitación de su tratamiento, oponerse al mismo y a su portabilidad.</p>
                    <p>Para más información, consulte nuestro aviso completo de privacidad.</p>
                </div>

            </div>
        </div>
    </div>

</body>
</html>
 --}}