@extends('layouts.app')
@section('content')

<div class="page-header">
    <div class="add-item d-flex">
        <div class="page-title">
            <h4>Liste des utilisateurs</h4>
            <h6>Gérer tous les utilisateurs</h6>
        </div>
    </div>
    <ul class="table-top-head">
        <li>
            <a href="javascript:void(0);" onclick="location.reload();" data-bs-toggle="tooltip" title="Refresh">
                <i data-feather="rotate-ccw"></i>
            </a>
        </li>
    </ul>
    <div class="page-btn">
        <a href="#" class="btn btn-added" data-bs-toggle="modal" data-bs-target="#add-user">
            <i data-feather="plus-circle" class="me-2"></i>Créer un utilisateur
        </a>
    </div>
</div>

<div class="card table-list-card">
    <div class="card-body">
        @if($users->count() > 0)
            <div class="table-responsive product-list">
                <table class="table datanew" data-order-col="5" data-order-dir="desc">
                    <thead>
                        <tr>
                            <th>Nom</th>
                            <th>Téléphone</th>
                            <th>E-mail</th>
                            <th>Rôle</th>
                            <th>Magasin(s)</th>
                            <th>Crée le</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($users as $user)
                            <tr>
                                <td>{{ Str::limit($user->nom . ' '. $user->prenom, 15, '...') }}</td>
                                <td>{{ $user->telephone }}</td>
                                <td>{{ $user->email }}</td>
                                <td>{{ $user->role->name ?? 'Aucun' }}</td>
                                <td>
                                    @if(strtolower($user->role->name ?? '') === 'gestionnaire')
                                        <span data-bs-toggle="tooltip" title="{{ $user->managedMagasins->pluck('name')->implode(', ') ?: 'Aucun' }}">
                                            {{ Str::limit($user->managedMagasins->pluck('name')->implode(', '), 30, '...') ?: 'Aucun' }}
                                        </span>
                                    @else
                                        {{ $user->magasin->name ?? 'Aucun' }}
                                    @endif
                                </td>
                                <td data-order="{{ $user->created_at->timestamp }}">{{ $user->created_at->translatedFormat('d M Y') }}</td>
                                <td>
                                    <span class="badge {{ $user->status == '1' ? 'bg-success' : 'bg-danger' }}">
                                        {{ $user->status == '1' ? 'Actif' : 'Bloqué' }}
                                    </span>
                                </td>
                                <td class="action-table-data">
                                    <div class="edit-delete-action">
                                        <a class="me-2 edit-icon p-2" href="#" data-bs-toggle="modal" data-bs-target="#edit-user-{{ $user->id }}" title="Modifier">
                                            <i data-feather="edit" class="feather-edit"></i>
                                        </a>
                                        @if($user->id !== Auth::id())
                                            <a class="me-2 p-2 block-icon" href="#" onclick="confirmBlock(event, {{ $user->id }})" data-bs-toggle="tooltip" data-confirm-action="block" data-user-name="{{ $user->nom }} {{ $user->prenom }}" title="Bloquer">
                                                <i data-feather="lock" class="feather-lock"></i>
                                            </a>
                                            <a class="p-2 delete-icon" href="#" onclick="confirmDelete(event, {{ $user->id }})" data-bs-toggle="tooltip" data-confirm-action="delete" data-user-name="{{ $user->nom }} {{ $user->prenom }}" title="Supprimer">
                                                <i data-feather="trash-2" class="feather-trash-2"></i>
                                            </a>
                                            <form id="block-user-{{ $user->id }}" action="{{ route('users.block', $user->id) }}" method="POST" class="d-none">
                                                @csrf
                                            </form>
                                            <form id="delete-user-{{ $user->id }}" action="{{ route('users.destroy', $user->id) }}" method="POST" class="d-none">
                                                @csrf
                                                @method('DELETE')
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @include('users.partials.edit', ['user' => $user])
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            @include('partials.empty-state', [
                'icon' => 'users',
                'title' => 'Aucun utilisateur trouvé',
                'description' => 'Vous n’avez pas encore d’utilisateurs. Créez un nouvel utilisateur pour commencer.',
                'actionModal' => '#add-user',
                'actionLabel' => 'Créer un utilisateur',
            ])
        @endif
    </div>
</div>

@include('users.partials.add')

<style>
    table tbody td.action-table-data a .feather-lock,
    table tbody td.action-table-data a .feather-unlock,
    table tbody td.action-table-data a .feather-trash-2,
    table tbody td.action-table-data a .feather-edit {
        width: 14px;
        height: 14px;
        fill: none !important;
        background: transparent !important;
    }
    table tbody td.action-table-data a.edit-icon:hover .feather-edit {
        color: #ffffff !important;
    }
    table tbody td.action-table-data a.block-icon .feather-lock,
    table tbody td.action-table-data a.delete-icon .feather-trash-2 {
        color: #FF0000;
    }
    table tbody td.action-table-data a.unblock-icon .feather-unlock {
        color: #28a745;
    }
    .edit-delete-action a.block-icon:hover,
    .edit-delete-action a.delete-icon:hover {
        background-color: #FF0000;
        border-color: #FF0000;
    }
    .edit-delete-action a.unblock-icon:hover {
        background-color: #28a745;
        border-color: #28a745;
    }
    .edit-delete-action a.block-icon:hover svg,
    .edit-delete-action a.delete-icon:hover svg {
        color: #ffffff !important;
    }
    .edit-delete-action a.unblock-icon:hover svg {
        color: #ffffff !important;
    }
</style>

<script>
    function getUserName(element) {
        return element.dataset.userName || 'cet utilisateur';
    }

    function confirmBlock(event, userId) {
        event.preventDefault();
        event.stopImmediatePropagation();
        const userName = getUserName(event.currentTarget);
        Swal.fire({
            title: `Bloquer ${userName} ?`,
            html: `<strong>${userName}</strong> ne pourra plus se connecter à l'application.`,
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#d33",
            cancelButtonColor: "#6c757d",
            confirmButtonText: "Oui, bloquer",
            cancelButtonText: "Annuler"
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById(`block-user-${userId}`).submit();
            }
        });
    }

    function confirmDelete(event, userId) {
        event.preventDefault();
        event.stopImmediatePropagation();
        const userName = getUserName(event.currentTarget);
        Swal.fire({
            title: `Supprimer ${userName} ?`,
            html: `Le compte de <strong>${userName}</strong> sera définitivement supprimé.<br>Cette action est <strong>irréversible</strong>.`,
            icon: "error",
            showCancelButton: true,
            confirmButtonColor: "#d33",
            cancelButtonColor: "#6c757d",
            confirmButtonText: "Oui, supprimer",
            cancelButtonText: "Annuler"
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById(`delete-user-${userId}`).submit();
            }
        });
    }
</script>
@endsection