@extends('layouts/contentNavbarLayout')
@section('title', 'Challenge Group Details - ' . $challengeGroup->name)

@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"><a href="{{ route('challengeGroups.index') }}">Challenge Groups</a></li>
        <li class="breadcrumb-item active">{{ $challengeGroup->name }}</li>
    </ol>
</nav>
<div class="container-fluid">
    <!-- Back Button -->
    <div class="row mb-3">
        <div class="col-12">
            <a href="{{ route('challengeGroups.index') }}" class="btn btn-outline-secondary">
                <i class="mdi mdi-arrow-left me-1"></i>Back to Challenge Groups
            </a>
        </div>
    </div>

    <!-- Group Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="row g-0">
                    <div class="col-md-4">
                        @if($challengeGroup->image)
                            <img src="{{ $challengeGroup->image }}" class="img-fluid rounded-start h-100" 
                                 style="object-fit: cover; min-height: 250px;" alt="{{ $challengeGroup->name }}">
                        @else
                            <div class="d-flex align-items-center justify-content-center bg-light rounded-start h-100" 
                                 style="min-height: 250px;">
                                <i class="mdi mdi-account-group text-muted" style="font-size: 5rem;"></i>
                            </div>
                        @endif
                    </div>
                    <div class="col-md-8">
                        <div class="card-body h-100 d-flex flex-column">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div>
                                    <h2 class="card-title fw-bold text-primary mb-2">{{ $challengeGroup->name }}</h2>
                                    <p class="text-muted mb-0">{{ $challengeGroup->description }}</p>
                                </div>
                                <button type="button" class="btn btn-outline-danger" 
                                        data-bs-toggle="modal" data-bs-target="#deleteGroupModal">
                                    <i class="mdi mdi-delete me-1"></i>Delete Group
                                </button>
                            </div>

                            <!-- Company and Owner Info -->
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <div class="d-flex align-items-center">
                                        <i class="mdi mdi-domain text-primary me-2 fs-4"></i>
                                        <div>
                                            <small class="text-muted d-block">Company</small>
                                            <span class="fw-semibold">{{ $challengeGroup->company->name }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex align-items-center">
                                        <i class="mdi mdi-crown text-warning me-2 fs-4"></i>
                                        <div>
                                            <small class="text-muted d-block">Group Owner</small>
                                            <span class="fw-semibold">{{ $challengeGroup->owner->name }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Creation Date -->
                            <div class="mt-auto">
                                <small class="text-muted">
                                    <i class="mdi mdi-calendar me-1"></i>
                                    Created {{ $challengeGroup->created_at->format('M j, Y') }} 
                                    ({{ $challengeGroup->created_at->locale('en')->diffForHumans() }})
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-4 col-sm-6 mb-3">
            <div class="card bg-primary text-white h-100">
                <div class="card-body text-center">
                    <i class="mdi mdi-account-multiple display-6 mb-2"></i>
                    <h3 class="mb-1">{{ $stats['total_members'] }}</h3>
                    <small>Total Members</small>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6 mb-3">
            <div class="card bg-success text-white h-100">
                <div class="card-body text-center">
                    <i class="mdi mdi-bullhorn display-6 mb-2"></i>
                    <h3 class="mb-1">{{ $stats['total_announcements'] }}</h3>
                    <small>Total Announcements</small>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6 mb-3">
            <div class="card bg-warning text-white h-100">
                <div class="card-body text-center">
                    <i class="mdi mdi-shield-crown display-6 mb-2"></i>
                    <h3 class="mb-1">{{ $stats['admin_members'] }}</h3>
                    <small>Admin Members</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Detailed Statistics -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="mdi mdi-account-group me-2"></i>Membership Statistics
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6">
                            <h4 class="text-primary mb-1">{{ $stats['admin_members'] }}</h4>
                            <small class="text-muted">Administrators</small>
                        </div>
                        <div class="col-6">
                            <h4 class="text-secondary mb-1">{{ $stats['regular_members'] }}</h4>
                            <small class="text-muted">Regular Members</small>
                        </div>
                    </div>
                    <hr>
                    <div class="text-center">
                        <h5 class="text-muted mb-1">{{ $stats['past_members'] }}</h5>
                        <small class="text-muted">Past Members</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="mdi mdi-message-text me-2"></i>Announcement Statistics
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-4">
                            <h4 class="text-success mb-1">{{ $stats['event_announcements'] }}</h4>
                            <small class="text-muted">Events</small>
                        </div>
                        <div class="col-4">
                            <h4 class="text-info mb-1">{{ $stats['news_announcements'] }}</h4>
                            <small class="text-muted">News</small>
                        </div>
                        <div class="col-4">
                            <h4 class="text-warning mb-1">{{ $stats['system_announcements'] }}</h4>
                            <small class="text-muted">System</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs Navigation -->
    <ul class="nav nav-tabs nav-fill mb-4" id="groupTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="members-tab" data-bs-toggle="tab" data-bs-target="#members" 
                    type="button" role="tab">
                <i class="mdi mdi-account-multiple me-1"></i>Current Members
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="past-members-tab" data-bs-toggle="tab" data-bs-target="#past-members" 
                    type="button" role="tab">
                <i class="mdi mdi-account-minus me-1"></i>Past Members
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="announcements-tab" data-bs-toggle="tab" data-bs-target="#announcements" 
                    type="button" role="tab">
                <i class="mdi mdi-bullhorn me-1"></i>Announcements
            </button>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content" id="groupTabsContent">
        <!-- Current Members Tab -->
        <div class="tab-pane fade show active" id="members" role="tabpanel">
            <div class="row">
                @forelse($challengeGroup->members as $member)
                    <div class="col-lg-4 col-md-6 mb-3">
                        <div class="card h-100">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="avatar avatar-lg me-3">
                                        @if($member->image)
                                            <img src="{{ $member->image }}" class="avatar-img rounded-circle" alt="{{ $member->name }}">
                                        @else
                                            <span class="avatar-initial bg-primary text-white rounded-circle">
                                                {{ substr($member->name, 0, 2) }}
                                            </span>
                                        @endif
                                    </div>
                                    <div class="flex-grow-1">
                                        <h6 class="mb-1 fw-semibold">{{ $member->name }}</h6>
                                        <p class="text-muted mb-1 small">{{ $member->email }}</p>
                                        <div class="d-flex align-items-center">
                                            @if($member->pivot->role === 'admin')
                                                <span class="badge bg-warning text-dark">
                                                    <i class="mdi mdi-shield-crown me-1"></i>Admin
                                                </span>
                                            @else
                                                <span class="badge bg-secondary">
                                                    <i class="mdi mdi-account me-1"></i>Member
                                                </span>
                                            @endif
                                            @if($member->id === $challengeGroup->owner_id)
                                                <span class="badge bg-primary ms-1">
                                                    <i class="mdi mdi-crown me-1"></i>Owner
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="alert alert-info text-center">
                            <i class="mdi mdi-information me-2"></i>No current members found.
                        </div>
                    </div>
                @endforelse
            </div>
        </div>

        <!-- Past Members Tab -->
        <div class="tab-pane fade" id="past-members" role="tabpanel">
            <div class="row">
                @forelse($challengeGroup->pastMembers as $pastMember)
                    <div class="col-lg-4 col-md-6 mb-3">
                        <div class="card h-100 border-secondary">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="avatar avatar-lg me-3 opacity-75">
                                        @if($pastMember->image)
                                            <img src="{{ $pastMember->image }}" class="avatar-img rounded-circle" alt="{{ $pastMember->name }}">
                                        @else
                                            <span class="avatar-initial bg-secondary text-white rounded-circle">
                                                {{ substr($pastMember->name, 0, 2) }}
                                            </span>
                                        @endif
                                    </div>
                                    <div class="flex-grow-1">
                                        <h6 class="mb-1 fw-semibold text-muted">{{ $pastMember->name }}</h6>
                                        <p class="text-muted mb-1 small">{{ $pastMember->email }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="alert alert-info text-center">
                            <i class="mdi mdi-information me-2"></i>No past members found.
                        </div>
                    </div>
                @endforelse
            </div>
        </div>

        <!-- Announcements Tab -->
        <div class="tab-pane fade" id="announcements" role="tabpanel">
            <div class="row">
                @forelse($challengeGroup->announcements as $announcement)
                    <div class="col-lg-6 mb-4">
                        <div class="card h-100 {{ $announcement->is_pinned ? 'border-warning' : '' }}">
                            @if($announcement->is_pinned)
                                <div class="card-header bg-warning text-dark py-2">
                                    <small><i class="mdi mdi-pin me-1"></i>Pinned Announcement</small>
                                </div>
                            @endif
                            
                            @if($announcement->image)
                                <img src="{{ $announcement->image }}" class="card-img-top" 
                                     style="height: 200px; object-fit: cover;" alt="Announcement Image">
                            @endif
                            
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <div>
                                        @if($announcement->type === 'event')
                                            <span class="badge bg-success mb-2">
                                                <i class="mdi mdi-calendar me-1"></i>Event
                                            </span>
                                        @elseif($announcement->type === 'news')
                                            <span class="badge bg-info mb-2">
                                                <i class="mdi mdi-newspaper me-1"></i>News
                                            </span>
                                        @elseif($announcement->type === 'join')
                                            <span class="badge bg-primary mb-2">
                                                <i class="mdi mdi-account-plus me-1"></i>Member Joined
                                            </span>
                                        @elseif($announcement->type === 'leave')
                                            <span class="badge bg-secondary mb-2">
                                                <i class="mdi mdi-account-minus me-1"></i>Member Left
                                            </span>
                                        @endif
                                    </div>
                                    @if(!in_array($announcement->type, ['join', 'leave']))
                                        <button type="button" class="btn btn-outline-danger btn-sm" 
                                                data-bs-toggle="modal" data-bs-target="#deleteAnnouncementModal{{ $announcement->id }}">
                                            <i class="mdi mdi-delete"></i>
                                        </button>
                                    @endif
                                </div>
                                
                                @if($announcement->title)
                                    <h5 class="card-title">{{ $announcement->title }}</h5>
                                @endif
                                
                                @if($announcement->description)
                                    <p class="card-text">{{ $announcement->description }}</p>
                                @else
                                @if($announcement->joinUser || $announcement->leaveUser)
                                    <p class="card-text">
                                        {{ $announcement->joinUser ? $announcement->joinUser->name : $announcement->leaveUser->name }}
                                        {{ $announcement->joinUser ? 'joined' : 'left' }} the group from {{ $announcement->created_at->locale('en')->diffForHumans() }}.
                                    </p>
                                @endif
                                @endif
                                
                                @if($announcement->type === 'event')
                                    <div class="border-top pt-3 mt-3">
                                        <div class="row text-center">
                                            <div class="col-4">
                                                <i class="mdi mdi-calendar text-primary"></i>
                                                <small class="d-block text-muted">{{ \Carbon\Carbon::parse($announcement->event_date)->format('M j, Y') }}</small>
                                            </div>
                                            <div class="col-4">
                                                <i class="mdi mdi-clock text-primary"></i>
                                                <small class="d-block text-muted">{{ \Carbon\Carbon::parse($announcement->event_time)->format('g:i A') }}</small>
                                            </div>
                                            <div class="col-4">
                                                <i class="mdi mdi-map-marker text-primary"></i>
                                                <small class="d-block text-muted" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $announcement->location }}">{{ Str::limit($announcement->location, 15) }}</small>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                            
                            <div class="card-footer bg-transparent">
                                <small class="text-muted">
                                    <i class="mdi mdi-clock me-1"></i>
                                    {{ $announcement->created_at->locale('en')->diffForHumans() }}
                                </small>
                            </div>
                        </div>
                    </div>

                    <!-- Delete Announcement Modal -->
                    @if(!in_array($announcement->type, ['join', 'leave']))
                        <div class="modal fade" id="deleteAnnouncementModal{{ $announcement->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>Delete Announcement
                                        </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 this announcement?</p>
                                        @if($announcement->title)
                                            <p><strong>Title:</strong> {{ $announcement->title }}</p>
                                        @endif
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                        <form action="{{ route('challengeGroups.announcements.destroy', [$challengeGroup->id, $announcement->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
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                @empty
                    <div class="col-12">
                        <div class="alert alert-info text-center">
                            <i class="mdi mdi-information me-2"></i>No announcements found.
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<!-- Delete Group Modal -->
<div class="modal fade" id="deleteGroupModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger">
                    <i class="mdi mdi-alert-circle me-2"></i>Delete Challenge Group
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to permanently delete <strong>"{{ $challengeGroup->name }}"</strong>?</p>
                <div class="alert alert-danger">
                    <h6><i class="mdi mdi-warning me-1"></i>This action cannot be undone!</h6>
                    <p class="mb-0">Deleting this group will permanently remove:</p>
                    <ul class="mt-2 mb-0">
                        <li>The group and all its information</li>
                        <li>{{ $stats['total_members'] }} member relationships</li>
                        <li>{{ $stats['total_announcements'] }} announcements and posts</li>
                        <li>All associated images and files</li>
                        <li>All historical data and statistics</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form action="{{ route('challengeGroups.destroy', $challengeGroup->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>

<style>
.avatar {
    width: 3rem;
    height: 3rem;
}

.avatar-lg {
    width: 3.5rem;
    height: 3.5rem;
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
}

.display-6 {
    font-size: 2.5rem;
}
</style>

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