@extends('layouts.tabla')

@section('css_after')
<link rel="stylesheet" href="{{asset('css\vendor\dataTables.bootstrap5.css') }}">
<link rel="stylesheet" href="{{asset('css\vendor\buttons.bootstrap5.css') }}">

<link rel="stylesheet" href="{{asset('css/fixedColumns.bootstrap5.min.css')}}">
<link rel="stylesheet" href="{{asset('css/fixedHeader.bootstrap5.min.css')}}">
    <style>
        body[data-leftbar-compact-mode="condensed"]:not(.authentication-bg){
            min-height: 0 !important;
           
        }
        .max-width{
            max-width: 200px;
        }
        .w-90{
            width: 90% !important;
        } 
        .col.col-md-2{
            padding: 0px 35px 5px 0px;
        }
        .tooltiptext{
            display: none;
            position: absolute;
            width: 140px;
            margin-top: 12px;
            transform: translate(45px, 5px);
            color: white;
            background-color: black;
            border-radius: 20px;
            padding: 10px;
        }
        .fa-sort-up{
            display: none;
            position: absolute;
            margin-top: 12px;
            transform: translate(-23px, 0px);
            color: black;
        }
        .content-page{
            padding-left: 0px!important;
        }
        .container-fluid{
            padding-left: 0px!important;
        }
        .dataTables_scroll {
            clear: both;
        }

        .dataTables_scrollBody {
            *margin-top: -1px;
            -webkit-overflow-scrolling: touch;
        }

        .select2-container--open{
            z-index:10000
        }

        .checkDiaCorto{
            width:57px;
            margin-left:1px;
        }
        
        .row{
            margin-bottom:25px;
        }
        .invalid-input{
            border-color: #fa5c7c !important;
        }
        .invalid-tab{
            color:red !important;
        }
        .bootstrap-timepicker-widget{
            position: static !important;
        }
    </style>
@endsection
@section('php')
    @php
        $cliente = config('app.CLIENTE');
        $dias = ['0' => __('messages.dia-corto-domingo'), 
                 '1' => __('messages.dia-corto-lunes'),
                 '2' => __('messages.dia-corto-martes'),
                 '3' => __('messages.dia-corto-miércoles'),
                 '4' => __('messages.dia-corto-jueves'),
                 '5' => __('messages.dia-corto-viernes'),
                 '6' => __('messages.dia-corto-sábado')];
        $dias = json_encode($dias);

        $reportes = [];
        $metodos_por_vista = [];
        foreach($recurrentes as $recurrente){
            if(!key_exists($recurrente->codigo, $reportes)){
                switch($recurrente->codigo){
                    case 'descargas':
                        $reportes[$recurrente->codigo] = __('messages.descargas');
                        break;
                    default:
                        $reportes[$recurrente->codigo] = __('messages.reporte/'.$recurrente->codigo.'-titulo');
                }
            }
            $metodos_por_vista[$recurrente->codigo][$recurrente->metodo] = __('messages.'.$recurrente->alias);
        }
        /*$reportes = [
            'ventas' => __('messages.reporte/402-titulo'),
            'stock' => __('messages.reporte/403-titulo'),
            'precios' => __('messages.reporte/404-titulo'),
            //'metas' => __('messages.reporte/405-titulo'),
        ];*/
        $reportes_str = json_encode($reportes);
        
        /*$metodos_por_vista = [
            'ventas' => [
                'getEvo' => __('messages.evolucion'),
                'getComp' => __('messages.comparacion'),
            ],
            'stock' => [
                'getEvo' => __('messages.evolucion'),
                //'getAle' => __('messages.alertas'),
            ],
            'precios' => [
                'getEvo' => __('messages.evolucion'),
                'getComp' => __('messages.comparacion'),
            ],
            'metas' => [
                'getMetasMEC' => __('messages.subseccion-mec'),
            ],
        ];*/

        /*$met = [];
        foreach($metodos_por_vista as $key => $metodos){
            $met []= $key;
            $met_vsta[$key] = json_encode($metodos);
        }
        $met = json_encode($met);*/

        /* IMPORTANTE */
        // Si se añade un nuevo horario, este debe ser específicado en app/Console/Kernel.php
        $horas = [
            '7:00 AM' => '07:00',
            '8:00 AM' => '08:00',
            '9:00 AM' => '09:00',
            '10:00 AM' => '10:00',
            '11:00 AM' => '11:00',
            '12:00 PM' => '12:00',
            '1:00 PM' => '13:00',
            '2:00 PM' => '14:00',
            '3:00 PM' => '15:00',
            '4:00 PM' => '16:00',
            '5:00 PM' => '17:00',
            '6:00 PM' => '18:00',
            '7:00 PM' => '19:00',
            '8:00 PM' => '20:00',
            '9:00 PM' => '21:00',
            '10:00 PM' => '22:00',
        ];

        $tipos = [
            'xlsx' => 'Excel (.xlsx)',
            'csv;' => 'CSV',
            //'csv|' => 'CSV (|)',
        ];
        
        $display_metodos = '';
        $utc_time = 'UTC-3';
        if(date('I') == 0){
            $utc_time = 'UTC-4';
        }
    @endphp
@endsection
@section('tabla')

<div class="row bg-white" style="border-radius: 0px 0px 5px 5px !important; margin-left: 10px; height: 800px !important;">
    <x-tabla id="rec">
        <x-selector-generico id="f_reporte_rec2" idselect="f_reporte_rec" :salida="$reportes_str" class="" style="max-width: 120px;min-width: 120px;width: 120px;">
            <x-slot name="texto">
                {{__('messages.filtro-texto-reporte')}}
            </x-slot>
        </x-selector-generico>

        <x-boton-actualizar onclick="getRecurrentReport('{{$cliente}}')"/>

        <!-- Button trigger modal -->
        <div style="margin-top: 20px;" class="ms-auto col-md-auto obj_filtro form-group">
            <button type="button" class="align-middle lh-1 col-md-auto ms-auto btn btn-primary" data-bs-toggle="modal" data-bs-target="#crearReporteRecurrente"
                data-bs-id="0"
                data-bs-evento=""
                data-bs-estado="1"
                data-bs-reporte=""
                data-bs-metodo=""
                data-bs-tipo-archivo=""
                data-bs-minuto=""
                data-bs-hora=""
                data-bs-fecha="{{date('Y/m/d', strtotime('+1 days'))}}"
                data-bs-mensual="0"
                data-bs-dia-semana=""
                data-bs-save="0"
                onClick="setModalParams(this)"
            >
                <i class="fas fa-plus"></i> {{__('messages.añadir')}}
            </button>
        </div>
        
        <!-- Modal -->
        <div class="modal fade" id="crearReporteRecurrente" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true" style="background-color:transparent">
            <div class="w-100 justify-content-center" id="f_carga_crearReporteRecurrente" style="height: 400px; display: none;">
                <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
            </div>
            <div class="modal-dialog modal-md">
            <div id="crearReporteRecurrente_cont" class="modal-content" style="min-width:100%">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel">Reportería Recurrente</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul class="nav nav-tabs nav-bordered mb-3">
                        <li class="nav-item">
                            <a id="evento-tab" href="#evento-b1" data-bs-toggle="tab" aria-expanded="false" class="nav-link active">
                                <i class="mdi mdi-home-variant d-md-none d-block"></i>
                                <span class="d-none d-md-block">Evento</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a id="datos-tab" href="#datos-b1" data-bs-toggle="tab" aria-expanded="true" class="nav-link">
                                <i class="mdi mdi-account-circle d-md-none d-block"></i>
                                <span class="d-none d-md-block">Datos</span>
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="evento-b1">
                            <div class="row">
                                <input type="hidden" id="f_id">
                                <div class="col col-sm-9 col-md-9">
                                    <input type="text" class="form-control" id="f_evento" placeholder="Evento">
                                    <div class="invalid-feedback" id="f_evento_invalid">
                                        Por favor ingrese un nombre para el evento.
                                    </div>
                                </div>
                                <div class="col col-sm-3 col-md-3">
                                    <div class="btn-group" role="group">
                                        <input type="radio" class="btn-check" name="f_estado" id="estado_true" autocomplete="off" checked>
                                        <label class="btn btn-outline-success f_estado" for="estado_true">On</label>
                                    
                                        <input type="radio" class="btn-check" name="f_estado" id="estado_false" autocomplete="off">
                                        <label class="btn btn-outline-secondary f_estado" for="estado_false">Off</label>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col col-sm-4 col-md-4">
                                    <!--<input placeholder="Selected time" type="text" id="f_time" class="form-control timepicker" style="text-align:center">-->
                                    <!--<div class="input-group" id="timepicker-input-group3">
                                        <input id="timepicker3" type="text" class="form-control" data-provide='timepicker' data-minute-step="15" data-show-seconds="false" style="text-align:center">
                                        <span class="input-group-text"><i class="dripicons-clock"></i></span>
                                    </div>-->
                                    <div data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="{{date('e')}} ({{$utc_time}})" title="Franja Horaria">
                                        <select id="f_time" class="form-select form-select-md" aria-label=".form-select-sm example">
                                            @foreach($horas as $key => $value)
                                                <option value="{{$key}}" label="{{$value}}">{{$value}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="col col-sm-5 col-md-5">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="f_dia_recurrentes_ini" name="f_dia_recurrentes_ini" style="text-align:center">
                                        <span class="input-group-text"><i class="dripicons-calendar"></i></span>
                                    </div>
                                </div>

                                <div class="col col-sm-3 col-md-3">
                                    <div data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Si se seleccionan los días 29, 30 o 31 podría no recibir la reportería todos los meses." title="Advertencia">
                                        <input type="checkbox" class="btn-check" id="f_mensual" autocomplete="off">
                                        <label class="btn btn-outline-primary" for="f_mensual" style="margin-bottom:5px;">{{__('messages.temporalidad-mensual')}}</label>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col col-sm-12 col-md-12">
                                    <x-checkbox-generico id="checkDia" class="checkDiaCorto" :salida="$dias" style="text-align:center;">
                                    </x-checkbox-generico>
                                </div>
                            </div>
                            
                            <div class="row row mb-3">
                                <div class="col col-sm-12 col-md-12">
                                    <div data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Puede ingresar más de un correo electrónico separado por comas." title="Sugerencia">
                                        <input type="email" class="form-control" id="f_email" placeholder="Correos Electrónicos">
                                    </div>
                                    <div class="invalid-feedback" id="f_email_invalid">
                                        Por favor ingrese al menos un correo electrónico.
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane show" id="datos-b1">
                            <div class="row">
                                <div class="col col-md-6">
                                    <select id="f_reportes" class="form-select form-select-md" aria-label=".form-select-sm example">
                                        @foreach($reportes as $key => $value)
                                            <option value="{{$key}}" label="{{$value}}">{{$value}}</option>
                                        @endforeach
                                    </select>
                                </div>
        
                                <div class="col col-md-6">
                                    @foreach($metodos_por_vista as $reporte => $metodos)
                                        <select id="{{$reporte}}_metodos" class="form-select form-select-md metodos {{$reporte}}-metodos" aria-label=".form-select-sm example" style="{{$display_metodos}}">
                                            @foreach($metodos as $key => $value)
                                                <option value="{{$key}}" label="{{$value}}">{{$value}}</option>
                                            @endforeach
                                        </select>
                                        @php $display_metodos = 'display:none;'; @endphp
                                    @endforeach
                                </div>
                            </div>
                            <div class="row">
                                <div class="col col-md-6">
                                    <select id="f_tipo_archivo" class="form-select form-select-md" aria-label=".form-select-sm example">
                                        @foreach($tipos as $key => $value)
                                            <option value="{{$key}}" label={{$value}}>{{$value}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div  class="invalid-feedback" id="alertCrearReporteRecurrente"></div>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{__('messages.cerrar')}}</button>
                    <button type="button" id="deleteRecurrent" class="btn btn-danger d-none" onClick="deleteRecurrentReport('{{$cliente}}')">{{__('messages.eliminar')}}</button>
                    <button type="button" id="createRecurrent" class="btn btn-success" onClick="createOrUpdateRecurrentReport('{{$cliente}}')">{{__('messages.crear')}}</button>
                    <button type="button" id="saveRecurrent" class="btn btn-success d-none" onClick="createOrUpdateRecurrentReport('{{$cliente}}')">{{__('messages.guardar')}}</button>
                </div>
            </div>
            </div>
        </div>
    </x-tabla>
</div>
@endsection
@section('js_after')
    <script src="{{asset('config/datatables.locale.spanish.js')}}"></script>
    <script src="{{asset('config/modal.languege.js')}}"></script>
    <script src="{{asset("js/custom/utilidades.js")}}"></script>
    <script src="{{asset("js/custom/reporteriaGetter.js")}}"></script>
    <script src="{{ asset('js\app.js') }}"></script>

    <script>
        const yourDate = new Date();
    </script>
    <script src="{{asset('js\vendor\bootstrap-datepicker.min.js')}}"></script>
    <script src="{{asset('js\vendor\bootstrap-timepicker.min.js')}}"></script>
    <script src="{{ asset('js/vendor/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js\vendor\dataTables.bootstrap5.js') }}"></script>
    <script src="{{ asset('js\vendor\dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.print.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.html5.min.js') }}"></script>
    <script src="{{ asset('js\jszip.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.flash.min.js') }}"></script>
    <script src="{{asset('js/dataTables.fixedColumns.min.js')}}"></script>
    <script src="{{asset('js/dataTables.fixedHeader.min.js')}}"></script>

    <script>
        let ids = ['rec'];
        function setModalParams(element){
            // Quitar en rojo
            markAsValidInput('f_email');
            markAsValidInput('f_evento');

            // Mostrar tab de Evento por defecto.
            document.getElementById('evento-b1').classList.add('active');
            document.getElementById('evento-tab').classList.add('active');

            document.getElementById('datos-b1').classList.remove('active');
            document.getElementById('datos-tab').classList.remove('active');
            
            document.getElementById("evento-tab").classList.remove("invalid-tab");
            document.getElementById("datos-tab").classList.remove("invalid-tab");;

            // ID
            var id = element.getAttribute('data-bs-id');
            document.getElementById('f_id').value = id;

            // Nombre del Evento
            var evento = element.getAttribute('data-bs-evento');
            document.getElementById('f_evento').value = evento;
            
            // Estado
            var estado = element.getAttribute('data-bs-estado');
            if(estado==true){
                document.getElementById('estado_true').checked=true;
                document.getElementById('estado_false').checked=false;
            } else if(estado==false){
                document.getElementById('estado_true').checked=false;
                document.getElementById('estado_false').checked=true;
            }

            // Reporte
            var reporte = element.getAttribute('data-bs-reporte');
            var reportes = document.getElementById("f_reportes");
            if(reporte == ""){
                reportes.options[0].selected = true;
                reporte = reportes.options[0].value;
            }else{
                for (i = 0; i < reportes.length; ++i) {
                    if(reportes.options[i].value == reporte){
                        reportes.options[i].selected=true;
                        break;
                    }
                }
            }

            // Subsecciones
                // Ocultar todas excepto la asociada al Reporte
            var subsecciones = document.getElementsByClassName("metodos");
            if(reporte==""){
                for(var i = 0; i < subsecciones.length; ++i){
                    if(i == 0){
                        subsecciones[i].style.display = "";
                    }else{
                        subsecciones[i].style.display = "none";
                    }
                }
            }else{
                for(var i = 0; i < subsecciones.length; ++i){
                    if(subsecciones[i].id == reporte+'_metodos'){
                        subsecciones[i].style.display = "";
                    }else{
                        subsecciones[i].style.display = "none";
                    }
                }
            }

                // Selecciona el valor
            var metodo = element.getAttribute('data-bs-metodo');
            var metodos = document.getElementById(reporte+'_metodos');
            if(metodo == ""){
                metodos.options[0].selected = true;
            }else{
                for (i = 0; i < metodos.length; ++i) {
                    if(metodos.options[i].value == metodo){
                        metodos.options[i].selected=true;
                        break;
                    }
                }
            }

            // Tipo Archivo
            var tipo_archivo = element.getAttribute('data-bs-tipo-archivo');
            var tipo_archivos = document.getElementById("f_tipo_archivo");
            if(tipo_archivo == ""){
                tipo_archivos.options[0].selected = true;
            }else{
                for (i = 0; i < tipo_archivos.length; ++i) {
                    if(tipo_archivos.options[i].value == tipo_archivo){
                        tipo_archivos.options[i].selected=true;
                        break;
                    }
                }
            }

            // Días de la Semana
            var dias = element.getAttribute('data-bs-dia-semana').split(',')
            var disableCalender = false;
            for (var i = 0; i < 7; ++i){
                if(dias.includes(i.toString())){
                    document.getElementById('checkDia'+i).checked=true;
                    disableCalender = true;
                } else document.getElementById('checkDia'+i).checked=false;
            }

            // Hora
            var minuto = element.getAttribute('data-bs-minuto');
            var hora = element.getAttribute('data-bs-hora');
            if(hora=="" || minuto==""){
                today = new Date();
                minuto = today.getMinutes().toString();
                hora = today.getHours().toString();
            }
            if(parseInt(hora)<12){
                at = 'AM';
            }else{
                at = 'PM';
                if(parseInt(hora)>12){
                    hora = parseInt(hora)-12;
                }
            }

            minuto_aux = parseInt(minuto);
            // Para TimePicker
            /*if(minuto_aux > 0 && minuto_aux < 15) minuto_aux = 15;
            else if(minuto_aux > 15 && minuto_aux < 30) minuto_aux = 30;
            else if(minuto_aux > 30 && minuto_aux < 45) minuto_aux = 45;
            else if(minuto_aux > 45 && minuto_aux < 60) minuto_aux = 0;*/
            // Selector
            if(minuto_aux > 0) minuto_aux = 0;

            minuto = minuto_aux.toString();

            //if(hora.length<2) hora = "0"+hora;
            if(minuto.length<2) minuto = "0"+minuto;

            hora_aux = hora+":"+minuto+" "+at;
            //document.getElementById('timepicker3').value = hora_aux;
            horarios = document.getElementById("f_time");
            for (i = 0; i < horarios.length; ++i) {
                if(horarios.options[i].value == hora_aux){
                    horarios.options[i].selected=true;
                    break;
                }
            }

            // Fecha
            var fecha = element.getAttribute('data-bs-fecha');
            if(fecha!=null && fecha!='') document.getElementById('f_dia_recurrentes_ini').value = fecha;
            else document.getElementById('f_dia_recurrentes_ini').value = "{{date('Y/m/d', strtotime('+1 days'))}}";
            if(disableCalender){
                document.getElementById('f_dia_recurrentes_ini').disabled=true;
                document.getElementById('f_mensual').disabled=true;
            }else{
                document.getElementById('f_dia_recurrentes_ini').disabled=false;
                document.getElementById('f_mensual').disabled=false;
            }

            // Mensual
            var mensual = element.getAttribute('data-bs-mensual');
            if(mensual == true){
                document.getElementById('f_mensual').checked = true;
            }else{
                document.getElementById('f_mensual').checked = false;
            }

            // Destinatarios
            var destinatarios = element.getAttribute('data-bs-destinatarios');
            document.getElementById('f_email').value = destinatarios;

            // Botón Crear/Guardar
            if(element.getAttribute('data-bs-save')==true){
                document.getElementById('createRecurrent').classList.add('d-none');
                document.getElementById('saveRecurrent').classList.remove('d-none');
                document.getElementById('deleteRecurrent').classList.remove('d-none');
            }else{
                document.getElementById('createRecurrent').classList.remove('d-none');
                document.getElementById('saveRecurrent').classList.add('d-none');
                document.getElementById('deleteRecurrent').classList.add('d-none');
            }
        }
        $(document).ready(() => {
            let filtros = ['reporte'];
            for(let filtro of filtros) {
                for(let id of ids) {
                    multiSelect(filtro, id, "{{__('messages.seleccionar')}}");
                }
            }

            $('select[id^="f_reportes"]').change(function(){
                let rep = $(this).find('option:selected').val();
                $(".metodos").css("display","none");
                $("#"+rep+"_metodos").css("display","inline-block");
            });

            let ahora = new Date();
            let congifDate = {
                ...("{{config('app.locale')}}" == "es") && {
                    locale: {
                        format: 'YYYY/MM/DD',
                        daysOfWeek: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
                        monthNames: ["Enero", "Febrero", "Marzo", "Abril",
                                    "Mayo", "Junio", "Julio", "Agosto",
                                    "Septiembre", "Octubre", "Noviembre", "Diciembre"],
                        applyLabel: "Aplicar",
                        cancelLabel: "Cancelar",
                        firstDay: 1,
                    }
                },
                    minDate: moment(ahora),
                    startDate: moment((new Date()).setDate(ahora.getDate()+1)),
                    showDropdowns: true,
                    singleDatePicker: true,
            };

            $('.btn-check').on('change', function(){
                for (var i = 0; i < 7; ++i){
                    var checkActivo = false;
                    if($('#checkDia'+i).is(':checked')){
                        checkActivo = true;
                        break;
                    }
                }
                if(checkActivo){
                    $('#f_dia_recurrentes_ini').prop('disabled', true);
                    document.getElementById('f_mensual').disabled=true;
                }else{
                    $('#f_dia_recurrentes_ini').prop('disabled', false);
                    document.getElementById('f_mensual').disabled=false;
                }
            });

            [ "#f_dia_recurrentes_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
        });
    </script>
@endsection