@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>
    .form-container{
        margin-top:15px !important;
    }
</style>
@endsection

@section('php')
    @php
        $cliente=config('app.CLIENTE');

        $color_pass_updated_at = '#000';
        $cambiarClave = 0;
        $fecha_last = new DateTime(auth()->user()->pass_updated_at);
        $current_fecha = new DateTime();
        $dias_sin_cambiar = $current_fecha->diff($fecha_last)->days;
        if($dias_sin_cambiar >= $n_dias_tolerancia){
            $color_pass_updated_at = '#f00';
            $cambiarClave = 1;
        }

        $_k = hash('sha512', date('Ymd').auth()->user()->id);

        $true = true;
    @endphp
@endsection

@section('tabla')
<script>var _k = "{{$_k}}";</script>
    <x-tabla id="cred" :favoritosDisabled="$true">
        @if($cambiarClave)
            <div class="row">
                <div>
                    <p>Su clave fue cambiada por última vez el {{$fecha_last->format('Y-m-d')}} <span style="color:{{$color_pass_updated_at}}">(hace {{$dias_sin_cambiar}} días)</span></p>
                </div>
            </div>
        @endif

        <div class="row">
            <div class="col col-sm-4 col-md-4 form-container">
                <div class="form-group">
                    <label for="f_nombre">Nombre</label>
                    <div data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="El nombre es relevante para la asignación de locales en la plataforma móvil. Por favor, asegúrese que esté bien escrito." title="Información">
                        <input type="text" class="form-control" id="f_nombre" placeholder="Ingrese su nombre" value="{{auth()->user()->nombre}}">
                    </div>
                    <div class="invalid-feedback" id="f_nombre_invalid">
                        Por favor ingrese su nombre.
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col col-sm-4 col-md-4 form-container">
                <div class="form-group">
                    <label for="f_email">Correo Electrónico</label>
                    <input class="form-control" type="email" id="f_email" placeholder="Ingrese su correo electrónico" name="f_email" value="{{auth()->user()->email}}">
                    <div class="invalid-feedback" id="f_email_invalid">
                        {{__('messages.insert-email')}}
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col col-sm-4 col-md-4 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>

        <div class="row">
            <div class="col col-sm-4 col-md-4 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>

        <div class="row">
            <div class="col col-sm-3 col-md-3 form-container">
                <button type="button" id="saveUser" class="btn btn-success" onClick="editUser('{{$cliente}}')">{{__('messages.guardar')}}</button>
            </div>
        </div>
    </x-tabla>
@endsection
@section('after_wrapper')

<!-- /End-bar -->
@endsection
@section('js_after')
    <!-- END Hero -->
    <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\vendor\bootstrap-datepicker.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('fusioncharts\v3.15.1\js\fusioncharts.js')}}"></script>
    <script src="{{asset('fusioncharts\v3.15.1\js\fusioncharts.powercharts.js')}}"></script>
    <script src="{{asset('fusioncharts\v3.15.1\js\themes\fusioncharts.theme.fusion.js')}}"></script>
    <script src="{{asset('js/crypto-js.min.js')}}"></script>
    <script>
        function editUser(cliente){
            flag = true;

            var password = document.getElementById('f_password').value;
            var password2 = document.getElementById('f_password2').value;

            if({{$cambiarClave}} == 1 && (password == undefined || password == '' || password == null)){
                flag = false;
                markAsInvalidInput('f_password');
                markAsValidInput('f_password2');
            }else{
                markAsValidInput('f_password');
                if(password != password2){
                    flag = false;
                    markAsInvalidInput('f_password2');
                }else{
                    markAsValidInput('f_password2');
                }
            }

            if(flag){
                items = {};
                ['nombre', 'email'].forEach(function(item){
                    items[item] = document.getElementById('f_'+item).value.trim();
                });

                salt = 'k4#';
                var CryptoJSAesJson = {
                    stringify: function (cipherParams) {
                        var j = {ct: cipherParams.ciphertext.toString(CryptoJS.enc.Base64)};
                        if (cipherParams.iv) j.iv = cipherParams.iv.toString();
                        if (cipherParams.salt) j.s = cipherParams.salt.toString();
                        return JSON.stringify(j);
                    },
                    parse: function (jsonStr) {
                        var j = JSON.parse(jsonStr);
                        var cipherParams = CryptoJS.lib.CipherParams.create({ciphertext: CryptoJS.enc.Base64.parse(j.ct)});
                        if (j.iv) cipherParams.iv = CryptoJS.enc.Hex.parse(j.iv)
                        if (j.s) cipherParams.salt = CryptoJS.enc.Hex.parse(j.s)
                        return cipherParams;
                    }
                }
                var password = CryptoJS.AES.encrypt(JSON.stringify(salt+password), _k, {format: CryptoJSAesJson}).toString();

                $.ajax({
                    url: "/users/editUser",
                    method: "post",
                    dataType: "html",
                    crossDomain: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        items: items,
                        password: password,
                    },
                }).done(function(data, textStatus, jqXHR) {
                    Swal.fire({
                        title: "¡Actualizado!",
                        text: "Se ha actualizado tu perfil",
                        icon: "success"
                    });
                }).fail(function( jqXHR, textStatus, errorThrown ) {
                    if(jqXHR.status == 500){
                        data_res = JSON.parse(jqXHR['responseText']);
                        Swal.fire({
                            title: "¡Error!",
                            text: "Error al actualizar tu perfil: "+data_res['message'],
                            icon: "error"
                        });
                    }
                });
            }
        }
    </script>

    <script src="{{asset('js/dataTables.fixedColumns.min.js')}}"></script>
    <script src="{{asset('js/dataTables.fixedHeader.min.js')}}"></script>
    <link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
@endsection