@extends('admin.layouts.default') @section('content')
<div class="content-i">
    <div class="content-box">
        <div class="element-wrapper">
            <div id="messagesPro"></div>
            <div class="element-box">
                <h5 class="form-header">
                    Demandes professionnelles 
                </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>Prenom & Nom</th>
                                <th>Societe</th>
                                <th>Email</th>
                                <th>Date de réception</th>
                                <th class="text-center">Répondu</th>
                                <th class="text-center">Commentaires</th>
                                <th class="text-center">action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($professionnels as $p)
                            <tr>
                                <td>{{ $p->id }} </td>
                                <td>{{ $p->prenom }} {{ $p->nom }} </td>
                                <td>{{ $p->societe }}</td>
                                <td>{{ $p->email }}</td>
                                <td>{{ $p->created_at }}</td>
                                <td action="{{route('admin.professionnel.answer' ,$p->id)}}" class="text-center">
                                    @php
                                        $answered = \App\Models\Professionnel::find($p->id)->answered;
                                    @endphp
                                    <input type="checkbox" id="pro_answered_{{$p->id}}" {{ $answered ? 'checked':'' }}> 
                                </td>
                                <td align="center">
                                    <div class="btn btn-sm btn-primary"
                                        data-target="#remarks-pro_{{$p->id}}" data-toggle="modal">
                                        <i class="fa fa-commenting-o"></i>
                                    </div>
                                    @include(
                                        'admin.partials.modals.remarksPro',
                                        $p
                                    )
                                </td>
                                <td align="right">
                                    <a href="{{route('admin.professionnel', $p->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{{$p->id}}" data-toggle="modal"><i class="fa fa-trash"></i></div>
                                    @include('admin.partials.modals.deleteProfessionnel', $p)
                                </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^="pro_answered_"]', function(event) {
        id = $(this).attr('id').split("_").pop();
        $('#messagesPro').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 professionnelle 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 professionnelle n° '+id+'</span>'+
        '</div>';
  }
  $('#messagesPro').html(message).fadeIn().delay(2500).fadeOut();
});
</script>
@endsection