@extends('layouts.squelette')
<!-- ************************************** -->
@section('css_header')
@endsection
<!-- ************************************** -->
@section('titre_page')
{{ __('Pilotage Capex') }}
@endsection
<!-- ************************************** -->

<!-- ************************************** -->
@section('panel_boutons')
 @include('layouts.partials.panelboutons', [ 'btn_export'=> true])
@endsection
<!-- ************************************** -->

@section('js_header')
<script type="text/javascript" src="{{ asset('plugins/sheetjs-master/dist/xlsx.full.min.js')}}"></script>
@endsection

<!-- ************************************** -->
@section('contenu')

<form id="formSearch" class="collapse show" method="POST" action="">
    <input type="hidden" name="filtering" value="ok">
    @csrf
    {{ csrf_field() }}
                <div class="h-20"></div>
                <div class="panel">
                    <div class="panel-body">
                        <div class="row">

                            <div class="col-sm-4">
                                @component('components.select.select_sign',['signs' => $signs,'value' => array(),'search' => 'true','emptyValue' => 'false','required' => true, 'multiple' => true])
                                @endcomponent
                            </div>

                            <div class="col-sm-4">
                                <div class="form-group" id="DIV_group_int_desiredPlanningDate">
                                    <label>{{ __('Année') }} </label>
                                    <div class="input-group dateYear" id="DIVyear" data-target-input="nearest">
                                        <input type="text" class="form-control datetimepicker-input" id="yearValue" name="yearValue" data-target="#DIVyear" value="{{ app('request')->input('year')!=null ? app('request')->input('year') : date('Y') }}">
                                        <div class="input-group-append" data-target="#DIVyear" data-toggle="datetimepicker">
                                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group" id="div_bud_id">
                                    <label for="role">{{ __('Ligne budgétaire') }}</label>
                                    <select class="selectpicker form-control" id="bud_id" name="bud_id[]" data-live-search="true" multiple>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="text-center">
                            <button type="button" id="BTN_valid_formsearch" class="btn btn-secondary btn-see" >{{ __('Afficher') }}</button>
                            <button type="button" id="BTN_export" class="btn btn-success btn-export">{{ __('Exporter les résultats') }}</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </div>
                    </div>
            </div>
    </form>

    <div class="row">
        <div class="col-md-12">
            <div class="card card-gray">
                <div class="card-header">
                 <h3 class="card-title">{{ __('Montants') }}</h3>
                </div>
                <div class="card-body">
                    <div id="div_stats_engages" name="div_stats_engages"></div>

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

        <div class="col-md-12">
            <!-- STACKED BAR CHART -->
            <div class="card card-gray">
                <div class="card-header">
                <h3 class="card-title">{{ __('Ratios') }}</h3>
                </div>
                <div class="card-body">
                <div class="chart">
                    <canvas id="stackedBarChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>

        <div class="col-md-12">
            <!-- STACKED BAR CHART -->
            <div class="card card-gray">
                <div class="card-header">
                <h3 class="card-title">{{ __('Evolution annuelle') }}</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="areaChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                      </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>

    </div>

  </section>
  <!-- /.content -->

@endsection

@section('js_footer')
    <script src="{{ asset('plugins/chart.js/Chart.min.js')}}"></script>
    <script src="{{ asset('js/fonctions/init_datatables.js')}}"></script>
    <script src="{{ asset('js/budgets/pilotageCapex.js')}}"></script>

    <script>
        //https://github.com/SheetJS/sheetjs
        function html_table_to_excel(type)
        {

            /* create new workbook */
            var workbook = XLSX.utils.book_new();

            var ws1 = XLSX.utils.table_to_sheet(document.getElementById('tab_statsDi'));
            XLSX.utils.book_append_sheet(workbook, ws1, "Engagé");

            XLSX.writeFile(workbook, 'pilotage_budgets.' + type);
        }

        const export_button = document.getElementById('BTN_export');

        export_button.addEventListener('click', () =>  {
            html_table_to_excel('xlsx');
        });
    </script>

@endsection

@section('modale')
@endsection