@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;
        }
    </style>

    @if ($coursePurchases->isEmpty())
        <div class="empty-cart-section">
            <div class="container-fluid">
                <div class="empty-cart-inner">
                    <h3>No Courses 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
    <!-- Courses Section  -->
    <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 Courses</h5>
                    </div>

                        @include('elements.alert')
                </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 ($coursePurchases as $purchasedCourse)
                        @php
                            $status = 'in-progress'; // default

                            if ($purchasedCourse->course_status === 'completed') {
                                $status = 'complete';
                            } elseif (in_array($purchasedCourse->course_status, ['pending', 'inprogress'])) {
                                $status = 'in-progress';
                            }
                        @endphp

                        <div class="item {{ $status }}">
                            <div class="items-inner-wrapper">
                                <div class="image-details-wrapper">
                                    <div class="image-topics-wrapper">
                                        <div class="image-wrapper">
                                            @if(!empty($purchasedCourse->course->thumbnail_image))
                                            <img src="{{ asset('storage/' . $purchasedCourse->course?->thumbnail_image) }}"
                                                alt="">
                                                @else
                                                <img src=""
                                                    alt="">
                                            @endif
                                        </div>
                                    </div>
                                    <div class="items-details">
                                        <div class="top-details">
                                            <h5>{{ $purchasedCourse->course?->subcategory?->name??"" }}</h5>
                                            @if($purchasedCourse->is_customised_course == 1)
                                                <h6>(Customised Course)</h6>
                                            @else
                                                <h6>({{ $purchasedCourse->course?->name }})</h6>
                                            @endif
                                            @php
                                                // $totalPracticalHours = 10;
                                                $totalPracticalHours = $purchasedCourse->coursePurchaseTopics->sum(
                                                    function ($coursePurchaseTopics) {
                                                        return optional($coursePurchaseTopics->topic)->practical_hours;
                                                    },
                                                );
                                            @endphp

                                            @if ($purchasedCourse->course_status != 'completed')
                                                <p class="hours">Flying Hours : <span>{{ $totalPracticalHours }}</span> Hrs
                                                </p>
                                            @endif

                                        </div>
                                        @php
                                            $progress = $courseProgress[$purchasedCourse->id] ?? 0;
                                            // dd($progress['completed']);
                                            // $progress =  0;
                                        @endphp
                                        <div class="bottom-details">
                                            @if ($purchasedCourse->course_status == 'completed')
                                                <div class="complete-tags">
                                                    <span><img
                                                            src="{{ asset('frontend/assets/images/others/complete-icon.png') }}"
                                                            alt=""> Complete</span>
                                                </div>
                                            @else
                                                <div class="progress-wrapper">
                                                    <p class="complete-progress">{{ $progress }}% Complete</p>
                                                    <div class="progress">
                                                        <div class="progress-bar" role="progressbar"
                                                            aria-label="Example with label"
                                                            style="width: {{ $progress }}%;"
                                                            aria-valuenow="{{ $progress }}" aria-valuemin="0"
                                                            aria-valuemax="100">

                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                            <div class="view-course-wrapper">
                                                <a href="{{ route('student.course-details.show', base64_encode($purchasedCourse->id)) }}"><img
                                                        src="{{ asset('frontend/assets/images/others/view-course-icon.png') }}"
                                                        alt=""> View Course</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="topics-receipt-wrapper">
                                    <div class="topics-section">
                                        <p>{{ $purchasedCourse?->coursePurchaseTopics?->count()??0 }} Topics</p>
                                        <p>{{  $purchasedCourse->course->number_of_chapters ?? 0 }} Chapters</p>
                                    </div>
                                    <div class="view-receipt-section">
                                        <!-- Dropdown  -->
                                        {{-- @php
                                                $purchase = $coursePurchases[$course->id] ?? null;
                                            @endphp --}}
                                        @if ($purchasedCourse->course_status == 'completed')
                                            <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>
                                        @endif
                                        <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
                    @endif
                </div>
            </div>
        </div>
    </div>
    <!-- Courses Section  -->

    <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