@extends('layouts.master', ['hide_sidebar' => 'ok'])
@section('title', 'title')
@section('titlePageHeading', '')
@section('content')
    <style>
        ._top-bar {
            display: none !important;
        }

        ._content {
            padding: 10px 10px 10px 10px;
        }

        #wrapper #content-wrapper {
            background-color: #ffffff;
        }

        button {
            font-size: 30px;
            padding: 0px 30px;
            margin: 10px;
            border: 0;
            cursor: pointer;
            color: black;
            text-transform: lowercase;
            border-radius: 10px;
            display: inline-block;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(.86, .01, .15, .99);
        }

        button::before {
            content: "";
            position: absolute;
            z-index: -1;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0;
        }

        /* every gradient button will translate upwards on hover */
        button.gradient:hover {
            color: white;
            box-shadow: 0 5px 35px rgba(0, 0, 0, 0.2);
            transform: translateY(-5px);
        }
    </style>
    <link rel='stylesheet' href='/assets/hamza/styles.css?v=25'>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css'>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>


    <div class="partixau">

        <div class="part2">
            <div class="infocl" style="width: 10%;">
                <div class="codecl">Code client</div>
                <div class="codecl1">&nbsp;{{ $client->code??'----' }}</div>
            </div>

            <div class="infocl"  style="width: 40%;">
                <div class="codecl">Client</div>
                <div class="codecl1">{{ $client->denomination }}</div>
            </div>
            <div class="infocl" style="width: 10%;">
                <div class="codecl">Canal</div>
                <div class="codecl1"> {{ $canal->libelle }}</div>
            </div>
            <div class="infocl" style="width: 15%;">
                <div class="codecl">Ville</div>
                <div class="codecl1">{{ $client->livraisonZone ? $client->livraisonZone->libelle : '------' }}</div>
            </div>

            <div class="infocl" style="width: 13%;">
                <div class="codecl">Situation</div>
                <div class="codecl1" style="color: red;">{{ number_format($client->situation(), 2, ',', ' ') }} Dh</div>
            </div>

            <div class="infocl" style="width: 10%;">
                <div class="codecl">Statut</div>
                <div class="codecl1">{{ $client->statuts_id == 3 ? 'Bloqué' : 'Active' }}</div>
            </div>
            <div class="clr"></div>
        </div>
        <div class="paddingg">
            <div class="Televe">Télévente</div>
            <div class="clr"></div>
            <div class="lignou5"></div>
            <div class="clr"></div>
            <div class="clr"></div>
            <a href="/televente/prise_commande/{{ $clients_id }}/{{ $canals_id }}">
                <button class="btn002 button-two gradient "> <img src="/assets/hamza/cart.png" class="image001">
                    <div class="text001">Prise de commande</div>
                </button>
            </a>

            <button class="button-one gradient btn001"> <img src="/assets/hamza/u1.png" class="image001">
                <div class="text001">Relevé linéaire</div>
            </button>

            <button class="button-one gradient btn001"> <img src="/assets/hamza/u8.png" class="image001">
                <div class="text001">Recouverement</div>
            </button>
            <div class="clr"></div>

            <button class="button-one gradient btn001"> <img src="/assets/hamza/u4.png" class="image001">
                <div class="text001">Enquête de satisfaction</div>
            </button>

            <a href="/televente/qualification_client/{{ $clients_id }}/{{ $canals_id }}">
                <button class="button-one gradient btn001"> <img src="/assets/hamza/u2.png" class="image001">
                    <div class="text001">Qualification Client</div>
                </button>
            </a>            

            <button class="button-one gradient btn001">
                <img src="/assets/hamza/u6.png" class="image001">
                <div class="text001">Inventaire materiel</div>
            </button>
            <div class="clr"></div>


            <a href="/televente/historiques_commandes/{{ $clients_id }}/{{ $canals_id }}">
            <button class="button-one gradient btn001"> <img src="/assets/hamza/u7.png" class="image001">
                <div class="text001">Historique des commandes</div>
            </button>
            </a>

            <button class="button-one gradient btn001"> <img src="/assets/hamza/u5.png" class="image001">
                <div class="text001">Remise cadeaux</div>
            </button>

            <button class="button-one gradient btn001"> <img src="/assets/hamza/u3.png" class="image001">
                <div class="text001">Dashboard</div>
            </button>
            <div class="clr"></div>

             
            
            <a style="margin-top: 30px;" href='{{ URL::previous() }}' class='btn btn-primary btn-icon-split btn-sm'><span class='icon text-white-50'><i class='fas fa-arrow-left'></i></span><span class='text'>Retour</span></a>
    
        </div>
    </div>




    <div class="partidro">



        <div class="partfilos">


            <div class="clr"></div>
            <div class="clientt19">
                <div class="floa2">
                    <img src="/assets/hamza/callo.png" class="callo">
                </div>
                <div class="floa1">
                    <div class="clientt13"> Appeler</div>
                    <a href="tel:{{ $client->tel }}" target="_blank">
                    <div class="clientxy13"> {{ $client->tel }}</div>
                    </a>
                </div>

            </div>

            <div class="clientt20">
                <a href="https://wa.me/212{{ $client->tel }}" target="_blank">
                <div class="">
                    <img src="/assets/hamza/callo2.png" class="callof14">
                </div>
                </a>
                <div class="floa1">
                    <div class="clientt13"> </div>
                </div>

            </div>
            <div class="clr"></div>

            <div class="clientx12">
                <div class="floa2">
                    <img src="/assets/hamza/u17.png" class="u10">
                </div>
                <div class="floa1">
                    <div class="clientt2">Der. appel</div>
                    <div class="clientt3"></div>
                </div>

            </div>

            <div class="clientx13">
                <div class="floa2">
                    <img src="/assets/hamza/u18.png" class="u10">
                </div>
                <div class="floa1">
                    <div class="clientt2">Der. visite</div>
                    <div class="clientt3">{{ $client->dernier_visite() }}</div>
                </div>

            </div>
            <div class="clr"></div>
            <div class="clientx12">
                <div class="floa2">
                    <img src="/assets/hamza/u12x.png" class="u10">
                </div>
                <div class="floa1">
                    <div class="clientt2">Der. commande</div>
                    <div class="clientt3">{{ $client->dernier_cmd() }}</div>
                </div>

            </div>

            <div class="clientx13">
                <div class="floa2">
                    <img src="/assets/hamza/u19.png" class="u10">
                </div>
                <div class="floa1">
                    <div class="clientt2">Der. Livraison</div>
                    <div class="clientt3">{{ $client->dernier_livr() }}</div>
                </div>

            </div>
            <div class="clr"></div>
            <div class="tyuxtliu">Commandes</div>
            <div class="">
                <div id="example-multiple" class="splide">
                    <div class="splide__track">
                        <ul class="splide__list">
                            @foreach($commandes as $commande)
                            <li class="splide__slide">
                                <div class="card-overlay {{ $commande->paye==1?'pad10':'padx10' }}">
                                    <div class="">
                                        <div class="txtfac1">Commande N°</div>
                                        <div class="txtfa2">{{ $commande->n_commande }}</div>
                                        <div class="clr"></div>
                                        <div class="lineapa"></div>
                                        <div class="clr"></div>
                                        <div class="txtfac1">Date</div>
                                        <div class="txtfa2">{{ $commande->date_commande }}</div>
                                        <div class="clr"></div>
                                        <div class="lineapa"></div>
                                        <div class="clr"></div>
                                        <div class="txtfac1">Montant</div>
                                        <div class="txtfa2">{{ $commande->prix_commande }} Mad</div>

                                        <div class="clr"></div>
                                        <div class="payee"><img src="/assets/hamza/check.png" class="checkla">Payée
                                        </div>
                                    </div>
                                </div>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                </div>



                <div class="clr"></div>
            </div>
            <div class="clr"></div>

            <div class="tyuxtliu">chiffre d'affaire moyen</div>


            <div class="backbleu">
                <div class="pikiop">
                    <div class="clr"></div>
                    <div class="txtl"></div>
                    <div class="txtl2"></div>
                    <div class="txtl3">20000</div>
                    <div class="clr"></div>
                    <div class="">
                        <div class="araysi" style="">
                            <div class="progress progress-striped active">
                                <div role="progressbar " style="width: 70%;" class="progress-bar progress-bar-success">
                                    <div class="txtl03"> {{ number_format($client->ca_moy(), 2, ',', ' ') }}  dh</div>
                                </div>

                            </div>
                        </div>
                        <div class="clr"></div>
                    </div>
                    <div class="clr"></div>


                    <div class="clr"></div>
                </div>
                <div class="clr"></div>
            </div>
            <div class="clr"></div>
            <div id="chart_div"></div>

            <div class="clr"></div>

        </div>



    </div>




    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/@splidejs/splide@2.3.2/dist/js/splide.min.js'></script>
    <script src="./script.js"></script>
    <script>
        var splide = new Splide('#example-multiple', {
            perPage: 4,
            gap: '15px',
            lazyLoad: 'nearby',
            preloadPages: 1
        }).mount();

        /*var page = 3;
        splide.on('moved', function() {
            $.ajax({
                url: '' + page + '&per_page=3',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response) {
                        $.each(response.data, function(i, item) {
                            var html =
                                `<li class="splide__slide"><img data-splide-lazy="${item.avatar}" /></li>`;
                            splide.add(html)
                            splide.refresh();
                        })
                        page++;
                    }
                }
            })
        })*/
    </script>
    <script>
        google.charts.load('current', {
            packages: ['corechart', 'line']
        });
        google.charts.setOnLoadCallback(drawLineColors);
    
        function drawLineColors() {
            var commandesChart = {!! json_encode($commandesChart) !!};
    
            var data = new google.visualization.DataTable();
            data.addColumn('date', 'Mois');
            data.addColumn('number', 'Total de Commande');
    
            commandesChart.forEach(function(commande) {
                // La date pour chaque mois (l'année est ici définie à 2000, vous pouvez ajuster si nécessaire)
                var date = new Date(2023, commande.mois - 1);
    
                data.addRow([date, parseFloat(commande.total)]);
            });
    
            var options = {
                hAxis: {
                    title: 'Mois',
                    format: 'MMM'
                },
                vAxis: {
                    title: 'Total de Commande'
                },
                colors: ['#000', '#097138']
            };
    
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
    
    
@endsection