@extends('layout.master', [
'activePage' => $activePage,
'categoria' => $categoria,
'menuParent' => $menuParent,
'titlePage' => $titlePage
])

@push('plugin-styles')
{!! Html::style('plugins/apex/apexcharts.css') !!}
{!! Html::style('assets/css/dashboard/dashboard_1.css') !!}
{!! Html::style('plugins/flatpickr/flatpickr.css') !!}
{!! Html::style('plugins/flatpickr/custom-flatpickr.css') !!}
{!! Html::style('assets/css/elements/tooltip.css') !!}
{!! Html::style('plugins/table/datatable/datatables.css') !!}
{!! Html::style('assets/css/forms/radio-theme.css') !!}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css">
</link>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">

<style>
    .ui-autocomplete-input {
        font-size: 14px;
        z-index: 1000;
        position: relative;
    }

    .ui-menu .ui-menu-item a {
        font-size: 12px;
    }

    .ui-autocomplete {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000 !important;
        float: left;
        display: none;
        min-width: 160px;
        width: 160px;
        padding: 4px 0;
        margin: 2px 0 0 0;
        list-style: none;
        background-color: #ffffff;
        border-color: #ccc;
        border-color: rgba(0, 0, 0, 0.2);
        border-style: solid;
        border-width: 1px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
        background-clip: padding-box;
        *border-right-width: 2px;
        *border-bottom-width: 2px;
    }

    .ui-menu .ui-menu-item {
        cursor: pointer;
    }

    .ui-autocomplete {
        max-height: 200px;
        overflow-y: auto;
        /* prevent horizontal scrollbar */
        overflow-x: hidden;
        /* add padding to account for vertical scrollbar */
        padding-right: 20px;
    }

    .ui-menu-item>a.ui-corner-all {
        display: block;
        padding: 3px 15px;
        clear: both;
        font-weight: normal;
        line-height: 18px;
        color: #555555;
        white-space: nowrap;
        text-decoration: none;
    }

    .ui-state-hover,
    .ui-state-active {
        color: #ffffff;
        text-decoration: none;
        background-color: #0088cc;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        background-image: none;
    }

    .text-bold {
        font-weight: bold !important;
    }

    .text-normal {
        font-weight: normal !important;
    }

    input[type="date"].form-control-sm {
        padding: .25rem .5rem !important;
    }

    input[type="file"].form-control-sm {
        padding: 0rem 1rem !important;
    }

    .btn-submit:hover {
        background-color: #E8C552 !important;
        color: black !important;
        border-color: #E8C552 !important
    }

    .results-table {
        margin: 40px !important;
        padding: .2rem !important;

        th {
            color: white !important;
            font-size: 12px !important;
        }

        ;

        td {
            text-align: center !important;

        }

        ;


        .table_body {
            margin-bottom: 10px !important;
        }
    }

    .icon-large {
        font-size: 1.5em !important;
    }

    .icon-xl {
        font-size: 2em !important;
    }

    .btn-pdf {
        background-color: #C62A2A !important;
        color: white;
        border-color: #C62A2A !important;
    }

    .input-impuesto {
        max-width: 9rem !important;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        display: contents;
    }

    .select2-container--bootstrap {
        min-width: 15rem !important;
    }

    .select2-container--bootstrap .select2-selection--single {
        max-height: 1.5rem !important;
        height: auto !important;
        font-size: smaller !important;
        margin-bottom: -.8rem
    }

    .hide-element {
        display: none !important;
    }

    .btn-link-xml:hover {
        color: #27b4eb !important;
    }

    .btn-link-pdf:hover {
        color: #C62A2A !important;
    }

    .btn-check {
        padding: 0rem .6rem !important
    }

    .image-loading {
        margin-left: .2rem !important;
        max-width: 2rem;
        max-height: 2rem;
        width: auto;
        height: auto;
    }

    .btn-link-xml:hover {
        color: #27b4eb !important;
    }

    .btn-link-pdf:hover {
        color: #C62A2A !important;
    }

    .col-descripcion {
        width: 34rem !important;
    }

    .col-codigo {
        width: 14rem !important;
    }

    .image-loading {
        margin-left: .2rem !important;
        max-width: 2rem;
        max-height: 2rem;
        width: auto;
        height: auto;
    }

    .btn-delete-row {
        background-color: #C62A2A !important;
        margin-right: .2rem !important;
    }

    .btn-delete-row:hover {
        color: #ffffff !important;
    }

    .producto-cancelado {
        background-color: #E8C552 !important;
    }

    .btn-help {
        float: right;
        font-weight: 700;
        line-height: 1;
        color: #000;
        text-shadow: 0 1px 0 #fff;
        opacity: .5;
        border: 0;
        background: 0 0;
        cursor: pointer;
    }

    .btn-help:hover {
        color: #000;
        text-decoration: none;
        opacity: .75;
    }

    .sucursal-row {
        background-color: #E8C552 !important;
    }

    .btn-excel {
        background-color: #00994C !important;
        color: white !important;
        border-color: #00994C !important
    }
</style>
@endpush

@section('content')
<div class="sub-header-container">
    <header class="header navbar navbar-expand-sm">
        <ul class="navbar-nav flex-row">
            <li>
                <div class="page-header">
                    <nav class="breadcrumb-one" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0);"> {{__('Contabilidad')}}</a></li>
                            <li class="breadcrumb-item active" aria-current="page"><span> {{__('CIERRE DE EJERCICIOS')}}</span></li>
                        </ol>
                    </nav>
                </div>
            </li>
        </ul>
    </header>
</div>

<div class="layout-px-spacing">
    <div class="container-fluid p-0">
        <div class="row d-flex justify-content-center">
            <div class="card col-md-10 mt-3">
                <div class="card-body">
                    <div class="row">

                        <div class="col-4">
                            <label class="text-bold">Ejercicio: <span class="text-danger">*</span></label>
                            <select class="form-control form-control-sm form-select2" id="ejercicio">
                                @foreach ($ejercicios as $ejercicio)
                                <option value="{{ $ejercicio['id'] }}"> {{ $ejercicio['anio'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-4">
                            <label class="text-bold">Cuenta de resultados: <span class="text-danger">*</span></label>
                            <select class="form-control form-control-sm form-select2" id="cuentaResultados">
                                @foreach ($cuentasResultados as $cuenta)
                                <option value="{{ $cuenta['id'] }}"> {{ $cuenta['cuenta']  }} ({{ $cuenta['descripcion']  }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-4 mt-3">
                            <button type="button" class="btn btn-primary btn-submit  align-items-center" title="Cerrar ejercicio seleccionado" onclick="cerrarEjercicio()">
                                Cerrar ejercicio
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('plugin-scripts')
{!! Html::script('assets/js/loader.js') !!}
{!! Html::script('plugins/jquery-ui/jquery-ui.min.js') !!}
{!! Html::script('plugins/table/datatable/datatables.js') !!}
@endpush

@push('custom-scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/moment/min/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
    const ajaxErrorMessage = {
        icon: 'error',
        title: '¡Lo sentimos!',
        text: ''
    }

    const workDoneMessage = {
        icon: 'success',
        title: '¡Hecho!',
        text: '',
    }

    const noContentMessageOptions = {
        icon: 'info',
        title: '¡Sin contenido!',
        text: '',
        confirmButtonText: 'Aceptar'
    }

    $(document).ready(() => {
        $(".form-select2").select2({
            theme: "bootstrap",
        });

    });

    $('#periodo').on('change', function() {
        $('#btn-setZero').show();
        $('#btn-reafectar').hide();
    });

    function cerrarEjercicio(type) {

        $.ajax({
            url: "{{ url('cont/cierre-ejercicios/cerrar-ejercicio') }}",
            type: 'POST',
            dataType: 'json',
            data: {
                ejercicio: $('#ejercicio').val(),
                cuentaResultados: $('#cuentaResultados').val(),
            },
            beforeSend: () => {
                $("#loadingModal").modal("show");
            },
            success: (res, _, jqXHR) => {
                setTimeout(() => {
                    $("#loadingModal").modal("hide")

                    console.log(jqXHR.status);
                    if (jqXHR.status == 500) {
                        noContentMessageOptions.text = res.message;
                        Swal.fire(noContentMessageOptions);
                        return false;
                    }
                    workDoneMessage.text = res.message;
                    Swal.fire(workDoneMessage);


                    let link = document.createElement('a');
                    link.href = res.url;
                    link.download = res.filename;

                    link.click();
                    link.remove();

                    location.reload();

                }, 500);
            },
            error: (error) => {
                setTimeout(() => {
                    $("#loadingModal").modal("hide")
                    ajaxErrorMessage.text = error.responseJSON.message;
                    Swal.fire(ajaxErrorMessage);
                }, 500);
            }
        })
    }
</script>
@endpush