@extends("layouts.dashboard")


@section("wrapper")
    <div class="page-wrapper">
        @include("layouts.second-header")

        <div class="card">
            <div class="card-body bg-primary p-1">
                <div class="row m-0">
                   <form class="row" action="@if(Auth::user()->annonceur_id!=null){{ route('dashboard') }}@else{{ route('dashboardc') }} @endif" method="GET">

                       @if($user==null) <div class="col p-0">
                            <select id="annonceurId" name="annonceurId" class="form-control search-slt select2">
                                <option value="">@lang("Annonceur")</option>
                                @foreach ($annonceurs as $annonceur)
                                    {{request()->input('annonceur')==$annonceur->id}}
                                    <option value="{{$annonceur->id}}" @if(request()->input('annonceurId')== $annonceur->id) selected @endif>{{$annonceur->nom_prenoms_contact}}</option>
                                @endforeach
                            </select>
                        </div>@endif
                        <div class="col p-0">
                                    <select id="mois" name="mois" class="form-control search-slt select2">
                                        <option value="" @if(request()->input('mois')==null) selected @endif>@lang("Mois")</option>
                                        <option value="01" @if(request()->input('mois')== "01") selected @endif>@lang("Janvier")</option>
                                        <option value="02" @if(request()->input('mois')== "02") selected @endif>@lang("Fevrier")</option>
                                        <option value="03" @if(request()->input('mois')== "03") selected @endif>@lang("Mars")</option>
                                        <option value="04" @if(request()->input('mois')== "04") selected @endif>@lang("Avril")</option>
                                        <option value="05" @if(request()->input('mois')== "05") selected @endif>@lang("Mai")</option>
                                        <option value="06" @if(request()->input('mois')== "06") selected @endif>@lang("Juin")</option>
                                        <option value="07" @if(request()->input('mois')== "07") selected @endif>@lang("Juillet")</option>
                                        <option value="08" @if(request()->input('mois')== "08") selected @endif>@lang("Aout")</option>
                                        <option value="09" @if(request()->input('mois')== "09") selected @endif>@lang("Septembre")</option>
                                        <option value="10" @if(request()->input('mois')== "10") selected @endif>@lang("Octobre")</option>
                                        <option value="11" @if(request()->input('mois')== "11") selected @endif>@lang("Novembre")</option>
                                        <option value="12" @if(request()->input('mois')== "12") selected @endif>@lang("Decembre")</option>
                                    </select>
                                </div>

                                <div class="col p-0">
			<select id="annee" name="annee" class="form-control search-slt select2">
				<option value="">@lang("annee")</option>
				@foreach ($annees as $annee)
				{{request()->input('annee')==$annee[0]}}
				<option value="{{$annee[0]}}" @if(request()->input('annee')== $annee[0]) selected @endif>{{$annee[0]}}</option>
				@endforeach
			</select>
		</div>


                        <div class="col-auto p-0">
                            <button type="submit" class="btn btn-primary wrn-btn radius-0"><i class="fa fa-search"></i></button>
                        </div>
                    </form>
                </div>
            </div>
<br>
<br>
<br>
<br>
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div style="">
                    <div class="card">
                        <div class="card-body">


                            <div class="row row-cols-1 row-cols-md-2 ">
                                <div class="col">
                                    <div class="card radius-10 border-start border-0 border-3 border-info">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center">
                                                <div>
                                                    <p class="mb-0 text-secondary"> Petites Annonces</p>
                                                    <h4 class="my-1 text-info">@if($nbrepetiteannonce!=null){{$nbrepetiteannonce}}@elseif ($nbrepetiteannonce==0) 0 @endif</h4>
                                                </div>
                                                <div style="margin-left:50px">
                                                    <p class="mb-0 text-secondary"> En attente </p>
                                                    <h4 class="my-1 text-info">@if($nbrepetiteannonceavalider!=null){{$nbrepetiteannonceavalider}}@elseif ($nbrepetiteannonceavalider==0) 0 @endif</h4>
                                                </div>      
                                                <div style="margin-left:50px">
                                                    <p class="mb-0 text-secondary"> Rejetées </p>
                                                    <h4 class="my-1 text-info">@if($nbrepetiteannoncerejetees!=null){{$nbrepetiteannoncerejetees}}@elseif ($nbrepetiteannoncerejetees==0) 0 @endif</h4>
                                                </div>                                                                                             
                                                <div class="widgets-icons-2 rounded-circle bg-gradient-scooter text-white ms-auto"><i class='bx bx-money'></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="card radius-10 border-start border-0 border-3 border-danger">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center">
                                                <div>
                                                    <p class="mb-0 text-secondary">@lang("Reservation") </p>
                                                    <h4 class="my-1 text-danger">@if($nbrereservation!=null){{$nbrereservation}}@elseif ($nbrereservation==0) 0 @endif</h4>
                                                </div>
                                                <div class="widgets-icons-2 rounded-circle bg-gradient-ohhappiness text-white ms-auto"><i class='bx bx-money' ></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div><!--end row-->

                             <br>
                             <div class="row row-cols-2 row-cols-md-2 row-cols-xl-2" >

<div class="col-12 col-lg-4">
    <div class="card radius-10">
        <div class="card-body" style="height: 480px">
            <div class="d-flex align-items-center">
                <div>
                    <h6 class="mb-0">  Evolution petites annonces  </h6>
                </div>
            </div>
            <div class="chart-container-2 mt-4 text-center">
                    @if($datas!=null)
                <div id="container"></div>
                    @endif
            </div>
        </div>

    </div>
</div>
  <div class="col-12 col-lg-4">
    <div class="card radius-10">
        <div class="card-body" style="height: 480px">
            <div class="d-flex align-items-center">
                <div>
                    <h6 class="mb-0"> Evolution réservation </h6>
                </div>
            </div>
            <div class="chart-container-2 mt-4 text-center">
                    @if($datas!=null)
                <div id="container1"></div>
                    @endif
            </div>
        </div>

    </div>
</div>
</div><!--end row-->
                                <div id="container"></div>
                                <div id="container1"></div>
                                <br>



@endsection

@section('script')
  <script>

 $(function() {

     var myArray=[];
  //myArray = [1, 5, 10, 11, 8, 6, 7 ,8 ,9, 10, 2, 2, 2, 2];
  var dates = [];
 // dates = ["11/Nov/16", "11/Dic/16", '11/Jan/2017'];

.forEach((item, index) => {
  console.log(item.y) //value
  myArray[index]=item.y;
  dates[index]=item.name;
  console.log(index) //index
});
 console.log(dates)

        Highcharts.chart('container', {

    title: {
        text: 'Evolution '
    },



    yAxis: {
        title: {
            text: 'Nombre'
        }
    },

    xAxis: {
          title: {
            text: 'Mois'
        },
          tickInterval:1,
            type: 'linear',
            labels: {
               rotation: -33,
                formatter: function () {
                   return dates[this.value];
                }
            },
        },

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },


    series: [{
        name: 'Evolution',
        data:   myArray
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});
        });


 $(function() {

    var myArray1=[];
 //myArray = [1, 5, 10, 11, 8, 6, 7 ,8 ,9, 10, 2, 2, 2, 2];
 var dates1 = [];
// dates = ["11/Nov/16", "11/Dic/16", '11/Jan/2017'];

.forEach((item, index) => {
 console.log(item.y) //value
 myArray1[index]=item.y;
 dates1[index]=item.name;
 console.log(index) //index
});

       Highcharts.chart('container1', {

   title: {
       text: 'Evolution'
   },



   yAxis: {
       title: {
           text: 'Nombre'
       }
   },

   xAxis: {
         title: {
           text: 'Mois'
       },
         tickInterval:1,
           type: 'linear',
           labels: {
              rotation: -33,
               formatter: function () {
                  return dates1[this.value];
               }
           },
       },

   legend: {
       layout: 'vertical',
       align: 'right',
       verticalAlign: 'middle'
   },


   series: [{
       name: 'Evolution',
       data:   myArray1
   }],

   responsive: {
       rules: [{
           condition: {
               maxWidth: 500
           },
           chartOptions: {
               legend: {
                   layout: 'horizontal',
                   align: 'center',
                   verticalAlign: 'bottom'
               }
           }
       }]
   }

});});



var chartEl = document.getElementById("pie-chart");
                                chartEl.height = 25;
    </script>
    <script src="https://code.highcharts.com/highcharts.js"></script>

@endsection