@extends('admin.layouts.default') 
@section('content')
<div class="content-box">
    <div class="element-wrapper">
        <div id="messagesRejoindre"></div>
        <div class="element-box">
            <h5 class="form-header">
                Demandes reçues 
                </h5>
            <div class="table-responsive">
                <table id="dataTable1" class="table table-striped table-lightfont">
                    <thead>
                        <tr>
                            <th width="70">Référence</th>
                            <th>Prénom & nom</th>
                            <th>Formation</th>
                            <th>Email</th>
                            <th>Ville</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($equipes as $equipe)
                        <tr>
                            <td>{{$equipe->id}}</td>
                            <td>{{$equipe->prenom}} {{$equipe->nom}} </td>
                            <td>{{$equipe->formation}}</td>
                            <td>{{$equipe->email}}</td>
                            <td>{{$equipe->ville}}</td>
                            <td>{{$equipe->created_at}}</td>
                            <td action="{{route('admin.rejoindre_equipe.answer' ,$equipe->id)}}" class="text-center">
                                @php
                                    $answered = \App\Models\RejoindreEquipe::find($equipe->id)->answered;
                                @endphp
                                <input type="checkbox" name="checkbox_answered_{{$equipe->id}}" id="checkbox_answered_{{$equipe->id}}" {{ $answered ? 'checked':'' }}> 
                            </td>
                            <td align="center">
                                <div class="btn btn-sm btn-primary"
                                    data-target="#remarks-equipe_{{$equipe->id}}" data-toggle="modal">
                                    <i class="fa fa-commenting-o"></i>
                                </div>
                                @include(
                                    'admin.partials.modals.remarksEquipe',
                                    $equipe
                                )
                            </td>
                            <td class="text-right">
                                <a href="{{ route('admin.rejoindre_equipe.details', $equipe->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{{$equipe->id}}" data-toggle="modal"><i class="fa fa-trash"></i></div>
                                @include('admin.partials.modals.deleteEquipe', $equipe)
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </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^="checkbox_answered_"]', function(event) {
        id = $(this).attr('id').split("_").pop();
        $('#messagesRejoindre').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 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 n° '+id+'</span>'+
        '</div>';
  }
  $('#messagesRejoindre').html(message).fadeIn().delay(2500).fadeOut();
});
</script>
@endsection