@extends('mattine.layouts.app')

@section('content')
<div class="container-fluid dashboard-content ">
    <!-- ============================================================== -->
    <!-- pageheader  -->
    <!-- ============================================================== -->
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="page-header">
            <h2 class="pageheader-title">{{__('Tableau de bord')}}</h2> Heure de clôture : {{$store->cloture}} H
                <p class="pageheader-text">Nulla euismod urna eros, sit amet scelerisque torton lectus vel mauris facilisis faucibus at enim quis massa lobortis rutrum.</p>
                <div class="page-breadcrumb">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <!--                            <li class="breadcrumb-item"><a href="#" class="breadcrumb-link">Dashboard</a></li>
                                                        <li class="breadcrumb-item active" aria-current="page">E-Commerce Dashboard Template</li>                        -->
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <!-- ============================================================== -->
    <!-- end pageheader  -->
    <!-- ============================================================== -->
    <div class="ecommerce-widget">

        <div class="row">
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
                <div class="card">
                    <div class="card-body">

                    <h5 class="text-muted">{{__("Revenue Aujourd'hui")}}</h5>
                        <div class="metric-value d-inline-block">
                            <img src="{{asset('images/coin1.png')}}" alt="image" class="rounded" width="45">
                        </div>
                        <div class="metric-value d-inline-block">
                        <h1 class="mb-1">{{$sales_today}} {{__('DH')}}</h1>

                        </div>

                    </div>
                    <div id="sparkline-revenu">
                        @if($percent_day>0)
                        <div class="metric-label d-inline-block align-items-center text-success font-weight-bold">
                            <img src="{{asset('images/happyface.png')}}" alt="image" class="rounded" width="45">
                            <span><i class="fa fa-fw fa-arrow-up"></i></span><span>{{ round($percent_day, 2) }}%</span>
                        </div>
                        @elseif($percent_day<0)
                        <div class="metric-label d-inline-block align-items-center text-danger font-weight-bold">
                            <img src="{{asset('images/sad.png')}}" alt="image" class="rounded" width="45">
                            <span><i class="fa fa-fw fa-arrow-down"></i></span><span>{{ round($percent_day, 2) }}%</span>
                        </div>
                        @else
                        <div class="metric-label d-inline-block align-items-center text-info font-weight-bold">
                            <img src="{{asset('images/neutral.png')}}" alt="image" class="rounded" width="45">
                            <span><i class="fa fa-fw fa-dot-circle"></i></span><span>{{ round($percent_day, 2) }}%</span>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
                <div class="card">
                    <div class="card-body">
                    <h5 class="text-muted">{{__(' Revenue de la Semaine')}}</h5>
                        <div class="metric-value d-inline-block">
                            <img src="{{asset('images/coins.png')}}" alt="image" class="rounded" width="45">
                        </div>
                        <div class="metric-value d-inline-block">
                            <h1 class="mb-1">{{$sales_week}} {{__('DH')}}</h1>
                        </div>

                    </div>
                    <div id="sparkline-revenue2">
                        @if($percent_week>0)
                        <div class="metric-label d-inline-block align-items-center text-success font-weight-bold">
                            <img src="{{asset('images/happyface.png')}}" alt="image" class="rounded" width="45">
                            <span><i class="fa fa-fw fa-arrow-up"></i></span><span>{{ round($percent_week, 2) }}%</span>
                        </div>
                        @elseif($percent_week<0)
                        <div class="metric-label d-inline-block align-items-center text-danger font-weight-bold">
                            <img src="{{asset('images/sad.png')}}" alt="image" class="rounded" width="45">
                            <span><i class="fa fa-fw fa-arrow-down"></i></span><span>{{ round($percent_week, 2) }}%</span>
                        </div>
                        @else
                        <div class="metric-label d-inline-block align-items-center text-info font-weight-bold">
                            <img src="{{asset('images/neutral.png')}}" alt="image" class="rounded" width="45">
                            <span><i class="fa fa-fw fa-dot-circle"></i></span><span>{{ round($percent_week, 2) }}%</span>
                        </div>
                        @endif

                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
                <div class="card">
                    <div class="card-body">
                    <h5 class="text-muted">{{__(' Revenue du Mois')}}</h5>
                        <div class="metric-value d-inline-block">
                            <img src="{{asset('images/coins.png')}}" alt="image" class="rounded" width="45">
                        </div>
                        <div class="metric-value d-inline-block">

                            <h1 class="mb-1">{{$sales_month}} {{__('DH')}} </h1>
                        </div>

                    </div>
                    <div id="sparkline-revenue3">
                        @if($percent_month>0)
                        <div class="metric-label d-inline-block align-items-center text-success font-weight-bold">
                            <img src="{{asset('images/happyface.png')}}" alt="image" class="rounded" width="45">
                            <span><i class="fa fa-fw fa-arrow-up"></i></span><span>{{ round($percent_month, 2) }}%</span>
                        </div>
                        @elseif($percent_month<0)
                        <div class="metric-label d-inline-block align-items-center text-danger font-weight-bold">
                            <img src="{{asset('images/sad.png')}}" alt="image" class="rounded" width="45">
                            <span><i class="fa fa-fw fa-arrow-down"></i></span><span>{{ round($percent_month, 2) }}%</span>
                        </div>
                        @else
                        <div class="metric-label d-inline-block align-items-center text-info font-weight-bold">
                            <img src="{{asset('images/neutral.png')}}" alt="image" class="rounded" width="45">
                            <span><i class="fa fa-fw fa-dot-circle"></i></span><span>{{ round($percent_month, 2) }}%</span>
                        </div>
                        @endif

                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-12">
                <div class="card">
                    <div class="card-body">
                    <h5 class="text-muted">{{__(" Revenue de l'Année")}}</h5>
                        <div class="metric-value d-inline-block">
                            <img src="{{asset('images/bagmoney.png')}}" alt="image" class="rounded" width="45">
                        </div>
                        <div class="metric-value d-inline-block">
                            <h1 class="mb-1">{{$sales_year}} {{__('DH')}}</h1>
                        </div>
                    </div>
                    <div id="sparkline-revenue4">

                        @if($percent_year>0)
                        <div class="metric-label d-inline-block align-items-center text-success font-weight-bold">
                            <img src="{{asset('images/happyface.png')}}" alt="image" class="rounded" width="45">
                            <span><i class="fa fa-fw fa-arrow-up"></i></span><span>{{ round($percent_year, 2) }}%</span>
                        </div>
                        @elseif($percent_year<0)
                        <div class="metric-label d-inline-block align-items-center text-danger font-weight-bold">
                            <img src="{{asset('images/sad.png')}}" alt="image" class="rounded" width="45">
                            <span><i class="fa fa-fw fa-arrow-down"></i></span><span>{{ round($percent_year, 2) }}%</span>
                        </div>
                        @else
                        <div class="metric-label d-inline-block align-items-center text-info font-weight-bold">
                            <img src="{{asset('images/neutral.png')}}" alt="image" class="rounded" width="45">
                            <span><i class="fa fa-fw fa-dot-circle"></i></span><span>{{ round($percent_year, 2) }}%</span>
                        </div>
                        @endif

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

        <div class="row">
            <!-- ============================================================== -->

            <!-- ============================================================== -->

            <!-- recent orders  -->
            <!-- ============================================================== -->
            <div class="col-xl-12 col-lg-12 col-md-6 col-sm-12 col-12">
                <div class="card">
                <h5 class="card-header">{{__('5 Dernières Ventes')}}</h5>
                    <div class="card-body p-0">
                        <div class="table-responsive">

                                <table class="table">

                                    <thead class="bg-light">
                                        <tr class="border-0">
                                            <th class="border-0 d-none">{{__('Numero')}}</th>
                                            {{-- <th class="border-0">{{__('Numero Document')}}</th> --}}
                                            <th class="border-0">{{__('Type')}}</th>
                                            <th class="border-0">{{__('Montant')}}</th>
                                            <th class="border-0">{{__('Date')}}</th>
                                             <th class="border-0">{{__('Client')}}</th>
                                             <th class="border-0">{{__('Utilisateur')}}</th>
                                             <th class="border-0">{{__('Vendeur')}}</th>

                                        </tr>
                                    </thead>
                                    <tbody>

                                        @foreach($ventes as $item)
                                        <tr>

                                            <td class="d-none">
                                                {{$item->numsortie}}
                                            </td>
                                            {{-- <td>{{$item->numdocument}}</td> --}}
                                            <td>
                                                {{$item->type}}
                                            </td>
                                        <td>{{$item->montant}}  {{__('DH')}}</td>
                                            {{-- <td>{{$item->created_at}}</td> --}}
                                            <td>{{  date('d/m/Y H:i:s', strtotime($item->date_))}}</td>

                                            <td>{{$item->client()->first()['name']}}</td>
                                            <td>{{$item->seller}}</td>
                                            <td>{{$item->vendeur}}</td>
                                            <td>
                                                <a href="{{ route('ventes.details', ['locale'=>app()->getLocale(),$store, $item,'from'=>"dashboard"])}}">
                                                    <button class="btn btn-success detailsVente">
                                                        {{__('Détails')}}
                                                    </button>
                                                </a>


                                            </td>



                                        </tr>
                                        @endforeach

                                    </tbody>
                                </table>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ============================================================== -->
            <!-- end recent orders  -->



        </div>
        <div class="row">
            <!-- ============================================================== -->
            <!-- product category  -->
            <!-- ============================================================== -->

            <div class="col-xl-6 col-lg-5 col-md-12 col-sm-12 col-12">
                <div class="card">
                <h5 class="card-header">{{__(' Revenue Par Jour du Mois en Cours (Heure Clôture :')}}{{$store->cloture}} H)</h5>
                    <div >
                            <canvas id="myChart" width="305" height="220"></canvas>
                    </div>
                    <div class="card-footer">
                            @if($percent_month>0)
                            <p class="display-7 font-weight-bold d-none" ><span class="text-primary d-inline-block"></span>
                            <span class="text-success float-right"style="color:#F7F7F7"></span>

                            @elseif($percent_month<0)

                            <span class="text-danger float-right"></span>

                            @else

                            <span class="text-info float-right"></span>

                            @endif
                    </div>
                </div>
            </div>


            <div class="col-xl-6 col-lg-5 col-md-12 col-sm-12 col-12">
                <div class="card">
                    <h5 class="card-header">{{__(' Revenue Par Année')}} </h5>
                    <div>
                        <canvas id="myChart2" width="305" height="220"></canvas>
                    </div>
                    <div class="card-footer">
                        <p class="display-7 font-weight-bold d-none"><span class="text-primary d-inline-block"></span>
                            @if($percent_year>0)

                            <span class="text-success float-right"><i class="fa fa-fw fa-arrow-up"></i>{{ round($percent_year, 2) }}%</span>

                            @elseif($percent_year<0)

                            <span class="text-danger float-right"><i class="fa fa-fw fa-arrow-down"></i>{{ round($percent_year, 2) }}%</span>

                            @else

                            <span class="text-info float-right"><i class="fa fa-fw fa-dot-circle"></i>{{ round($percent_year, 2) }}%</span>

                            @endif

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


        </div>


        <div class="row">

            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="card">
                    <h5 class="card-header">{{__(' Revenue par mois')}} </h5>
                    <div >
                        {{-- <div id="morris_totalrevenue_months"></div> --}}
                        <canvas id="myChart3" width="305" height="190"></canvas>
                    </div>
                    <div class="card-footer">
                        <p class="display-7 font-weight-bold d-none">
                            @if($percent_month>0)

                            <span class="text-success float-right"><i class="fa fa-fw fa-arrow-up"></i>{{ round($percent_month, 2) }}%</span>

                            @elseif($percent_month<0)

                            <span class="text-danger float-right"><i class="fa fa-fw fa-arrow-down"></i>{{ round($percent_month, 2) }}%</span>

                            @else

                            <span class="text-info float-right"><i class="fa fa-fw fa-dot-circle"></i>{{ round($percent_month, 2) }}%</span>

                            @endif
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="card">
                    <h5 class="card-header">{{__(' Revenue par jour du Mois en Cours (Heure Clôture :')}}{{$store->cloture}} H) </h5>
                    <div >
                        {{-- <div id="morris_totalrevenue_currentmonth"></div> --}}
                        <canvas id="myChart4" width="305" height="170"></canvas>
                    </div>
                    <div class="card-footer">
                        <p class="display-7 font-weight-bold d-none">
                            @if($percent_day>0)

                            <span class="text-success float-right"><i class="fa fa-fw fa-arrow-up"></i>{{ round($percent_day, 2) }}%</span>

                            @elseif($percent_day<0)

                            <span class="text-danger float-right"><i class="fa fa-fw fa-arrow-down"></i>{{ round($percent_day, 2) }}%</span>

                            @else

                            <span class="text-info float-right"><i class="fa fa-fw fa-dot-circle"></i>{{ round($percent_day, 2) }}%</span>

                            @endif
                        </p>

                    </div>
                </div>
            </div>
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="card">
                    <h5 class="card-header">{{__('Suivi Vente Par Heure')}} </h5>
                    <div>
                        {{-- <div id="morris_totalrevenue_day"></div> --}}
                        <canvas id="myChart5" width="305" height="185"></canvas>

                    </div>
                    <div class="card-footer">
                        <p class="display-7 font-weight-bold d-none">
                            @if($percent_day>0)

                            <span class="text-success float-right"><i class="fa fa-fw fa-arrow-up"></i>{{ round($percent_day, 2) }}%</span>

                            @elseif($percent_day<0)

                            <span class="text-danger float-right"><i class="fa fa-fw fa-arrow-down"></i>{{ round($percent_day, 2) }}%</span>

                            @else

                            <span class="text-info float-right"><i class="fa fa-fw fa-dot-circle"></i>{{ round($percent_day, 2) }}%</span>

                            @endif
                        </p>

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

    </div>

</div>
@endsection

@section('javascript')
<script>
    //
// ==============================================================
    // Revenue By Categories
    // ==============================================================
    // revenueByYear


    // var chart = c3.generate({
    // bindto: "#c3chart_category",
    //         data: {
    //         columns: [@foreach($cats as $c) ["{{$c->designation}}", "{{$c->numbersarticles}}"], @endforeach

    //         ],
    //                 type: 'donut',
    //                 tooltip:true,
    //                 onclick: function(d, i) { console.log("onclick", d, i); },
    //                 onmouseover: function(d, i) { console.log("onmouseover", d, i); },
    //                 onmouseout: function(d, i) { console.log("onmouseout", d, i); },
    //         },
    // });
    // ==============================================================
    // Total Revenue
    // ==============================================================
    mois=["January","February","March","April","May","June","July","August","September","October","November","December"];
    labelsmoi=["Janvier","février","Mars","Avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre"];
    labelsmoiar=["يناير","فبراير"," مارس","أبريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"];
    labelsmoies=["enero","febrero"," marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre"];
    console.log("{{app()->getLocale()}}");
    if("{{app()->getLocale()}}"=="ar")
    {
        labelsmoi= labelsmoiar;
    }
    if("{{app()->getLocale()}}"=="es")
    {
        labelsmoi= labelsmoies;
    }
    sommeparmois=[0,0,0,0,0,0,0,0,0,0,0,0]

        @foreach($revenueByMonths as $r)
        for (i = 0; i < mois.length; i++)
         {
        if("{{$r->month_name}}"==mois[i])
        {
            sommeparmois[i]="{{$r->somme}}";
        }

        }
        @endforeach

   let liste = [
  {
    x: mois[0],
    y: sommeparmois[0],
  },
  {
    x: mois[1],
    y: sommeparmois[1],
  },
  {
    x: mois[2],
    y: sommeparmois[2],
  },
  {
    x: mois[3],
    y: sommeparmois[3],
  },
  {
    x: mois[4],
    y: sommeparmois[4],
  },
  {
    x: mois[5],
    y: sommeparmois[5],
  },
  {
    x: mois[6],
    y: sommeparmois[6],
  },
  {
    x: mois[7],
    y: sommeparmois[7],
  },
  {
    x: mois[8],
    y: sommeparmois[8],
  },
  {
    x: mois[9],
    y: sommeparmois[9],
  },
  {
    x: mois[10],
    y: sommeparmois[10],
  },
  {
    x: mois[11],
    y: sommeparmois[11],
  },
];
if("{{app()->getLocale()}}"=="ar")
{label='الربح شهريا';}
if("{{app()->getLocale()}}"=="es")
{label='beneficio por mes';}
if("{{app()->getLocale()}}"=="fr")
{label='Revenue par mois';}
    var ctx2 = document.getElementById('myChart3').getContext('2d');
    var chart = new Chart(ctx2, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels:labelsmoi,
        datasets: [{
            label:label,
            backgroundColor: '#6069EA',
            borderColor: '#273BEA',
            data:sommeparmois
        }]
    },

    // Configuration options go here
    options: {responsive: true,
   }
});
var labels=[];
    var data=[];
    function zeroPadded(val) {
        if (val >= 10)
            return val;
        else
            return '0' + val;
    }

    date = new Date();


        @foreach ($collection as $key => $item)
        date_1 =  zeroPadded("{{$key}}")+ "/" + zeroPadded(date.getMonth()+1) + "/" + date.getFullYear();
        labels.push(date_1);
        data.push("{{$item}}");
        @endforeach
        labels.reverse();
        data.reverse();
        // console.log(labels);
        // console.log(data);


        if("{{app()->getLocale()}}"=="ar")
{label='ربح يومي لهذا الشهر';}
if("{{app()->getLocale()}}"=="es")
{label='beneficio por mes';}
if("{{app()->getLocale()}}"=="fr")
{label='Revenue par jour de ce mois';}
var ctx4 = document.getElementById('myChart4').getContext('2d');
    var chart = new Chart(ctx4, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels:labels,
        datasets: [{
            label: label,
            backgroundColor: '#4bde4b',
            borderColor: '#228B22',
            data:data
        }]
    },

    // Configuration options go here
    options: { responsive: true,}
});

if("{{app()->getLocale()}}"=="ar")
{label='الربح';}
if("{{app()->getLocale()}}"=="es")
{label='beneficio (euro)';}
if("{{app()->getLocale()}}"=="fr")
{label="Revenue d'aujourd'hui (DH)";}
    var ctx5 = document.getElementById('myChart5').getContext('2d');
    var chart = new Chart(ctx5, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: [@foreach($revenueCurrentDay as $r) "{{date('H:i:s', strtotime($r->date_))}}", @endforeach],
        datasets: [{
            label: label,
            backgroundColor: '#5F6EFF',
            borderColor: '#273BEA',
            data: [@foreach($revenueCurrentDay as $r) "{{$r->somme}}", @endforeach]
        }]
    },

    // Configuration options go here
    options: {responsive: true,}
});
    // Morris.Area({
    // element: 'morris_totalrevenue_day',
    //         behaveLikeLine: true,
    //         data: [@foreach($revenueCurrentDay as $r) { x:"{{date('H:i:s', strtotime($r->date_))}}", y: "{{$r->somme}}",}, @endforeach],
    //         xkey: 'x',
    //         ykeys: ['y'],
    //         labels: ['Somme'],
    //         postUnits: " DH",
    //         xLabels:"houre",
    //         parseTime:false,
    //         yLabelFormat:function (x) { return x.toLocaleString("fr-FR") + ' DH'; },
    //         lineColors: ['#5F6EFF'],
    //         resize: true

    // });
if("{{app()->getLocale()}}"=="ar")
{label='الربح';}
if("{{app()->getLocale()}}"=="es")
{label='beneficio';}
if("{{app()->getLocale()}}"=="fr")
{label="Revenue d'aujourd'hui ";}
    var ctx = document.getElementById("myChart");
    new Chart(ctx, {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [
        {
          label: label,
          backgroundColor: ["#3e95cd", "#e8c3b9","#8e5ea2","#3cba9f","#c45850","#c45850","#FE7F2D","#FCD878","#A1C181","#E5E4E2","#FDBC62","#DEA456","#DEA456","#482728","#F47A33","#B6BE9C","#B6BE9C","#B6BE9C","#162335","#9E553F"],
          data:data
        }
      ]
    },
    options: {
        responsive: true,
      legend: { display: false },
      title: {
        display: true,
       // text: 'Predicted world population (millions) in 2050'
      }
    }
});

if("{{app()->getLocale()}}"=="ar")
{label='الربح';}
if("{{app()->getLocale()}}"=="es")
{label='beneficio';}
if("{{app()->getLocale()}}"=="fr")
{label="Revenue annuel ";}
var ctx2 = document.getElementById("myChart2");
new Chart(ctx2, {
    type: 'bar',
    data: {
      labels: [@foreach ($revenueByYear as $item) {{$item->annee}}, @endforeach],
      datasets: [
        {
          label: label,
          backgroundColor: ["#3e95cd", "#e8c3b9","#8e5ea2","#3cba9f",,"#c45850"],
          data:[@foreach ($revenueByYear as $item) {{$item->somme}}, @endforeach]
        }
      ]
    },
    options: {
        responsive: true,
      legend: { display: false },
      title: {
        display: true,
       // text: 'Predicted world population (millions) in 2050'
      }
    }
});
</script>
@endsection