@extends('layout')

@inject('carbon', 'Carbon\Carbon')

@section('content')
    <div class=" page-header-light" style="border-radius: 0px;">
        <div class="d-flex justify-content-between align-items-center mx-3 my-1">
            <div class="d-flex flex-column tailwind-scope">
                <h4 class="text-white text-2xl font-bold mb-1">Equipe & Accés</h4>
                <p class="text-white text-sm">Gestion des utilisateurs</p>
            </div>
            @include('shared.navbar')
        </div>
    </div>
    <div class="content">
        <div class="d-flex">
            <a href="{{ route('user.create') }}" class="button button-success  ml-auto">
                <i class="icon-add mr-1"></i> Ajouter un utilisateur
            </a>
        </div>
        @if(Session::has('success'))
            <div class="alert alert-success">
                {{ Session::get('success') }}
            </div>
        @endif
        <table class="table table-responsive table-striped  wrap">
            <thead>
                <tr>
                    <th class="wider-column">Nom</th>
                    <th class="wider-column">Email</th>
                    <th>Role</th>
                    <th class="wider-column">Mot de passe</th>
                    <th class="wider-column">Créer le</th>
                    <th class="text-center wide-column">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($users as $user)
                    <tr>
                        <td>{{ $user->name }}</td>
                        <td>{{ $user->email }}</td>
                        <td>
                            {{ $user->role }}
                        </td>
                        <td>{{ $user->dispaly_password }}</td>
                        <td>{{ $user->created_at }}</td>
                        <td class="tailwind-scope ">
                            <div class="flex items-center justify-center gap-4">
                                <a href="{{ route('user.edit', $user->id) }}">
                                    <i class="fa-solid fa-pencil text-sm text-gray-500"></i>
                                </a>
                                <button type="button" onclick="openDeleteModal({{ $user->id }})">
                                    <i class="fa-solid fa-trash text-danger text-sm"></i>

                                </button>
                            </div>
                        </td>
                        {{-- <td class="text-center">
                            <div class="list-icons">
                                <div class="dropdown">
                                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                                        <i class="icon-menu9"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <a href="{{ route('user.edit', $user->id) }}" class="dropdown-item"><i
                                                class="icon-file-excel"></i> Modifier</a>
                                        <button type="button" onclick="openDeleteModal({{ $user->id }})" class="dropdown-item">
                                            <i class="icon-fixed-width icon-trash"></i> Supprimer
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </td> --}}
                    </tr>
                @endforeach
            </tbody>
        </table>
        {{--
    </div> --}}
    <!-- /whole row as a control -->
    <div class="swal2-container swal2-center swal2-fade swal2-shown" id="modal1" style="overflow-y: auto;display: none;">
        <div aria-labelledby="swal2-title" aria-describedby="swal2-content" class="swal2-popup swal2-modal swal2-show"
            tabindex="-1" role="dialog" aria-live="assertive" aria-modal="true" style="display: flex;">
            <div class="swal2-header">
                <ul class="swal2-progresssteps" style="display: none;"></ul>
                <div class="swal2-icon swal2-error" style="display: none;">
                    <span class="swal2-x-mark">
                        <span class="swal2-x-mark-line-left"></span>
                        <span class="swal2-x-mark-line-right"></span>
                    </span>
                </div>
                <div class="swal2-icon swal2-question" style="display: none;">?</div>
                <div class="swal2-icon swal2-warning swal2-animate-warning-icon" style="display: flex;">!</div>
                <div class="swal2-icon swal2-info" style="display: none;">i</div>
                <div class="swal2-icon swal2-success" style="display: none;">
                    <div class="swal2-success-circular-line-left" style="background-color: rgb(255, 255, 255);"></div>
                    <span class="swal2-success-line-tip"></span> <span class="swal2-success-line-long"></span>
                    <div class="swal2-success-ring"></div>
                    <div class="swal2-success-fix" style="background-color: rgb(255, 255, 255);"></div>
                    <div class="swal2-success-circular-line-right" style="background-color: rgb(255, 255, 255);"></div>
                </div>
                <img class="swal2-image" style="display: none;">
                <h2 class="swal2-title" id="swal2-title">Êtes-vous sûr?</h2>
                <button type="button" class="swal2-close" style="display: none;">×</button>
            </div>
            <div class="swal2-content">
                <div id="swal2-content" style="display: block;">Vous ne pourrez pas récupérer ces informations!
                </div>
                <input class="swal2-input" style="display: none;"><input type="file" class="swal2-file"
                    style="display: none;">
                <div class="swal2-range" style="display: none;"><input type="range">
                    <output></output>
                </div>
                <select class="swal2-select" style="display: none;"></select>
                <div class="swal2-radio" style="display: none;"></div>
                <label for="swal2-checkbox" class="swal2-checkbox" style="display: none;"><input type="checkbox"></label>
                <textarea class="swal2-textarea" style="display: none;"></textarea>
                <div class="swal2-validationerror" id="swal2-validationerror" style="display: none;"></div>
            </div>
            <div class="swal2-actions" style="display: flex;">
                <form id="formDelete" action="" method="post">
                    {{ csrf_field() }}
                    @method('DELETE')
                    <button type="submit" class="swal2-confirm btn btn-primary" aria-label="">Oui, supprimez-le!
                    </button>
                </form>
                <button type="button" class="swal2-cancel btn btn-light" onclick="closeDeleteModal();" aria-label=""
                    style="display: inline-block;">Annuler
                </button>
            </div>
            <div class="swal2-footer" style="display: none;"></div>
        </div>
    </div>
    </div>
    <script>
        function openDeleteModal(id) {
            document.getElementById("modal1").style.display = "flex";

            document.getElementById("formDelete").action = window.location.href + "/" + id;
        }

        function closeDeleteModal() {
            document.getElementById("modal1").style.display = "none";
        }
    </script>
@endsection