@extends('layouts.dashboard')
@section('css')
    {{-- <link href="{{ asset('css/dashboard/mainpro.css') }}" rel="stylesheet"> --}}
    <link href="{{ asset('css/dashboard/demo.css') }}" rel="stylesheet">
@endsection

@section('js')
    <script src="{{ asset('js/dashboard/custom-file-input.js') }}" defer></script>
    <script src="{{ asset('js/dashboard/input_file.js') }}" defer></script>
@endsection


@section('content')
    <style>
        span.select2-selection.select2-selection--single {
            height: calc(2.25rem + 2px);
            border: 1px solid #ced4da;

        }
    </style>
    <div class="app-page-title d-xs-none"
        style="margin-bottom: 0px;border-bottom-width: 0px;border-bottom-style: solid;padding-bottom: 17px;">
        <div class="page-title-wrapper">
            <div class="col-md-4">
                <div class="page-title-heading">

                    <div>
                    </div>
                </div>
            </div>

            <div class="col-xl-8 d-none d-sm-none d-md-none d-lg-block">
                <div class="page-header  float-right">
                    <nav class="" aria-label=" breadcrumb">
                        <ol class="breadcrumb text-right">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Inicio</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('sellos.index') }}">Sellos digitales</a></li>
                            <li class="active breadcrumb-item" aria-current="page"> {{ $serie }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <br>

    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <button type="button" class="close" aria-label="Close" data-dismiss="alert">
                <span aria-hidden="true">×</span>
            </button>

            <div class="row">
                <div class="col-1">
                    <i class="pe-7s-shield" style="font-size: 20px;"> </i>
                </div>
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>
                            <div class="col-12"><strong>
                                    <strong>{{ $error }}</strong></strong></div>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif
    <div class="main-card  mb-3 card ">
        <div class="card-header" style="text-transform: none !important">Subir sello</div>

        <form action="{{ route('sellos.update', $id) }}" method="POST" enctype="multipart/form-data" autocomplete="off">
            @csrf
            @method('PUT')
            <div class="card border-secondary">
                <div class="card-body card-block">
                    <div class="row form-group">
                        <div class="col col-md-3"><label for="file-input" class="form-control-label">Certificado del sello
                                (.cer) <span class="color-red ">*</span> </label></div>
                        <div class="col-12 col-md-8">
                            <input type="file" name="CertificadoCSD" id="file_cer" class="inputfile empty inputfile-6"
                                accept=".cer">
                            <label for="file_cer" style="width: 100%;border-radius: 6px;">
                                <span id="name_file_cer"></span>
                                <strong style="font-weight: initial;">
                                    <div id="lbl_load_cer">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17"
                                            viewBox="0 0 20 17">
                                            <path
                                                d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" />
                                        </svg>

                                        Cargar archivo&hellip;
                                    </div>
                                </strong>
                            </label>
                        </div>
                        <div id="clear-input-cer" class="color-red d-none d-md-block col-md-1"
                            style="font-size: 22px;margin-top: 7px;margin-left: -23px;" data-toggle="tooltip"
                            data-placement="bottom" title="Eliminar archivo">
                            <i class="metismenu-icon pe-7s-close-circle" style="font-size: 22px;"></i>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col col-md-3"><label for="file-input" class=" form-control-label">Llave privada (.key)
                                <span class="color-red ">*</span> </label></div>

                        <div class="col-12 col-md-8">
                            <input type="file" name="LlavePrivada" id="file_key" class="inputfile empty inputfile-6 "
                                accept=".key">



                            <label for="file_key" style="width: 100%;border-radius: 6px;">
                                <span id="name_file_key"></span>
                                <strong style="font-weight: initial;">
                                    <div id="lbl_load_key">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17"
                                            viewBox="0 0 20 17">
                                            <path
                                                d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z" />
                                        </svg>
                                        Cargar archivo&hellip;
                                    </div>

                                </strong>
                            </label>

                        </div>
                        <div id="clear-input-key" class="color-red d-none d-md-block col-md-1"
                            style="font-size: 22px;margin-top: 7px;margin-left: -23px;" data-toggle="tooltip"
                            data-placement="bottom" title="Eliminar archivo">
                            <i class="metismenu-icon pe-7s-close-circle" style="font-size: 22px;"></i>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col col-md-3"><label for="text-input" class=" form-control-label">Contraseña del CSD
                                <span class="color-red ">*</span> </label></div>
                        <div class="col-12 col-md-8 ">
                            <input type="password" id="ipt_ContrasenaCSD" required name="ContrasenaCSD" title=""
                                placeholder="Ingrese la contraseña de su CSD"
                                class="mb-2 form-control-sm form-control"><small class="form-text text-muted"></small>
                                <input type="hidden" name="base64_pass">
                        </div>

                    </div>
                </div>
            </div>
    </div>
    <div class="col-auto mx-auto d-flex justify-content-center mb-2 pb-3">
        <div class="col-lg-4 col-sm-4 d-flex justify-content-center">
            <button id="send-button" type="submit" class="btn btn-lg buttom_agregar">
                <i class="pe-7s-diskette" style="font-size: 15px;"></i>&nbsp;
                <span id="payment-button-amount">Actualizar</span>
            </button>

        </div>
        <div class="col-lg-4 col-sm-4 d-flex justify-content-center">
            <button id="cancel-button" type="button" class="btn btn-lg buttom_white"
                onclick="window.location='{{ url('sellos/') }}'">
                <i class="fa fa-ban" style="font-size: 15px;"></i>&nbsp;
                <span>Cancelar</span>
            </button>
        </div>
    </div>
    </form>
    <script>
        $("#send-button").on("click", EventoVerificador)

        function EventoVerificador() {
            $('#ipt_ContrasenaCSD').val(btoa($('#ipt_ContrasenaCSD').val()))
            var mensaje =
                "Para poder guardar la información de la sucursal, debe requisitar los campos marcados con un '*' \n\n";
            var band_submit = true;
            if ($('#file_cer').get(0).files.length === 0) {
                mensaje += " - Un archivo .cer valido";
                band_submit = false;
                _alias = document.querySelector("#file_cer");
            } else if ($('#file_key').get(0).files.length === 0) {
                mensaje += " - Un archivo .key valido y que corresponda al .cer";
                band_submit = false;
                _alias = document.querySelector("#file_key");
            } else if ($('#ipt_ContrasenaCSD').val().length < 3) {
                mensaje += " - Ingrese la contraseña de archivo .key";
                band_submit = false;
                _alias = document.querySelector("#ipt_ContrasenaCSD");
            }
            if (band_submit != true) {
                swal({
                    //title: "Requisite los campos marcados con un '*'",
                    text: mensaje,
                    button: "Aceptar",
                    closeModal: false
                }).then(function() {
                    swal.close();
                    _alias.focus();
                });
                return false;
            }
        }
    </script>

@endsection