@extends('layouts.app')

@section('content')
    <!-- end sidebar menu -->
    <!-- start page content -->
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <!--<div class="pull-left">
                                                        <div class="page-title text-danger">Sin Sucursal</div>
                                                    </div>-->
                    <ol class="breadcrumb page-breadcrumb pull-right">
                        <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item"
                                href="{{ url('/dashboard') }}">Inicio</a>&nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        <li class="active">Listado de Cobradores</li>
                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="card  card-box">
                        <div class="card-head">
                            <header>Listado de Cobradores</header>
                        </div>



                        <div class="tools">
                            {!! Form::open(['url' => 'cobrador/usuarios', 'method' => 'get', 'id' => 'frmFiltros']) !!}
                            <input type="hidden" id="accion" name="accion" value="1">
                            <!-- Example split danger button -->
                            <div class="btn-group">
                                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"
                                    aria-expanded="false">
                                    <i class="fa fa-filter"></i>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item">
                                        <div class="icheck-primary d-inline">
                                            <input type="checkbox" name="filtro_todos" onclick="marcarTodos(this)"
                                                id="chkTodos" checked="">
                                            <label for="chkTodos">
                                                <span class="text-primary">Mostrar Todos</span>
                                            </label>
                                        </div><br>
                                    </a>
                                    <a class="dropdown-item">
                                        <div class="icheck-primary d-inline">
                                            <input type="checkbox" name="filtro_numero" onclick="" id="chkNumero"
                                                checked="">
                                            <label for="chkNumero">
                                                #
                                            </label>
                                        </div><br>
                                    </a>
                                    <a class="dropdown-item">
                                        <div class="icheck-primary d-inline">
                                            <input type="checkbox" name="filtro_sede" onclick="" id="chkSede" checked>
                                            <label for="chkSede">
                                                Sede
                                            </label>
                                        </div><br>
                                    </a>
                                    <a class="dropdown-item">
                                        <div class="icheck-primary d-inline">
                                            <input type="checkbox" name="filtro_documento" onclick="" id="chkDocumento"
                                                checked>
                                            <label for="chkDocumento">
                                                Documento
                                            </label>
                                        </div><br>
                                    </a>
                                    <a class="dropdown-item">
                                        <div class="icheck-primary d-inline">
                                            <input type="checkbox" name="filtro_nombres" onclick="" id="chkNombres"
                                                checked="">
                                            <label for="chkNombres">
                                                Nombres
                                            </label>
                                        </div><br>
                                    </a>
                                    <a class="dropdown-item">
                                        <div class="icheck-primary d-inline">
                                            <input type="checkbox" name="filtro_apellido1" onclick="" id="chkApellido1"
                                                checked>
                                            <label for="chkApellido1">
                                                Primer Apellido
                                            </label>
                                        </div><br>
                                    </a>
                                    <a class="dropdown-item">
                                        <div class="icheck-primary d-inline">
                                            <input type="checkbox" name="filtro_apellido2" onclick="" id="chkApellido2"
                                                checked>
                                            <label for="chkApellido2">
                                                Segundo Apellido
                                            </label>
                                        </div><br>
                                    </a>
                                    <a class="dropdown-item">
                                        <div class="icheck-primary d-inline">
                                            <input type="checkbox" name="filtro_email" onclick="" id="chkEmail"
                                                checked>
                                            <label for="chkEmail">
                                                Email
                                            </label>
                                        </div><br>
                                    </a>
                                    <a class="dropdown-item">
                                        <div class="icheck-primary d-inline">
                                            <input type="checkbox" name="filtro_celular" onclick="" id="chkCelular"
                                                checked>
                                            <label for="chkCelular">
                                                Celular
                                            </label>
                                        </div><br>
                                    </a>
                                    <a class="dropdown-item">
                                        <div class="icheck-primary d-inline">
                                            <input type="checkbox" name="filtro_usuario" onclick="" id="chkUsuario"
                                                checked="">
                                            <label for="chkUsuario">
                                                Usuario
                                            </label>
                                        </div><br>
                                    </a>
                                    <a class="dropdown-item">
                                        <div class="icheck-primary d-inline">
                                            <input type="checkbox" name="filtro_rol" onclick="" id="chkSede"
                                                checked>
                                            <label for="chkSede">
                                                Rol
                                            </label>
                                        </div><br>
                                    </a>
                                    <a class="dropdown-item">
                                        <div class="icheck-primary d-inline">
                                            <input type="checkbox" name="filtro_comision" onclick=""
                                                id="chkComision" checked>
                                            <label for="chkComision">
                                                Gana Comisión
                                            </label>
                                        </div>
                                    </a>
                                </div>
                            </div>


                        </div>



                        <div class="card-body ">

                            <div class="table-wrap">
                                <div class="table-responsive">
                                    <table class="table display product-overview mb-30">
                                        <thead>
                                            <tr>
                                                <th><b>#</b></th>
                                                <th><b>Documento</b></th>
                                                <th><b>Nombres</b></th>
                                                <th><b>Primer Apellido</b></th>
                                                <th><b>Segundo Apellido</b></th>
                                                <th><b>Email</b></th>
                                                <th><b>Celular</b></th>
                                                <th><b>Usuario</b></th>
                                                <th><b>Rol</b></th>
                                                <th><b>Gana Comisión</b></th>

                                                <th><b>Bitacora Confirmada</b></th>
                                                <th><b>Fecha de Confirmacion</b></th>
                                                <th><b>Fecha Limite de Confirmacion</b></th>
                                                <th><b></b></th>
                                            </tr>
                                            <tr>
                                                <th></th>
                                                <th>
                                                    {!! Form::text('documento', $documento, [
                                                        'id' => 'documento',
                                                        'class' => 'form-control',
                                                        'placeholder' => 'Documento',
                                                        'onchange' => "buscar('documento')",
                                                    ]) !!}
                                                </th>
                                                <th>
                                                    {!! Form::text('nombre', $nombre, [
                                                        'id' => 'nombre',
                                                        'class' => 'form-control',
                                                        'placeholder' => 'Nombres',
                                                        'onchange' => "buscar('nombre')",
                                                    ]) !!}
                                                </th>
                                                <th>
                                                    {!! Form::text('paterno', $paterno, [
                                                        'id' => 'paterno',
                                                        'class' => 'form-control',
                                                        'placeholder' => 'Primer Apellido',
                                                        'onchange' => "buscar('paterno')",
                                                    ]) !!}
                                                </th>
                                                <th>
                                                    {!! Form::text('materno', $materno, [
                                                        'id' => 'materno',
                                                        'class' => 'form-control',
                                                        'placeholder' => 'Segundo Apellido',
                                                        'onchange' => "buscar('materno')",
                                                    ]) !!}
                                                </th>
                                                <th>
                                                    {!! Form::text('email', $email, [
                                                        'id' => 'email',
                                                        'class' => 'form-control',
                                                        'placeholder' => 'Email',
                                                        'onchange' => "buscar('email')",
                                                    ]) !!}
                                                </th>
                                                <th>
                                                    {!! Form::text('celular', $celular, [
                                                        'id' => 'celular',
                                                        'class' => 'form-control',
                                                        'placeholder' => 'Celular',
                                                        'onchange' => "buscar('celular')",
                                                    ]) !!}
                                                </th>
                                                <th>
                                                    {!! Form::select('usuarios', $dataUsuarios, $usuarios, [
                                                        'placeholder' => '--Seleccionar--',
                                                        'id' => 'usuarios',
                                                        'class' => 'form-control select2',
                                                        'onchange' => "buscar('usuarios')",
                                                    ]) !!}
                                                </th>
                                                <th>
                                                    {!! Form::select('rol', $roles, $rol, [
                                                        'placeholder' => '--Seleccionar--',
                                                        'id' => 'rol',
                                                        'class' => 'form-control select2',
                                                        'onchange' => "buscar(event,'rol')",
                                                    ]) !!}
                                                </th>
                                                <th>
                                                    {!! Form::select('comisiones', ['1' => 'Si', '0' => 'No'], $comisiones, [
                                                        'placeholder' => '--Seleccionar--',
                                                        'id' => 'comisiones',
                                                        'class' => 'form-control select2',
                                                        'onchange' => "buscar(event,'comisiones')",
                                                    ]) !!}
                                                </th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                <th></th>
                                                {!! Form::close() !!}
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($data as $key => $item)
                                                <tr>
                                                    <td>{{ $contador++ }}</td>
                                                    <td>{{ $item->empleado_documento }}</td>
                                                    <td>{{ $item->empleado_nombres }}</td>
                                                    <td>{{ $item->empleado_apellido1 }}</td>
                                                    <td>{{ $item->empleado_apellido2 }}</td>
                                                    <td>{{ $item->empleado_email }}</td>
                                                    <td>{{ $item->empleado_celular }}</td>
                                                    <td>{{ $item->usuario != '' ? $item->usuario->username : ($item->tbl_usuarios != '' ? $item->tbl_usuarios->username : '') }}
                                                    </td>
                                                    <td>{{ $item->usuario != '' ? $item->usuario->user_rol->rol->name : '' }}
                                                    </td>
                                                    <td>
                                                        @if ($item->empleado_gana_comision)
                                                            <span class="text-success"> SI </span>
                                                        @else
                                                            <span class="text-warning"> NO </span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if ($item->usuario->confirmed_log == '1')
                                                            SI
                                                        @else
                                                            NO
                                                        @endif
                                                    </td>

                                                    <td>
                                                        {{ $item->usuario->confirmation_date }}

                                                    </td>

                                                    <td>
                                                        {{ $item->usuario->expired_confirmation_date }}
                                                    </td>
                                                    <td>
                                                        <div class="btn-group">
                                                            @if ($item->usuario->confirmed_log == '1')
                                                                <a onclick="enabled_routelog({{ $item->usuario->id }} , '{{ $item->usuario->username }}' )"
                                                                    href="#" class="btn btn-tbl-update btn-xs"
                                                                    data-bs-toggle="tooltip" data-bs-placement="top"
                                                                    title="Habilitar Bitacora">
                                                                    <i class="fa fa-eye"></i>
                                                                </a>
                                                            @else
                                                                @if (!$item->usuario->expired_confirmation_date)
                                                                    <a onclick="enabled_routelog({{ $item->usuario->id }} , '{{ $item->usuario->username }}' )"
                                                                        href="#" class="btn btn-tbl-update btn-xs"
                                                                        data-bs-toggle="tooltip" data-bs-placement="top"
                                                                        title="Habilitar Bitacora">
                                                                        <i class="fa fa-eye"></i>
                                                                    </a>
                                                                @endif


                                                                <a onclick="disabled_routelog({{ $item->usuario->id }}  , '{{ $item->usuario->username }}' ) "
                                                                    href="#"
                                                                    class="btn btn-tbl-update btn-xs text-white"
                                                                    data-bs-toggle="tooltip" data-bs-placement="top"
                                                                    title="Desactivar Bitacora">
                                                                    <i class="fa fa-eye-slash"></i>
                                                                </a>
                                                            @endif

                                                        </div>
                                                    </td>

                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                        <div class="card-footer">
                            <div class="float-right">
                                {{ $data->appends(['documento' => $documento, 'nombre' => $nombre, 'paterno' => $paterno, 'materno' => $materno, 'email' => $email, 'celular' => $celular, 'usuarios' => $usuarios, 'rol' => $rol, 'comisiones' => $comisiones])->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="modal fade" id="modal-payment" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="titulo-modal"> Habilitar </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="form-collect">

                            <div class="form-group">
                                <label for="usuario-modal-label">Usuario</label>
                                <input type="text" readonly class="form-control" id="usuario-modal">
                                <input type="hidden" name="user_id" id="user_id">
                            </div>
                            <div class="form-group">
                                <label id="label-date" for="fecha">Fecha de expiracion</label>
                                <input type="date" name="expired_confirmation_date" class="form-control"
                                    id="expired_confirmation_date">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="button" class="btn btn-primary" id="btn-save-modal">Guardar</button>
                    </div>
                </div>
            </div>
        </div>


    </div>
@endsection
@section('script')
    <script type="text/javascript">
        function generar() {
            $('#accion').val(2);
            document.getElementById("frmFiltros").submit();
            $('input[type=checkbox]').prop('checked', true);
        }

        function limpiar() {
            $('#documento').val('');
            $('#nombre').val('');
            $('#paterno').val('');
            $('#materno').val('');
            $('#email').val('');
            $('#celular').val('');


            $('#usuarios').val('').change();
            $('#rol').val('').change();
            $('#comisiones').val('').change();

            document.getElementById("frmFiltros").submit();
        }

        function buscar(e, tipo) {
            console.log('tipo es ' + tipo)

            if (tipo !== 'rol') {
                localStorage.setItem("valorRol", null);
            }

            console.log('valor rol es' + localStorage.getItem("valorRol"));

            $('#accion').val(1);
            var textoSelect = $('#' + tipo).val();
            console.log('texto es ' + textoSelect);
            switch (tipo) {
                case 'documento':
                    if (textoSelect.length > 2) {
                        document.getElementById("frmFiltros").submit();
                    }
                    break;
                case 'email':
                    if (textoSelect.length > 2) {
                        document.getElementById("frmFiltros").submit();
                    }
                    break;
                case 'celular':
                    if (textoSelect.length > 2) {
                        document.getElementById("frmFiltros").submit();
                    }
                    break;
                case 'telefonos':
                    if (textoSelect.length > 2) {
                        document.getElementById("frmFiltros").submit();
                    }
                    break;
                case 'rol':
                    if (textoSelect != '') {
                        document.getElementById("frmFiltros").submit();
                    }
                    break;
                case 'comisiones':
                    if (textoSelect != '') {
                        document.getElementById("frmFiltros").submit();
                    }
                    break;
                default:
                    document.getElementById("frmFiltros").submit();
                    break;
            }

        }

        function marcarTodos(o) {
            var boxes = document.getElementsByTagName("input");
            for (var x = 0; x < boxes.length; x++) {
                var obj = boxes[x];
                if (obj.type == "checkbox") {
                    if (obj.name != "check")
                        obj.checked = o.checked;
                }
            }
        }

        function enabled_routelog(id, username) {
        
            $("#btn-save-modal").html("Habilitar")
            $("#usuario-modal").val(username);
            
            $("#user_id").val(id);
            $("#expired_confirmation_date").val(now());
            $("#expired_confirmation_date").css('display', 'block');
            $("#label-date").css('display', 'block');

            $("#titulo-modal").html("Habilitar Modifciacion de Rutas");

            $('#modal-payment').modal('show');

        }

        function disabled_routelog(id, username) {

            $("#btn-save-modal").html("Deshabilitar")
            $("#usuario-modal").val(username);
            $("#user_id").val(id);
            $("#titulo-modal").html("Deshabilitar Modifciacion de Rutas");

            $("#expired_confirmation_date").val(now());
            $("#expired_confirmation_date").css('display', 'none');
            $("#label-date").css('display', 'none');

            $('#modal-payment').modal('show');
        }

        const save_changes = () => {

            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            let data = {
                user_id: $("#user_id").val(),
                expired_confirmation_date: $("#expired_confirmation_date").val(),
                action: $("#btn-save-modal").text() == 'Habilitar' ? 'enable' : 'disable'
            }

            fetch("{{ route('closing-collector.change-status') }}", {
                    method: "POST",
                    body: JSON.stringify(data),
                    headers: {
                        "Content-Type": "application/json",
                        'X-CSRF-Token': csrfToken,
                    },
                })
                .then(response => response.json())
                .then(data => {
                    $('#modal-payment').modal('hide');

                    if (data.success) {
                        window.location.reload()
                    }

                    console.log(data)

                })
                .catch(error => {
                    console.error('Error:', error);
                    alert(error)
                });
        }

        function now() {
            let hoy = new Date();
            hoy.setDate( hoy.getDate() + 1 );
            let dd = String(hoy.getDate()).padStart(2, '0'); // Día con dos dígitos
            let mm = String(hoy.getMonth() + 1).padStart(2,
                '0'); // Mes con dos dígitos y sumando 1 porque los meses en JavaScript empiezan desde 0
            let yyyy = hoy.getFullYear(); // Año completo
            let fechaHoy = yyyy + '-' + mm + '-' + dd; // Formateando la fecha en YYYY-MM-DD
            return fechaHoy;
        }

        $("#btn-save-modal").click(save_changes)
    </script>
@endsection