@extends('layouts.dashboard.app')


@section('content')
    <div class="container-fluid mt-4">
        <form id="myForm" action="" method="post">
            @csrf
            <div class="row mb-3">
                <div class="col-md-3">
                    <div class="mb-2">
                        <label class="form-label" for="company">Depuis :</label>
                        <input class="form-control @error('from') is-invalid  @enderror" required type="date"
                            id="from" name="from">
                        @error('from')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-2">
                        <label class="form-label" for="company">Jusqu'a :</label>
                        <input class="form-control @error('to') is-invalid  @enderror" required type="date"
                            id="to" name="to">
                        @error('to')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-2">
                        <label class="form-label" for="company">Assurances :</label>
                        <select name="company" id="company" class="form-select">
                            <option value="">Selectionner Une Assurance</option>

                            @foreach ($companies as $item)
                                <option value="{{ $item->id }}">{{ $item->company }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-2">
                        <label class="form-label" for="intermidiaire">Intermidiaire :</label>
                        <select name="intermidiaire" id="intermidiaire" class="form-select">
                            <option value="">Selectionner Un Intermidiaire</option>

                            @foreach ($intermidiaires as $item)
                                <option value="{{ $item->id }}">{{ $item->company }}</option>
                                @endforeach"
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-2">
                        <label class="form-label" for="typeexpertise">Type Expertise :</label>
                        <select name="typeexpertise" id="typeexpertise" class="form-select">
                            <option value="">Selectionner Un Type Expertise</option>

                            @foreach ($typeexpertises as $item)
                                <option value="{{ $item->id }}">{{ $item->type }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-2">
                        <label class="form-label" for="mode">Mode :</label>
                        <select name="mode" id="mode" class="form-select">
                            <option value="">Selectionner Un Mode</option>

                            @foreach ($modes as $item)
                                <option value="{{ $item->id }}">{{ $item->mode }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-2">
                        <label class="form-label" for="garage">Garage :</label>
                        <select name="garage" id="garage" class="form-select">
                            <option value="">Selectionner Un Garage</option>

                            @foreach ($garages as $item)
                                <option value="{{ $item->id }}">{{ $item->libelle }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-2">
                        <label class="form-label" for="user">Utilisateurs :</label>
                        <select name="user" id="user" class="form-select">
                            <option value="">Selectionner Un Utilisateur</option>

                            @foreach ($users as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-2">
                        <label class="form-label" for="brand_id">Marque :</label>
                        <select name="brand" id="brand_id" class="form-select">
                            <option value="">Selectionner Une Marque</option>

                            @foreach ($brands as $item)
                                <option value="{{ $item->id }}">{{ $item->brand }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-2">
                        <label class="form-label" for="vehicule_model_id">Modele :</label>
                        <select name="vehicule_model_id" id="vehicule_model_id" class="form-select">
                            <option value="">Selectionner Un Modele</option>
                            @foreach ($models as $item)
                                <option value="{{ $item->id }}">{{ $item->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-2">
                        <label class="form-label" for="city_id">Ville :</label>
                        <select name="city_id" id="city_id" class="form-select">
                            <option value="">Selectionner Une Ville</option>
                            @foreach ($cities as $item)
                                <option value="{{ $item->id }}">{{ $item->city }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-2">
                        <label class="form-label" for="guarantee">Garantie :</label>
                        <select name="guarantee" id="guarantee" class="form-select">
                            <option value="">Selectionner Une Garantie</option>
                            @foreach ($guarantees as $item)
                                <option value="{{ $item->id }}">{{ $item->guarantee }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-2">
                        <label class="form-label" for="company_op">Assurance Adverse :</label>
                        <select name="company_op" id="company_op" class="form-select">
                            <option value="">Selectionner Une Assurance Adverse</option>

                            @foreach ($companies as $item)
                                <option value="{{ $item->id }}">{{ $item->company }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-2">
                        <label class="form-label" for="statut">Status :</label>
                        <select name="statut" id="statut" class="form-select">
                            <option value="">Selectionner Status du Dossier</option>
                            @foreach ($statuses as $status)
                                <option value="{{ $status->id }}">{{ $status->status }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-2">
                        <label class="form-label" for="update">Rapport :</label>
                        <select name="update" id="update" class="form-select">
                            <option value="">Sélectionner</option>
                            <option value="1">Signé</option>
                            <option value="0">Non signé</option>
                        </select>
                    </div>
                </div>
                <input type="hidden" name="submitindex" id="submitindex" value="">
                {{-- <input type="hidden" name="image" id="image" value=""> --}}

                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="col-md-6">
                                <p class="mb-1 fw-bold text-muted">Formule</p>
                                <select class="form-select mb-2 @error('formule') is-invalid  @enderror" name="formule"
                                    id="formule">
                                    <option value="d1">Délai de création du dossier</option>
                                    <option value="d2">Délai de réception des photos avant réparation </option>
                                    <option value="d3">Délai de réception du devis </option>
                                    <option value="d4">Délai de réception du devis (Mission avec meeting)</option>
                                    <option value="d5">Délai d'envoi du meeting avant réparation</option>
                                    <option value="d6">Délai d'expertise avant réparation</option>
                                    <option value="d7">Délai de traitement accord </option>
                                    <option value="d49">Délai de réception du 2eme devis</option>
                                    <option value="d50">Délai de traitement 2eme accord</option>
                                    <option value="d51">Délai d'envoi 2eme accord</option>
                                    <option value="d9">Délai de réparation </option>
                                    <option value="d10">Délai de réception de la facture </option>
                                    <option value="d11">Délai de réception photos après réparation </option>
                                    <option value="d12">Délai d'envoi d'expertise après réparation </option>
                                    <option value="d13">Délai de réception des arrets de valeur </option>
                                    <option value="d14">Délai d'etablissement rapport </option>
                                    <option value="d15">Délai de validation rapport </option>
                                    <option value="d16">Délai d'envoi d'accord/avis dommage</option>
                                    <option value="d32">Délai moyen de traitement</option>
                                    <option value="d17">Ecart moyen devis vs accord </option>
                                    <option value="d18">Ecart moyen devis vs rapport </option>
                                    <option value="d19">Ecart moyen accord vs facture </option>
                                    <option value="d20">Ecart moyen devis vs facture </option>
                                    <option value="d24">Ecart coût Accord AMEA vs Accord expert adverse </option>
                                    <option value="d25">Ecart coût Accord AMEA vs Accord expert arbitre </option>
                                    <option value="d21">Coût moyen sinistre</option>
                                    <option value="d22">Coût moyen devis</option>
                                    <option value="d23">Coût moyen accord</option>
                                    <option value="d26">Coût moyen expert adverse </option>
                                    <option value="d27">Coût moyen expert arbitre </option>
                                    <option value="d28">Coût moyen réparateur </option>
                                    <option value="d29">Coût moyen pièce Recup</option>
                                    <option value="d30">Coût moyen pièce Adaptable</option>
                                    <option value="d31">Coût moyen pièce Origine</option>
                                    <option value="d52">Cout Reparation</option>
                                    <option value="d33">Nombre de dossiers douteux</option>
                                    <option value="d34">Nombre de dossiers </option>
                                    <option value="d35">Nombre de devis /2eme devis / 3eme devis</option>
                                    <option value="d36">Nombre d'accord/2eme accord / 3eme accord</option>
                                    <option value="d37">Nombre rapport</option>
                                    <option value="d38">Nombre de facture</option>
                                    <option value="d39">Nombre de photos par dossier</option>
                                    <option value="d40">Nombre et délai dossiers cloturés </option>
                                    <option value="d41">Nombre et délai dossiers ouverts</option>
                                    <option value="d42">Nombre de mission en attente docs de base </option>
                                    <option value="d43">Nombre de mission en attente expertise</option>
                                    <option value="d44">Nombre de mission en attente devis</option>
                                    <option value="d45">Nombre mission en attente accord</option>
                                    <option value="d46">Nombre mission en attente expertise après réparation </option>
                                    <option value="d47">Nombre mission en attente facture </option>
                                    <option value="d48">Nombre mission en attente rapport</option>

                                </select>
                                @error('formule')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>


                            <div class="col-md-12 mt-5">
                                <button id="Chart" style="float:right" class="btn btn-outline-primary"
                                    type="submit">
                                    Search
                                </button>
                                <button type="submit" style="float:left" id="Export" class="btn btn-success"> Export
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div id="stats" class="row ">
            <div class="card">
                <div class="card-body">

                    <div class="col-12">
                        <div id="lined" class="col-8">
                            <canvas id="linechart"></canvas>
                        </div>
                        <div style="display:none" id="bar" class="col-12">
                            <div class="col-8">
                                <canvas id="barchart"> </canvas>
                            </div>
                        </div>
                        <div style="" id="donut" class="col-12">
                            <div class="col-6" style="max-width: 500px;max-height:500px">
                                <canvas  id="piechart"> </canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection
    @section('script')
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script>
            /////////////////////////////////////////////
            const ctx = document.getElementById('linechart');
            var myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: [],
                    datasets: [{
                        label: '',
                        data: [],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
            ///////////////////////////////////////////
            const data = {
                labels: [],
                datasets: [{
                        label: '',
                        data: [],
                        backgroundColor: [
                            'rgba(255, 26, 104, 1)',

                        ],
                        borderColor: [
                            'rgba(255, 26, 104, 1)',
                        ],
                        borderWidth: 1
                    },
                    {
                        label: '',
                        data: [],
                        backgroundColor: [

                            'rgba(75, 192, 192, 0.2)',

                        ],
                        borderColor: [

                            'rgba(75, 192, 192, 0.2)',

                        ],
                        borderWidth: 1
                    }
                ]
            };
            // config
            const config = {
                type: 'bar',
                data,
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            };
            // render init block
            const barchart = new Chart(
                document.getElementById('barchart'),
                config
            );
            //////////////////////////////////////////////////////////////

            const datapie = {
                labels: [

                ],
                datasets: [{
                    label: '',
                    data: [],
                    backgroundColor: [
                        'rgb(255, 125, 99)',
                        'rgb(54, 162, 235)',
                        'rgb(255, 205, 86)'
                    ],
                    hoverOffset: 4
                }]
            };

            const config2 = {
                type: 'pie',
                data: datapie
            };
            const piechart = new Chart(
                document.getElementById('piechart'),
                config2
            );
            console.log(piechart);
            ///////////////////////////////////////
            $(document).ready(function() {


                $('#brand_id').on('change', function() {
                    var brand_id = this.value;
                    // $("#state-dd").html('');
                    $.ajax({
                        url: '/Vehicule/' + brand_id,
                        type: 'get',
                        success: function(result) {
                            $('#vehicule_model_id').html(
                                '<option  value="">Selectionner Modele </option>');
                            $.each(result, function(key, value) {

                                $("#vehicule_model_id").append('<option  value="' + value
                                    .id + '">' + value.name + '</option>');
                            });
                        }
                    });
                });
                const array = [];
                $('#Export').on('click', function() {
                    console.log(1);
                    $('#submitindex').val("1");

                });
                $('#Chart').on('click', function() {
                    $('#submitindex').val("2");

                });

                $('#myForm').on('submit', function(e) {
                    e.preventDefault();

                    var formData = $(this).serialize();
                    let index = document.getElementById('submitindex').value;
                    if (index == 1) {
                        $.ajax({
                            url: '/Statistique/All',
                            type: 'post',
                            data: formData,
                            xhrFields: {
                                responseType: 'blob'
                            },
                            success: function(response) {
                                var a = document.createElement('a');
                                var url = window.URL.createObjectURL(response);
                                a.href = url;
                                a.download = 'dossiers.xlsx';
                                a.click();
                                window.URL.revokeObjectURL(url);
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                console.log(textStatus, errorThrown);
                            }
                        });
                    } else {
                        $.ajax({
                            url: '/Statistique/All',
                            type: 'post',
                            data: formData,
                            dataType: "json",

                            success: function(response) {
                                console.log(response);
                                if (response[3] == 1) {
                                    document.getElementById("lined").style.display = "inline";
                                    document.getElementById("bar").style.display = "none";
                                    document.getElementById("donut").style.display = "none";

                                    myChart.data.labels = response[1];
                                    myChart.data.datasets[0].data = response[0];
                                    myChart.data.datasets[0].label = response[2];

                                    myChart.update();
                                } else
                                if (response[3] == 2) {
                                    document.getElementById("lined").style.display = "none";
                                    document.getElementById("bar").style.display = "inline";
                                    document.getElementById("donut").style.display = "none";
                                    barchart.data.labels = response[2];
                                    barchart.data.datasets[0].data = response[0];
                                    barchart.data.datasets[1].data = response[1];
                                    barchart.data.datasets[0].label = response[4];
                                    barchart.data.datasets[1].label = response[5];
                                    barchart.update();
                                } else
                                if (response[3] == 5) {

                                    document.getElementById("lined").style.display = "none";
                                    document.getElementById("bar").style.display = "none";
                                    document.getElementById("donut").style.display = "inline";
                                    // piechart.data.datasets[0].label = 'Main Oeuvre';
                                    // piechart.data.datasets[1].label = 'Fourniture';
                                    // piechart.data.datasets[2].label = 'Peinture';
                                    piechart.data.labels = ['Main Oeuvre','Peinture','Fourniture'];

                                    piechart.data.datasets[0].data = [response[0],response[1],response[2]];




                                    piechart.update();

                                }



                            },

                            error: function(jqXHR, textStatus, errorThrown) {
                                console.log(textStatus, errorThrown);
                            }
                        });
                    }



                });
            });
        </script>
    @endsection
