@extends('layouts.admin')

@section('content')
    <div class="bg-dark-secondary pt-10 pb-21"></div>
    <div class="container-fluid mt-n22 px-6">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-12">
                <!-- Page header -->
                <div>
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="mb-2 mb-lg-0">
                            <h3 class="mb-0  text-white">Welcome {!! Auth::user()->first_name !!} {!! Auth::user()->last_name !!}</h3>
                        </div>
                        <div>
                              <a href="{{ route('admin.utilisateurs.create') }}" class="btn btn-white">➕ {{__('Créer un compte')}}</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- row  -->
        <div class="row mt-6">
            <div class="col-md-12 col-12">
                <!-- card  -->
               @if(session('message')!==null)
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                  <strong> {{session('message')}}</strong>
                
                </div>
                @endif
                <div class="card">
                    <!-- card header  -->
                    <div class="card-header bg-white  py-4">
                        <h4 class="mb-0">{{__('Liste comptes')}}</h4>
                    </div>
                    <!-- table  -->
                     <div class="table-responsive px-2 mt-4">
                    
                         
                        <form method="GET" action="{{ route('admin.utilisateurs.index') }}" class="mb-4 shadow-sm p-3 rounded bg-light">
                            <div class="row g-3">
                                <!-- Search Input -->
                                <div class="col-md-3">
                                    <input type="text" name="keyword" value="{{ request()->keyword }}" class="form-control form-control-lg" placeholder="🔍 Recherche..." aria-label="Search">
                                </div>
                        
                                <!-- Role Filter -->
                                <div class="col-md-3">
                                    <select name="role" class="form-select form-select-lg">
                                        <option value="">👥 Tous les rôles</option>
                                        <option value="1" {{ request()->role == '1' ? 'selected' : '' }}>Administrateur</option>
                                        <option value="0" {{ request()->role == '0' ? 'selected' : '' }}>Utilisateur</option>
                                      
                                    </select>
                                </div>
                              
                        
                            
                             
                                <div class="col-md-12">
                                    <button type="submit" class="btn btn-dark btn-lg w-100">📑 Filtrer</button>
                                </div>
                            </div>
                        </form>
                        
                        <!-- Table -->
                        <table class="table table-striped table-bordered text-nowrap mb-0 mt-2" style="table-layout: fixed; width: 100%;">
                                    <colgroup>
                                        <col style="width: 18%;">
                                        <col style="width: 26%;">
                                        <col style="width: 10%;">
                                        <col style="width: 10%;">
                                        <col style="width: 18%;">
                                        <col style="width: 18%;">
                                        <col style="width: 10%;">
                                    </colgroup>
                            <thead class="table-light">
                                <tr>
                                    <th><a href="{{ route('admin.utilisateurs.index', ['sortBy' => 'first_name', 'orderBy' => request()->orderBy == 'asc' ? 'desc' : 'asc']) }}" class="text-inherit">Nom & Prénom</a></th>
                                    <th><a href="{{ route('admin.utilisateurs.index', ['sortBy' => 'email', 'orderBy' => request()->orderBy == 'asc' ? 'desc' : 'asc']) }}" class="text-inherit">Email</a></th>
                                    <th><a href="{{ route('admin.utilisateurs.index', ['sortBy' => 'role', 'orderBy' => request()->orderBy == 'asc' ? 'desc' : 'asc']) }}" class="text-inherit">{{ __('Role') }}</a></th>
                                    <th>{{ __('Abonné') }}</a></th>
                                    <th><a href="{{ route('admin.utilisateurs.index', ['sortBy' => 'created_at', 'orderBy' => request()->orderBy == 'asc' ? 'desc' : 'asc']) }}" class="text-inherit">{{ __('Membre depuis') }}</a></th>
                                    <th><a href="{{ route('admin.utilisateurs.index', ['sortBy' => 'last_login', 'orderBy' => request()->orderBy == 'asc' ? 'desc' : 'asc']) }}" class="text-inherit">{{ __('Dernière Connexion') }}</a></th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($utilisateurs as $user)
                                    <tr>
                                        <td class="align-middle">
                                            <a href="{{ route('admin.utilisateurs.edit', $user->id) }}" class="text-inherit text-dark">
                                                <span class="fw-semibold">{{ $user->first_name }} {{ $user->last_name }}</span>
                                            </a>
                                        </td>
                                        <td class="align-middle">
                                            <span class="text-muted">{{ $user->email }}</span>
                                        </td>
                                        <td class="align-middle">
                                            <span class="text-primary">{{ $user->role }}</span>
                                        </td>
                                      <td class="align-middle">
                                            @if($user->hasActiveSubscription())
                                                <span class="badge bg-success text-white" data-bs-toggle="tooltip" data-bs-placement="top" title="Abonné">
                                                    <i class="fas fa-check-circle"></i>
                                                </span>
                                            @else
                                                <span class="badge bg-danger text-white" data-bs-toggle="tooltip" data-bs-placement="top" title="Non abonné">
                                                    <i class="fas fa-times-circle"></i>
                                                </span>
                                            @endif
                                        </td>

                                        <td class="align-middle">
                                            <span>{{date('d/m/Y H:i', strtotime($user->created_at))}}</span>
                                        </td>
                                        <td class="align-middle">
                                            <span>{{ $user->last_login ? $user->last_login : 'N/A' }}</span>
                                        </td>
                                        <td class="align-middle text-center">
                                            <div class="d-flex justify-content-center gap-2">
                                                <a href="{{ route('admin.utilisateurs.edit', $user->id) }}" 
                                                   class="btn btn-outline-dark btn-sm d-flex align-items-center" 
                                                   data-bs-toggle="tooltip" data-bs-placement="top" title="Modifier">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center">Aucune donnée trouvée.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                        
                        <!-- Pagination -->
                        <div class="d-flex justify-content-center mt-3">

                            {{ $utilisateurs->appends(request()->query())->links('layouts.partials.admin.pagination.simple') }}
                        </div>

                    </div>
                    <!-- card footer  -->
               
                </div>

            </div>
        </div>

@push('scripts')

<script>

$(document).ready(function() {
    $('.jsdatatable').DataTable({
        "paging": false,
        "info": false,
        "searching": false
    });
});

</script>
@endpush
@endsection