@extends('layouts.app2')

@section('title', 'Formulario de Solicitud')

@section('content_header')
    <h1>Datos del Formulario</h1>
@stop

@section('content')
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <form action="{{ route('accesoinformacionformulario.submit') }}" method="POST" enctype="multipart/form-data" class="bg-white p-4 rounded shadow-sm">
        @csrf

        <!-- Fila: Nombre Completo y Correo Electrónico -->
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="nombre_completo">
                        <i class="fas fa-user mr-1"></i> Nombre Completo <span class="required-asterisk">*</span>
                    </label>
                    <input type="text" name="nombre_completo" class="form-control" placeholder="Escriba su nombre completo" required>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="correo_electronico">
                        <i class="fas fa-envelope mr-1"></i> Correo Electrónico <span class="required-asterisk">*</span>
                    </label>
                    <input type="email" name="correo_electronico" class="form-control" placeholder="ejemplo@correo.com" required>
                </div>
            </div>
        </div>

        <!-- Fila: Dirección, Teléfono y DPI -->
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label for="direccion">
                        <i class="fas fa-map-marker-alt mr-1"></i> Dirección (Opcional)
                    </label>
                    <input type="text" name="direccion" class="form-control" placeholder="Dirección para notificaciones">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label for="telefono">
                        <i class="fas fa-phone mr-1"></i> Teléfono <span class="required-asterisk">*</span>
                    </label>
                    <input type="text" name="telefono" class="form-control" placeholder="Número de teléfono" required>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label for="dpi">
                        <i class="fas fa-id-card mr-1"></i> DPI (Opcional)
                    </label>
                    <input type="text" name="dpi" class="form-control" placeholder="Documento Personal de Identificación">
                </div>
            </div>
        </div>

        <!-- Fila: Género, Edad, Pueblo, Comunidad Sociolingüística -->
        <div class="row">
            <div class="col-md-3">
                <div class="form-group">
                    <label for="genero">
                        <i class="fas fa-venus-mars mr-1"></i> Género (Opcional)
                    </label>
                    <select name="genero" class="form-control">
                        <option value="">------</option>
                        <option value="Masculino">Masculino</option>
                        <option value="Femenino">Femenino</option>
                        <option value="PersonaJuridica">Persona Juridica</option>
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="edad">
                        <i class="fas fa-birthday-cake mr-1"></i> Edad (Opcional)
                    </label>
                    <input type="number" name="edad" class="form-control" placeholder="Edad">
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="pueblo">
                        <i class="fas fa-users mr-1"></i> Pueblo (Opcional)
                    </label>
                    <select name="pueblo" class="form-control">
                        <option value="">------</option>
                        <option value="Noespecifica">No especifica</option>
                        <option value="Ladinomestizo">Ladino/Mestizo</option>
                        <option value="Garifuna">Garifuna</option>
                        <option value="Maya">Maya</option>
                        <option value="Xinca">Xinca</option>
                        <option value="Otro">Otro</option>
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="comunidad_sociolinguistica">
                        <i class="fas fa-language mr-1"></i> Comunidad Sociolingüística (Opcional)
                    </label>
                    <select name="comunidad_sociolinguistica" class="form-control">
                        <option value="">------</option>
                        <option value="Noindica">No indica</option>
                        <option value="Achi">Achi</option>
                        <option value="Akateka">Akateka</option>
                        <option value="Awakateka">Awakateka</option>
                        <option value="Chalchiteka">Chalchiteka</option>
                        <option value="Chorti">Ch'orti</option>
                        <option value="Chuj">Chuj</option>
                        <option value="Español">Español</option>
                        <option value="Garifuna">Garifuna</option>
                        <option value="IdiomaExtranjero">Idioma Extranjero</option>
                        <option value="Itza">Itza'</option>
                        <option value="Ixil">Ixil</option>
                        <option value="Jakalteka">Jakalteka</option>
                        <option value="Kaqchikel">Kaqchikel</option>
                        <option value="Kiche">K'iche</option>
                        <option value="Mam">Mam</option>
                        <option value="Mopan">Mopan</option>
                        <option value="Poqoman">Poqoman</option>
                        <option value="Poqomchi">Poqomchi'</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Fila: Solicitud de Información -->
        <div class="form-group">
            <label for="solicitud_informacion">
                <i class="fas fa-file-alt mr-1"></i> Solicitud de Información
            </label>
            <textarea name="solicitud_informacion" class="form-control" rows="4" placeholder="Describa su solicitud" required></textarea>
        </div>

        <!-- Fila: Subir Archivos -->
        <div class="form-group">
            <label for="archivo">
                <i class="fas fa-upload mr-1"></i> Subir archivo(s) (Opcional)
            </label>
            <input type="file" name="archivos[]" class="form-control-file" id="archivo" accept=".pdf,.csv,.xlsx" multiple>
            <small class="form-text text-muted">Puedes subir varios archivos</small>
        </div>

        <!-- Lista de archivos seleccionados -->
        <div id="file-list" class="mt-3">
            <!-- Archivos seleccionados se mostrarán aquí -->
        </div>

        <!-- Botón de Enviar -->
        <div class="text-center mt-4">
            <button type="submit" class="btn btn-success btn-lg">
                <i class="fas fa-paper-plane"></i> Enviar Solicitud
            </button>
        </div>
    </form>
@stop

@section('js')
<script>
    document.getElementById('archivo').addEventListener('change', function(event) {
        const fileListContainer = document.getElementById('file-list');
        fileListContainer.innerHTML = ''; // Limpiar la lista actual

        Array.from(event.target.files).forEach((file, index) => {
            // Crear un contenedor para cada archivo con un botón de eliminación
            const fileItem = document.createElement('div');
            fileItem.classList.add('file-item', 'd-flex', 'align-items-center', 'mb-2');

            // Mostrar el nombre del archivo
            const fileName = document.createElement('span');
            fileName.textContent = file.name;
            fileName.classList.add('mr-3');
            fileItem.appendChild(fileName);

            // Crear el botón para eliminar el archivo
            const removeButton = document.createElement('button');
            removeButton.type = 'button';
            removeButton.textContent = 'Eliminar';
            removeButton.classList.add('btn', 'btn-danger', 'btn-sm');
            removeButton.addEventListener('click', () => {
                removeFile(index);
            });
            fileItem.appendChild(removeButton);

            fileListContainer.appendChild(fileItem);
        });
    });

    function removeFile(index) {
        const fileInput = document.getElementById('archivo');
        const fileList = Array.from(fileInput.files);

        // Eliminar el archivo del array de archivos
        fileList.splice(index, 1);

        // Crear un nuevo objeto de tipo DataTransfer para actualizar el input de archivos
        const dataTransfer = new DataTransfer();
        fileList.forEach(file => dataTransfer.items.add(file));

        fileInput.files = dataTransfer.files;

        // Volver a renderizar la lista de archivos seleccionados
        fileInput.dispatchEvent(new Event('change'));
    }
</script>
@stop

@section('css')
<style>
    .required-asterisk {
        color: red;
        font-weight: bold;
    }
</style>
@stop