@extends('layouts.dash')
@section('title','Comptes')
@section('title_card',"")
@section('subtitle_card',"")
@section('content')
    <div class="card">
        @if (Session::has('message'))
            <div class="alert alert-warning">{!! Session::get('message') !!}</div>
        @endif

        @if ($errors)
            @foreach ($errors->all() as $error)
                <div class='bg-danger alert'>{!! $error !!}</div>
            @endforeach
        @endif

        @if (Session::has('success'))
            <div class="alert alert-success">{!! \Session::get('success') !!}</div>
        @endif  
        
        <div class="card-header bg-warning">
            <h3 class="card-title">Ecritures par Comptes du {{ $date_deb." au ".$date_fin}}</h3>
        </div>
        <div class="card-body">
            <div class="form-inline">
                <div class='form-group'>
                    {!! html()->label('Date de début','date_debut') !!}&nbsp;&nbsp;
                    <div class='input-group date' id='datepicker_date_debut'>
                    {!! html()->text('date_debut', isset($date_deb)?$date_deb:'01/01/'.date('Y'))
                        ->attributes(['id'=>'date_debut','size'=>'10','placeholder' => 'JJ/MM/AAAA', 'class' => 'form-control']) !!}
                        <span class='input-group-addon'>
                            <span class='glyphicon glyphicon-calendar'></span>
                        </span>
                    </div>
                </div>
                <div class='form-group ml-4' style=''>
                    {!! html()->label('Date de fin','date_fin') !!}&nbsp;&nbsp;
                    <div class='input-group date' id='datepicker_date_fin'>
                    {!! html()->text('date_fin', isset($date_fin)?$date_fin:'31/12/'.date('Y'))
                        ->attributes(['id'=>'date_fin','size'=>'10','placeholder' => 'JJ/MM/AAAA', 'class' => 'form-control']) !!}
                        <span class='input-group-addon'>
                            <span class='glyphicon glyphicon-calendar'></span>
                        </span>
                    </div>
                </div>
                <div class='col-md-3 p-4' style="margin-top:5px" >
                    <a id='btn_filtre' class="btn btn-primary"  href="#" ><i class="fas fa-search"></i>&nbsp;Rechercher</a>
                </div>
            </div>
            <div class="row form-group  ">
                <div class="col-md-4">
                    {!! html()->label('Comptes','sel_compte') !!}&nbsp;
                    {!! html()->select('sel_compte')->options(null,'')->placeholder('Tous')
                        ->attributes(['id'=>'sel_compte','class' => 'select2 form-control'])  !!}
                </div>
                <div class='col-md-4'>
                    @if($comptes_aux_json)
                        {!! html()->label('Comptes Auxiliaires','sel_compte_aux') !!}&nbsp;
                        {!! html()->select('sel_compte_aux')->options([])->placeholder('')->attributes(['id'=>'sel_compte_aux','class' => 'select2 form-control'])  !!}
                    @endif
                </div>
                <div class='col-md-1 ' style="text-align:right;">
                    {!! html()->label('Ecritures&nbsp;lettrées','visu_lettre') !!}
                    {!! html()->checkbox('visu_lettre', $visu_lettre)->attributes(['id' => 'visu_lettre', 'class' => 'form-control']) !!}              
                </div>
                <div class="col-md-3 pt-4 " style="text-align:right;">
                    <div class="text-end">
                        @if(!$mode_lettrage) 
                            <span title="Il faut choisir un compte" >
                                <a class="btn btn-info {{ (!$compte)?'disabled':'' }}" id="btn_lettrage" href="#">Lettrage</a>
                            </span>
                        @else
                            <a class="btn btn-warning" id="btn_lettrage" href="#">Fermer le Lettrage</a>
                        @endif
                    </div>
                </div>
            </div>

            @if($mode_lettrage)  
                @include("comptabilite.grandlivre.liste_ecritures_lettrage",["liste_id"=>$liste_id])
            @else
                @include("comptabilite.grandlivre.liste_ecritures_base")  
            @endif

        </div>
    </div>

    <input type="hidden" name="mode_lettrage" id="mode_lettrage" value="{{ $mode_lettrage }}"/>
@endsection


@section('scripts')
    <script type="text/javascript">
        $(function () {
            $('#datepicker_date_debut').datepicker({
                format: "dd/mm/yyyy",language: "fr",autoclose: true
            });

            $('#datepicker_date_fin').datepicker({
                format: "dd/mm/yyyy",language: "fr",autoclose: true
            });

            var data_comptes= {!! $comptes_json !!};
            var compte="{!! $compte !!}";
            $('#sel_compte').select2({
                width:'80%',
                data: data_comptes,
                placeholder:"Tous"   
            });

            $(document).on('select2:open', '.select2', function (e) {
                setTimeout(() => {
                    const $elem = $(this).attr("id");
                    document.querySelector(`[aria-controls="select2-${$elem}-results"]`).focus();
                });
            });

            
            @if($comptes_aux_json)
                var data_comptes_aux={!! $comptes_aux_json !!};
                var compte_aux="{!! $compte_aux !!}";

                $('#sel_compte_aux').select2({
                    width:'80%',
                    data: data_comptes_aux,
                    placeholder:"Compte auxiliaire"
                });
            @endif

            if(compte!='') {$('#sel_compte').val('{{ $compte }}');$('#sel_compte').trigger('change');}

            @if($comptes_aux_json)
                if(compte_aux!='') {$('#sel_compte_aux').val('{{ $compte_aux }}'); $('#sel_compte_aux').trigger('change');} 
            @endif
            
            
            $('#sel_compte').change( function() {filtre();});
            $('#sel_compte_aux').change( function() {filtre();});
            $('#visu_lettre').change( function() {filtre();});
            
            $('#btn_filtre').click( function() {filtre();});

            $('#btn_lettrage').click( function() {
                var lettrage=$('#mode_lettrage').val();
                if(lettrage==1) $('#mode_lettrage').val(0);
                else $('#mode_lettrage').val(1);
                filtre();
            });

            function filtre() {
                var select_compte = $('#sel_compte').val();
                var select_compte_aux=0;
                @if($comptes_aux_json)
                    select_compte_aux = $('#sel_compte_aux').val();
                    if((select_compte_aux=="")||(select_compte_aux==null)) select_compte_aux=0;                
                @endif
                if(select_compte=="") select_compte=0;
                var date_dep=$('#date_debut').val();
                var date_fin=$('#date_fin').val();
                var t_date_dep = date_dep.split('/');
                date_dep= t_date_dep[2]+"-"+t_date_dep[1]+"-"+t_date_dep[0];
                var t_date_fin = date_fin.split('/');
                date_fin= t_date_fin[2]+"-"+t_date_fin[1]+"-"+t_date_fin[0];
                var lettrage=($('#mode_lettrage').val()==1)?1:0;
                var visu_lettre=$('input[name=visu_lettre]').is(':checked')?1:0;
                var url="{!! url('comptes_filtre') !!}"+"/"+select_compte+"/"+select_compte_aux+"/"+date_dep+"/"+date_fin+"/"+lettrage+"/"+visu_lettre; 
                location.href=url;
            }

            $("#sel_compte").select2({ width: '100%' });    
            $("#sel_compte_aux").select2({ width: '100%' });  
        });
    </script>
    @if($mode_lettrage)
        @include("comptabilite.grandlivre.script_lettrage")
        @include("comptabilite.grandlivre.script_datatable_nopage")
    @else
        @include("comptabilite.grandlivre.script_datatable")
    @endif
    
@endsection