@extends('layout.master')

@section('title', 'Libro de Reclamaciones')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/form.css') }}" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css" />
    <script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.site_key') }}"></script>


    <style>
        .error-message {
            color: red;
            font-size: 0.875em;
            display: none;
            margin-top: 0.25em;
        }

        .uk-input,
        .uk-select,
        .uk-textarea {
            border: 1px solid #ced4da;
            transition: border-color 0.3s;
        }

        .uk-input:focus,
        .uk-select:focus,
        .uk-textarea:focus {
            border-color: #007bff;
        }

        .uk-card-title {
            text-align: center;
            margin-bottom: 20px;
        }

        .form-section {
            margin-bottom: 15px;
        }
    </style>
@endsection

@section('content')
    <main class="page-main">
        <div class="bodyfull">
            <div class="uk-container">

                <!-- Formulario del Libro de Reclamaciones -->
                <div id="complaint-form" class="uk-card uk-card-default uk-card-body">
                    <h3 class="uk-card-title">Libro de Reclamaciones</h3>
                    <form id="reclamacion-form" enctype="multipart/form-data">
                        @csrf
                        <div class="form-section">
                            <label for="nombre">Nombre Completo</label>
                            <input class="uk-input" type="text" id="nombre" name="nombre"
                                placeholder="Nombre completo" required>
                            <div id="error-nombre" class="error-message">Este campo es obligatorio.</div>
                        </div>

                        <div class="form-section">
                            <label for="dni">Documento de Identidad (DNI)</label>
                            <input class="uk-input" type="text" id="dni" name="dni"
                                placeholder="DNI (8 dígitos)" required>
                            <div id="error-dni" class="error-message">Debe ingresar un DNI válido de 8 dígitos.</div>
                        </div>

                        <div class="form-section">
                            <label for="email">Correo Electrónico</label>
                            <input class="uk-input" type="email" id="email" name="email"
                                placeholder="Correo electrónico" required>
                            <div id="error-email" class="error-message">Ingrese un correo electrónico válido.</div>
                        </div>

                        <div class="form-section">
                            <label for="telefono">Teléfono</label>
                            <input class="uk-input" type="tel" id="phone" name="phone"
                                placeholder="Número de teléfono" required>
                            <div id="error-telefono" class="error-message">Ingrese un número de teléfono válido.</div>
                        </div>

                        <div class="form-section">
                            <label for="tipo">Tipo de Reclamación</label>
                            <select class="uk-select" id="tipo" name="tipo" required>
                                <option value="">Seleccione el tipo de reclamo</option>
                                <option value="queja">Queja</option>
                                <option value="reclamo">Reclamo</option>
                            </select>
                            <div id="error-tipo" class="error-message">Seleccione un tipo de reclamación.</div>
                        </div>

                        <div class="form-section">
                            <label for="descripcion">Descripción</label>
                            <textarea class="uk-textarea" id="descripcion" name="descripcion" rows="5" placeholder="Describa el problema"
                                required></textarea>
                            <div id="error-descripcion" class="error-message">Este campo es obligatorio.</div>
                        </div>

                        <div class="form-section">
                            <label for="archivo">Adjuntar Archivo (opcional)</label>
                            <input class="uk-input" type="file" id="archivo" name="archivo">
                        </div>


                        <button type="button" class="uk-button uk-button-primary uk-margin-top"
                            onclick="ejecutarRecaptchaYEnviar()">
                            Enviar Reclamo
                        </button>
                    </form>
                </div>

            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput.min.js"></script>

        <script>
            let phoneInput;

            document.addEventListener('DOMContentLoaded', function() {
                initializePhoneInput();
            });

            function initializePhoneInput() {
                const phoneInputField = document.querySelector("#phone");
                phoneInput = window.intlTelInput(phoneInputField, {
                    initialCountry: "auto",
                    separateDialCode: true,
                    formatOnDisplay: true,
                    autoPlaceholder: "aggressive",
                    allowDropdown: true,
                    dropdownContainer: document.body,
                    searchPlaceholder: 'Buscar país',
                    geoIpLookup: function(callback) {
                        fetch('https://ipinfo.io', {
                                headers: {
                                    'Accept': 'application/json'
                                }
                            })
                            .then(response => response.json())
                            .then(data => callback(data.country))
                            .catch(() => callback("PE"));
                    },
                    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/utils.js"
                });
            }

            function showError(field, message) {
                console.log(field);
                document.getElementById(`error-${field}`).style.display = 'block';
                document.getElementById(field).classList.add('uk-form-danger');
            }

            function clearError(field) {
                document.getElementById(`error-${field}`).style.display = 'none';
            }

            function validateForm() {
                let isValid = true;

                // const recaptchaResponse = grecaptcha.getResponse();
                // if (!recaptchaResponse) {
                //     document.getElementById('error-recaptcha').style.display = 'block';
                //     isValid = false;
                // } else {
                //     document.getElementById('error-recaptcha').style.display = 'none';
                // }


                const nombre = document.getElementById('nombre').value.trim();
                const dni = document.getElementById('dni').value.trim();
                const email = document.getElementById('email').value.trim();
                const telefono = document.getElementById('phone').value.trim();
                const tipo = document.getElementById('tipo').value;
                const descripcion = document.getElementById('descripcion').value.trim();

                if (!nombre) {
                    showError('nombre', 'Este campo es obligatorio.');
                    isValid = false;
                } else {
                    clearError('nombre');
                }

                if (!dni || dni.length !== 8 || isNaN(dni)) {
                    showError('dni', 'Debe ingresar un DNI válido de 8 dígitos.');
                    isValid = false;
                } else {
                    clearError('dni');
                }

                const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
                if (!email || !emailPattern.test(email)) {
                    showError('email', 'Ingrese un correo electrónico válido.');
                    isValid = false;
                } else {
                    clearError('email');
                }

                if (!telefono) {
                    showError('telefono', 'Ingrese un número de teléfono válido.');
                    isValid = false;
                } else {
                    clearError('telefono');
                }

                if (!tipo) {
                    showError('tipo', 'Seleccione un tipo de reclamación.');
                    isValid = false;
                } else {
                    clearError('tipo');
                }

                if (!descripcion) {
                    showError('descripcion', 'Este campo es obligatorio.');
                    isValid = false;
                } else {
                    clearError('descripcion');
                }

                return isValid;
            }

            function ejecutarRecaptchaYEnviar() {
                if (!validateForm()) return;

                grecaptcha.ready(function() {
                    grecaptcha.execute('{{ config('services.recaptcha.site_key') }}', {
                            action: 'submit'
                        })
                        .then(function(token) {
                            // Agregar token al formulario
                            let form = document.getElementById('reclamacion-form');
                            let input = document.createElement('input');
                            input.type = 'hidden';
                            input.name = 'g-recaptcha-response';
                            input.value = token;
                            form.appendChild(input);

                            // Enviar formulario
                            submitReclamation();
                        });
                });
            }


            function submitReclamation() {
                if (!validateForm()) {
                    return;
                }

                const formData = new FormData(document.getElementById('reclamacion-form'));

                Swal.fire({
                    title: 'Enviando...',
                    text: 'Por favor, espere.',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    type: 'POST',
                    url: '/enviarReclamacion',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        Swal.close();
                        Swal.fire({
                            icon: 'success',
                            title: 'Reclamo enviado',
                            text: 'Su reclamo ha sido enviado exitosamente.',
                        }).then(() => {
                            // Limpieza del formulario
                            document.getElementById('reclamacion-form').reset();

                            // Si estás usando intl-tel-input para el teléfono, restablece el input de teléfono
                            if (phoneInput) {
                                phoneInput.setNumber('');
                            }

                            // Opcional: Oculta los mensajes de error si están visibles
                            const errorElements = document.querySelectorAll('.error-message');
                            errorElements.forEach(errorElement => {
                                errorElement.style.display = 'none';
                            });
                        });
                    },
                    error: function(response) {
                        Swal.close();
                        Swal.fire({
                            icon: 'error',
                            title: 'Error al enviar',
                            text: 'Ocurrió un error al enviar su reclamo. Intente nuevamente más tarde.',
                        });
                    }
                });
            }
        </script>
    </main>
@endsection