@extends('adminlte::page')

@section('title', 'Nueva Solicitud')

@section('content')
    <div class="card card-outline card-primary">
        <div class="container">
        </div>
        <div class="card-header">
            <h3 class="card-title">Solicitud de Hombre Nuevo</h3>
        </div>

        <div class="card-body">
            <div class="row mb-3">
                <div class="col-12">
                    @can('servicio_integral.create')
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createSolicitudModal">
                            Crear Solicitud
                        </button>
                    @endcan
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-12">
                    <div class="alert alert-primary  text-center" role="alert">
                        Para visualizar el progreso por etapas, pase el mouse sobre el progreso total.
                    </div>
                    <table id="solicitudesTable" class="table table-bordered table-striped" style="width: 100%">
                        <thead class="table-dark">
                            <tr>
                                <th>Correlativo</th>
                                <th>Nombre</th>
                                <th>RUT</th>
                                <th>Fecha</th>
                                <th>Empresa</th>
                                <th>Cargo</th>
                                <th>Turno</th>
                                <th>Fecha Contrato</th>
                                <th>Fecha Ingreso a Faena</th>
                                <th>Progreso</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>

                    </table>
                </div>
            </div>
            <form method="POST" id="solicitudForm" data-action="{{ route('solicitudes.store') }}"
                class="card card-primary mt-4">
                @csrf
                <div class="modal fade" id="createSolicitudModal" tabindex="-1" role="dialog"
                    aria-labelledby="createSolicitudModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="createSolicitudModalLabel">Nueva Solicitud</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="nombre">Nombre</label>
                                    <input type="text" class="form-control" id="nombre_trabajador_id"
                                        name="nombre_trabajador" required>
                                </div>
                                <div class="form-group">
                                    <label for="rut">RUT</label>
                                    <input type="text" class="form-control" id="rut_trabajador_id" name="rut_trabajador"
                                        placeholder="Ej: 12345678-9" required
                                        oninput="this.value = this.value.replace(/\./g, '')">
                                </div>
                                <div class="form-group">
                                    <label for="empresa">Empresa</label>
                                    <input type="text" class="form-control" id="empresa_id" name="empresa" required>
                                </div>
                                <div class="form-group">
                                    <label for="cargo">Cargo</label>
                                    <input type="text" class="form-control" id="cargo_id" name="cargo" required>
                                </div>
                                <div class="form-group">
                                    <label for="turno">Turno</label>
                                    <input type="text" class="form-control" id="turno_id" name="turno" required>
                                </div>
                                <div class="form-group">
                                    <label for="fechaContrato">Fecha Contrato</label>
                                    <input type="date" class="form-control" id="fechaContrato_id" name="fechaContrato"
                                        required>
                                </div>
                                <div class="form-group">
                                    <label for="fechaIngreso">Fecha ingreso a faena</label>
                                    <input type="date" class="form-control" id="fechaIngreso_id" name="fechaIngreso"
                                        required>
                                </div>

                                <div class="form-group">
                                    <label for="etapa4">Seleccionar Proceso de Etapa 4</label>
                                    <select class="form-control" id="tipo_fase_cuatro_id" name="tipo_fase_cuatro">
                                        <option value="trayectoria">Medición de Trayectoria</option>
                                        <option value="topografia">Topografía Sonaje</option>
                                        <option value="geomensor_mina">Geomensor Mina</option>
                                        <option value="geomensor_pv3">Geomensor PV3</option>
                                        <option value="miscelaneos">Misceláneos</option>
                                    </select>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                                <button type="submit" class="btn btn-primary">Guardar Solicitud</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div id="loadingOverlay"
        style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999;">
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
            <div class="spinner-border text-light" role="status" style="width: 3rem; height: 3rem;">
                <span class="sr-only">Cargando...</span>
            </div>
            <p style="color: white; text-align: center; margin-top: 10px;">Cargando...</p>
        </div>
    </div>
@endsection

@section('css')
    <style>
        #loadingOverlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }

        #loadingOverlay .spinner-border {
            width: 10rem;
            height: 10rem;
        }

        #loadingOverlay p {
            color: white;
            text-align: center;
            margin-top: 10px;
        }

        #progress-individual {
            display: none;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        #progress-individual.visible {
            display: block;
            opacity:
                1;
        }

        #progress-total,
        #progress-individual .progress {
            height: 20px;
            margin-bottom: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        #progress-total .progress-bar,
        #progress-individual .progress-bar {
            border-radius: 0;
            height: 100%;
        }

        .progress-bar {
            position: relative;
            min-width: 20px;
        }

        .progress-bar span {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            font-weight: bold;
            font-size: 0.8rem;
            white-space: nowrap;
        
        }
    </style>
@endsection



@section('js')
    <script src="{{ asset('js/general/sweet.js') }}"></script>


    <script>
        (function() {
            window.onpageshow = function(event) {
                if (event.persisted) {
                    var Table = $('#solicitudesTable').DataTable();
                    Table.ajax.reload(null, false);
                }
            };
        })();
        $(function() {
            var table = $('#solicitudesTable').DataTable({
                language: {
                    url: '{{ asset('/vendor/datatables/js/cl.json') }}'
                },
                responsive: "true",
                processing: true,
                serverSide: true,
                ajax: "{{ route('solicitudes.index') }}",
                columns: [{
                        data: 'correlativo',
                        name: 'correlativo',
                        className: "text-center"
                    },
                    {
                        data: 'nombre_trabajador',
                        name: 'nombre_trabajador',
                        className: "text-center"
                    },
                    {
                        data: 'rut_trabajador',
                        name: 'rut_trabajador',
                        className: "text-center"
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        className: "text-center"
                    },
                    {
                        data: 'empresa',
                        name: 'empresa',
                        className: "text-center"
                    },
                    {
                        data: 'cargo',
                        name: 'cargo',
                        className: "text-center"
                    },
                    {
                        data: 'turno',
                        name: 'turno',
                        className: "text-center"
                    },
                    {
                        data: 'fechaContrato',
                        name: 'fechaContrato',
                        className: "text-center"
                    },
                    {
                        data: 'fechaIngreso',
                        name: 'fechaIngreso',
                        className: "text-center"
                    },
                    {
                        data: 'progreso',
                        name: 'progreso',
                        className: "text-center",
                        orderable: false,
                        searchable: false,
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false,
                        className: "text-center"
                    },
                ],
                dom: 'Bfrtip',
                lengthMenu: [
                    [5, 10, 25, 50, 100, 1000, 5000],
                    ['Mostrar 5 registros', 'Mostrar 10 registros', 'Mostrar 25 registros',
                        'Mostrar 50 registros', 'Mostrar 100 registros', 'Mostrar 1000 registros',
                        'Mostrar 5000 registros'
                    ],
                ],
                buttons: [],
                pageLength: 10,
            });
        });
        $.validator.addMethod("formnombre", function(value, element) {
            var pattern =
                /^([A-Za-zÑñ]+[áéíóú]?[A-Za-z]*){3,18}\s+([A-Za-zÑñ]+[áéíóú]?[A-Za-z]*){3,36}(\s+([A-Za-zÑñ]+[áéíóú]?[A-Za-z]*){3,36})?$/iu;
            return this.optional(element) || pattern.test(value);
        }, "El nombre no es válido. Debe incluir al menos un nombre y dos apellidos.");


        $.validator.addMethod("formrut", function(value, element) {

            if (!value.includes('-')) {
                return false;
            }


            var rut = value.replace(/\./g, '');
            var partes = rut.split('-');


            if (partes.length !== 2) {
                return false;
            }

            var cuerpo = partes[0];
            var dv = partes[1].toUpperCase();


            if (!/^\d+$/.test(cuerpo)) {
                return false;
            }


            var suma = 0;
            var multiplo = 2;

            for (var i = cuerpo.length - 1; i >= 0; i--) {
                suma += parseInt(cuerpo[i]) * multiplo;
                multiplo = multiplo === 7 ? 2 : multiplo + 1;
            }

            var dvEsperado = 11 - (suma % 11);
            dvEsperado = dvEsperado === 11 ? '0' : dvEsperado === 10 ? 'K' : dvEsperado.toString();
            return dv === dvEsperado;
        }, "El RUT ingresado no es válido. Asegúrese de incluir el guion y el dígito verificador.");

        $('#solicitudForm').validate({
            submitHandler: function(form) {
                var url = $(form).attr('data-action');
                $.ajax({
                    url: url,
                    method: 'POST',
                    data: new FormData(form),
                    dataType: 'JSON',
                    contentType: false,
                    cache: false,
                    processData: false,
                    beforeSend: function() {
                        document.getElementById('loadingOverlay').style.display = 'block';
                    },
                    success: function(data) {
                        msjExitoModal(data['success']);
                        var Table = $('#solicitudesTable').DataTable();
                        Table.ajax.reload(null, false);
                        $(form)[0].reset()
                        $("#createSolicitudModal").modal("hide");
                    },
                    error: function(err) {
                        console.log(err);
                        msjError('¡Hubo un error al crear el equipo!');
                    },
                    complete: function() {
                        document.getElementById('loadingOverlay').style.display = 'none';
                    }
                });

            },
            rules: {
                nombre_trabajador: {
                    required: true,
                    maxlength: 50,
                    formnombre: true,
                },
                rut_trabajador: {
                    required: true,
                    maxlength: 20,
                    formrut: true,
                },
                empresa: {
                    required: true,
                    maxlength: 50,
                },
                cargo: {
                    required: true,
                    maxlength: 50,
                },
                turno: {
                    required: true,
                    maxlength: 50,
                },
                fechaContrato: {
                    required: true,
                },
                fechaIngreso: {
                    required: true,
                },
                tipo_fase_cuatro: {
                    required: true,
                },
            },
            messages: {
                nombre_trabajador: {
                    required: "Este campo es obligatorio",
                    maxlength: "El nombre no puede exceder los 50 caracteres",
                },
                rut_trabajador: {
                    required: "Este campo es obligatorio",
                    maxlength: "El RUT no puede exceder los 20 caracteres",
                },
                empresa: {
                    required: "Este campo es obligatorio",
                    maxlength: "La empresa no puede exceder los 50 caracteres",
                },
                cargo: {
                    required: "Este campo es obligatorio",
                    maxlength: "El cargo no puede exceder los 50 caracteres",
                },
                turno: {
                    required: "Este campo es obligatorio",
                    maxlength: "El turno no puede exceder los 50 caracteres",
                },
                fechaContrato: {
                    required: "Este campo es obligatorio",
                },
                fechaIngreso: {
                    required: "Este campo es obligatorio",
                },
                tipo_fase_cuatro: {
                    required: true,
                },
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });


        document.addEventListener('DOMContentLoaded', function() {
            const table = document.getElementById('solicitudesTable');


            table.addEventListener('mouseover', function(event) {
                const cell = event.target.closest('td');
                if (cell && cell.querySelector('#progress-total')) {
                    const progressIndividual = cell.querySelector('#progress-individual');
                    if (progressIndividual) {
                        progressIndividual.style.display = 'block';
                        setTimeout(() => {
                            progressIndividual.classList.add('visible');
                        }, 10);
                    }
                }
            });


            table.addEventListener('mouseout', function(event) {
                const cell = event.target.closest('td');
                if (cell && !cell.contains(event
                        .relatedTarget)) {
                    const progressIndividual = cell.querySelector('#progress-individual');
                    if (progressIndividual) {
                        progressIndividual.classList.remove('visible');
                        setTimeout(() => {
                            progressIndividual.style.display = 'none';
                        }, 300);
                    }
                }
            });
        });
    </script>
@endsection