@extends('layouts/contentNavbarLayout')
@section('title', 'Challenge Groups Management')

@section('content')
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item active">Challenge Groups</li>
    </ol>
</nav>
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="mb-1 fw-bold text-primary">
                        <i class="mdi mdi-account-group me-2"></i>Challenge Groups
                    </h1>
                    <p class="text-muted mb-0">Manage and monitor all challenge groups across companies</p>
                </div>
                <div class="badge bg-info fs-6 px-3 py-2">
                    Total Groups: {{ $challengeGroups->total() }}
                </div>
            </div>
        </div>
    </div>

    <!-- Filters and Search Section -->
    <div class="card mb-4 shadow-sm">
        <div class="card-body">
            <form method="GET" action="{{ route('challengeGroups.index') }}" class="row g-3">
                <div class="col-md-4">
                    <label for="search" class="form-label fw-semibold">
                        <i class="mdi mdi-magnify me-1"></i>Search
                    </label>
                    <input type="text" class="form-control" id="search" name="search" 
                           value="{{ request('search') }}" placeholder="Search by name, description, company, or owner...">
                </div>
                <div class="col-md-3">
                    <label for="company" class="form-label fw-semibold">
                        <i class="mdi mdi-domain me-1"></i>Company
                    </label>
                    <select class="form-select" id="company" name="company">
                        <option value="">All Companies</option>
                        @foreach($companies as $company)
                            <option value="{{ $company->id }}" {{ request('company') == $company->id ? 'selected' : '' }}>
                                {{ $company->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="sort" class="form-label fw-semibold">
                        <i class="mdi mdi-sort me-1"></i>Sort By
                    </label>
                    <select class="form-select" id="sort" name="sort">
                        <option value="created_at" {{ request('sort') == 'created_at' ? 'selected' : '' }}>Date Created</option>
                        <option value="name" {{ request('sort') == 'name' ? 'selected' : '' }}>Name</option>
                        <option value="members_count" {{ request('sort') == 'members_count' ? 'selected' : '' }}>Members Count</option>
                        <option value="announcements_count" {{ request('sort') == 'announcements_count' ? 'selected' : '' }}>Announcements Count</option>
                        <option value="company" {{ request('sort') == 'company' ? 'selected' : '' }}>Company</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="sort_order" class="form-label fw-semibold">Order</label>
                    <select class="form-select" id="sort_order" name="sort_order">
                        <option value="desc" {{ request('sort_order') == 'desc' ? 'selected' : '' }}>Descending</option>
                        <option value="asc" {{ request('sort_order') == 'asc' ? 'selected' : '' }}>Ascending</option>
                    </select>
                </div>
                <div class="col-md-1 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="mdi mdi-filter"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Challenge Groups Cards -->
    <div class="row">
        @forelse($challengeGroups as $group)
            <div class="col-lg-6 col-xl-4 mb-4">
                <div class="card h-100 shadow-sm hover-shadow-lg transition-all">
                    <!-- Card Header with Image -->
                    <div class="position-relative">
                        @if($group->image)
                            <img src="{{ $group->image }}" class="card-img-top" 
                                 style="height: 200px; object-fit: cover;" alt="{{ $group->name }}">
                        @else
                            <div class="card-img-top d-flex align-items-center justify-content-center bg-light" 
                                 style="height: 200px;">
                                <i class="mdi mdi-account-group text-muted" style="font-size: 4rem;"></i>
                            </div>
                        @endif
                        <div class="position-absolute top-0 end-0 m-2">
                            <span class="badge bg-primary fs-6">{{ $group->company->name }}</span>
                        </div>
                    </div>

                    <!-- Card Body -->
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title fw-bold text-truncate mb-2" title="{{ $group->name }}">
                            {{ $group->name }}
                        </h5>
                        <p class="card-text text-muted small flex-grow-1" style="line-height: 1.4;">
                            {{ Str::limit($group->description, 100) }}
                        </p>

                        <!-- Owner Info -->
                        <div class="d-flex align-items-center mb-3">
                            <div class="avatar avatar-sm me-2">
                                <span class="avatar-initial bg-info text-white rounded-circle">
                                    {{ substr($group->owner->name, 0, 1) }}
                                </span>
                            </div>
                            <div>
                                <small class="text-muted d-block">Owner</small>
                                <small class="fw-semibold">{{ $group->owner->name }}</small>
                            </div>
                        </div>

                        <!-- Stats -->
                        <div class="row text-center mb-3">
                            <div class="col-4">
                                <div class="border-end">
                                    <h6 class="mb-0 text-primary fw-bold">{{ $group->members_count }}</h6>
                                    <small class="text-muted">Members</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="border-end">
                                    <h6 class="mb-0 text-success fw-bold">{{ $group->announcements_count }}</h6>
                                    <small class="text-muted">Posts</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <h6 class="mb-0 text-info fw-bold">
                                    {{ $group->created_at->locale('en')->diffForHumans() }}
                                </h6>
                                <small class="text-muted">Created</small>
                            </div>
                        </div>
                    </div>

                    <!-- Card Footer -->
                    <div class="card-footer bg-transparent border-top-0 pt-0">
                        <div class="d-flex gap-2">
                            <a href="{{ route('challengeGroups.show', $group->id) }}" 
                               class="btn btn-outline-primary btn-sm flex-grow-1">
                                <i class="mdi mdi-eye me-1"></i>View Details
                            </a>
                            <button type="button" class="btn btn-outline-danger btn-sm" 
                                    data-bs-toggle="modal" data-bs-target="#deleteModal{{ $group->id }}">
                                <i class="mdi mdi-delete"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Delete Modal -->
            <div class="modal fade" id="deleteModal{{ $group->id }}" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title text-danger">
                                <i class="mdi mdi-alert-circle me-2"></i>Confirm Deletion
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <p>Are you sure you want to delete the challenge group <strong>"{{ $group->name }}"</strong>?</p>
                            <div class="alert alert-warning">
                                <small>
                                    <i class="mdi mdi-information me-1"></i>
                                    This will permanently delete:
                                    <ul class="mb-0 mt-2">
                                        <li>The group and all its data</li>
                                        <li>All member relationships ({{ $group->members_count }} members)</li>
                                        <li>All announcements ({{ $group->announcements_count }} posts)</li>
                                        <li>All associated images and files</li>
                                    </ul>
                                </small>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <form action="{{ route('challengeGroups.destroy', $group->id) }}" method="POST" class="d-inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger">
                                    <i class="mdi mdi-delete me-1"></i>Delete Permanently
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="card">
                    <div class="card-body text-center py-5">
                        <i class="mdi mdi-account-group-outline text-muted mb-3" style="font-size: 4rem;"></i>
                        <h5 class="text-muted">No Challenge Groups Found</h5>
                        <p class="text-muted">
                            @if(request()->hasAny(['search', 'company']))
                                Try adjusting your search criteria or filters.
                            @else
                                No challenge groups have been created yet.
                            @endif
                        </p>
                        @if(request()->hasAny(['search', 'company']))
                            <a href="{{ route('challengeGroups.index') }}" class="btn btn-outline-primary">
                                <i class="mdi mdi-refresh me-1"></i>Clear Filters
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        @endforelse
    </div>

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

<style>
.hover-shadow-lg {
    transition: box-shadow 0.3s ease-in-out;
}

.hover-shadow-lg:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px);
}

.transition-all {
    transition: all 0.3s ease-in-out;
}

.avatar {
    width: 2rem;
    height: 2rem;
}

.avatar-sm {
    width: 1.5rem;
    height: 1.5rem;
}

.avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}
</style>
@endsection