@extends('layouts.app')

@section('title')
Verificación
@endsection

@section('modals')

@endsection

@section('content')
<div class="container p-5">
    <div class="card card-outline card-danger">
        <div class="card-title p-4 border-bottom">
            <div class="row">
                <div class="col-md-6">
                    <h4><i class="fa fa-th"></i> Verificación </h4>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class='alert table-success tool' role="alert" data-toggle="tooltip" data-placement="top"
                        title="INFORMACIÓN: CUANDO LAS FILAS ESTEN DE ESTE COLOR SIGNIFICA QUE NO HAY LLAMADAS PENDIENTES">
                        <i class="fa fa-info-circle"></i>
                        Llamada Efectiva
                    </div>
                </div>
                <div class="col-md-4">
                    <div class='alert table-warning tool' role="alert" data-toggle="tooltip" data-placement="top"
                        title="INFORMACIÓN: CUANDO LAS FILAS ESTEN DE ESTE COLOR SIGNIFICA QUE HAY LLAMADAS PENDIENTES">
                        <i class="fa fa-info-circle"></i>
                        Llamada Pendiente
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <h5 class="text-center"><b>Jefes Registrados</b></h5>
            <h6 class="text-left"><b>Filtrado</b></h6>
            <div class="row">
                <div class="col-md-3">

                    <select class="form-control" id="select_municipio">
                        <option value="0">SELECCIONE MUNICIPIO</option>
                        @foreach (DB::table('gl_municipios')->where('estado_id', 19)->get() as $municipio)
                            <option value="{{$municipio->id}}">{{$municipio->descripcion}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <select class="form-control" id="select_parroquia">
                       
                    </select>
                </div>
            </div>
            <br>
            <table class="table table-bordered" id="tabla-jefes">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Cédula</th>
                        <th>Nombre</th>
                        <th>Por Verificar</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody id="tbody-jefes">

                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="modal fade" id="modal-default">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"><b>Verificación</b></h4>

                <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="row">
                    <div class="col-md-4">
                        <div class='alert table-success tool' role="alert" data-toggle="tooltip" data-placement="top"
                            title="INFORMACIÓN: CUANDO LAS FILAS ESTEN DE ESTE COLOR SIGNIFICA QUE LA LLAMADA FUE EFECTIVA">
                            <i class="fa fa-info-circle"></i>
                            Llamada Efectiva
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class='alert table-warning tool' role="alert" data-toggle="tooltip" data-placement="top"
                            title="INFORMACIÓN: CUANDO LAS FILAS ESTEN DE ESTE COLOR SIGNIFICA QUE LA LLAMADA ESTÁ PENDIENTE ">
                            <i class="fa fa-info-circle"></i>
                            Llamada Pendiente
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class='alert table-danger tool' role="alert" data-toggle="tooltip" data-placement="top"
                            title="INFORMACIÓN: CUANDO LAS FILAS ESTEN DE ESTE COLOR SIGNIFICA QUE LA LLAMADA FUE NO EFECTIVA">
                            <i class="fa fa-info-circle"></i>
                            Llamada No Efectiva
                        </div>
                    </div>
                </div>
                <h4><b>Listado de Asignados 1 x 10</b></h4>
                <table class="table table-bordered" id="tabla-asiganados">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Cédula</th>
                            <th>Nombre</th>
                            <th>Teléfono</th>
                            <th>Actualmente</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody id="tbody-asiganados">

                    </tbody>
                </table>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <!-- <button type="button" class="btn btn-primary"></button> -->
            </div>
        </div>

    </div>

</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function () {
        var id_jefe = "";
        var municipio_id = 0;
        var parroquia_id = 0;
        $("#select_municipio").change(function () {
            municipio_id = this.value;
            consultarParroquias(municipio_id);
            verJefes(municipio_id, parroquia_id);
        });

        $("#select_parroquia").change(function () {
            parroquia_id = this.value;
            verJefes(municipio_id, parroquia_id);
        });

        function consultarParroquias(municipio_id) {
            fetch(
                DIR+'/municipios/show/' + municipio_id, {
                method: 'GET'
            }
            ).then(res => res.json()).then(function (data) {

                var parroquias = `<option value="0">SELECCIONE PARROQUIA</option>`;
                $("#select_parroquia").html("");
                if (data.status) {
                    data.data.gl_parroquias.forEach(parroquia => {
                        parroquias += `<option value="${parroquia.id}">${parroquia.descripcion}</option>`;
                    });

                    $("#select_parroquia").html(parroquias);
                } else {
                    console.log("Error");
                }

            })
                .catch(function (err) {
                    console.log(err);
                })

        }

        $("table").DataTable({
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
            }
        });

        $(document).on("click", ".verificar", function () {

            id_jefe = $(this).attr("data-id-feje");
            verPersonas(id_jefe);

        })
        $(document).on('click', '.update-persona', function (e) {
            e.preventDefault();
            var id = $(this).attr("data-id");
            var valor = $(this).attr("data-valor");
            fetch(
                DIR+'/personas/update/' + id + '/' + valor, {
                method: 'GET'
            }
            ).then(res => res.json()).then(function (data) {

                if (data.status) {
                    verPersonas(id_jefe);
                    verJefes(municipio_id, parroquia_id);
                } else {
                    console.log("Error");
                }

            })
                .catch(function (err) {
                    console.log(err);
                })
        });

        function verJefes(municipio_id, parroquia_id) {
            $('#tbody-jefes').html("");
            fetch(
                DIR+'/jefes/listado/' + municipio_id + '/' + parroquia_id, {
                method: 'GET'
            }
            ).then(res => res.json()).then(function (data) {
                console.log(data);
                var numeracion = 1;
                template = "";
                data.data.forEach(e => {
                    var sin_verificar = 0;

                    e.gl_personas.forEach(e2 => {
                        if (e2.verificado == null) {
                            sin_verificar++;
                        }
                    })

                    template += `
                    <tr ${sin_verificar > 0 ? "class=table-warning" : "class=table-success"} >
                                            <td> ${numeracion}</td>
                                            <td> ${e.cedula}</td>
                                            <td> ${e.nombre}</td>
                                            <td> ${sin_verificar == 1 ? sin_verificar + " Persona" : sin_verificar + " Personas"} </td>
                                            <td> <button type="button" class="btn btn-default verificar" data-toggle="modal"
                                                    data-target="#modal-default" data-id-feje="${e.id}">
                                                    Verificar
                                                </button>
                                            </td>
                                        </tr>
                    `;
                    numeracion++;
                });

                $('#tabla-jefes').DataTable().destroy();

                $('#tbody-jefes').html(template);

                $('#tabla-jefes').DataTable({
                    language: translate
                });
            })
                .catch(function (err) {
                    console.log(err);
                })
        }
        function verPersonas(id_jefe) {
            fetch(
                DIR+'/jefes/verificados/' + id_jefe, {
                method: 'GET'
            }
            ).then(res => res.json()).then(function (data) {
                console.log(data);
                var numeracion = 1;
                template = "";
                data.data.gl_personas.forEach(e => {
                    var stilo = "";
                    var text_verificado = "";
                    switch (e.verificado) {
                        case "SI"://llamada efectiva
                            stilo = "class='table-success'";
                            text_verificado = "Llamada Efectiva";
                            break;
                        case "NO": //llamada no efectiva
                            stilo = "class='table-danger'";
                            text_verificado = "Llamada No Efectiva";
                            break;
                        default: //llamada pendiente
                            stilo = "class='table-warning'";
                            text_verificado = "Llamada Pendiente";
                            break;
                    }

                    template += `
                        <tr ${stilo}>
                            <td class="text-center">${numeracion}</td>
                            <td class="text-center">${e.cedula}</td>
                            <td class="text-center">${e.nombre}</td>
                            <td class="text-center">${e.tlfmovil}</td>
                            <td class="text-center">${text_verificado}</td>
                            <td class="text-right">
                                <button title="EFECTIVA" class="btn btn-success btn-md update-persona" data-id="${e.id}" data-valor="SI"><i class="far fa-check-circle fa-lg"></i></button>
                                <button title="NO EFECTIVA" class="btn btn-danger btn-md update-persona" data-id="${e.id}" data-valor="NO"><i class="fas fa-ban fa-lg"></i></button>
                            </td>
                        </tr>
                    `;
                    numeracion++;
                });

                $('#tabla-asiganados').DataTable().destroy();

                $('#tbody-asiganados').html(template);

                $('#tabla-asiganados').DataTable({
                    language: translate
                });
            })
                .catch(function (err) {
                    console.log(err);
                })
        }
    });


</script>
@endsection