@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);
}

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;
        }
        
        .txtl03 {
            font-size: 10px;
            float: right;
            text-align: right;
            font-weight: 700;
            margin: -2px 10px -5px 0;
        }
        
        .pikiop {
            float: left;
            width: 94%;
            padding: 0 0 0 0px;
        }
        
        .progress {
            height: 15px !important;
        }
        /* 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=27'>
<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">
        <div class="codecl">Code client</div>
        <div class="codecl1">ABC01245</div>
    </div>

    <div class="infocl">
        <div class="codecl">Client</div>
        <div class="codecl1">Said SAidi</div>
    </div>


    <div class="infocl">
        <div class="codecl">Canal</div>
        <div class="codecl1">Superette</div>
    </div>


    <div class="infocl">
        <div class="codecl">Ville</div>
        <div class="codecl1">Casablanca</div>
    </div>


    <div class="infocl">
        <div class="codecl">Situation</div>
        <div class="codecl1" style="color: red;">-1500 Dh</div>
    </div>


    <div class="infocl">
        <div class="codecl">Statut</div>
        <div class="codecl1">Actif</div>
    </div>


    <div class="clr"></div>
</div>
<div class="paddingg">
    <div class="Televe">Historique de commandes</div>
    <div class="clr"></div>
    <div class="lignou5"></div>
    <div class="clr"></div>
    <div class="clr"></div>
    




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




<div class="partidro">



<div class="partfilos">


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


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

    <div class="clienddx12">
        
        <div class="floa1">
            <div class="clienxs2">Nbre de commande</div>
            <div class="clienpsd3">50</div>
        </div>

    </div>

    <div class="clienddx12">
       
        <div class="floa1">
            <div class="clienxs2">Der. commande</div>
            <div class="clienpsd3">10/11/23 à 14:15</div>
        </div>

    </div>
    <div class="clr"></div>
    <div class="vidray"></div>
<div class="clr"></div>
   
    <div class="clr"></div>
    <div class="tyuxtliu">Dernières commandes</div>
    <div class="">
        <div id="example-multiple" class="splide">
            <div class="splide__track">
                <ul class="splide__list">
                    <li class="splide__slide">
                        <div class="card-overlay padx10">
                            <div class="">
                                <div class="txtfac1">Facture N°</div>
                                <div class="txtfa2">F1425585</div>
                                <div class="clr"></div>
                                <div class="lineapa"></div>
                                <div class="clr"></div>
                                <div class="txtfac1">Date</div>
                                <div class="txtfa2">Le 20 oct 2023</div>
                                <div class="clr"></div>
                                <div class="lineapa"></div>
                                <div class="clr"></div>
                                <div class="txtfac1">Montant</div>
                                <div class="txtfa2">4755 Mad</div>

                                <div class="clr"></div>
                                <div class="payexe"><img src="/assets/hamza/close.png" class="checkla">Non Payée</div>
                            </div>
                        </div>
                    </li>

                    <li class="splide__slide">
                        <div class="card-overlay pad10">
                            <div class="">
                                <div class="txtfac1">Facture N°</div>
                                <div class="txtfa2">F1425585</div>
                                <div class="clr"></div>
                                <div class="lineapa"></div>
                                <div class="clr"></div>
                                <div class="txtfac1">Date</div>
                                <div class="txtfa2">Le 20 oct 2023</div>
                                <div class="clr"></div>
                                <div class="lineapa"></div>
                                <div class="clr"></div>
                                <div class="txtfac1">Montant</div>
                                <div class="txtfa2">4755 Mad</div>

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

                    <li class="splide__slide">
                        <div class="card-overlay pad10">
                            <div class="">
                                <div class="txtfac1">Facture N°</div>
                                <div class="txtfa2">F1425585</div>
                                <div class="clr"></div>
                                <div class="lineapa"></div>
                                <div class="clr"></div>
                                <div class="txtfac1">Date</div>
                                <div class="txtfa2">Le 20 oct 2023</div>
                                <div class="clr"></div>
                                <div class="lineapa"></div>
                                <div class="clr"></div>
                                <div class="txtfac1">Montant</div>
                                <div class="txtfa2">4755 Mad</div>

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


                    <li class="splide__slide">
                        <div class="card-overlay pad10">
                            <div class="">
                                <div class="txtfac1">Facture N°</div>
                                <div class="txtfa2">F1425585</div>
                                <div class="clr"></div>
                                <div class="lineapa"></div>
                                <div class="clr"></div>
                                <div class="txtfac1">Date</div>
                                <div class="txtfa2">Le 20 oct 2023</div>
                                <div class="clr"></div>
                                <div class="lineapa"></div>
                                <div class="clr"></div>
                                <div class="txtfac1">Montant</div>
                                <div class="txtfa2">4755 Mad</div>

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



                    <li class="splide__slide">
                        <div class="card-overlay pad10">
                            <div class="">
                                <div class="txtfac1">Facture N°</div>
                                <div class="txtfa2">F1425585</div>
                                <div class="clr"></div>
                                <div class="lineapa"></div>
                                <div class="clr"></div>
                                <div class="txtfac1">Date</div>
                                <div class="txtfa2">Le 20 oct 2023</div>
                                <div class="clr"></div>
                                <div class="lineapa"></div>
                                <div class="clr"></div>
                                <div class="txtfac1">Montant</div>
                                <div class="txtfa2">4755 Mad</div>

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


                    <li class="splide__slide">
                        <div class="card-overlay pad10">
                            <div class="">
                                <div class="txtfac1">Facture N°</div>
                                <div class="txtfa2">F1425585</div>
                                <div class="clr"></div>
                                <div class="lineapa"></div>
                                <div class="clr"></div>
                                <div class="txtfac1">Date</div>
                                <div class="txtfa2">Le 20 oct 2023</div>
                                <div class="clr"></div>
                                <div class="lineapa"></div>
                                <div class="clr"></div>
                                <div class="txtfac1">Montant</div>
                                <div class="txtfa2">4755 Mad</div>

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


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



        <div class="clr"></div>
    </div>
    <div class="clr"></div>
    <div class="clr"></div>
    <div class="vidray"></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">18 000.00 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 class="clientt1">
        <div class="floa2">
            <img src="/assets/hamza/u12.png" class="u10">
        </div>
        <div class="floa1">
            <div class="clientt2">Client</div>
            <div class="clientt3"> Marjane Ain Sebaa</div>
        </div>

    </div>


    <div class="clientt12">
        <div class="floa2">
            <img src="/assets/hamza/u10.png" class="u10">
        </div>
        <div class="floa1">
            <div class="clientt2">Contact</div>
            <div class="clientt3">Rachid Rachidi</div>
        </div>

    </div>



    <div class="clientt12">
        <div class="floa2">
            <img src="/assets/hamza/u14.png" class="u10">
        </div>
        <div class="floa1">
            <div class="clientt2">Ville</div>
            <div class="clientt3">Casablanca</div>
        </div>

    </div>



    <div class="clientt12">
        <div class="floa2">
            <img src="/assets/hamza/u11.png" class="u10">
        </div>
        <div class="floa1">
            <div class="clientt2">Type</div>
            <div class="clientt3"> Grossiste</div>
        </div>

    </div>

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


    <div class="clientt12">
        <div class="floa2">
            <img src="/assets/hamza/u17.png" class="u10">
        </div>
        <div class="floa1">
            <div class="clientt2">Dernière appel</div>
            <div class="clientt3">Jeudi 10 Nov 2023 à 14:15</div>
        </div>

    </div>


    <div class="clientt12">
        <div class="floa2">
            <img src="/assets/hamza/u18.png" class="u10">
        </div>
        <div class="floa1">
            <div class="clientt2">Dernière visite</div>
            <div class="clientt3">Jeudi 10 Nov 2023 à 14:15</div>
        </div>

    </div>



    <div class="clientt12">
        <div class="floa2">
            <img src="/assets/hamza/u19.png" class="u10">
        </div>
        <div class="floa1">
            <div class="clientt2">Dernière livraison</div>
            <div class="clientt3">Jeudi 10 Nov 2023 à 14:15</div>
        </div>

    </div>



    <div class="clientt12">
        <div class="floa2">
            <img src="/assets/hamza/u15.png" class="u10">
        </div>
        <div class="floa1">
            <div class="clientt2">Situation</div>
            <div class="clientt3">-1500 Dh</div>
        </div>

    </div>

    <div class="clientt12">
        <div class="floa2">
            <img src="/assets/hamza/u16.png" class="u10">
        </div>
        <div class="floa1">
            <div class="clientt2">Statut</div>
            <div class="clientt3">Active</div>
        </div>

    </div>

    <div class="clientt19">
        <div class="floa2">
            <img src="/assets/hamza/callo.png" class="callo">
        </div>
        <div class="floa1">
            <div class="clientt13"> Appeler</div>
            <div class="clientxy13"> 0661 33 43 93</div>
        </div>

    </div>


    <div class="clientt20">
        <div class="floa2">
            <img src="/assets/hamza/callo2.png" class="callof14">
        </div>
        <div class="floa1">
            <div class="clientt13"> </div>
        </div>

    </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 data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', '');
    data.addColumn('number', '');

    data.addRows([
        [0, 0, 0],
        [1, 10, 10000],
        [2, 23, 20000],
        [3, 17, 30000],
        [4, 18, 40000],
        [5, 9, 10000],
        [6, 11, 30000],

    ]);

    var options = {
        hAxis: {
            title: 'Time'
        },
        vAxis: {
            title: 'Popularity'
        },
        colors: ['#fff', '#097138']
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
</script>

@endsection