@extends('layouts.app')

@section('title', '| Utilisateurs')

@section('content')

<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">Membres</h1>
    <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-download fa-sm text-white-50"></i> Generer un rapport</a>
    <a href="{{ route('welcome') }}" class="d-none d-sm-inline-block btn btn-sm btn-success shadow-sm"><i class="fas fa-user fa-sm text-white-50"></i>Ajouter un membre</a>
</div>

<!-- DataTales Example -->
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Liste de membres de FOSDAF</h6>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>Nom</th>
                        <th>Prénoms</th>
                        <th>Email</th>
                        <th>Date de naissance</th>
                        <th>Téléphone</th>
                        <th>Pays de résidence</th>
                        <th>Nationalité</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Nom</th>
                        <th>Prénoms</th>
                        <th>Email</th>
                        <th>Date de naissance</th>
                        <th>Téléphone</th>
                        <th>Pays de résidence</th>
                        <th>Nationalité</th>
                        <th>Actions</th>
                    </tr>
                </tfoot>
                <tbody>
                    @foreach($suscribers as $suscriber)
                    <tr>
                        <td>{{ $suscriber->lastName }}</td>
                        <td>{{ $suscriber->firstNames }}</td>
                        <td>{{ $suscriber->email }}</td>
                        <td>{{ $suscriber->birthday }}</td>
                        <td>{{ $suscriber->phone }}</td>
                        <td>{{ $suscriber->country }}</td>
                        <td>{{ $suscriber->nationality }}</td>
                        <td>
                            <a href="{{ route('suscriber.show', Crypt::encrypt($suscriber->id))}}" class="btn btn-info btn-circle">
                                <i class="fa fa-info-circle"></i>
                            </a>
                            <a href="#" data-toggle="modal" data-target="#editAlerte{{$suscriber->id}}" class="btn btn-primary btn-circle">
                                <i class="fa fa-pencil-alt"></i>
                            </a>
                            <a href="#" data-toggle="modal" data-target="#deleteAlerte{{$suscriber->id}}" class="btn btn-danger btn-circle">
                                <i class="fas fa-trash"></i>
                            </a>
                        </td>
                        <!-- edit alerte Modal-->
                        <div class="modal fade" id="editAlerte{{$suscriber->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-body">Your going to edit {{ $suscriber->lastName}} role. Do you want to continue?</div>
                                    <div class="modal-footer">
                                        <button class="btn btn-secondary btn-icon-split" type="button" data-dismiss="modal">
                                            <span class="icon text-white-50">
                                                <i class="fas fa-arrow-left"></i>
                                            </span>
                                            <span class="text">cancel</span>
                                        </button>
                                        <a href="{{ route('suscriber.edit', Crypt::encrypt($suscriber->id))}}" class="btn btn-success btn-icon-split">
                                            <span class="icon text-nbcj-50">
                                                <i class="fas fa-check"></i>
                                            </span>
                                            <span class="text">Ok</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- delete alerte Modal-->
                        <div class="modal fade" id="deleteAlerte{{$suscriber->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-body">Your going to delete {{ $suscriber->lastName}} role. Do you want to continue?</div>
                                    <div class="modal-footer">
                                        <button class="btn btn-secondary btn-icon-split" type="button" data-dismiss="modal">
                                            <span class="icon text-white-50">
                                                <i class="fas fa-arrow-left"></i>
                                            </span>
                                            <span class="text">cancel</span>
                                        </button>
                                        <a href="{{ route('suscriber.delete', Crypt::encrypt($suscriber->id))}}" class="btn btn-success btn-icon-split">
                                            <span class="icon text-nbcj-50">
                                                <i class="fas fa-check"></i>
                                            </span>
                                            <span class="text">Ok</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection

@push('js')
<!-- Page level plugins -->
<script src="{{ asset('assets/vendor/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>

<!-- Page level custom scripts -->
<script src="{{ asset('assets/js/demo/datatables-demo.js') }}"></script>
@endpush