@extends(getTemplate() . '.panel.layouts.panel_layout')
@push('styles_top')
    <style>
        .webinar-card {
            max-height: 281px;
            overflow: hidden;
        }

        .webinar-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .webinar-card .card-body {
            overflow: auto;
        }

        .filter-button {
            color: white;
        }

        .filter-button:hover {

            background-color: var(--bs-gray-300)
        }

        .filter-button.active {
            background-color: var(--bs-primary) !important;
        }
    </style>
@endpush
@section('content')
    <div id="kt_content_container" class="container-xxl mx-0">

        <!-- Activity Section -->
        @if (!empty($allWebinars) && count($allWebinars) > 0)
            @if (!empty($trainingWebinars))
                <div class="row justify-content-start">
                    <div class="col-12 col-md-10 col-lg-8">
                        <div class="d-flex flex-wrap justify-content-lg-start justify-content-center gap-2">
                            <button data-filter="all"
                                class="btn btn-sm filter-button active rounded-pill bg-gray-500 flex-grow-0 flex-shrink-0"
                                style="width: 120px;">All</button>
                            <button data-filter="completed"
                                class="btn btn-sm filter-button rounded-pill bg-gray-500 flex-grow-0 flex-shrink-0"
                                style="width: 120px;">Completed</button>
                            <button data-filter="in-progress"
                                class="btn btn-sm filter-button rounded-pill bg-gray-500 flex-grow-0 flex-shrink-0"
                                style="width: 120px;">In-Progress</button>
                            <button data-filter="training"
                                class="btn btn-sm filter-button rounded-pill bg-gray-500 flex-grow-0 flex-shrink-0"
                                style="width: 120px;">Training</button>
                            <button data-filter="purchases"
                                class="btn btn-sm filter-button rounded-pill bg-gray-500 flex-grow-0 flex-shrink-0"
                                style="width: 120px;">Purchases</button>
                            <button data-filter="due-soon"
                                class="btn btn-sm filter-button rounded-pill bg-gray-500 flex-grow-0 flex-shrink-0"
                                style="width: 120px;">Due Soon</button>
                        </div>
                    </div>
                </div>
                <div class="row mt-5" >
                    <div class="col-12">
                        <div class="row gy-5 justify-content-lg-start justify-content-center" id="webinars-container">
                            @foreach ($allWebinars as $index => $webinar)
                                @include('web.default.panel.webinar.partials.student_grid_card', [
                                    'webinar' => $webinar,
                                    'popup' => false,
                                ])
                            @endforeach
                        </div>
                    </div>
                </div>
            @endif
        @else
            
        @endif
        </section>
    </div>
@endsection
@push('scripts_bottom')
<script>
    $(document).ready(function() {

        // Handle filter button clicks
        $('.filter-button').on('click', function() {
            $('.filter-button').removeClass('active');
            $(this).addClass('active');
            loadWebinars($(this).data('filter'));
        });

        function loadWebinars(filter) {
            $.ajax({
                url: '/panel/webinars/filter',
                method: 'GET',
                data: {
                    filter: filter
                },
                success: function(response) {
                    $('#webinars-container').html(response);
                },
                error: function(xhr) {
                    console.error('Error loading webinars:', xhr.responseText);
                }
            });
        }
    });
</script>
@endpush