@extends('layouts.app')

@section('title', 'Group Management')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-2">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header py-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="mb-0">
                                <i class="fas fa-layer-group me-1"></i>
                                Group Management
                            </h4>
                            <small class="text-muted">Manage user groups and their permissions</small>
                        </div>
                        <div class="d-flex gap-1">
                            <a href="{{ route('groups.create') }}" class="btn btn-success btn-sm">
                                <i class="fas fa-plus me-1"></i>Add Group
                            </a>
                            <button class="btn btn-info btn-sm" onclick="refreshStats()">
                                <i class="fas fa-sync-alt me-1"></i>Refresh
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-2">
        <div class="col-xl-2 col-md-4 col-sm-6 mb-2">
            <div class="custom-card">
                <div class="custom-card-body text-center py-2">
                    <div class="d-flex align-items-center justify-content-center">
                        <div class="bg-primary bg-opacity-10 rounded-circle p-2 me-2">
                            <i class="fas fa-layer-group text-primary fa-lg"></i>
                        </div>
                        <div>
                            <h5 class="mb-0 text-primary" id="totalGroups">{{ $stats['total'] }}</h5>
                            <small class="text-muted">Total Groups</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-2 col-md-4 col-sm-6 mb-2">
            <div class="custom-card">
                <div class="custom-card-body text-center py-2">
                    <div class="d-flex align-items-center justify-content-center">
                        <div class="bg-success bg-opacity-10 rounded-circle p-2 me-2">
                            <i class="fas fa-check-circle text-success fa-lg"></i>
                        </div>
                        <div>
                            <h5 class="mb-0 text-success" id="activeGroups">{{ $stats['active'] }}</h5>
                            <small class="text-muted">Active Groups</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-2 col-md-4 col-sm-6 mb-2">
            <div class="custom-card">
                <div class="custom-card-body text-center py-2">
                    <div class="d-flex align-items-center justify-content-center">
                        <div class="bg-warning bg-opacity-10 rounded-circle p-2 me-2">
                            <i class="fas fa-exclamation-triangle text-warning fa-lg"></i>
                        </div>
                        <div>
                            <h5 class="mb-0 text-warning" id="inactiveGroups">{{ $stats['inactive'] }}</h5>
                            <small class="text-muted">Inactive Groups</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-2 col-md-4 col-sm-6 mb-2">
            <div class="custom-card">
                <div class="custom-card-body text-center py-2">
                    <div class="d-flex align-items-center justify-content-center">
                        <div class="bg-info bg-opacity-10 rounded-circle p-2 me-2">
                            <i class="fas fa-users text-info fa-lg"></i>
                        </div>
                        <div>
                            <h5 class="mb-0 text-info" id="groupsWithUsers">{{ $stats['with_users'] }}</h5>
                            <small class="text-muted">With Users</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-2 col-md-4 col-sm-6 mb-2">
            <div class="custom-card">
                <div class="custom-card-body text-center py-2">
                    <div class="d-flex align-items-center justify-content-center">
                        <div class="bg-secondary bg-opacity-10 rounded-circle p-2 me-2">
                            <i class="fas fa-shield-alt text-secondary fa-lg"></i>
                        </div>
                        <div>
                            <h5 class="mb-0 text-secondary" id="groupsWithPermissions">{{ $stats['with_permissions'] }}</h5>
                            <small class="text-muted">With Permissions</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Search and Filter -->
    <div class="row mb-2">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-body py-2">
                    <form method="GET" action="{{ route('groups.index') }}" id="searchForm">
                        <div class="row">
                            <div class="col-md-6 mb-2">
                                <label for="search" class="form-label mb-1">
                                    <i class="fas fa-search me-1"></i>Search Groups
                                </label>
                                <input type="text" 
                                       class="form-control custom-form-control" 
                                       id="search" 
                                       name="search"
                                       value="{{ request('search') }}"
                                       placeholder="Search by name or description...">
                            </div>
                            <div class="col-md-3 mb-2">
                                <label for="status" class="form-label mb-1">
                                    <i class="fas fa-toggle-on me-1"></i>Status
                                </label>
                                <select class="form-select custom-form-control" id="status" name="status">
                                    <option value="">All Status</option>
                                    <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active Only</option>
                                    <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive Only</option>
                                </select>
                            </div>
                            <div class="col-md-3 mb-2">
                                <label class="form-label mb-1">&nbsp;</label>
                                <div class="d-flex gap-1">
                                    <button type="submit" class="btn btn-primary btn-sm">
                                        <i class="fas fa-search me-1"></i>Search
                                    </button>
                                    <a href="{{ route('groups.index') }}" class="btn btn-secondary btn-sm">
                                        <i class="fas fa-times me-1"></i>Clear
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Groups Table -->
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header py-2">
                    <h5 class="mb-0">
                        <i class="fas fa-list me-1"></i>
                        Groups List ({{ $groups->total() }} groups)
                    </h5>
                </div>
                <div class="custom-card-body p-0">
                    <div class="table-responsive">
                        <table class="table custom-table mb-0">
                            <thead>
                                <tr>
                                    <th>Group</th>
                                    <th>Users</th>
                                    <th>Permissions</th>
                                    <th>Status</th>
                                    <th>Created</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($groups as $group)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="me-3">
                                                <div class="rounded-circle d-flex align-items-center justify-content-center text-white" 
                                                     style="width: 40px; height: 40px; background-color: {{ $group->color }};">
                                                    <i class="fas fa-layer-group"></i>
                                                </div>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">{{ $group->name }}</h6>
                                                <small class="text-muted">{{ $group->slug }}</small>
                                                @if($group->description)
                                                    <br><small class="text-muted">{{ Str::limit($group->description, 50) }}</small>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-info">{{ $group->users_count }}</span>
                                    </td>
                                    <td>
                                        <span class="badge bg-secondary">{{ $group->group_permissions_count }}</span>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <span class="badge bg-{{ $group->is_active ? 'success' : 'danger' }}">
                                                {{ $group->is_active ? 'Active' : 'Inactive' }}
                                            </span>
                                            <div class="form-check form-switch ms-2">
                                                <input class="form-check-input" 
                                                       type="checkbox" 
                                                       id="statusToggle{{ $group->id }}"
                                                       {{ $group->is_active ? 'checked' : '' }}
                                                       onchange="toggleGroupStatus({{ $group->id }})">
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <small class="text-muted">{{ $group->created_at->format('M d, Y') }}</small>
                                    </td>
                                    <td>
                                        <div class="d-flex gap-1">
                                            <a href="{{ route('groups.show', $group) }}" 
                                               class="btn btn-info btn-sm" 
                                               title="View">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('groups.edit', $group) }}" 
                                               class="btn btn-warning btn-sm" 
                                               title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <a href="{{ route('groups.permissions-tree', $group) }}" 
                                               class="btn btn-primary btn-sm" 
                                               title="Manage Permissions">
                                                <i class="fas fa-shield-alt"></i>
                                            </a>
                                            <button type="button" 
                                                    class="btn btn-danger btn-sm" 
                                                    onclick="deleteGroup({{ $group->id }})"
                                                    title="Delete">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="text-center py-4">
                                        <div class="text-muted">
                                            <i class="fas fa-layer-group fa-2x mb-3"></i>
                                            <p>No groups found.</p>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Pagination -->
    @if($groups->hasPages())
    <div class="row mt-3">
        <div class="col-12">
            <div class="d-flex justify-content-center">
                {{ $groups->appends(request()->query())->links() }}
            </div>
        </div>
    </div>
    @endif
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete this group? This action cannot be undone.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete Group</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function deleteGroup(groupId) {
    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    const form = document.getElementById('deleteForm');
    form.action = `/groups/${groupId}`;
    modal.show();
}

function toggleGroupStatus(groupId) {
    fetch(`/groups/${groupId}/toggle-status`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Show success message
            showAlert('success', data.message);
            
            // Update statistics
            refreshStats();
        } else {
            showAlert('error', data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('error', 'Error updating group status');
    });
}

function refreshStats() {
    fetch('/groups-stats')
        .then(response => response.json())
        .then(data => {
            document.getElementById('totalGroups').textContent = data.total;
            document.getElementById('activeGroups').textContent = data.active;
            document.getElementById('inactiveGroups').textContent = data.inactive;
            document.getElementById('groupsWithUsers').textContent = data.with_users;
            document.getElementById('groupsWithPermissions').textContent = data.with_permissions;
        })
        .catch(error => {
            console.error('Error fetching stats:', error);
        });
}

function showAlert(type, message) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.querySelector('.container-fluid').insertBefore(alertDiv, document.querySelector('.container-fluid').firstChild);
    
    setTimeout(() => {
        alertDiv.remove();
    }, 5000);
}
</script>
@endsection