@extends('layouts.admin')

@section('title', 'Admin Users Management')

@push('styles')
<style>
    /* Modern Roles Dropdown */
    .role-dropdown-menu {
        min-width: 280px;
        padding: 0;
        border: none;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        border-radius: 12px;
        overflow: hidden;
    }
    
    .role-dropdown-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 1rem 1.25rem;
        border-bottom: none;
    }
    
    .role-dropdown-header h6 {
        margin: 0;
        font-size: 0.875rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .role-list {
        padding: 0.5rem 0;
        max-height: 300px;
        overflow-y: auto;
    }
    
    .role-item {
        padding: 0;
        margin: 0;
        border: none;
    }
    
    .role-item-form {
        width: 100%;
        margin: 0;
    }
    
    .role-checkbox-wrapper {
        display: flex;
        align-items: center;
        padding: 0.875rem 1.25rem;
        cursor: pointer;
        transition: all 0.2s ease;
        border-left: 3px solid transparent;
    }
    
    .role-checkbox-wrapper:hover {
        background-color: #f8f9fa;
        border-left-color: #667eea;
    }
    
    .role-checkbox-wrapper.assigned {
        background-color: #f0f7ff;
        border-left-color: #0d6efd;
    }
    
    .role-checkbox-wrapper.assigned:hover {
        background-color: #e7f3ff;
    }
    
    .modern-checkbox {
        width: 20px;
        height: 20px;
        border: 2px solid #dee2e6;
        border-radius: 5px;
        margin-right: 0.875rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        flex-shrink: 0;
        position: relative;
    }
    
    .role-checkbox-wrapper.assigned .modern-checkbox {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-color: #667eea;
    }
    
    .modern-checkbox i {
        color: white;
        font-size: 0.75rem;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    
    .role-checkbox-wrapper.assigned .modern-checkbox i {
        opacity: 1;
    }
    
    .role-info {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    .role-name {
        font-weight: 500;
        font-size: 0.9375rem;
        color: #212529;
        margin: 0;
        line-height: 1.4;
    }
    
    .role-checkbox-wrapper.assigned .role-name {
        color: #0d6efd;
        font-weight: 600;
    }
    
    .role-description {
        font-size: 0.8125rem;
        color: #6c757d;
        margin: 0;
        margin-top: 0.125rem;
    }
    
    .role-badge {
        margin-left: auto;
        padding: 0.25rem 0.625rem;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 500;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        opacity: 0;
        transform: scale(0.8);
        transition: all 0.2s ease;
    }
    
    .role-checkbox-wrapper.assigned .role-badge {
        opacity: 1;
        transform: scale(1);
    }
    
    .role-dropdown-footer {
        padding: 0.75rem 1.25rem;
        background-color: #f8f9fa;
        border-top: 1px solid #e9ecef;
        font-size: 0.8125rem;
        color: #6c757d;
        text-align: center;
    }
    
    /* Custom Scrollbar */
    .role-list::-webkit-scrollbar {
        width: 6px;
    }
    
    .role-list::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    .role-list::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }
    
    .role-list::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }

    /* Domain Styles */
    .domain-list {
        padding: 0;
    }

    .domain-item {
        padding: 0;
        margin: 0;
        border-bottom: 1px solid #f0f0f0;
    }

    .domain-item:last-child {
        border-bottom: none;
    }

    .domain-item-form {
        width: 100%;
        margin: 0;
    }

    .domain-checkbox-wrapper {
        display: flex;
        align-items: center;
        padding: 1rem;
        margin: 0;
        cursor: pointer;
        transition: all 0.2s ease;
        border-radius: 8px;
        width: 100%;
    }

    .domain-checkbox-wrapper:hover {
        background-color: #f8f9fa;
    }

    .domain-checkbox-wrapper.assigned {
        background-color: #e8f5e8;
        border-left: 4px solid #28a745;
    }

    .domain-checkbox-wrapper.assigned:hover {
        background-color: #d4edda;
    }

    .modern-checkbox {
        width: 20px;
        height: 20px;
        border: 2px solid #dee2e6;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1rem;
        transition: all 0.2s ease;
        background: white;
        flex-shrink: 0;
    }

    .domain-checkbox-wrapper.assigned .modern-checkbox {
        background: #28a745;
        border-color: #28a745;
        color: white;
    }

    .domain-checkbox-wrapper.assigned .modern-checkbox i {
        display: block;
    }

    .modern-checkbox i {
        display: none;
        font-size: 12px;
    }

    .domain-info {
        flex: 1;
        min-width: 0;
    }

    .domain-name {
        font-weight: 600;
        font-size: 0.95rem;
        color: #495057;
        margin-bottom: 0.25rem;
        word-break: break-all;
    }

    .domain-description {
        font-size: 0.8rem;
        color: #6c757d;
    }

    .domain-badge {
        background: #28a745;
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: 12px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        flex-shrink: 0;
        margin-left: 0.5rem;
    }
    
    /* Prevent table blinking when modal opens */
    body.modal-open .modern-table,
    body.modal-open .modern-table tbody tr,
    body.modal-open .modern-table td,
    body.modal-open .modern-table thead th {
        transition: none !important;
        animation: none !important;
    }
    
    /* Disable hover effects when modal is open */
    body.modal-open .modern-table tbody tr:hover {
        transform: none !important;
        box-shadow: none !important;
        background-color: inherit !important;
    }
    
    /* Ensure table is stable when modal opens */
    body.modal-open .modern-card {
        will-change: auto !important;
    }
    
    body.modal-open .modern-table {
        will-change: auto !important;
    }
    
    /* Prevent any visual changes to table when modal opens */
    body.modal-open .modern-table tbody tr {
        transform: none !important;
    }
</style>
@endpush

@section('content')
<div class="page-header-modern">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1>Admin Users Management</h1>
            <p class="text-muted mb-0">Manage admin users and their roles</p>
        </div>
        @auth('admin')
            @if(Auth::guard('admin')->user()->is_super_admin)
                <a href="{{ route('admin.admin-users.create') }}" class="btn btn-modern-primary">
                    <i class="bi bi-plus-circle me-2"></i>Add New Admin User
                </a>
            @endif
        @endauth
    </div>
</div>

<!-- Search Bar -->
<div class="search-filter-bar">
    <form method="GET" action="{{ route('admin.admin-users.index') }}" class="d-flex gap-2 align-items-center">
        <div class="search-input-group flex-grow-1">
            <i class="bi bi-search search-icon"></i>
            <input type="text" 
                   name="search" 
                   class="form-control" 
                   placeholder="Search admin users by name or email..." 
                   value="{{ request('search') }}"
                   autocomplete="off">
            @if(request('search'))
                <a href="{{ route('admin.admin-users.index') }}" class="clear-search" title="Clear search">
                    <i class="bi bi-x-circle"></i>
                </a>
            @endif
        </div>
        <div class="status-filter-dropdown">
            <select name="status" class="form-select" onchange="this.form.submit()">
                <option value="">All Status</option>
                <option value="1" {{ request('status') == '1' ? 'selected' : '' }}>Active</option>
                <option value="0" {{ request('status') == '0' ? 'selected' : '' }}>Inactive</option>
            </select>
        </div>
        <button type="submit" class="btn btn-modern-primary">
            <i class="bi bi-search me-2"></i>Search
        </button>
        @if(request('search') || request('status'))
            <a href="{{ route('admin.admin-users.index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-x-circle me-2"></i>Clear
            </a>
        @endif
    </form>
</div>

<div class="modern-card card">
    <div class="card-body p-0">
        @if($admins->count() > 0)
            <div class="table-responsive">
                <table class="table modern-table mb-0">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Roles</th>
                            <th>Domains</th>
                            <th>Status</th>
                            <th>Super Admin</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($admins as $admin)
                            <tr>
                                <td><span class="text-muted">#{{ $admin->id }}</span></td>
                                <td>
                                    <strong class="text-dark">{{ $admin->name }}</strong>
                                </td>
                                <td>
                                    <span class="text-muted">
                                        <i class="bi bi-envelope me-1"></i>{{ $admin->email }}
                                    </span>
                                </td>
                                <td>
                                    @if($admin->roles->count() > 0)
                                        @foreach($admin->roles as $role)
                                            <span class="modern-badge bg-primary text-white me-1">{{ $role->name }}</span>
                                        @endforeach
                                    @else
                                        <span class="text-muted">No roles</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="modern-badge bg-info text-white">
                                        <i class="bi bi-globe me-1"></i>{{ $admin->domains->count() }} domains
                                    </span>
                                </td>
                                <td>
                                    @if($admin->status)
                                        <span class="modern-badge bg-success text-white">
                                            <i class="bi bi-check-circle me-1"></i>Active
                                        </span>
                                    @else
                                        <span class="modern-badge bg-secondary text-white">
                                            <i class="bi bi-x-circle me-1"></i>Inactive
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    @if($admin->is_super_admin)
                                        <span class="modern-badge bg-danger text-white">
                                            <i class="bi bi-star-fill me-1"></i>Yes
                                        </span>
                                    @else
                                        <span class="modern-badge bg-secondary text-white">No</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="d-flex justify-content-end gap-1">
                                        <!-- Manage Roles Button -->
                                        <button class="modern-action-btn btn-edit"
                                                type="button"
                                                data-bs-toggle="modal"
                                                data-bs-target="#roleModal{{ $admin->id }}"
                                                title="Manage Roles"
                                                data-bs-toggle="tooltip">
                                            <i class="bi bi-shield-check"></i>
                                        </button>

                                        <!-- Edit Admin User Button -->
                                        <a href="{{ route('admin.admin-users.edit', $admin) }}"
                                           class="modern-action-btn btn-warning"
                                           title="Edit Admin User"
                                           data-bs-toggle="tooltip">
                                            <i class="bi bi-pencil"></i>
                                        </a>
                                        
                                        <!-- Role Management Modal -->
                                        <div class="modal fade" id="roleModal{{ $admin->id }}" tabindex="-1" aria-labelledby="roleModalLabel{{ $admin->id }}" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered">
                                                <div class="modal-content border-0 shadow-lg">
                                                    <div class="modal-header border-0 pb-0" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 12px 12px 0 0;">
                                                        <div class="d-flex align-items-center">
                                                            <div class="bg-white bg-opacity-20 rounded-circle p-2 me-3">
                                                                <i class="bi bi-shield-check" style="font-size: 1.25rem;"></i>
                                                            </div>
                                                            <div>
                                                                <h5 class="modal-title mb-0 text-white" id="roleModalLabel{{ $admin->id }}">Manage Roles</h5>
                                                                <small class="text-white text-opacity-75">{{ $admin->name }}</small>
                                                            </div>
                                                        </div>
                                                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body pt-3">
                                                        <p class="text-muted mb-3">Select roles to assign to this admin user:</p>
                                                        <div class="role-list" style="max-height: 400px; overflow-y: auto;">
                                                            @foreach($roles as $role)
                                                                @php
                                                                    $isAssigned = $admin->hasRole($role);
                                                                @endphp
                                                                <div class="role-item">
                                                                    <form action="{{ route('admin.admin-users.toggle-role', $admin) }}" 
                                                                          method="POST" 
                                                                          class="role-item-form">
                                                                        @csrf
                                                                        <input type="hidden" name="role_id" value="{{ $role->id }}">
                                                                        <label class="role-checkbox-wrapper {{ $isAssigned ? 'assigned' : '' }}" 
                                                                               onclick="this.closest('form').submit();">
                                                                            <div class="modern-checkbox">
                                                                                <i class="bi bi-check"></i>
                                                                            </div>
                                                                            <div class="role-info">
                                                                                <div class="role-name">{{ $role->name }}</div>
                                                                                @if($role->description)
                                                                                    <div class="role-description">{{ $role->description }}</div>
                                                                                @endif
                                                                            </div>
                                                                            @if($isAssigned)
                                                                                <span class="role-badge">Assigned</span>
                                                                            @endif
                                                                        </label>
                                                                    </form>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer border-0 pt-0">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                                            <i class="bi bi-x-circle me-2"></i>Close
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Delete Button -->
                                        @if(!$admin->is_super_admin && $admin->id !== Auth::guard('admin')->id())
                                            <button type="button" 
                                                    class="modern-action-btn btn-delete" 
                                                    data-bs-toggle="modal" 
                                                    data-bs-target="#deleteModal{{ $admin->id }}"
                                                    title="Delete Admin User"
                                                    data-bs-toggle="tooltip">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        @else
                                            <span class="modern-action-btn" 
                                                  style="opacity: 0.5; cursor: not-allowed;"
                                                  title="{{ $admin->is_super_admin ? 'Cannot delete super admin' : 'Cannot delete your own account' }}"
                                                  data-bs-toggle="tooltip">
                                                <i class="bi bi-lock-fill"></i>
                                            </span>
                                        @endif
                                    </div>

                                    <!-- Delete Confirmation Modal -->
                                    @if(!$admin->is_super_admin && $admin->id !== Auth::guard('admin')->id())
                                    <div class="modal fade" id="deleteModal{{ $admin->id }}" tabindex="-1" aria-labelledby="deleteModalLabel{{ $admin->id }}" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content border-0 shadow-lg">
                                                <div class="modal-header border-0 pb-0">
                                                    <div class="d-flex align-items-center">
                                                        <div class="bg-danger bg-opacity-10 rounded-circle p-3 me-3">
                                                            <i class="bi bi-exclamation-triangle-fill text-danger" style="font-size: 1.5rem;"></i>
                                                        </div>
                                                        <div>
                                                            <h5 class="modal-title mb-0" id="deleteModalLabel{{ $admin->id }}">Delete Admin User</h5>
                                                            <small class="text-muted">This action cannot be undone</small>
                                                        </div>
                                                    </div>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body pt-3">
                                                    <p class="mb-3">Are you sure you want to delete admin user <strong class="text-danger">{{ $admin->name }}</strong>?</p>
                                                    <div class="bg-light rounded p-3 mb-3">
                                                        <div class="d-flex align-items-center mb-2">
                                                            <i class="bi bi-envelope me-2 text-muted"></i>
                                                            <span class="text-muted small">{{ $admin->email }}</span>
                                                        </div>
                                                        <div class="d-flex align-items-center">
                                                            <i class="bi bi-globe me-2 text-muted"></i>
                                                            <span class="text-muted small">{{ $admin->domains->count() }} domain(s) assigned</span>
                                                        </div>
                                                    </div>
                                                    @if($admin->domains->count() > 0)
                                                        <div class="alert alert-warning border-0 d-flex align-items-start">
                                                            <i class="bi bi-exclamation-triangle-fill me-2 mt-1"></i>
                                                            <div>
                                                                <strong>Warning!</strong> This admin has <strong>{{ $admin->domains->count() }}</strong> domain(s) assigned. 
                                                                You must reassign or delete these domains before deleting this admin.
                                                            </div>
                                                        </div>
                                                    @else
                                                        <div class="alert alert-info border-0 d-flex align-items-start">
                                                            <i class="bi bi-info-circle-fill me-2 mt-1"></i>
                                                            <div>
                                                                This admin has no domains assigned and can be safely deleted.
                                                            </div>
                                                        </div>
                                                    @endif
                                                </div>
                                                <div class="modal-footer border-0 pt-0">
                                                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                                                        <i class="bi bi-x-circle me-2"></i>Cancel
                                                    </button>
                                                    <form action="{{ route('admin.admin-users.destroy', $admin) }}" method="POST" class="d-inline">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-danger" {{ $admin->domains->count() > 0 ? 'disabled' : '' }}>
                                                            <i class="bi bi-trash me-2"></i>Delete Admin
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if($admins->hasPages())
                <div class="p-3 border-top">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <div class="text-muted small">
                            Showing {{ $admins->firstItem() }} to {{ $admins->lastItem() }} of {{ $admins->total() }} results
                        </div>
                        <div>
                            {{ $admins->links('pagination::bootstrap-4') }}
                        </div>
                    </div>
                </div>
            @endif
        @else
            <div class="empty-state">
                <div class="empty-state-icon">
                    <i class="bi bi-people"></i>
                </div>
                <h3 class="empty-state-title">No admin users found</h3>
                <p class="empty-state-text">No admin users have been created yet</p>
            </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
</script>
@endpush
@endsection