@extends('layouts.app')

@section('css')
{{-- <link rel="stylesheet" href="{{ asset('assets/custom/css/session-logs.css') }}"> --}}
<style>

    .list-card{
        background: #fff;
        border-radius: 10px;
    }
    .group-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 25px;
        margin-bottom: 30px;
    }
    
    .quick-stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }
    
    .stat-card {
        background: white;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
    }
    
    .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    }
    
    .stat-icon {
        font-size: 2rem;
        margin-bottom: 10px;
        opacity: 0.8;
    }
    
    .stat-value {
        font-size: 1.8rem;
        font-weight: 700;
        color: #2c3e50;
    }
    
    .stat-label {
        font-size: 0.9rem;
        color: #7f8c8d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .category-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    
    .category-filter-btn {
        padding: 8px 16px;
        background: white;
        border: 2px solid #e0e0e0;
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.9rem;
        color: #555;
    }
    
    .category-filter-btn:hover {
        border-color: #007bff;
        color: #007bff;
    }
    
    .category-filter-btn.active {
        background: #007bff;
        border-color: #007bff;
        color: white;
    }
    
    .activity-item-card {
        border-left: 4px solid #007bff;
        transition: all 0.3s ease;
        margin-bottom: 15px;
    }
    
    .activity-item-card:hover {
        transform: translateX(5px);
        box-shadow: 0 3px 15px rgba(0,0,0,0.1);
    }
    
    .activity-type-badge {
        font-size: 0.75rem;
        padding: 4px 10px;
        border-radius: 12px;
    }
    
    .method-badge {
        font-size: 0.7rem;
        padding: 3px 8px;
        border-radius: 4px;
    }
    
    .btn-view-user {
        background: #28a745;
        border-color: #28a745;
    }
    
    .btn-view-user:hover {
        background: #218838;
        border-color: #1e7e34;
    }
    
    .btn-view-session {
        background: #17a2b8;
        border-color: #17a2b8;
    }
    
    .btn-view-session:hover {
        background: #138496;
        border-color: #117a8b;
    }
    
    .activity-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
    }
    
    .user-info {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
    }
    
    .empty-state {
        text-align: center;
        padding: 50px 20px;
        color: #6c757d;
    }
    
    .empty-state i {
        font-size: 4rem;
        margin-bottom: 20px;
        opacity: 0.3;
    }
</style>
@endsection

@section('js')
<script>
    const groupId = {{ $group->id }};
    const groupName = {!! \Illuminate\Support\Js::from($group->name) !!};
</script>
<script src="{{ asset('assets/custom/js/session-logs/activity-logs.js') }}?v=2"></script>
<script>
    // Category filtering
    document.addEventListener('DOMContentLoaded', function() {
        // Load group stats
        loadGroupStats();
        initBackendPagination();
    });
    
    function loadGroupStats() {
        fetch(`/group-sessions/${groupId}/stats?period=30`, {
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            updateStatsDisplay(data);
        })
        .catch(error => {
            console.error('Error loading stats:', error);
        });
    }
    
    function updateStatsDisplay(data) {
        const statsContainer = document.getElementById('quickStats');
        if (!statsContainer || !data.statistics) return;
        
        const stats = data.statistics;
        
        statsContainer.innerHTML = `
            <div class="stat-card">
                <div class="stat-icon text-primary">
                    <i class="fas fa-history"></i>
                </div>
                <div class="stat-value">${stats.total_activities || 0}</div>
                <div class="stat-label">{{ __('labels.total_activities') }}</div>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon text-success">
                    <i class="fas fa-user-friends"></i>
                </div>
                <div class="stat-value">${stats.active_members || 0}</div>
                <div class="stat-label">{{ __('labels.active_members') }}</div>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon text-info">
                    <i class="fas fa-calendar-alt"></i>
                </div>
                <div class="stat-value">${stats.active_days || 0}</div>
                <div class="stat-label">{{ __('labels.active_days') }}</div>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon text-warning">
                    <i class="fas fa-user-clock"></i>
                </div>
                <div class="stat-value">${data.current_online || 0}</div>
                <div class="stat-label">{{ __('labels.currently_online') }}</div>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon text-danger">
                    <i class="fas fa-chart-line"></i>
                </div>
                <div class="stat-value">${calculateAvgActivities(stats)}</div>
                <div class="stat-label">{{ __('labels.avg_day') }}</div>
            </div>
        `;
    }
    
    function calculateAvgActivities(stats) {
        if (!stats.total_activities || !stats.active_days) return '0';
        const avg = stats.total_activities / stats.active_days;
        return avg.toFixed(1);
    }
    
    // Make toTitleCase available
    if (!String.prototype.toTitleCase) {
        String.prototype.toTitleCase = function() {
            return this.replace(/\w\S*/g, function(txt) {
                return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
            });
        };
    }
    
    function clearSearch(inputId) {
            const $input = $(`#${inputId}`);
            const $container = $input.closest('[data-paginate-container]');
            const currentValue = $input.val().trim();
            $input.val('')

            // const url = $container.data('url') || window.location.href;
            const currentUrl = new URL(window.location.href);

            currentUrl.searchParams.forEach((_, key) => {
                currentUrl.searchParams.delete(key);
            });

            if (currentValue) {
                currentUrl.searchParams.set('category_id', currentValue);
            }
        loadBackendPage(currentUrl.toString(), $container);
    }
    
</script>
@endsection

@push('pageTitle')
    {{ __('labels.group_activities') }}: {{ $group->name }}
@endpush

@section('content')

@include('components.common.page-header', [
    // 'pageTitle' => __('labels.group_activities'),
    'pageTitle' => $group->name,
    'breadcrumbs' => [
        ['url' => route('group-sessions.index'), 'label' => __('labels.group_sessions')],
        ['label' => $group->name],
    ],
    'actionButton' => [
        'url' => route('group-sessions.index'),
        'text' => __('labels.back_to_group_activities'),
        'icon' => 'fas fa-arrow-left'
    ],
])

@include('components.common.flush-message')

<!-- Quick Stats -->
<div class="quick-stats-grid" id="quickStats">
    <!-- Stats will be loaded via JavaScript -->
    <div class="text-center py-4">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">{{ __('datatable.loading') }}</span>
        </div>
    </div>
</div>

<!-- Main Content -->
<div class="col-xl-12">
    <div class="card section-card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center gap-5">
                <h5 class="mb-0">
                    <i class="fas fa-history me-2"></i>{{ __('labels.activity_logs') }}                
                </h5>
                {{-- <div class="d-flex gap-2">
                    <div class="input-group input-group-sm" style="width: 300px;">
                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                        <input type="text" 
                               class="form-control" 
                               id="globalSearch" 
                               placeholder="{{ __('labels.search_activities_details') }}">
                        <a href="{{ route('group-sessions.show', $group->id) }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times"></i>
                        </a>
                    </div> --}}
                </div>
            </div>
        </div>
        
        <div class="card-body list-card" 
             data-paginate-type="backend" 
             data-paginate-container 
             data-url="{{ route('group-sessions.show', $group->id) }}">
            <!-- Category Filters -->
                {{-- <div class="category-filters" id="categoryFilters">
                    <!-- Category filter buttons will be generated by JavaScript -->
                </div> --}}
                    <div class="row mb-4">
                        <div class="col-md-8">
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-search"></i></span>
                                <input type="text" 
                                    id="activity-details-search"
                                    class="form-control" 
                                    name="search" 
                                    value="{{ request('search') }}"
                                    placeholder="{{ __('labels.search.search') }}"
                                    data-search-input 
                                    data-paginate-type="backend"
                                    {{-- data-url="{{ route('group-sessions.show', $group->id) }}" --}}
                                    data-debounce="300">
                                {{-- <button class="btn btn-primary" type="submit">
                                    <i class="fas fa-filter me-1"></i> {{ __('labels.filter') }}
                                </button> --}}
                                <button onclick="clearSearch('activity-details-search')" class="btn btn-secondary">
                                    <i class="fas fa-redo me-1"></i> {{ __('labels.clear') }}
                                </button>
                            </div>
                        </div>
                    </div>

                {{-- <div class="d-flex gap-2">
                    <div class="input-group input-group-sm" style="width: 300px;">
                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                        <input type="text" 
                               class="form-control" 
                               id="globalSearch" 
                               placeholder="{{ __('labels.search_activities_details') }}"
                               onkeyup="filterActivitiesBySearch()">
                        <button class="btn btn-outline-secondary" type="button" onclick="clearSearch()">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div> --}}
            
            <!-- Activities List -->
            <div id="activitiesList">
                <div data-paginate-error class="alert alert-danger" style="display: none;">
                    <i class="fas fa-exclamation-triangle"></i>
                    <span class="error-message">{{ __('datatable.error_try_again') }}</span>
                </div>
                <!-- Loading Indicator -->
                <div data-paginate-loading class="text-center" style="display: none;">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">{{ __('datatable.loading') }}</span>
                    </div>
                </div>
                <div data-table-container>
                    @if(isset($activities))
                        @include('pages.group-sessions.partials.detail-rows', ['activities' => $activities])
                    @else
                        <div class="text-center py-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">{{ __('datatable.loading') }}</span>
                            </div>
                        </div>
                    @endif
                </div>
                <!-- Pagination -->
                <div data-pagination class="mt-4">
                    @if(isset($activities))
                        {{ $activities->links() }}
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Activity Details Modal -->
<div class="modal fade" id="activityDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('labels.activity_details') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="activityDetailsContent">
                <!-- Content loaded via AJAX -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('labels.close') }}</button>
            </div>
        </div>
    </div>
</div>
@endsection