@extends('admin.layouts.default')
@section('content')
 
<div class="content-i">
  <div class="content-box">
    <div class="element-wrapper">
      <div id="messagesContact"></div>
      <div class="element-box">
        <h5 class="form-header">
          Messages reçus
        </h5>
        
        <div class="table-responsive">
          <table id="dataTable1" class="table table-striped table-lightfont">
            <thead>
              <tr>
                <th width="150">Référence de la demande</th>
                <th>Prénom & Nom</th>
                <th>Email</th>
                <th width="400">Objet de la demande</th>
                <th width="200">Date de réception</th>
                <th class="text-center">Répondu</th>
                <th class="text-center">Commentaires</th>
                <th width="100" class="text-center">Action</th>
              </tr>
            </thead>
             
            <tbody>
             @foreach($contacts as $contact)
                
                  <tr>
                    <td>{{ $contact->id }} </td>
                    <td>{{ $contact->prenom }} {{ $contact->nom }} </td>
                    <td>{{ $contact->email }}</td>
                    <td>{{ $contact->objet }}</td>
                    <td>{{ $contact->created_at }}</td>
                    <td action="{{route('admin.contact.answer' ,$contact->id)}}" class="text-center">
                        @php
                            $answered = \App\Models\Contact::find($contact->id)->answered;
                        @endphp
                        <input type="checkbox" id="contact_answered_{{$contact->id}}" {{ $answered ? 'checked':'' }}> 
                    </td>
                    <td align="center">
                      <div class="btn btn-sm btn-primary"
                          data-target="#remarks-contact_{{$contact->id}}" data-toggle="modal">
                          <i class="fa fa-commenting-o"></i>
                      </div>
                      @include(
                          'admin.partials.modals.remarksContact',
                          $contact
                      )
                  </td>
                    <td align="right">
                        <a  href="{{route('admin.contact', $contact->id)}}" class="btn btn-sm btn-primary" target="_blank"><i class="fa fa-eye"></i></a>                        
                        <div class="btn btn-sm btn-danger" data-target="#modal-delete{{$contact->id}}" data-toggle="modal"><i class="fa fa-trash"></i></div>
                        @include('admin.partials.modals.deleteContact', $contact)
                    </td>
                  </tr>
              
              @endforeach

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection
@section('script')
<script type="text/javascript">
var status = 0;
var id = -1 ;
$(document).ready(function() {
    var token = $('meta[name="csrf-token"]').attr('content');
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $(document).on('change', '[id^="contact_answered_"]', function(event) {
        id = $(this).attr('id').split("_").pop();
        $('#messagesContact').hide();
        event.stopPropagation();
        event.preventDefault();
        var w = $(this).parent('td');
        $.ajax({
                url: w.attr('action'),
                method: 'POST',
                header:{
                'X-CSRF-TOKEN': token
                },
                data: {
                    answered: $(this).is(':checked')? '1' : '0'
                }
            })
            .done(function (response) {
                if(response.status == true){
                    status = 1;
                }
            })
            .fail(function (jqXHR, ajaxOptions, thrownError) {
                status = 0;
            });
        
    });
});
$(document).ajaxStop(function () {
  if (status == 1){
    var message = '<div class="alert alert-success alert-block text-center">'+
            '<button type="button" class="close" data-dismiss="alert">x</button>'+
            '<span>Demande de contact n° '+id+' modifiée avec succès</span>'  +
            '</div>' ;
  } 
  else {
    var message = '<div class="alert alert-danger alert-block text-center">'+
        '<button type="button" class="close" data-dismiss="alert">x</button>'+ 
            '<span>Erreur mise à jour de la demande de contact n° '+id+'</span>'+
        '</div>';
  }
  $('#messagesContact').html(message).fadeIn().delay(2500).fadeOut();
});
</script>
@endsection