@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;
        }
    </style>
@endsection
@section('content')
    @php
        $cliente=config('app.CLIENTE');
    @endphp

    <div class="row">
        <div class="col col-md-3"></div>
        <div class="col col-md-6" style="background-color:white; border-radius:0.5rem; margin-top:100px;">
            <div class="content" style="margin:20px;">
                <div class="mb-4 text-sm text-gray-600" style="font-size:20px;">
                    {{ __('messages.confirmar-clave') }}
                </div>

                <form method="POST" id="confirmPasswordForm" action="/passwordConfirm/">
                    @csrf
                    <input type="hidden" name="codigo" value="{{$codigo}}"/>
                    <!-- Password -->
                    <div>

                        <div class="mb-3">
                            <label for="password" class="form-label">{{__('messages.login-password')}}</label>
                            <input type="password" class="form-control" name="password" id="password" autocomplete="off">
                        </div>
                        
                        <div class="invalid-feedback invalid-input" id="f_password_invalid" style="display:block;">
                            {{session()->get('message')}}@php session()->forget('message') @endphp
                        </div>
                    </div>

                    <div class="flex justify-end mt-4">
                        <button type="submit" class="btn btn-secondary float-end" style="margin-bottom:10px;">
                            {{ __('messages.confirmar') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
        <div class="col col-md-3"></div>
    </div>
@endsection
@section('js_after')
    <script src="{{ asset('js/vendor/jquery.dataTables.min.js') }}"></script>
    <script>
        $(document).ready(() => {
            $('#confirmPasswordForm').on('submit', function(e){
                e.preventDefault();
                $.ajax({
                    url: "/passwordConfirm",
                    method: "POST",
                    data: new FormData(this),
                    crossDomain: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    contentType: false,
                    cache: false,
                    processData: false,
                }).done(function (data) {
                    location.reload();
                }).fail(function( jqXHR, textStatus, errorThrown ) {
                    $('#f_password_invalid').innerHTML = 'Se ha presentado un error';
                });
            });
        });
    </script>
@endsection