@extends('layouts.layout')


@section('content')
    <div class='content-wrapper'>
        <!-- Content Header (Page header) -->
        <section class='content-header'>
            <div class='container-fluid'>
                <div class='row mb-2'>
                    <div class='col-sm-6'>
                        <h1>Réclamation</h1>
                    </div>
                    <div class='col-sm-6'>
                        <ol class='breadcrumb float-sm-right'>
                            <li class='breadcrumb-item'><a href='#'>Home</a></li>
                            <li class='breadcrumb-item active'>Réclamation</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class='content'>
            <div class='container-fluid'>

                <!-- Timelime example  -->
                <div class='row'>
                    <div class='col-md-12' id="mondiv">
                        @foreach($reclamations as $reclamation)
                            <!-- The time line -->
                            <div class='timeline'>
                                <!-- timeline time label -->
                                <div class='time-label'>
                                    <span class='bg-red'>{{ $reclamation->created_at }}</span>
                                </div>
                                <!-- /.timeline-label -->
                                <!-- timeline item -->
                                <div>
                                    <i class='fas fa-envelope bg-blue'></i>
                                    <div class='timeline-item'>
                                        {{--<span class='time'><i class='fas fa-clock'></i> 12:05</span>--}}
                                        <h3 class='timeline-header'><a href='#'> {{ $reclamation->categorie->nom }}</a> </h3>

                                        <div class='timeline-body'>
                                            <ul class='products-list product-list-in-card pl-2 pr-2'>
                                                <li class='item'>
                                                    <div class='product-img'>
                                                        @if($reclamation->image)
                                                        <img src='{{ $reclamation->image }}' alt='Product Image' style='height: 110px; width: 75px;'>
                                                        @else
                                                            <img src='{{ asset('image/reclamer.png') }}' alt='Product Image' style='height: 110px; width: 75px;'>
                                                        @endif
                                                    </div>
                                                    <div class='product-info'>
                                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:void(0)' class='product-title'>{{ $reclamation->categorie->nom }}
                                                            @if($reclamation->etat)
                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class='badge badge-success float-right'>Approuvé</span></a>
                                                            @else
                                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class='badge badge-danger float-right'>Non approuvé</span></a>
                                                            @endif
                                                        <br>
                                                        @if($reclamation->traite)
                                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class='badge badge-success float-right'>Traité</span></a>
                                                        @else
                                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class='badge badge-danger float-right'>Non traité</span></a>
                                                        @endif
                                                            <span class='product-description'>
                                                           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ $reclamation->description }}
                                                          </span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class='timeline-footer'>
                                            <p><i class='far fa-user'></i> {{ $reclamation->citoyen->prenom }} {{ $reclamation->citoyen->nom }}, <i class='fas fa-mobile-alt'></i> {{ $reclamation->citoyen->telephone }} </p>
                                            <a class='btn btn-primary btn-sm' href='{{ route('reclamations.show',[$reclamation->id]) }}'>
                                                Détail
                                            </a>
                                            @if(!$reclamation->etat)  <a class='btn btn-warning btn-sm' href='{{ route('reclamation.valider',[$reclamation->id]) }}'>Approuver</a>@endif
                                            @if($reclamation->etat and !$reclamation->traite)  <a class='btn btn-success btn-sm' href='{{ route('reclamation.traitement',[$reclamation->id]) }}'>Traité</a>@endif
                                        </div>
                                    </div>
                                </div>
                                <!-- END timeline item -->
                                <div>
                                    <i class='fas fa-clock bg-gray'></i>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    {{ $links }}
                    <!-- /.col -->
                </div>
            </div>
            <!-- /.timeline -->

        </section>
        <!-- /.content -->
    </div>
@endsection
@section('script')
  {{--  <script type='text/javascript'>

     setInterval (function() {

           $.ajax({
               type: 'GET',
               url: '/une-reclamation/ajax' ,
               success: function (data) {

                       //console.log(data[0].data);
                   var contenu = "<div class='col-md-12' id='tondiv'> jhbjh ";
                   $.each(data[0].data, function(i, obj) {
                       var  image;
                       var etat;

                       if(obj.image){
                            image ="<img src="+obj.image+" alt='Product Image' style='height: 110px; width: 75px;'>";
                       }else{
                             image =  image ="<img src='/image/reclamer.png' alt='Product Image' style='height: 110px; width: 75px;'>";
                       }
                       if(obj.etat)
                       etat = " &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:void(0)' class='product-title'>"+obj.categorie.nom+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class='badge badge-success float-right'>Approuvé</span></a>";
                       else
                           etat =" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href='javascript:void(0)' class='product-title'>"+obj.categorie.nom+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class='badge badge-danger float-right'>Non approuvé</span></a>";

//var nowDate = new Date(obj);
                      // console.log(obj.titre);
                       <!-- The time line -->
                       contenu = contenu + "<div class='timeline'>  <div class='time-label'>  <span class='bg-red'> "+obj.created_at +"</span>"+
                      "</div>  <div> <i class='fas fa-envelope bg-blue'></i>  <div class='timeline-item'> <h3 class='timeline-header'><a href='#'> "+obj.categorie.nom+"</a> </h3>"+
                      "<div class='timeline-body'> <ul class='products-list product-list-in-card pl-2 pr-2'>  <li class='item'>  <div class='product-img'>"+
                       image +
                      "</div> <div class='product-info'>" +
                     etat +
                     " <span class='product-description'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+obj.description +" </span> </div> </li> </ul> </div> <div class='timeline-footer'>"+
                       "<p><i class='far fa-user'></i>"+  obj.citoyen.prenom +' ' + obj.citoyen.nom+ ", <i class='fas fa-mobile-alt'></i> "+ obj.citoyen.telephone +" </p>"+
                       "<a class='btn btn-primary btn-sm' href='/reclamations/"+obj.id+"'>Détail </a> <a class='btn btn-success btn-sm' href='/reclamation/"+obj.id+"'>Approuver</a>"+
                       "</div> </div> </div> <div> <i class='fas fa-clock bg-gray'></i> </div> </div>" ;


                    });
                  // contenu =  contenu + "</div>";
                  // console.log(data[0].data);
                    console.log(contenu);
                   // $('#vehicule_id').val(data.msg.id);
                   $('#mondiv').replaceWith(contenu + "</div>");

               }
           })

   },4000 );

    </script>--}}
@endsection