@extends('frontend.maintemplate.maintemplate')

@section('content')
    <style>
        .course-description {
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .courses-bottom-details-section .courses-bottom-details-inner .items .item .items-inner-wrapper .image-details-wrapper .items-details .bottom-details{
                margin-bottom: 5px !important;
        }

        .courses-bottom-details-section .courses-bottom-details-inner .items .item .items-inner-wrapper .image-details-wrapper .items-details .bottom-details .view-course-wrapper a
        {
            width: 45% !important;
        }

        .courses-bottom-details-section .courses-bottom-details-inner .items .item .items-inner-wrapper .image-details-wrapper .items-details .top-details p {
            display: flex; flex-direction: row; align-items: center;gap: 10px;font-size: 16px;font-weight: bold;
        }
    </style>

    @if ($registeredWorkshops->isEmpty())
        <div class="empty-cart-section">
            <div class="container-fluid">
                <div class="empty-cart-inner">
                    <h3>No Workshops Available</h3>
                    {{-- <p>It looks like you haven't enrolled in any courses yet.<br />Browse our catalog and start learning
                        something new today!</p> --}}
                </div>
            </div>
        </div>
    @else
        <div class="courses-top-section">
            <div class="container-fluid">
                <div class="courses-top-inner">
                    <div class="left-section">
                        <div class="course-icon-title-wrapper">
                            <div class="image-wrapper">
                                <img src="{{ asset('frontend/assets/images/others/course-icon.png') }}" alt="">
                            </div>
                            <h5>My Workshop</h5>
                        </div>
                    </div>
                    <div class="right-section">
                        <div class="right-tabs-inner">
                            <div class="tabs">
                                <div class="tab active" data-filter="all">All</div>
                                <div class="tab" data-filter="in-progress">In Progress</div>
                                <div class="tab" data-filter="complete">Complete</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="courses-bottom-details-section">
            <div class="container-fluid">
                <div class="courses-bottom-details-inner">
                    <div class="items">
                        @foreach ($registeredWorkshops as $registeredWorkshop)
                            <div class="item {{ $registeredWorkshop->getUserStatus(Auth::guard('student')->id()) ?? 'all' }}">
                                <div class="items-inner-wrapper">
                                    <div class="image-details-wrapper">
                                        <div class="image-topics-wrapper">
                                            <div class="image-wrapper">
                                                <img src="{{ asset('frontend/assets/images/others/mycourses-image.jpg') }}" alt="">
                                            </div>
                                            {{-- <div class="mobile-topics-section">
                                                <p>5 Topics</p>
                                                <p>22 Chapters</p>
                                            </div> --}}
                                        </div>
                                        <div class="items-details">
                                            <div class="top-details">
                                                <h5>{{ $registeredWorkshop->workshop->title }}</h5>
                                                <h6>THEORY MATERIAL</h6>
                                                <p>
                                                    <img src="{{ asset('frontend/assets/images/home/calendar.png') }}" alt="">
                                                    <span>Workshop Date - {{ \Carbon\Carbon::parse($registeredWorkshop->workshop->date)->format('d M Y') }}</span>
                                                </p>
                                            </div>
                                            <div class="bottom-details">
                                                <div class="view-course-wrapper">
                                                    <a href="{{ route('student.view_workshop_material', base64_encode($registeredWorkshop->workshop->id)) }}"><img src="{{ asset('frontend/assets/images/others/view-course-icon.png') }}" alt=""> View Material</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="topics-receipt-wrapper">
                                        <div class="topics-section">
                                            {{-- <p>5 Topics</p>
                                            <p>22 Chapters</p> --}}
                                        </div>
                                        <div class="view-receipt-section">
                                            <!-- Dropdown  -->
                                            <div class="dropdown">
                                                <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                    <div class="dropdown-btn">
                                                        <div class="name-icon-wrapper">
                                                            <img src="{{ asset('frontend/assets/images/others/download-certificate-icon.png') }}" alt="">
                                                            <h6>Download Your<br /> Certificate</h6>
                                                        </div>
                                                        <span class="material-icons">
                                                            expand_more
                                                        </span>
                                                    </div>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li><a class="dropdown-item" href="#">Download Your THEORY Certificate</a></li>
                                                    <li><a class="dropdown-item" href="#">Download Your PRACTICAL Certificate</a></li>
                                                </ul>
                                            </div>
                                            <!-- Dropdown  -->
                                            <a class="view-receipt-btn" href="#"><img src="{{ asset('frontend/assets/images/others/view-receipt-icon.png') }}" alt=""> View Receipt</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    @endif

    <script>
        // jQuery to fade out and remove the message after 3 seconds
        $(document).ready(function() {
            // Check if there are any success or error messages
            if ($("#success-message").length || $("#error-message").length) {
                setTimeout(function() {
                    // Fade out the success or error message
                    $("#success-message, #error-message").fadeOut(500, function() {
                        // Remove the message after the fade-out effect
                        $(this).remove();
                    });
                }, 3000); // 3 seconds delay before fading out
            }
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tabs = document.querySelectorAll('.tab');
            const items = document.querySelectorAll('.items .item');

            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');

                    const filter = this.getAttribute('data-filter');

                    items.forEach(item => {
                        if (filter === 'all') {
                            item.style.display = 'block';
                        } else {
                            item.style.display = item.classList.contains(filter) ? 'block' :
                                'none';
                        }
                    });
                });
            });
        });
    </script>
@endsection