@extends('layouts.squelette')
<!-- ************************************** -->
@section('css_header')
<style>
#chart-wrapper {
    max-height: 450px; 
    overflow-y: auto;
    position: relative; 
}
 
</style> 
@endsection
<!-- ************************************** -->
@section('titre')
{{ __('Tableau de bord des contrats') }}
@endsection
<!-- ************************************** -->
@section('titre_header')
{{ __('Contrats') }} / {{ __('Stats') }}
@endsection
 
<!-- ************************************** -->
@section('panel_boutons')
<small class="float-right">
    <a class="btn btn-defaut app2 retour" href="/contratsSite"><i class="fa fa-arrow-circle-left"></i> {{ __('Retour') }}</a>
</small>
@endsection
<!-- ************************************** -->
@section('contenu')
<div class="row">
    <div class="col-md-4">
        <button class="btn btn-default btn-search" data-toggle="collapse" data-target="#formSearch">{{ __('Filtrer') }}</button>
    </div>
</div>
<br>

<div class="row " > 
    <div class="col-md-12   {{ @$filtering=='ok' ? 'collapse show' : 'collapse' }}" id="formSearch" >
        <div class="card card-info">
            <div class="card-body p-100">
                <form  id="search_contract" method="POST" action="">
                    <input type="hidden" name="filtering" value="ok">
                    @csrf
                    <div class="h-20"></div>
                    <div class="panel">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    @component('components.select.select_sig_sec_site',[
                                                'customers' => '',
                                                'signs' => '',
                                                'secteurs' => '',
                                                'sites' => '',
                                                'sig_value' => '',
                                                'sec_value' => '',
                                                'sit_value' => '',
                                                'required' => array(false,false,false),
                                                'search' => array(true,true,true),
                                                'multiples' => array(false,false,true),
                                                'emptyValues' => array(false,false,false),
                                                'initialiser' => true,
                                                'options_all' => true, 
                                                ])
                                                @endcomponent
                                </div>
                                <div class="col-sm-4">
                                    @component('components.select.select_provider',['providers' => @$providers,'value' => '','search' => 'true','emptyValue' => 'true'])
                                    @endcomponent
                                </div> 
                                <div class="col-sm-4">
                                    @component('components.dates.select_simple',['label' => 'Date Contrats','value' => '','name' => 'date_contrat'])
                                    @endcomponent
                                </div>   
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label>{{ __('Type de contrat') }}</label>
                                        <select class="form-control" name="con_typeContract" type="text">
                                            <option value="" selected>{{__('Indifférent')}}</option>
                                            <option value="P">{{ __('Préventive') }}</option>
                                            <option value="R">{{ __('Règlementaire') }}</option>
                                        </select>
                                    </div>
                                </div>
                            </div> 
                            <div class="text-center"><button type="button" id="BTN_valid_formsearch" name="BTN_valid_formsearch" class="btn btn-secondary l-search">{{ __('Filtrer') }}</button></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div> 
                                <div class="col-md-12">
                                    <div class="card card-outline card-default">
                                        <div class="card-header">
                                            <h5>{{ __('Suivi par contrat') }}</h5>
                                        </div>
                                        <div class="card-body">
                                            <div> 
                                                <div class="row"> 
                                                    <div class="col-md-12">
                                                        <div class="card card-widget">
                                                            <div class="card-body">
                                                                <div class="d-flex">
                                                                </div> 
                                                                <div class="position-relative mb-4 ">
                                                                    <canvas id="suivi_contract_graph" height="350" width="1200"></canvas>
                                                                </div>
                            
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div> 
                                            </div> 
                                        </div>
                                    </div> 
                                </div> 
                                <div class="col-md-12">
                                    <div class="card card-outline card-default">
                                        <div class="card-header">
                                            <h5>{{ __('Suivi facturation') }}</h5>
                                        </div>
                                        <div class="card-body">
                                            <div> 
                                                <div class="row"> 
                                                    <div class="col-md-12">
                                                        <div class="card card-widget">
                                                            <div class="card-body">
                                                                <div class="d-flex">
                                                                </div> 
                                                                <div class="position-relative mb-4">
                                                                    <canvas id="suivi_facturation_graph" height="350" width="1200"></canvas>
                                                                </div>
                            
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div> 
                                            </div> 
                                        </div>
                                    </div> 
                                </div>
                                <div class="col-md-12">
                                    <div class="card card-outline card-default">
                                        <div class="card-header">
                                            <h5>{{ __('Suivi par site') }}</h5>
                                        </div>
                                        <div class="card-body">
                                            <div> 
                                                <div class="row"> 
                                                    <div class="col-md-12">
                                                        <div class="card card-widget">
                                                            <div class="card-body">
                                                                <div class="d-flex">
                                                                </div> 
                                                                <div class="chart-wrapper"    >
                                                                    <canvas id="suivi_site_graph" height="800px" ></canvas>
                                                                </div>
                            
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div> 
                                            </div> 
                                        </div>
                                    </div> 
                                </div> 
                            </div> 
</div>

@endsection

@section('js_footer')
<script src="{{ asset('plugins/chart.js/Chart.min.js')}}"></script> 
<!--Passage des données au fichier js -->

<script src="{{ asset('js/contract/contractdash.js').'?'.env('VERSION_JS')}}"></script> 
<script> 

    updateGraphs(@json($contracts), @json($invoices), @json($sites));
      var sites = @json($contracts);
     //console.log(sites);
</script> 
@endsection