@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:64px;
            margin-left:2px;
        }

        .row{
            margin-bottom:25px;
        }
        .invalid-input{
            border-color: #fa5c7c !important;
        }
        .invalid-tab{
            color:red !important;
        }
        .bootstrap-timepicker-widget{
            position: static !important;
        }
        .form-container{
            margin-top:15px !important;
        }
        .credencial_porprobar{
            color:#F39C12;
        }
        .credencial_valida{
            color:#008800;
        }
        .credencial_novalida{
            color:#F00;
        }
    </style>
@endsection
@section('php')
    @php
        session()->forget('reporte801'); // Borrar sesión
        $cliente = config('app.CLIENTE');

        // Cualquier expresión nueva debe crear en Recurrente.php en la variable $arr_frecuencias
        $frecuencias = [
            __('messages.temporalidad-mensual') => [
                'm14' => __('messages.14-cada-mes'),
                'm15' => __('messages.15-cada-mes'),
                'm16' => __('messages.16-cada-mes'),
            ],
            /*__('messages.temporalidad-semanal') => [
                's1' => __('messages.dia-lunes'),
                's2' => __('messages.dia-martes'),
                's3' => __('messages.dia-miércoles'),
                's4' => __('messages.dia-jueves'),
                's5' => __('messages.dia-viernes'),
                //'s6' => __('messages.dia-sábado'),
                //'s0' => __('messages.dia-domingo'),
            ],*/
            /*__('messages.temporalidad-anual') => [
                'a2' => __('messages.2-enero'),
            ],*/
            __('messages.otros') => [
                'na' => __('messages.no-notificar')
                //.' ('.__('messages.no-recomendado').')'
            ]
        ];

        /* 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',
        ];

        $credenciales_act = [
            '' => __('messages.todos'),
            '1' => __('messages.con-cambios'),
            '0' => __('messages.sin-cambios'),
        ];
        $credenciales_act = json_encode($credenciales_act);
        
        $_k = hash('sha512', date('Ymd').auth()->user()->id);

        $utc_time = 'UTC-3';
        if(date('I') == 0){
            $utc_time = 'UTC-4';
        }

        $true = true;
    @endphp
@endsection
@section('tabla')
<script>var _k = "{{$_k}}";</script>
<div class="row bg-white" style="border-radius: 0px 0px 5px 5px !important; margin-left: 10px;height: 900px !important;">
    <x-tabla id="cred" :favoritosDisabled="$true">
        <x-filtro id="f_holding_cred" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;">
            <x-slot name="texto">
                {{__('messages.var-holding')}}
            </x-slot>
        </x-filtro>

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

        <x-infobox tamano="25px" texto="" modal="info_modal"/>
        <div class="modal fade bd-example-modal-xl" id="info_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="">Actualización de Credenciales</h5>
                    </div>
                    <div class="modal-body">
                        Seleccione el holding cuya credencial o recordatorio desee modificar. Para ello, haga clic en el ícono de edición situado a la izquierda del registro.
                        <br>
                        <div class="text-center">
                            <img src="{{asset('images/credencialesb2b_editar_icono.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <br>
                        Se abrirá un modal donde podrá gestionar las credenciales y su respectivo recordatorio. Es importante destacar que cada modificación a las credenciales requiere su <b>confirmación</b> para validar las nuevas credenciales.
                        <br>
                        <div class="text-center">
                            <img src="{{asset('images/credencialesb2b_modal_edicion.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <br>
                        El estado de las credenciales puede presentar tres posibles valores:

                        <ul>
                            <li><b>Válida:</b> El equipo de Bambu-B2B ha validado el correcto funcionamiento de las credenciales.</li>
                            <li><b>Por probar:</b> Ha realizado una modificación en la credencial y el equipo de Bambu-B2B debe validar el funcionamiento del usuario y la contraseña.</li>
                            <li><b>No válida:</b> El equipo de Bambu-B2B ha indicado que la credencial no ha funcionado para acceder al portal B2B.</li>
                        </ul>

                        No se preocupe, las contraseñas son recibidas y almacenadas en nuestro sistema de manera segura. Solo el personal autorizado de Bambu-B2B tiene acceso a sus credenciales.
                    </div>
                </div>
            </div>
        </div>


        <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="#logs">
                <i class="fas fa-clipboard-list"></i></i> Logs
            </button>
        </div>

        <!-- Modal Logs -->
        <div class="modal fade" id="logs" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true" style="background-color:transparent">
            <div class="modal-dialog modal-lg">
                <div id="logsmodal_cont" class="modal-content" style="min-width:100%">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalLabel">Logs Cambios</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <x-tabla id="logs" :favoritosDisabled="$true">
                            <x-selector-generico id="f_log_cred2" idselect="f_log_cred" :salida="$credenciales_act" style="max-width: 120px;min-width: 120px;width: 120px;" class="">
                                <x-slot name="texto">
                                    {{__('messages.credenciales')}}
                                </x-slot>
                            </x-selector-generico>
                            <x-boton-actualizar onclick="getLogsCred('{{$cliente}}')"/>
                        </x-tabla>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Modal Credenciales -->
        <div class="modal fade" id="editCredenciales" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true" style="background-color:transparent">
            <div class="w-100 justify-content-center" id="f_carga_editCredenciales" 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="editCredenciales_cont" class="modal-content" style="min-width:100%">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel">Gestión de Credenciales B2B</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="credenciales-tab" href="#credenciales-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">Credenciales</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a id="recortario-tab" href="#recortario-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">Recordatorio</span>
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="credenciales-b1">
                            <div class="row">
                                <input type="hidden" id="f_id">

                                <div class="col col-sm-12 col-md-12 form-container">
                                    <div class="form-group">
                                        <label for="f_holding">Holding</label>
                                        <input type="text" class="form-control" id="f_holding" placeholder="Holding" disabled>
                                        <div class="invalid-feedback" id="f_holding_invalid">
                                            Por favor ingrese un Holding.
                                        </div>
                                    </div>
                                </div>

                                <div class="col col-sm-12 col-md-12 form-container">
                                    <div class="form-group">
                                        <label for="f_rut">RUT</label>
                                        <input type="number" class="form-control" id="f_rut" placeholder="RUT (Sin puntos ni dígito verificador)">
                                        <div class="invalid-feedback" id="f_rut_invalid">
                                            Por favor ingrese un RUT válido.
                                        </div>
                                    </div>
                                </div>

                                <div class="col col-sm-12 col-md-12 form-container">
                                    <div class="form-group">
                                        <label for="f_token">Token</label>
                                        <input class="form-control" type="text" id="f_token" placeholder="Token o parámetro extra" name="f_token">
                                        <div class="invalid-feedback" id="f_token_invalid">
                                            Ingrese un Token válido.
                                        </div>
                                    </div>
                                </div>

                                <form>
                                    <div class="col col-sm-12 col-md-12 form-container">
                                        <div class="form-group">
                                            <label for="f_usuario">Nombre de Usuario</label>
                                            <input class="form-control" type="text" id="f_usuario" required="" placeholder="{{__('messages.login-user')}}*" name="f_usuario">
                                            <div class="invalid-feedback" id="f_usuario_invalid">
                                                {{__('messages.insert-username')}}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col col-sm-12 col-md-12 form-container">
                                        <div class="form-group">
                                            <label for="f_password">Nueva Contraseña</label>
                                            <div class="input-group input-group-merge">
                                                <input type="password" id="f_password" class="form-control" placeholder="{{__('messages.nueva')}} {{__('messages.login-password')}}" name="f_password" autocomplete="off">
                                                <div class="input-group-text" data-password="false">
                                                    <span class="password-eye"></span>
                                                </div>
                                            </div>
                                            <div class="invalid-feedback" id="f_password_invalid">
                                                {{__('messages.insert-password')}}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col col-sm-12 col-md-12 form-container">
                                        <div class="form-group">
                                            <label for="f_password2">Repetir Nueva Contraseña</label>
                                            <div class="input-group input-group-merge">
                                                <input type="password" id="f_password2" class="form-control" placeholder="{{__('messages.login-repetir')}} {{__('messages.nueva')}} {{__('messages.login-password')}}" name="f_password2" autocomplete="off">
                                                <div class="input-group-text" data-password="false">
                                                    <span class="password-eye"></span>
                                                </div>
                                            </div>
                                            <div class="invalid-feedback" id="f_password2_invalid">
                                                {{__('messages.password-not-match')}}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-container">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="f_confirm" name="f_confirm" checked="false">
                                            <label class="form-check-label" for="f_confirm">He comprobado que las nuevas credenciales son correctas y las he probado con éxito</label>
                                            <div class="invalid-feedback" id="f_confirm_invalid">
                                                Debe confirmar funcionamiento
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div class="tab-pane show" id="recortario-b1">
                            <div class="row">
                                <div class="col col-md-8">
                                    <select id="f_frecuencia" class="form-select form-select-md frecuencias" aria-label=".form-select-sm example">
                                        @foreach($frecuencias as $grupo_frecuencia => $frecuencia)
                                            @if(is_array($frecuencia))
                                                <optgroup label="{{$grupo_frecuencia}}">
                                                    @foreach($frecuencia as $key => $value)
                                                        <option value="{{$key}}" label="{{$value}}">{{$value}}</option>
                                                    @endforeach
                                                </optgroup>
                                            @else
                                                <option value="{{$grupo_frecuencia}}" label="{{$frecuencia}}">{{$frecuencia}}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                                <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>
                            <div class="row">
                                <div class="col col-sm-12 col-md-12 form-container">
                                    <div class="form-group">
                                        <label for="f_email">Correo Electrónico</label>
                                        <div data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="A través de un correo se le recomendará actualizar sus credenciales." title="Correo a notificar">
                                            <input class="form-control" type="email" id="f_email" placeholder="Ingrese su correo electrónico" name="f_email">
                                        </div>
                                        <div class="invalid-feedback" id="f_email_invalid">
                                            {{__('messages.insert-email')}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{__('messages.cerrar')}}</button>
                    <button type="button" id="saveCred" class="btn btn-success" onClick="editCred('{{$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 src="{{asset('js/crypto-js.min.js')}}"></script>

    <script>
        let ids = ['cred'];
        function setModalParams(element){
            // Quitar en rojo
            markAsValidInput('f_email');
            markAsValidInput('f_usuario');
            markAsValidInput('f_password');
            markAsValidInput('f_password2');

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

            document.getElementById('recortario-b1').classList.remove('active');
            document.getElementById('recortario-tab').classList.remove('active');

            document.getElementById("credenciales-tab").classList.remove("invalid-tab");
            document.getElementById("recortario-tab").classList.remove("invalid-tab");

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

            // Holding
            var holding = element.getAttribute('data-bs-holding');
            document.getElementById('f_holding').value = holding;
            
            // Rut
            var rut = element.getAttribute('data-bs-rut');
            document.getElementById('f_rut').value = rut;

            // Usuario
            var usuario = element.getAttribute('data-bs-usuario');
            document.getElementById('f_usuario').value = usuario;

            // Token
            var token = element.getAttribute('data-bs-token');
            document.getElementById('f_token').value = token;

            // Contraseñas - Limpiar
            document.getElementById('f_password').value = '';
            document.getElementById('f_password2').value = '';

            // Uncheck Confirmación
            document.getElementById("f_confirm").checked = false;

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

            // Hora
            var hora = element.getAttribute('data-bs-hora');
            var minuto;
            if(hora==""){
                today = new Date();
                minuto = today.getMinutes().toString();
                hora = today.getHours().toString();
            }else{
                [hora, minuto] = hora.split(':');
            }

            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;
                }
            }

            // Correo
            var correo = element.getAttribute('data-bs-correo');
            document.getElementById('f_email').value = correo;
        }
        $(document).ready(() => {
            let filtros = ['holding'];
            for(let filtro of filtros) {
                for(let id of ids) {
                    multiSelect(filtro, id, "{{__('messages.seleccionar')}}");
                }
            }
            multiSelect('f_frecuencia', undefined, "{{__('messages.seleccionar')}}");
        });

        function openModal(modal){
            $("#"+modal).modal("show");
        }
    </script>
@endsection