@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;
    }
</style>
@endpush
@section('content')
    <div id="kt_content_container" class="container-xxl mx-0">
        <!-- Activity Section -->
        <div class="row">
            <div class="col-12">
                <section class="mt-4">
                    {{-- Filters will go here --}}
                </section>

                <!-- Webinars Section -->
                <section class="mt-4">
                    
                    @if (!empty($webinars) and !$webinars->isEmpty())
                        @foreach ($webinars as $webinar)
                            @php
                                $lastSession = $webinar->lastSession();
                                $nextSession = $webinar->nextSession();
                                $isProgressing = false;

                                if (
                                    $webinar->start_date <= time() and
                                    !empty($lastSession) and
                                    $lastSession->date > time()
                                ) {
                                    $isProgressing = true;
                                }
                            @endphp

                                                        <div class="card mb-4 webinar-card">
                                <div class="row g-0">
                                    <!-- Webinar Image -->
                                    <div class="col-md-4 position-relative">
                                        <img src="{{ $webinar->getImage() }}" class="img-fluid rounded-start webinar-image" alt="{{ $webinar->title }}">
                            
                                        <!-- Badges -->
                                        <div class="position-absolute top-0 start-0 mt-2 ms-2">
                                            @if (!empty($webinar->deleteRequest) and $webinar->deleteRequest->status == 'pending')
                                                <span class="badge bg-danger">{{ trans('update.removal_request_sent') }}</span>
                                            @else
                                                @switch($webinar->status)
                                                    @case(\App\Models\Webinar::$active)
                                                        @if ($webinar->isWebinar())
                                                            @if ($webinar->start_date > time())
                                                                <span class="badge bg-primary">{{ trans('panel.not_conducted') }}</span>
                                                            @elseif($webinar->isProgressing())
                                                                <span class="badge bg-secondary">{{ trans('webinars.in_progress') }}</span>
                                                            @else
                                                                <span class="badge bg-secondary">{{ trans('public.finished') }}</span>
                                                            @endif
                                                        @else
                                                            <span class="badge bg-secondary">{{ trans('webinars.' . $webinar->type) }}</span>
                                                        @endif
                                                    @break
                            
                                                    @case(\App\Models\Webinar::$isDraft)
                                                        <span class="badge bg-danger">{{ trans('public.draft') }}</span>
                                                    @break
                            
                                                    @case(\App\Models\Webinar::$pending)
                                                        <span class="badge bg-warning">{{ trans('public.waiting') }}</span>
                                                    @break
                            
                                                    @case(\App\Models\Webinar::$inactive)
                                                        <span class="badge bg-danger">{{ trans('public.rejected') }}</span>
                                                    @break
                                                @endswitch
                                            @endif
                                        </div>
                            
                                        <!-- Progress Bar for Webinars -->
                                        @if ($webinar->isWebinar())
                                            <div class="progress mt-2">
                                                <div class="progress-bar" role="progressbar" style="width: {{ $webinar->getProgress() }}%" aria-valuenow="{{ $webinar->getProgress() }}" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        @endif
                                    </div>
                            
                                    <!-- Webinar Details -->
                                    <div class="col-md-8">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-center mb-3">
                                                <h3 class="card-title">
                                                    <a href="{{ $webinar->getUrl() }}" target="_blank" class="text-decoration-none">
                                                        {{ $webinar->title }}
                                                    </a>
                                                    <span class="badge bg-primary text-white ms-2">{{ trans('webinars.' . $webinar->type) }}</span>
                                                </h3>
                            
                                                <!-- Dropdown for actions -->
                                                @if ($webinar->isOwner($authUser->id) or $webinar->isPartnerTeacher($authUser->id))
                                                    <div class="dropdown">
                                                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                                            Actions
                                                        </button>
                                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                                            @if (!empty($webinar->start_date))
                                                                <li><button type="button" data-webinar-id="{{ $webinar->id }}" class="dropdown-item js-webinar-next-session">{{ trans('public.create_join_link') }}</button></li>
                                                            @endif
                            
                                                            {{-- @can('panel_webinars_learning_page')
                                                                <li><a href="{{ $webinar->getLearningPageUrl() }}" target="_blank" class="dropdown-item">{{ trans('update.learning_page') }}</a></li>
                                                            @endcan --}}
                            
                                                            @can('panel_webinars_create')
                                                                <li><a href="/panel/webinars/{{ $webinar->id }}/edit" class="dropdown-item">{{ trans('public.edit') }}</a></li>
                                                            @endcan
                            
                                                            @if ($webinar->isWebinar())
                                                                @can('panel_webinars_create')
                                                                    <li><a href="/panel/webinars/{{ $webinar->id }}/step/4" class="dropdown-item">{{ trans('public.sessions') }}</a></li>
                                                                @endcan
                                                            @endif
                            
                                                            {{-- @can('panel_webinars_create')
                                                                <li><a href="/panel/webinars/{{ $webinar->id }}/step/4" class="dropdown-item">{{ trans('public.files') }}</a></li>
                                                            @endcan --}}
                            
                                                            {{-- @can('panel_webinars_export_students_list')
                                                                <li><a href="/panel/webinars/{{ $webinar->id }}/export-students-list" class="dropdown-item">{{ trans('public.export_list') }}</a></li>
                                                            @endcan
                            
                                                            @if ($authUser->id == $webinar->creator_id)
                                                                @can('panel_webinars_duplicate')
                                                                    <li><a href="/panel/webinars/{{ $webinar->id }}/duplicate" class="dropdown-item">{{ trans('public.duplicate') }}</a></li>
                                                                @endcan
                                                            @endif --}}
                            
                                                            @can('panel_webinars_statistics')
                                                                <li><a href="/panel/webinars/{{ $webinar->id }}/statistics" class="dropdown-item">{{ trans('update.statistics') }}</a></li>
                                                            @endcan
                            
                                                            @if ($webinar->creator_id == $authUser->id)
                                                                @can('panel_webinars_delete')
                                                                    <li>
                                                                        <a href="#" class="dropdown-item text-danger" onclick="event.preventDefault(); if(confirm('{{ trans('panel.delete_confirmation_msg') }}')) { document.getElementById('delete-webinar-{{ $webinar->id }}').submit(); }">
                                                                            {{ trans('public.delete') }}
                                                                        </a>
                                                                        <form id="delete-webinar-{{ $webinar->id }}" action="/panel/webinars/{{ $webinar->id }}/delete" method="post" style="display: none;">
                                                                            @csrf
                                                                            @method('DELETE')
                                                                        </form>
                                                                    </li>
                                                                @endcan
                                                            @endif
                                                        </ul>
                                                    </div>
                                                @endif
                                            </div>
                            
                                            <!-- Rating -->
                                            <div class="mb-3">
                                                @include(getTemplate() . '.includes.webinar.rate', ['rate' => $webinar->getRate()])
                                            </div>
                            
                                            <!-- Price -->
                                            <div class="mb-3">
                                                @if ($webinar->price > 0)
                                                    @if ($webinar->bestTicket() < $webinar->price)
                                                        <span class="text-muted text-decoration-line-through">{{ handlePrice($webinar->price, true, true, false, null, true) }}</span>
                                                        <span class="text-danger ms-2">{{ handlePrice($webinar->bestTicket(), true, true, false, null, true) }}</span>
                                                    @else
                                                        <span>{{ handlePrice($webinar->price, true, true, false, null, true) }}</span>
                                                    @endif
                                                @else
                                                    <span>{{ trans('public.free') }}</span>
                                                @endif
                                            </div>
                            
                                            <!-- Webinar Stats -->
                                            <div class="row">
                                                <div class="col-md-4 mb-2">
                                                    <small class="text-muted">{{ trans('public.item_id') }}:</small>
                                                    <span>{{ $webinar->id }}</span>
                                                </div>
                                                <div class="col-md-4 mb-2">
                                                    <small class="text-muted">{{ trans('public.category') }}:</small>
                                                    <span>{{ !empty($webinar->category_id) ? $webinar->category->title : '' }}</span>
                                                </div>
                                                @if ($webinar->isProgressing() and !empty($nextSession))
                                                    <div class="col-md-4 mb-2">
                                                        <small class="text-muted">{{ trans('webinars.next_session_duration') }}:</small>
                                                        <span>{{ convertMinutesToHourAndMinute($nextSession->duration) }} Hrs</span>
                                                    </div>
                                                    @if ($webinar->isWebinar())
                                                        <div class="col-md-4 mb-2">
                                                            <small class="text-muted">{{ trans('webinars.next_session_start_date') }}:</small>
                                                            <span>{{ dateTimeFormat($nextSession->date, 'j M Y') }}</span>
                                                        </div>
                                                    @endif
                                                @else
                                                    <div class="col-md-4 mb-2">
                                                        <small class="text-muted">{{ trans('public.duration') }}:</small>
                                                        <span>{{ convertMinutesToHourAndMinute($webinar->duration) }} Hrs</span>
                                                    </div>
                                                    @if ($webinar->isWebinar())
                                                        <div class="col-md-4 mb-2">
                                                            <small class="text-muted">{{ trans('public.start_date') }}:</small>
                                                            <span>{{ dateTimeFormat($webinar->start_date, 'j M Y') }}</span>
                                                        </div>
                                                    @endif
                                                @endif
                                                @if ($webinar->isTextCourse() or $webinar->isCourse())
                                                    <div class="col-md-4 mb-2">
                                                        <small class="text-muted">{{ trans('public.files') }}:</small>
                                                        <span>{{ $webinar->files->count() }}</span>
                                                    </div>
                                                @endif
                                                @if ($webinar->isTextCourse())
                                                    <div class="col-md-4 mb-2">
                                                        <small class="text-muted">{{ trans('webinars.text_lessons') }}:</small>
                                                        <span>{{ $webinar->textLessons->count() }}</span>
                                                    </div>
                                                @endif
                                                @if ($webinar->isCourse())
                                                    <div class="col-md-4 mb-2">
                                                        <small class="text-muted">{{ trans('home.downloadable') }}:</small>
                                                        <span>{{ $webinar->downloadable ? trans('public.yes') : trans('public.no') }}</span>
                                                    </div>
                                                @endif
                                                <div class="col-md-4 mb-2">
                                                    <small class="text-muted">{{ trans('panel.sales') }}:</small>
                                                    <span>{{ count($webinar->sales) }} ({{ (!empty($webinar->sales) and count($webinar->sales)) ? handlePrice($webinar->sales->sum('amount')) : 0 }})</span>
                                                </div>
                                                @if (!empty($webinar->partner_instructor) and $webinar->partner_instructor and $authUser->id != $webinar->teacher_id and $authUser->id != $creator_id)
                                                    <div class="col-md-4 mb-2">
                                                        <small class="text-muted">{{ trans('panel.invited_by') }}:</small>
                                                        <span>{{ $webinar->teacher->full_name }}</span>
                                                    </div>
                                                @elseif($authUser->id != $webinar->teacher_id and $authUser->id != $webinar->creator_id)
                                                    <div class="col-md-4 mb-2">
                                                        <small class="text-muted">{{ trans('webinars.teacher_name') }}:</small>
                                                        <span>{{ $webinar->teacher->full_name }}</span>
                                                    </div>
                                                @elseif($authUser->id == $webinar->teacher_id and $authUser->id != $webinar->creator_id and $webinar->creator->isOrganization())
                                                    <div class="col-md-4 mb-2">
                                                        <small class="text-muted">{{ trans('webinars.organization_name') }}:</small>
                                                        <span>{{ $webinar->creator->full_name }}</span>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
            </div>
        </div>
        <!-- Pagination -->
        <div class="d-flex justify-content-center">
            {{ $webinars->appends(request()->input())->links() }}
        </div>
    @else
        <div class="text-center py-5">
            <img src="/assets/default/img/no-result/webinar.png" alt="No Webinars" class="img-fluid mb-3">
            <h3>{{ trans('panel.you_not_have_any_webinar') }}</h3>
            <p class="text-muted">{{ trans('panel.no_result_hint') }}</p>
            <a href="/panel/webinars/new" class="btn btn-primary">{{ trans('panel.create_a_webinar') }}</a>
        </div>
        @endif
        </section>
    </div>

    <!-- Modal for creating next session -->
    <div class="modal fade" id="webinarNextSessionModal" tabindex="-1" aria-labelledby="webinarNextSessionModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="webinarNextSessionModalLabel">{{ trans('public.create_join_link') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="/panel/webinars/create-next-session" method="post">
                        @csrf
                        <input type="hidden" name="webinar_id" id="webinarIdInput">
                        <div class="mb-3">
                            <label for="dateInput" class="form-label">{{ trans('public.date') }}</label>
                            <input type="text" name="date" class="form-control datepicker" id="dateInput"
                                required>
                        </div>
                        <div class="mb-3">
                            <label for="durationInput" class="form-label">{{ trans('public.duration') }}</label>
                            <input type="text" name="duration" class="form-control" id="durationInput" required>
                        </div>
                        <div class="mb-3">
                            <label for="linkInput" class="form-label">{{ trans('public.link') }}</label>
                            <input type="text" name="link" class="form-control" id="linkInput" required>
                        </div>
                        <div class="mb-3">
                            <label for="descriptionInput" class="form-label">{{ trans('public.description') }}</label>
                            <textarea name="description" class="form-control" id="descriptionInput" rows="3"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">{{ trans('public.save') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize datepicker
            flatpickr(".datepicker", {
                enableTime: true,
                dateFormat: "Y-m-d H:i",
            });

            // Handle "Create Join Link" button click
            const createJoinLinkButtons = document.querySelectorAll('.js-webinar-next-session');
            createJoinLinkButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const webinarId = this.getAttribute('data-webinar-id');
                    document.getElementById('webinarIdInput').value = webinarId;
                    const modal = new bootstrap.Modal(document.getElementById(
                        'webinarNextSessionModal'));
                    modal.show();
                });
            });

            // Handle form submission
            const nextSessionForm = document.querySelector('#webinarNextSessionModal form');
            nextSessionForm.addEventListener('submit', function(e) {
                e.preventDefault();

                // Perform AJAX submission
                fetch(this.action, {
                        method: 'POST',
                        body: new FormData(this),
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                                .getAttribute('content')
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            alert(saveSuccessLang);
                            location.reload();
                        } else {
                            alert(data.message || 'An error occurred');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('An error occurred');
                    });
            });
        });

        var undefinedActiveSessionLang = '{{ trans('webinars.undefined_active_session') }}';
        var saveSuccessLang = '{{ trans('webinars.success_store') }}';
        var selectChapterLang = '{{ trans('update.select_chapter') }}';
    </script>
@endpush