@extends('base')
@section('extrajs')
    <script src="{{ asset('dist/jquery.bootstrap-duallistbox.js') }}"></script>
    <script>
        let _config = {
                filterTextClear: 'Mostrar todo',
                filterPlaceHolder: 'Filtrar',
                moveSelectedLabel: 'Mover seleccionado',
                moveAllLabel: 'Mover todo',
                removeSelectedLabel: 'Eliminar seleccionado',
                removeAllLabel: 'Eliminar todo',
                moveOnSelect: true,
                preserveSelectionOnMove: false,
                selectedListLabel: false,
                nonSelectedListLabel: false,
                helperSelectNamePostfix: '_helper',
                selectorMinimalHeight: 100,
                showFilterInputs: true,
                nonSelectedFilter: '',
                selectedFilter: '',
                infoText: 'Mostrando todo {0}',
                infoTextFiltered: '<span class="badge badge-warning">Fitrado</span> {0} de {1}',
                infoTextEmpty: 'Lista vacia',
                sortByInputOrder: false,
                filterOnValues: false,
                eventMoveOverride: false,
                eventMoveAllOverride: false,
                eventRemoveOverride: false,
                eventRemoveAllOverride: false,
                btnClass: 'btn-outline-secondary',
                btnMoveText: '&gt;',
                btnRemoveText: '&lt;',
                btnMoveAllText: '&gt;&gt;',
                btnRemoveAllText: '&lt;&lt;'
        };
        $('#peridos_anuales_container select').bootstrapDualListbox(_config);
        $('#peridos_mensuales_container select').bootstrapDualListbox(_config);
       
    </script>
    <script>
        function onTipoChange(select) {
            let value = select.selectedOptions[0].value;
            let change_tipe = function(container){
                let element =  document.querySelector(container);
                element.classList.toggle("d-none");
                // element.querySelector("select").disabled = !element.querySelector("select").disabled;
            }
            change_tipe("#peridos_anuales_container");
            change_tipe("#peridos_mensuales_container");
        }
    </script>
@endsection
@section('content')
@include('sessions')
    <fieldset class="d-flex justify-content-around flex-column">
        <legend>Opciones del Balance General (Comparativo)</legend>
    <div class="form-group">
        <label for="tipo">Tipo de Periodo</label>
        <select name="tipo" class="form-control" onchange="onTipoChange(this)">
            <option value="anual" selected>Anual</option>
            <option value="mensual">Mensual</option>
        </select>
    </div>
    <form action="{{route('ReportesContabilidad.BGComparativoReporte')}}">        
            <div class="form-group mx-auto" id="peridos_anuales_container">
                <label for="periodos">Periodo anual</label>
                <select class="form-control" multiple="multiple" name="periodos[]">
                    @if (count($periodos_anuales)==0)
                        <option value="" disabled selected>No hay periodos anuales cerrados</option>
                    @endif
                    @foreach ($periodos_anuales as $periodo)
                        <option value="{{$periodo->id}}">{{$dateFormater($periodo->periodo)}} <i>(
                            @if ($periodo->estado==1)
                                Activo
                            @else
                                Cerrado
                            @endif
                            )</i></option>
                    @endforeach
                </select>
            </div>
            <div class="form-group d-none mx-auto" id="peridos_mensuales_container">
                <label for="periodos">Periodo mensual</label>
                <select class="form-control" multiple="multiple" name="periodos[]">
                    @if (count($periodos_mensuales)==0)
                        <option value="" disabled selected>No hay periodos mensuales cerrados</option>
                    @endif
                    @foreach ($periodos_mensuales as $periodo)
                        <option value="{{$periodo["id"]}}"> {{$dateFormater($periodo["periodo"])}} {{$periodo["periodo_anual"]["periodo"]}}</option>
                    @endforeach
                </select>
            </div>
            <div class="d-flex" style="gap:15px;">
                <button type="submit" class="btn btn-primary mx-auto" name="btnPDF" value="Generar Reporte PDF"><i class="ki-outline ki-note-2 fs-2"></i>Generar Reporte PDF</button>
                <button type="submit" class="btn btn-success mx-auto" name="btnExcel" value="Generar Reporte Excel"><i class="fa-regular fa-file-excel fs-2"></i>Generar Reporte Excel</button>
            </div>
        </form>
    </fieldset>
@endsection