@extends('front_end.layouts.home')

@php
    $showRightSidebar = false;
@endphp

@section('title', 'Groups')

@section('left_sidebar')
    @include('front_end.pages.groups.group_left_sidebar')
@endsection

@section('content')
<div class="bg-white shadow-sm border-0 rounded-3">

    <!-- Breadcrumb Navigation -->
    <div class="card border-0 mb-3">
        <div class="card-body py-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ url('/') }}" class="text-decoration-none d-flex align-items-center">
                            <i class="fas fa-home me-1 text-primary"></i>
                            <span class="text-primary fw-medium">Home</span>
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <i class="fas fa-users me-1 text-info"></i>
                        Groups
                    </li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Create Story Header -->
    <div class="card border-0 mb-4">
        <div class="card-body p-0">
            <div class="row g-0">
                <div class="col-12">
                    <div class="bg-primary text-white p-4 rounded-top-3">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <a href="{{ url('/') }}" class="text-white me-3 d-flex align-items-center">
                                    <i class="fas fa-arrow-left fa-lg me-2"></i>
                                    <span class="fw-medium">Back to Home</span>
                                </a>

                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h4 class="mb-0 text-white">Groups</h4>
                                        <p class="mb-0 text-white">Connect with people who share your interests</p>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex align-items-center">
                                <a class="btn btn-light btn-sm me-2" href="{{ route('create_group') }}">
                                    <i class="fas fa-plus-circle me-1"></i>Create Group
                                </a>
                                <a class="btn btn-outline-light btn-sm" href="{{ url('my-groups') }}">
                                    <i class="fas fa-user-circle me-1"></i>My Groups
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Pages section start -->
    <div class="container mt-4">
        <!-- Stats Overview -->
        <div class="row mb-4">
            <div class="col-sm-6 col-lg-3">
                <div class="card border-0 bg-primary bg-opacity-10 hover-shadow-lg transition-hover">
                    <div class="card-body text-center">
                        <div class="icon-xl bg-primary bg-opacity-10 rounded-circle mb-2 mx-auto">
                            <i class="fas fa-users fa-2x text-primary"></i>
                        </div>
                        <h3 class="mb-0" id="total-groups-count">
                            <div class="spinner-border spinner-border-sm text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </h3>
                        <p class="mb-0">Total Groups</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-lg-3">
                <div class="card border-0 bg-success bg-opacity-10 hover-shadow-lg transition-hover">
                    <div class="card-body text-center">
                        <div class="icon-xl bg-success bg-opacity-10 rounded-circle mb-2 mx-auto">
                            <i class="fas fa-user-check fa-2x text-success"></i>
                        </div>
                        <h3 class="mb-0" id="joined-groups-count">
                            <div class="spinner-border spinner-border-sm text-success" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </h3>
                        <p class="mb-0">Groups Joined</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-lg-3">
                <div class="card border-0 bg-warning bg-opacity-10 hover-shadow-lg transition-hover">
                    <div class="card-body text-center">
                        <div class="icon-xl bg-warning bg-opacity-10 rounded-circle mb-2 mx-auto">
                            <i class="fas fa-crown fa-2x text-warning"></i>
                        </div>
                        <h3 class="mb-0" id="my-groups-count">
                            <div class="spinner-border spinner-border-sm text-warning" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </h3>
                        <p class="mb-0">My Groups</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-lg-3">
                <div class="card border-0 bg-info bg-opacity-10 hover-shadow-lg transition-hover">
                    <div class="card-body text-center">
                        <div class="icon-xl bg-info bg-opacity-10 rounded-circle mb-2 mx-auto">
                            <i class="fas fa-star fa-2x text-info"></i>
                        </div>
                        <h3 class="mb-0" id="featured-groups-count">
                            <div class="spinner-border spinner-border-sm text-info" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                        </h3>
                        <p class="mb-0">Featured Groups</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Filter Pills -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex flex-wrap gap-2">
                    <button class="btn btn-sm btn-outline-primary rounded-pill quick-filter active" data-filter="all">
                        All Groups <span class="badge bg-primary ms-2" id="all-groups-count">-</span>
                    </button>
                    <button class="btn btn-sm btn-outline-primary rounded-pill quick-filter" data-filter="my">
                        My Groups <span class="badge bg-secondary ms-2" id="my-groups-count-pill">-</span>
                    </button>
                    <button class="btn btn-sm btn-outline-primary rounded-pill quick-filter" data-filter="joined">
                        Joined Groups <span class="badge bg-secondary ms-2" id="joined-groups-count-pill">-</span>
                    </button>
                    <button class="btn btn-sm btn-outline-primary rounded-pill quick-filter" data-filter="public">
                        Public Groups <span class="badge bg-secondary ms-2" id="public-groups-count">-</span>
                    </button>
                    <button class="btn btn-sm btn-outline-primary rounded-pill quick-filter" data-filter="featured">
                        Featured Groups <span class="badge bg-secondary ms-2" id="featured-groups-count-pill">-</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- Search and Filter Section -->
        <div class="row mb-4">
            <div class="col-md-8">
                <div class="input-group">
                    <span class="input-group-text bg-white">
                        <i class="fas fa-search"></i>
                    </span>
                    <input type="text" class="form-control search-group" placeholder="Search groups by name, description, or topics" name="search-input">
                    <button class="btn btn-primary search-btn" type="button">Search</button>
                    <button class="btn btn-outline-secondary clear-search-btn" type="button" style="display: none;">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="col-md-4">
                <div class="d-flex gap-2">
                    <select class="form-select category-filter" name="category">
                        <option value="">All Categories</option>
                        <option value="technology">Technology</option>
                        <option value="business">Business</option>
                        <option value="education">Education</option>
                        <option value="entertainment">Entertainment</option>
                        <option value="sports">Sports</option>
                        <option value="health">Health</option>
                        <option value="lifestyle">Lifestyle</option>
                        <option value="other">Other</option>
                    </select>
                    <button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#filterOptions">
                        <i class="fas fa-sliders-h"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Collapsible Filter Options -->
        <div class="collapse mb-4" id="filterOptions">
            <div class="card card-body border-0 bg-light-subtle">
                <div class="row g-4">
                    <div class="col-md-3">
                        <label class="form-label fw-bold">Privacy</label>
                        <div class="vstack gap-2">
                            <div class="form-check">
                                <input class="form-check-input advanced-filter" type="checkbox" id="public" data-filter-type="privacy" value="public">
                                <label class="form-check-label" for="public">Public</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input advanced-filter" type="checkbox" id="private" data-filter-type="privacy" value="private">
                                <label class="form-check-label" for="private">Private</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">Member Count</label>
                        <div class="vstack gap-2">
                            <div class="form-check">
                                <input class="form-check-input advanced-filter" type="checkbox" id="small" data-filter-type="memberCount" value="small">
                                <label class="form-check-label" for="small">< 100 members</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input advanced-filter" type="checkbox" id="medium" data-filter-type="memberCount" value="medium">
                                <label class="form-check-label" for="medium">100-1000 members</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input advanced-filter" type="checkbox" id="large" data-filter-type="memberCount" value="large">
                                <label class="form-check-label" for="large">> 1000 members</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">Sort By</label>
                        <select class="form-select" id="sort-filter">
                            <option value="newest">Newest First</option>
                            <option value="oldest">Oldest First</option>
                            <option value="most_members">Most Members</option>
                            <option value="least_members">Least Members</option>
                            <option value="alphabetical">Alphabetical</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">Categories</label>
                        <select class="form-select" id="category-advanced-filter">
                            <option value="">All Categories</option>
                            <option value="technology">Technology</option>
                            <option value="business">Business</option>
                            <option value="education">Education</option>
                            <option value="entertainment">Entertainment</option>
                            <option value="sports">Sports</option>
                            <option value="health">Health</option>
                            <option value="lifestyle">Lifestyle</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-12">
                        <button class="btn btn-primary me-2 apply-filters-btn">Apply Filters</button>
                        <button class="btn btn-outline-secondary reset-filters-btn">Reset</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Groups Grid -->
        <div class="row groups-grid">
            <!-- Groups will be dynamically populated via JavaScript -->
        </div>

        <!-- Discover Section -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card border-0 bg-primary bg-opacity-10 p-4">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h4 class="text-primary mb-2">Looking for more connections?</h4>
                            <p class="mb-md-0">Get personalized group recommendations based on your interests</p>
                        </div>
                        <div class="col-md-4 text-md-end">
                            <a class="btn btn-primary" href="{{url('my-groups')}}">
                                <i class="fas fa-user-circle me-2"></i>My Groups
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pagination -->
        <div class="row mt-4 mb-4">
            <div class="col-12">
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center" id="pagination">
                        <!-- Pagination will be dynamically populated via JavaScript -->
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <!-- Groups section ends -->
</div>

@push('styles')
<style>
    .hover-shadow-md:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        transform: translateY(-2px);
        transition: all 0.3s ease;
    }
    
    .transition-hover {
        transition: all 0.3s ease;
    }
    
    .search-group:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    }
    
    .category-filter:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    }
    
    /* Beautiful breadcrumb styling */
    .breadcrumb {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        margin: 0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .breadcrumb-item a {
        transition: all 0.3s ease;
        border-radius: 0.375rem;
        padding: 0.25rem 0.5rem;
        margin: -0.25rem 0;
    }
    
    .breadcrumb-item a:hover {
        background-color: rgba(13, 110, 253, 0.1);
        transform: translateY(-1px);
    }
    
    .breadcrumb-item.active {
        color: #6c757d;
        font-weight: 500;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        content: "›";
        color: #6c757d;
        font-weight: bold;
        font-size: 1.2rem;
    }
    
    /* Enhanced header styling */
    .bg-primary {
        background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%) !important;
    }
    
    .btn-light:hover {
        background-color: rgba(255, 255, 255, 0.9);
        transform: translateY(-1px);
        transition: all 0.3s ease;
    }
    
    .btn-outline-light:hover {
        background-color: rgba(255, 255, 255, 0.2);
        transform: translateY(-1px);
        transition: all 0.3s ease;
    }
    
    /* Quick filter styling */
    .quick-filter.active {
        background-color: #0d6efd !important;
        border-color: #0d6efd !important;
        color: white !important;
    }
    
    .quick-filter:hover {
        transform: translateY(-1px);
        transition: all 0.3s ease;
    }
</style>
@endpush

@push('scripts')
<script src="{{ asset('assets/js/groups.js') }}"></script>
@endpush
@endsection