@extends('layouts.admin')
@section('monitor', 'active bg-gradient-primary')



@section('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
@endsection

@section('contenido')

    <div class="row">
        <div class="col-12">
            <div class="card my-4">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                    <div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
                        <h6 class="text-white text-capitalize ps-3">
                            <i class="fa-solid fa-calendar-days"></i>
                            Monitor de Tareas
                        </h6>
                    </div>
                </div>
                <div class="card-body px-0 pb-2">
                    <div class="container">
                        <div class="row">
                            <div class="row">

                                <div class="col-md-10 offset-1">
                                    <label class="form-label">Ejecutivo</label>
                                    <select id="user_id" name="user_id" class="form-select">
                                        <option value="Todos">Todos</option>
                                        @foreach ($ejecutivos as $ejecutivo)
                                            <option value="{{ $ejecutivo->id }}">{{ $ejecutivo->nombre }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div id="div_fechas" class=" offset-1 row" style="padding:0px">
                                    <div class="col-md-5">
                                        <div class="input-group input-group-outline my-3 focus is-focused col-md-6">
                                            <label class="form-label">Inicio</label>
                                            <input type="date" class="form-control" name="fecha_inicio"
                                                id="fecha_inicio">
                                        </div>
                                    </div>
                                    <div class="col-md-5">

                                        <div class="input-group input-group-outline my-3 focus is-focused col-md-6">
                                            <label class="form-label">Fin</label>
                                            <input type="date" class="form-control" name="fecha_fin" id="fecha_fin">
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" onclick="ordenarEjecuciones()"
                                    class="btn bg-gradient-primary w-100 my-4 mb-2"> <i class="fa fa-search"
                                        aria-hidden="true"></i>
                                    Buscar
                                </button>




                                <table id="table_id" class="display compact config-table">
                                    <thead>
                                        <tr>
                                            <th>Nombre</th>
                                            <th>Servicio</th>
                                            <th>Número</th>
                                            <th>Fecha</th>
                                            <th>Localidad</th>
                                            <th>Zonal</th>
                                            <th>Fono</th>
                                            <th>Sector</th>
                                            <th>Direccion</th>
                                            <th>Usuario</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody id="fila_bajas" name="fila_bajas">

                                    </tbody>
                                </table>
                            </div>

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

    <!--Modal Cargando-->
    <div class="modal fade" id="modalCargando" tabindex="-1" role="dialog" aria-labelledby="modalCargando"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content col-md-12">


                <div class="modal-body col-md-12 text-center">

                    Esta operación puede tardar unos minutos. <br>
                    Espere por favor. <br>
                    <img onclick="$('#modalCargando').modal('hide');" style="width:40%" align="center"
                        src="img/progress.gif">

                </div>

            </div>

        </div>
    </div>
@endsection

@section('js')

    <!-- datatable-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>

    <script src="js/config_table.js"></script>

    <script>
        function buscarAgendamientos() {
            $('#table_id').DataTable().destroy();
            id_ejecutivo = $("#user_id").val();
            fecha_inicio = $("#fecha_inicio").val();
            fecha_fin = $("#fecha_fin").val();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            return $.ajax({
                type: "get",
                dataType: "json",
                url: "../buscar_agendamientos_" + id_ejecutivo + "_" + fecha_inicio + "_" + fecha_fin,

                success: function(resultado) {
                    $('#fila_bajas').empty();
                    console.log(resultado.agendamientos[0]);
                    resultado.agendamientos.forEach(agendamientos => {
                        estado = agendamientos.servicio.estado_actual;
                        switch (agendamientos.servicio.estado_actual) {
                            case "Pendiente":
                                estado =
                                    '<span style="font-size:9px" class="badge badge-sm bg-gradient-warning">por confirmar</span>';
                                break;
                            case "por confirmar":
                                estado =
                                    '<span style="font-size:9px" class="badge badge-sm bg-gradient-warning">por confirmar</span>';
                                break;
                            case "Verificado":
                                estado =
                                    '<span style="font-size:9px" class="badge badge-sm bg-gradient-info">verificado</span>';
                                break;
                            case "Agendado":
                                estado =
                                    '<span style="font-size:9px" class="badge badge-sm bg-gradient-success">agendado</span>';
                                break;
                            case "Irrecuperable":
                                estado =
                                    '<span style="font-size:9px" class="badge badge-sm bg-gradient-danger">Irrecuperable</span>';
                                break;
                            case "Recuperado":
                                estado =
                                    '<span style="font-size:9px" class="badge badge-sm bg-gradient-success">Recuperado</span>';
                            case "Gestionado":
                                estado =
                                    '<span style="font-size:9px" class="badge badge-sm bg-gradient-secondary">Gestionado</span>';

                        }
                        var fechaCompleta = agendamientos['fecha'];

                        // Dividir la cadena en la parte de la fecha y la parte de la hora
                        var partesFechaHora = fechaCompleta.split(" ");

                        // Dividir la parte de la fecha en componentes
                        var partesFecha = partesFechaHora[0].split("-");

                        // Reorganizar las partes de la fecha en el formato "DD-MM-YYYY"
                        var fechaFormateada = partesFecha[2] + "-" + partesFecha[1] + "-" + partesFecha[
                            0];

                        $('#fila_bajas').append(
                            `<tr>
                                <td>` + agendamientos.servicio.cliente['nombre'] + `</td>
                                <td>` + agendamientos.servicio['servicio'] + `</td>
                                <td>` + agendamientos.servicio.peticion.numero + `</td>
                                <td>` + fechaFormateada + `</td>
                                <td>` + agendamientos.servicio.localidad.nombre + `</td>
                                <td>` + agendamientos.servicio.localidad.zonal['codigo'] + `</td>
                                <td>` + agendamientos.servicio.cliente['fono'] + `</td>
                                <td>` + agendamientos.servicio['sector'] + `</td>
                                <td>` + agendamientos.servicio['direccion'] + `</td>
                                <td>` + agendamientos.user['usuario']+ `</td>


                                <td>` + estado +
                            `</td>

                            </tr>`
                        )

                    });

                },
                error: function() {
                    alert("error");

                }

            });

        }



        function aplicarDT(callback) {
            $('#table_id').DataTable({

                responsive: true,

                "aoColumnDefs": [{
                    'bSortable': false,
                    'aTargets': [-1]
                }],
                "oLanguage": {
                    "oPaginate": {
                        "sPrevious": "Anterior",
                        "sNext": "Siguiente",
                        "sInfo": "Mostrando _START_ a _END_ de un total de _TOTAL_"

                    },
                    "sZeroRecords": "Sin registros para mostrar",
                    "sInfo": "mostrando _START_ a _END_, de un total de _TOTAL_ registros",
                    "sInfoFiltered": " - filtrado de _MAX_ registros",
                    "sInfoEmpty": "Sin registros para mostrar",
                    "sSearch": "Buscar",
                    "sLengthMenu": "Mostrar _MENU_ registros",
                    "sLoadingRecords": "Por favor, espere un momento...9"

                }
            });
            callback();

        }

        function ordenarEjecuciones() {
            $("#div_table").removeAttr('hidden');
            $('#modalCargando').modal('show');
            buscarAgendamientos().done(function() {
                aplicarDT(function() {
                    setTimeout(function() {
                        $('#modalCargando').modal('hide');
                    }, 1000); // Retraso de 500 milisegundos (ajústalo según tus necesidades)
                });
            });
        }
    </script>
@endsection