@extends('masushuaia.plantilla')
@section('titulo', 'Beneficiarios')
@section('scripts')
        <link href="{{ asset('css/datatables.min.css') }}" rel="stylesheet">
    <script src="{{ asset('js/datatables.min.js') }}"></script>
@endsection
@section('breadcrumb')
    <div class="text-right inline pr-0">
        <a class="btn btn-blue py-1 px-4" href="/beneficiario/nuevo">Nuevo beneficiario</a>

        @if (Patente::autorizarOperacion('EXPORTARBENEFICIARIOS'))
            <a id="btn-exportar-excel" class="btn btn-blue py-1 px-4" href="#" onclick="javascript: $('#mdlExportar').modal('toggle');">
                <div id="spinner-export-excel" class="spinner-border" role="status" style="width: 1rem;height: 1rem;">
                    <span class="sr-only">Cargando...</span>
                </div>
                Exportar Excel
            </a>
        @endif

        @if (Patente::autorizarOperacion('MASUSHUAIAADICIONALES'))
            <a class="btn btn-blue py-1 px-4" href="#"
                onclick="javascript: $('#mdlExportarImprenta').modal('toggle');">Exportar
                para imprenta</a>
            <a class="btn btn-blue py-1 px-4" href="#" onclick="javascript: $('#mdlImportar').modal('toggle');"
                style="white-space: nowrap;">Importar Pre-aprobados</a>
        @endif
        @if (Patente::autorizarOperacion('CAMPANIACONSULTA'))
            <a class="btn btn-blue py-1 px-4" href="/beneficiario/campañas">Campañas</a>
        @endif
        <a class="btn btn-blue py-1 px-4" href="/notificaciones?tipo=beneficiario">Notificaciones</a>
        <a class="btn btn-blue py-1 px-4" href="/beneficiarios">Recargar</a>
    </div>
@endsection
@section('breadcrumb-list')
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">Inicio</a></li>
        <li class="breadcrumb-item active">Beneficiarios</li>
    </ol>
@endsection
@section('contenido')
    {{-- <div class="row mb-3">
        <div class="col-12 @if (!Patente::autorizarOperacion('TURISTACONSULTA')){{ 'col-sm-6' }}@else{{ 'col-sm-4' }}@endif text-center">
            <div class="card-estadisticas reporte1 p-4">
                <h2 id="cantidadBeneficiariosInscriptos">
                    {{ isset($cantidad_beneficiarios_inscriptos) ? $cantidad_beneficiarios_inscriptos : '' }}</h2>
                <span>Total inscriptos</span>
            </div>
        </div>
        @if (Patente::autorizarOperacion('TURISTACONSULTA'))
            <div class="col-12 col-sm-4 text-center">
                <div class="card-estadisticas reporte1 p-4">
                    <h2 id="cantidadBeneficiariosInscriptos">
                        {{ isset($cantidadBeneficiariosInscriptos) ? $cantidadBeneficiariosInscriptos : 0 }}</h2>
                    <span>Total turistas</span>
                </div>
            </div>
        @endif
        <div class="col-12 @if (!Patente::autorizarOperacion('TURISTACONSULTA')){{ 'col-sm-6' }}@else{{ 'col-sm-4' }}@endif text-center">
            <div class="card-estadisticas reporte2 p-4">
                <h2 id="cantidadBeneficiariosActivos">
                    {{ isset($cantidad_beneficiarios_activos) ? $cantidad_beneficiarios_activos : '' }}</h2>
                <span>Total activos</span>
            </div>
        </div>
    </div> --}}
    <div class="col-12">
        <div id="msg">
            @if (isset($msg))
                <script>
                    msgShow('{{ $msg['MSG'] }}', '{{ $msg['ESTADO'] }}')
                </script>
            @endif
        </div>
    </div>
    <h3>Filtros avanzados</h3>
    <div class="row mb-3">
        <div class="col-md form-group">
            <label for="txtDni">DNI:</label>
            <input type="text" id="txtDni" class="form-control">
        </div>
        <div class="col-md form-group">
            <label for="txtNombre">Nombre:</label>
            <input type="text" id="txtNombre" class="form-control">
        </div>
        <div class="col-md form-group">
            <label for="txtApellido">Apellido:</label>
            <input type="text" id="txtApellido" class="form-control">
        </div>
        <div class="col-md form-group">
            <label for="txtCorreo">Correo electrónico:</label>
            <input type="email" id="txtCorreo" class="form-control">
        </div>
    </div>

    <div class="row my-2 my-sm-3">
        @if (isset($aLocalidades))
            <div class="col-6 col-sm-3 form-group">
                <label for="lstLocalidades">Localidad</label>
                <select name="lstLocalidades" id="lstLocalidades" class="form-control selectpicker" data-live-search="true"
                    onchange="setFiltro();">
                    @if (isset($localidad->idlocalidad))
                        <option value="all">Todos</option>
                        @foreach ($aLocalidades as $loc)
                            @if ($localidad->idlocalidad != $loc->idlocalidad)
                                <option value="{{ $loc->idlocalidad }}">{{ $loc->nombre }}</option>
                            @else
                                <option value="{{ $loc->idlocalidad }}" selected>{{ $loc->nombre }}</option>
                            @endif
                        @endforeach
                    @else
                        <option value="all" selected>Todos</option>
                        @foreach ($aLocalidades as $loc)
                            <option value="{{ $loc->idlocalidad }}">{{ $loc->nombre }}</option>
                        @endforeach
                    @endif
                </select>
            </div>
        @endif
        @if (isset($aCampanias))
            <div class="col-6 col-sm-3 form-group">
                <label for="lstCampanias">Campaña</label>
                <select name="lstCampanias" id="lstCampanias" class="form-control selectpicker" data-live-search="true"
                    onchange="setFiltro();">
                    @if (isset($campania->idCampania))
                        <option value="all">Todos</option>
                        @foreach ($aCampanias as $camp)
                            @if ($campania->idCampania != $camp->idcampania)
                                <option value="{{ $camp->idcampania }}">{{ $camp->nombre }}</option>
                            @else
                                <option value="{{ $camp->idcampania }}" selected>{{ $camp->nombre }}</option>
                            @endif
                        @endforeach
                    @else
                        <option value="all" selected>Todos</option>
                        @foreach ($aCampanias as $camp)
                            <option value="{{ $camp->idcampania }}">{{ $camp->nombre }}</option>
                        @endforeach
                    @endif
                </select>
            </div>
        @endif
        <div class="col-auto pl-0 form-group align-self-end">
                       <!--  <a id="btnFiltro" href="{{ $link }}" class="btn btn-blue py-1 px-4">Filtrar</a> -->

        </div>
        <div class="col-auto align-self-end mb-md-2">
            <button type="button" class="btn btn-blue text-uppercase" onclick="cargarGrilla();">Buscar</button>
        </div>
    </div>

    <table id="grilla" class="display">
        <thead>
            <tr>
                <th></th>
                <th>Nombre y apellido</th>
                <th>Documento</th>
                <th>Correo</th>
                <th>Acci&oacute;n</th>
            </tr>
        </thead>
    </table>

    <div class="modal fade" id="mdlImportar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Importar</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formImportar" action="/beneficiario/importarBeneficiarios" enctype="multipart/form-data"
                        method="POST">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <div class="row">
                            <div class="col-12 form-group">
                                <label for="txtArchivo">Campaña:</label>
                                <select class="form-control" name="lstCampania">
                                    <option selected value="">Seleccionar</option>
                                    @foreach ($aCampanias as $campania)
                                        <option value="{{ $campania->idcampania }}">{{ $campania->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12 form-group">
                                <label for="txtArchivo">Importar archivo:</label>
                                <input type="file" id="excelBeneficiarios" name="excelBeneficiarios" class="form-control">
                            </div>
                            <div class="col-12 form-group">
                                <label for="lstLocalidad">Localidades: *</label>
                                <select class="form-control" name="lstLocalidad" id="lstLocalidad">
                                    <option selected value="">Seleccionar</option>
                                    @foreach ($aLocalidades as $localidad)
                                        <option value="{{ $localidad->idlocalidad }}">{{ $localidad->nombre }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12 form-group">
                                <label for="txtDescargarFormato" class="d-block">Descargar formato:</label>
                                <a href="/files/formato-excel-beneficiarios.xlsx" download class="btn btn-primary">
                                    <i class="fas fa-download"></i> Descargar
                                </a>
                            </div>
                            <div class="col-12 form-group">
                                <p class="mt-2 mb-0"><strong>NOTA:</strong> Las columnas cuyo encabezado es de color
                                    <span class="font-weight-bold">amarillo</span> son obligatorias, en cambio las de color
                                    <span class="font-weight-bold">naranja</span> son opcionales. El único formato de
                                    archivo excel que se deberá importar será el que se descarga haciendo clic en el botón
                                    "Descargar".<br>Adicionalmente, se deberá prestar atención al formato de las columnas en
                                    si.
                                </p>
                                <p class="mt-2 mb-0"><strong>ACLARACIÓN:</strong> Ingresar <span
                                        class="font-weight-bold">M</span> para el sexo masculino y <span
                                        class="font-weight-bold">F</span> para el sexo femenino.</p>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <button tyle="button" class="btn btn-primary" onclick="$('#formImportar').submit();">Cargar</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="mdlExportarImprenta" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Exportar</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formExportarImprenta" action="/beneficiario/exportar" method="POST">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <div class="row">
                            <div class="col-12 form-group">
                                <label for="txtArchivo" class="d-block">Documentos de los beneficiarios:</label>
                                <p>Los documentos de los beneficiarios tienen que estar separados uno del otro mediante un
                                    ENTER.</p>
                                <textarea class="form-control" name="txtDocumentos"
                                    style="height: calc(2rem + 130px) !important;"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <button tyle="button" class="btn btn-primary"
                        onclick="$('#formExportarImprenta').submit();">Exportar</button>
                </div>
            </div>
        </div>
    </div>
    



    <div class="modal fade" id="mdlExportar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Exportar</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                </div>
                <div class="modal-body">
                <p>Selecciona los campos a exportar:</p>
                    <form id="formExportar" action="/beneficiario/importarBeneficiarios" enctype="multipart/form-data"
                        method="POST">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <div class="row">
                            <div class="col-1"></div>
                            <div class="col-11 form-group p-0">
                                <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="customSwitch1" name="cknombre" checked>
                                 <label class="custom-control-label" for="customSwitch1">Nombre</label>
                                </div>
                                <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="customSwitch2" name="ckapellido" checked>
                                 <label class="custom-control-label" for="customSwitch2" >Apellido</label>
                                </div>
                                <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="customSwitch3" name="ckdocumento" checked>
                                 <label class="custom-control-label" for="customSwitch3" >Documento</label>
                                </div>
                                <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="customSwitch9" name="ckdomicilio" checked>
                                 <label class="custom-control-label" for="customSwitch9" >Domicilio</label>
                                </div>
                                <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="customSwitch4" name="ckgenero" checked>
                                 <label class="custom-control-label" for="customSwitch4" >Género</label>
                                </div>
                                <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="customSwitch5" name="cktelefono" checked>
                                 <label class="custom-control-label" for="customSwitch5" >Teléfono</label>
                                </div>
                                <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="customSwitch6" name="ckemail" checked>
                                 <label class="custom-control-label" for="customSwitch6" >Email</label>
                                </div>
                                <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="customSwitch7" name="ckcampania" checked>
                                 <label class="custom-control-label" for="customSwitch7" >Campaña</label>
                                </div>
                                <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="customSwitch8" name="cklocalidad" checked>
                                 <label class="custom-control-label" for="customSwitch8" >Localidad</label>
                                </div>


                            @if (isset($aLocalidades))
                                <div class="col-6 col-sm-3 form-group">
                                    <label for="ckLocalidadSwitch">Localidad</label>
                                    <select name="ckLocalidadSwitch" id="ckLocalidadSwitch" class="form-control selectpicker" data-live-search="true"
                                        onchange="setFiltro();">
                                        @if (isset($localidad->idlocalidad))
                                            <option value="all">Todos</option>
                                            @foreach ($aLocalidades as $loc)
                                                @if ($localidad->idlocalidad != $loc->idlocalidad)
                                                    <option value="{{ $loc->idlocalidad }}">{{ $loc->nombre }}</option>
                                                @else
                                                    <option value="{{ $loc->idlocalidad }}" selected>{{ $loc->nombre }}</option>
                                                @endif
                                            @endforeach
                                        @else
                                            <option value="all" selected>Todos</option>
                                            @foreach ($aLocalidades as $loc)
                                                <option value="{{ $loc->idlocalidad }}">{{ $loc->nombre }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            @endif
                            @if (isset($aCampanias))
                                <div class="col-6 col-sm-3 form-group">
                                    <label for="ckCampaniaSwitch">Campaña</label>
                                    <select name="ckCampaniaSwitch" id="ckCampaniaSwitch" class="form-control selectpicker" data-live-search="true"
                                        onchange="setFiltro();">
                                        @if (isset($campania->idCampania))
                                            <option value="all">Todos</option>
                                            @foreach ($aCampanias as $camp)
                                                @if ($campania->idCampania != $camp->idcampania)
                                                    <option value="{{ $camp->idcampania }}">{{ $camp->nombre }}</option>
                                                @else
                                                    <option value="{{ $camp->idcampania }}" selected>{{ $camp->nombre }}</option>
                                                @endif
                                            @endforeach
                                        @else
                                            <option value="all" selected>Todos</option>
                                            @foreach ($aCampanias as $camp)
                                                <option value="{{ $camp->idcampania }}">{{ $camp->nombre }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            @endif
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <button tyle="button" class="btn btn-primary" data-dismiss="modal" onclick="exportarExcel();">Exportar</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        window.onload = function() {
            $('#spinner-export-excel').hide();
        }

        var idLocalidad = "all";
        var idCampania = "all";

        function exportarExcel() {

            //checkboxs marcados.
            const form = document.querySelector('#formExportar');
            const checkboxes = form.querySelectorAll('input[type="checkbox"]:checked');
            const valuescb = Array.from(checkboxes).map(cb => cb.name);
            const selects = form.querySelectorAll('select');
            
            const selectedValues = Array.from(selects).map(sl => sl.value);
            // selects.forEach((select) => {
            // selectedValues[select.name] = select.value;
            // });
            console.log(selectedValues);
            msgShow('Recibiras un correo con el archivo Excel generado.', 'success');
            $('#spinner-export-excel').show();
            document.getElementById('btn-exportar-excel').classList.add('disabled');
            let ruta = '/beneficiario/exportarBeneficiarios'
            @if (Request::input('localidad') != null)
                + '?{{ 'idLocalidad=' . Request::input('localidad') }}'
            @endif
            @if (Request::input('campania') != null)
                @if (Request::input('localidad') != null)
                    + '&{{ 'idCampania=' . Request::input('campania') }}'
                @else
                    + '?{{ 'idCampania=' . Request::input('campania') }}'
                @endif
            @endif
            ;
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: ruta,
                data:{
                    cb: valuescb,
                    sl: selectedValues
                },
                async: true,
                success: function({
                    code,
                    msg
                }) {
                    if (code != 200) {
                        alert(code);
                    }
                    $('#spinner-export-excel').hide();
                    document.getElementById('btn-exportar-excel').classList.remove('disabled');
                },
                error: function(props) {
                    console.log(props);
                    $('#spinner-export-excel').hide();
                    document.getElementById('btn-exportar-excel').classList.remove('disabled');
                }
            });
        }

        function setFiltro() {
            let filtro = document.getElementById('btnFiltro');
            if (!($('#lstLocalidades option:selected').val() == 'all')) {
                if (!($('#lstCampanias option:selected').val() == 'all')) {
                    filtro.href =
                        `/beneficiarios?localidad=${$('#lstLocalidades option:selected').val()}&campania=${$('#lstCampanias option:selected').val()}`;
                    idLocalidad = $('#lstLocalidades option:selected').val();
                    idCampania = $('#lstCampanias option:selected').val();
                } else {
                    filtro.href = `/beneficiarios?localidad=${$('#lstLocalidades option:selected').val()}`;
                    idLocalidad = $('#lstLocalidades option:selected').val();
                }
            } else {
                if (!($('#lstCampanias option:selected').val() == 'all')) {
                    filtro.href = `/beneficiarios?campania=${$('#lstCampanias option:selected').val()}`;
                    idCampania = $('#lstCampanias option:selected').val();
                } else {
                    filtro.href = '/beneficiarios';
                }
            }
        }

        function cargarGrilla() {
            dataTable.destroy();

            dataTable = $('#grilla').DataTable({
                    "processing": true,
                    "serverSide": true,
                    "bFilter": true,
                    "bInfo": true,
                    "bSearchable": true,
                    "pageLength": 25,
                    "order": [
                        [0, "asc"]
                    ],
                    "ajax": `{{ route('legajoBeneficiario.cargarGrilla') }}?localidad=${$('#lstLocalidades').val()}&campania=${$('#lstCampanias').val()}&dni=${$('#txtDni').val()}&nombre=${$('#txtNombre').val()}&apellido=${$('#txtApellido').val()}&correo=${$('#txtCorreo').val()}`
                });
            }
            var dataTable = $('#grilla').DataTable();
        // var dataTable = $('#grilla').DataTable({
        //     "processing": true,
        //     "serverSide": true,
        //     "bFilter": true,
        //     "bInfo": true,
        //     "bSearchable": true,
        //     "pageLength": 25,
        //     "order": [
        //         [0, "asc"]
        //     ],
        //     "ajax": "{{ route('legajoBeneficiario.cargarGrilla') }}?localidad=" + idLocalidad + "&campania=" +
        //         idCampania
        // });

        function fAccion(idBeneficiario) {
            accion = $("#lstAccionBeneficiario_" + idBeneficiario + " option:selected").val();
            console.log(accion);
            
            $.ajax({
                type: "GET",
                url: "/beneficiario/accion",
                data: {
                    accion: accion,
                    idbeneficiario: idBeneficiario
                },
                async: true,
                dataType: "json",
                success: function(data) {
                    console.log(data);
                    if (data.accion == "generar_tarjeta") {
                        window.open("/beneficiarios/tarjeta/" + data.idbeneficiario);
                        $("#grilla").DataTable().ajax.reload();
                    } else if (data.accion == "descargar_tarjeta") {
                        window.open("/beneficiarios/tarjeta/" + data.idbeneficiario);
                        $("#grilla").DataTable().ajax.reload();
                    } else if (data.accion == "sin_tarjeta_generada") {
                        msgShow("No se genero tarjeta para este beneficiario", "danger");
                    } else if(data.MSG != ""){
                        msgShow(data.MSG, data.ESTADO);
                    }
                }
            });
        }
    </script>
@endsection