@extends("admins.layout")

@section("css")
    <link rel="stylesheet" href="{{ asset("assets/vendor/datatables/dataTables.bootstrap4.min.css") }}">
    <link rel="stylesheet" href="{{ asset("assets/css/bootstrap-datepicker3.min.css") }}">
@endsection
@section("js")
    <script src="{{ asset("assets/vendor/datatables/jquery.dataTables.min.js") }}"></script>
    <script src="{{ asset("assets/vendor/datatables/dataTables.bootstrap4.min.js") }}"></script>
    <script src="{{ asset("assets/js/bootstrap-datepicker.min.js") }}"></script>
    <script>
        $('#eventListeTable').DataTable();
            $('.datatable').DataTable();
    </script>
    <script src="{{ asset("assets/js/events/main.js") }}"></script>
@endsection

@section("pageContent")

<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="table-responsive">
                <table class="table table-striped table-bordered datatable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Nom</th>
                            <th>Prénoms</th>
                            <th>Type utilisateur</th>
                            <th>Email</th>
                            <th>Téléphone</th>
                            <th>Event</th>
                            <th>Voting</th>
                            <th>Action</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($users as $user)
                            <tr>
                                <td> {{ $user->id }} </td>
                                <td> {{ $user->name }} </td>
                                <td> {{ $user->firstname }} </td>
                                <td>  {{ $user->userType->label }} </td>
                                <td> {{ $user->email }} </td>
                                <td> {{ $user->phone_number }} </td>
                                <td> {{ $user->event->count() }} </td>
                                <td> {{ $user->event->where('vote' , '<>', null)->count()}} </td>

                                <td class="d-flex" style="gap:10px">
                                    <button class="btn bg-success text-light">Show</button>
                                    <button class="btn bg-primary text-light">Edit</button>
                                    <button
                                        data-delete-btn="This action is will delete user with its data. Do you want to proceed ?"
                                        class="btn bg-danger text-light"
                                    >
                                        Delete
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection