@extends('layouts.app')

@section('main-content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="page-title">
                    <h4>Messages
                        <!-- <a href="{{-- route('messages-pdf') --}}" class="btn btn-primary btn-inverse btn-rounded mb-0">PDF</a> <a href="{{-- route('messages-xlsx') --}}" class="btn btn-success btn-inverse btn-rounded mb-0">Excel</a> -->
                    </h4>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-block">
                        @if (count($messages) > 0)
                            <div class="table-overflow">
                                <table class="table message-table" id="message-dataTable">
                                    <thead>
                                        <tr>
                                            <th scope="col"></th>
                                            <th scope="col">Nom</th>
                                            <th scope="col">Objet</th>
                                            <th scope="col">Date</th>
                                            <th scope="col">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($messages as $message)
                                            <tr
                                                class="@if ($message->read_at) border-left-success @else bg-light border-left-warning @endif">
                                                <td scope="row">
                                                    <div class="relative mrg-top-10">
                                                        <span
                                                            class="status @if ($message->read_at) online @else away @endif">
                                                        </span>
                                                    </div>
                                                </td>
                                                <td>{{ $message->name }}</td>
                                                <td>{{ $message->subject }}</td>
                                                <td>{{ $message->created_at->format('F d, Y h:i A') }}</td>
                                                <td>
                                                    <a href="{{ route('messages.show', $message->id) }}"
                                                        class="btn btn-primary btn-sm float-left mr-1"
                                                        style="height:30px; width:30px;border-radius:50%"
                                                        data-toggle="tooltip" title="Voir" data-placement="bottom"><i
                                                            class="fas fa-eye"></i></a>
                                                    <form method="POST"
                                                        action="{{ route('message.destroy', [$message->id]) }}">
                                                        @csrf
                                                        @method('delete')
                                                        <button class="btn btn-danger btn-sm dltBtn"
                                                            data-id={{ $message->id }}
                                                            style="height:30px; width:30px;border-radius:50%"
                                                            data-toggle="tooltip" data-placement="bottom"
                                                            title="Supprimer"><i class="fas fa-trash-alt"></i></button>
                                                    </form>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <nav class="blog-pagination justify-content-center d-flex">
                                    {{ $messages->links() }}
                                </nav>
                            </div>
                        @else
                            <h2>Messagerie vide !</h2>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#message-dataTable').DataTable({
                ordering: false,
                language: {
                    processing: "Traitement en cours...",
                    search: "Rechercher&nbsp;:",
                    lengthMenu: "Afficher _MENU_ &eacute;l&eacute;ments",
                    info: "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                    infoEmpty: "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                    infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                    infoPostFix: "",
                    loadingRecords: "Chargement en cours...",
                    zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    emptyTable: "Aucune donnée disponible dans le tableau",
                    paginate: {
                        first: "Premier",
                        previous: "Pr&eacute;c&eacute;dent",
                        next: "Suivant",
                        last: "Dernier"
                    },
                    aria: {
                        sortAscending: ": activer pour trier la colonne par ordre croissant",
                        sortDescending: ": activer pour trier la colonne par ordre décroissant"
                    }
                }
            });
        })
    </script>

    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $('.dltBtn').click(function(e) {
                var form = $(this).closest('form');
                var dataID = $(this).data('id');
                // alert(dataID);
                e.preventDefault();
                swal({
                        title: "En êtes-vous sûr.e ?",
                        text: "Une fois supprimées, vous ne serais plus capable de retrouver ces données",
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    })
                    .then((willDelete) => {
                        if (willDelete) {
                            form.submit();
                        } else {
                            swal("Vos données sont saines et sauves !");
                        }
                    });
            })
        })
    </script>
@endpush