@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="active breadcrumb-item" aria-current="page"><a
                                    href="{{ route('sellos.index') }}">Sellos</a></li>
                            <li class="active breadcrumb-item" aria-current="page">Agregar nuevo CSD</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"><strong>Subir sello</div>
        </strong>
        <form action="{{ url('/sellos') }}" id="store_csd" method="POST" enctype="multipart/form-data" autocomplete="off">
            @csrf
            <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>
                        </div>

                    </div>



                </div>
            </div>



    </div>


    <div class="card">
        <div class="card-header">Asignación de sellos</div>
        <div class="card-body card-block">
            <div class="card-body table-responsive-md">
                <table id="tbl_user" class="table table-striped table-bordered">
                    <thead>
                        <tr id="encabezado">
                            <!-- <th>No.</th> -->
                            <th>Matriz/Sucursal</th>
                            <th>Establecer por defecto</th>
                        </tr>
                    </thead>
                    <tbody id="tbody_user">
                        @foreach ($matriz_sucursal as $item)
                            <tr>
                                <td>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" name="chk_csd[]"
                                            value="{{ $item->id_mat_suc }}">
                                        <label class="form-check-label" for="flexSwitchCheckDefault">
                                            {{ $item->mat_suc == 'M' ? 'Matriz' : $item->nombre_comercial }}</label>
                                        @php
                                            $var_nombre_mat_suc = $item->mat_suc == 'M' ? 'Matriz' : $item->nombre_comercial;
                                        @endphp
                                    </div>
                                </td>
                                <td>
                                    <div class="col-12 col-md-9">
                                        <select name="slc_default[]" id="slc_default" class="form-control">
                                            <option value="SN">Seleccione ...</option>
                                            <option value="N">No</option>
                                            <option value="S" @if ($item->default == 'S') selected @endif>Sí
                                            </option>
                                        </select>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div id="div_mat_suc_status"></div>
    <br>
    <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="button" class="btn btn-lg buttom_agregar" onclick="EventoVerificador()">
                <i class="pe-7s-diskette" style="font-size: 15px;"></i>&nbsp;
                <span id="payment-button-amount">Guardar</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='{{ route('sellos.index') }}'">
                <i class="fa fa-ban" style="font-size: 15px;"></i>&nbsp;
                <span>Cancelar</span>
            </button>
        </div>
    </div>
    </form>
    <script version="{{ version_js() }}">
        // $("#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");
            }
            _validar_mat_suc=true
            $('input[name="chk_csd[]"]').each((_index_, _check_) => {
                    if (_check_.checked == true) {
                        _validar_mat_suc=false
                    }
            })
            if (_validar_mat_suc) {
                mensaje += " - Asigne el sello a una matriz o sucursal";
                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;
            }
            if (band_submit == true) {
                content = ''
                $('input[name="chk_csd[]"]').each((_index_, _check_) => {
                    if (_check_.checked == true) {
                        content += '<input type="hidden" name="status_mat[]" value="' + $(
                            'select[name="slc_default[]"]')[_index_].value + '"> '
                    }
                })
                $('#store_csd').append(content);
                $('#store_csd').submit();
            }
        }
    </script>
@endsection