{% extends 'base.html.twig' %}

{% block title %}{{course.title}}{% endblock %}

{% block body %}
{% include 'includes/header.html.twig' %}
<main>
    <section class="details-cours">
        <div class="container">
            <div class="row">
                <div class="container-nav">
                    <!-- Alerte pour la catégorie ajoutée au panier -->
                    <div class="alert category-cours" role="alert">
                        <div>
                            <span>
                                <img src="{{ asset('assets/icons/icon-cart-added.svg') }}" alt="added-cart">
                            </span>
                            Category {{ course.id }} is in the cart
                        </div>
                        <a href="#"> <!-- Remplacez 'cart' par la route correcte -->
                            View cart
                            <span>
                                <img src="{{ asset('assets/icons/arrow-view-card.svg') }}" alt="view-cart">
                            </span>
                        </a>
                    </div>

                    <!-- Fil d'Ariane (breadcrumb) -->
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ path('app_home') }}">Home</a></li>
                            <li class="breadcrumb-item"><a href="{{ path('app_course') }}">Courses</a></li>
                        </ol>
                    </nav>
                </div>
                <div class="col-md-8">
                    <div class="card-course">
                        <div>
                            <div class="d-flex flex-column gap-3">
                                <h2 class="course-title">{{ course.title }}</h2>
                                <div class="d-flex align-items-center">
                                    <span class="language-btn">{{course.category.title}}</span>
                                    <span class="rating-stars">{{course.getAverageRating}}</span>
                                    <span class="text-muted">
                                        <div class="stars" style="--rating: {{course.getAverageRating}}"></div>
                                    </span>
                                </div>
                                <div class="d-flex mt-2 justify-content-between align-items-center">
                                    <div class="container-info-course">
                                        <div>
                                            <span>Last Updates :</span>
                                            <p>{{ course.updatedAt|date('M d,Y') }}</p>
                                        </div>
                                        <div>
                                            <span>Level :</span>
                                            <p>{{ course.level.value }}</p>
                                        </div>
                                        <div>
                                            <span>Students :</span>
                                            <p>10</p>
                                        </div>
                                        <div>
                                            <span>Language : </span>
                                            <p>{{ course.language.name }}</p>
                                        </div>
                                    </div>
                                    <div class="button-group">

                                        <button id="WishlistIcon"
                                            class="{% if app.user and app.user.hasCourseInWishlist(course) %}active{% endif %}"
                                            data-controller="wishlist" data-course-id="{{ course.id }}"
                                            data-action="click->wishlist#toggle">
                                            <span data-wishlist-target="icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                    viewBox="0 0 24 24" fill="none">
                                                    <path
                                                        d="M19.5699 5.44C20.4865 6.36024 21.0011 7.60616 21.0011 8.905C21.0011 10.2038 20.4865 11.4498 19.5699 12.37L11.9999 20L4.42986 12.37C3.74911 11.6846 3.28564 10.8137 3.09747 9.86623C2.90931 8.91874 3.00481 7.9368 3.37202 7.04333C3.73923 6.14985 4.36183 5.38455 5.16189 4.84321C5.96195 4.30188 6.90391 4.00857 7.86986 4C9.16151 4.00784 10.3978 4.52536 11.3099 5.44C11.5759 5.70322 11.8077 5.99888 11.9999 6.32C12.192 5.99888 12.4239 5.70322 12.6899 5.44C13.1392 4.98405 13.6748 4.62199 14.2653 4.37486C14.8559 4.12774 15.4897 4.00047 16.1299 4.00047C16.77 4.00047 17.4038 4.12774 17.9944 4.37486C18.5849 4.62199 19.1205 4.98405 19.5699 5.44V5.44Z"
                                                        stroke="black" stroke-width="1.5" stroke-linecap="round"
                                                        stroke-linejoin="round" />
                                                </svg>
                                            </span>
                                            Wishlist
                                        </button>
                                        <div class="dropdown">
                                            <button id="dropdownMenuButton1" data-bs-toggle="dropdown"
                                                aria-expanded="false">
                                                <span><img src="{{ asset('assets/icons/shareIcon.svg') }}"
                                                        alt=""></span>Share
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a class="dropdown-item"
                                                        href="https://www.facebook.com/sharer/sharer.php?u={{ absolute_url(path('detail_course', { slug: course.slug })) | url_encode }}"
                                                        target="_blank">
                                                        <span><img src="{{ asset('assets/icons/Facebook.svg') }}"
                                                                alt=""></span>
                                                        Facebook
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item"
                                                        href="https://twitter.com/intent/tweet?url={{ absolute_url(path('detail_course', { slug: course.slug })) | url_encode }}&text=Check%20this%20course!"
                                                        target="_blank">
                                                        <span><img src="{{ asset('assets/icons/twitter.svg') }}"
                                                                alt=""></span>
                                                        Twitter
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item"
                                                        href="https://www.linkedin.com/sharing/share-offsite/?url={{ absolute_url(path('detail_course', { slug: course.slug })) | url_encode }}"
                                                        target="_blank">
                                                        <span><img src="{{ asset('assets/icons/Linkedin.svg') }}"
                                                                alt=""></span>
                                                        LinkedIn
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item" href="#" id="copyLink">
                                                        <img src="{{ asset('assets/icons/copyIcon.svg') }}" alt="">
                                                        <span>Copy Link</span>
                                                    </a>
                                                </li>
                                            </ul>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        <div class="video-thumbnail mt-4">
                            {% if course.presentationVideoUrl %}
                                {% set videoId = course.presentationVideoUrl %}
                                <iframe src="https://player.vimeo.com/video/{{ videoId}}" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
                            {% else %}
                                <img src="{{ asset('assets/images/exampleImgCours.png')}}" alt="{{course.title}}" style="width: 100%; height: 100%; object-fit: cover;">
                            {% endif %}
                        </div>
                        </div>
                        <div class="courses-details">
                            <div class="courses-text">
                                <div class="title-courses"> Overview </div>
                                {{course.description|raw}}
                            </div>
                        </div>
                        {% if course.whatYouWillLearn %}
                        <div class="courses-details">
                            <div class="courses-text">
                                <div class="title-courses"> What you'll learn </div>
                                {{course.whatYouWillLearn|raw}}
                            </div>
                        </div>
                        {% endif %}

                        <div class="mb-2">
                                <div class="title-courses"> What you'll learn </div>
                                <div class="d-flex justify-content-between align-items-cente">
                                    <div class="learn-details">
                                        <span>32 sections</span>
                                        <span>624 lectures</span>
                                        <span>66h 46m total length</span>
                                    </div>
                                    <button class="collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target=".container-video-link" aria-expanded="false"
                                        aria-controls="collapseTopics">
                                        <p>Expand all sections</p>
                                    </button>

                                </div>
                            </div>
                            <div class="accordion training-videos">
                                {% for chapter in chapters %}
                                        <div class="accordion-item">
                                        <div class="accordion-header" id="playList{{ loop.index }}">
                                            <button class="accordion-button collapsed" type="button"
                                                    data-bs-toggle="collapse" data-bs-target="#playList{{ loop.index }}"
                                                    aria-expanded="false" aria-controls="collapseTopics">
                                                    <span class="toggle-icon">{{ ux_icon('bx:down-arrow') }}</span>
                                                {{ chapter.title }} <!-- Titre du chapitre -->
                                            </button>
                                            <div>
                                                <span>{{ chapter.videos|length }} vidéos . </span>
                                                <span>5 min</span> <!-- Si vous avez une durée totale -->
                                            </div>
                                        </div>
                                        <div id="playList{{ loop.index }}" class="accordion-collapse collapse container-video-link"
                                            aria-labelledby="headingTopics">
                                            <div class="accordion-body">
                                                {% for videoChapter in chapter.videoChapters %}
                                                    <div class="d-flex align-items-center justify-content-between mb-3">
                                                        <div class="link-video">
                                                            {{ ux_icon('icon-park-outline:video') }}
                                                            <!-- Affichage du titre de la vidéo et du lien vers l'URL -->
                                                            <a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal{{ loop.index }}">
                                                                {{ videoChapter.title }}
                                                                <!-- Titre de la vidéo -->
                                                            </a>
                                                        </div>
                                                        <div
                                                            class="timing-video">
                                                            <!-- Lien pour la prévisualisation de la vidéo -->
                                                            <a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal{{ loop.index }}">Preview</a>
                                                        </div>
                                                    </div>

                                                    <!-- Modal pour afficher la vidéo Vimeo -->
                                                    <div class="modal fade" id="exampleModal{{ loop.index }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                        <div class="modal-dialog modal-dialog-centered">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h5 class="modal-title" id="exampleModalLabel">{{ videoChapter.title }}</h5>
                                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                </div>
                                                                <div class="modal-body">
                                                                    <iframe src="https://player.vimeo.com/video/{{ videoChapter.url }}" width="100%" height="500" frameborder="0" allowfullscreen></iframe>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                {% endfor %}

                                            {% if chapter.fileChapters|length > 0 %}
                                            <h5>Files</h5>
                                            {% for fileChapter in chapter.fileChapters %}
                                                <div class="d-flex align-items-center justify-content-between mb-3">
                                                    <div class="link-file">
                                                        {{ ux_icon('vscode-icons:file-type-pdf2',{height: '22px', width: '22px'}) }}
                                                        <!-- Affichage du nom du fichier -->
                                                        <a href="{{ asset('/uploads/FileUploader/' ~ fileChapter.path )}}">{{ fileChapter.name}}</a>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        {% endif %}
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                            <button class="show-mor-btn" type="button" data-bs-toggle="collapse"
                                data-bs-target="#extraContent01" aria-expanded="false" aria-controls="extraContent01">
                                show more
                            </button>
                    </div>
                        {% if course.requirement %}
                        <div class="courses-details">
                            <div class="courses-text">
                                <div class="title-courses"> Requirements</div>
                                {{course.requirement|raw}}
                            </div>
                        </div>
                        {% endif %}
                        <div class="courses-details">
                            <div class="courses-text">
                                <div class="title-courses"> Reviews </div>

                                {% if reviews|length > 0 %}
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="container-reviews">
                                                <h3>{{ course.getAverageRating()|default(0) }}</h3>
                                                <div class="stars" style="--rating: {{ course.getAverageRating()|default(0) }}"></div>
                                                <div>{{ reviews|length }} Reviews</div>
                                            </div>
                                        </div>
                                    <div class="col-md-8">
                                        <div class="container-progress">
                                            <div class="progress-row">
                                                <span class="label-text">Excellent</span>
                                                <div class="w-100">
                                                    <div class="progress">
                                                        <div class="progress-bar" role="progressbar"
                                                            aria-valuenow="{{ course.getReviewPercentage().excellent }}"
                                                            aria-valuemin="0" aria-valuemax="100"
                                                            style="width: {{ course.getReviewPercentage().excellent }}%;">
                                                        </div>
                                                    </div>
                                                </div>
                                                <span class="percentage-text">{{
                                                    course.getReviewPercentage().excellent|number_format(2) }}%</span>
                                            </div>

                                            <div class="progress-row">
                                                <span class="label-text">Very Good</span>
                                                <div class="w-100">
                                                    <div class="progress">
                                                        <div class="progress-bar" role="progressbar"
                                                            aria-valuenow="{{ course.getReviewPercentage().very_good }}"
                                                            aria-valuemin="0" aria-valuemax="100"
                                                            style="width: {{ course.getReviewPercentage().very_good }}%;">
                                                        </div>
                                                    </div>
                                                </div>
                                                <span
                                                    class="percentage-text">{{course.getReviewPercentage().very_good|number_format(2)
                                                    }}%</span>
                                            </div>

                                            <div class="progress-row">
                                                <span class="label-text">Average</span>
                                                <div class="w-100">
                                                    <div class="progress">
                                                        <div class="progress-bar" role="progressbar"
                                                            aria-valuenow="{{ course.getReviewPercentage().average }}"
                                                            aria-valuemin="0" aria-valuemax="100"
                                                            style="width: {{ course.getReviewPercentage().average }}%;">
                                                        </div>
                                                    </div>
                                                </div>
                                                <span
                                                    class="percentage-text">{{course.getReviewPercentage().average|number_format(2)
                                                    }}%</span>
                                            </div>

                                            <div class="progress-row">
                                                <span class="label-text">Poor</span>
                                                <div class="w-100">
                                                    <div class="progress">
                                                        <div class="progress-bar" role="progressbar"
                                                            aria-valuenow="{{ course.getReviewPercentage().poor }}"
                                                            aria-valuemin="0" aria-valuemax="100"
                                                            style="width: {{ course.getReviewPercentage().poor }}%;">
                                                        </div>
                                                    </div>
                                                </div>
                                                <span
                                                    class="percentage-text">{{course.getReviewPercentage().poor|number_format(2)
                                                    }}%</span>
                                            </div>

                                            <div class="progress-row">
                                                <span class="label-text">Terrible</span>
                                                <div class="w-100">
                                                    <div class="progress">
                                                        <div class="progress-bar" role="progressbar"
                                                            aria-valuenow="{{ course.getReviewPercentage().terrible }}"
                                                            aria-valuemin="0" aria-valuemax="100"
                                                            style="width: {{ course.getReviewPercentage().terrible }}%;">
                                                        </div>
                                                    </div>
                                                </div>
                                                <span
                                                    class="percentage-text">{{course.getReviewPercentage().terrible|number_format(2)
                                                    }}%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="container-comment">
                                    {% for review in reviews %}
                                    <div class="my-4">
                                        <div class="d-flex gap-5">
                                            <div class="review-comment">
                                                <div class="review-img">
                                                    <img src="{{ asset('assets/images/userImg01.png') }}"
                                                        alt="rating" />
                                                </div>
                                                <div>
                                                    <div class="user-name">{{ review.user.firstName }}</div>
                                                    <div class="stars" style="--rating: {{ review.rating }}"></div>
                                                </div>
                                            </div>
                                            <div class="date-comment">
                                                <p>
                                                    {{ review.createdAt|date('M d, Y') }}
                                                </p>
                                            </div>
                                        </div>
                                        <div class="comment-text">
                                            <p>
                                                {{ review.comment }}
                                            </p>
                                        </div>
                                    </div>
                                    <hr>
                                    {% endfor %}
                                </div>
                                {% else %}
                                <p>No reviews yet.</p>
                                {% endif %}
                            </div>
                        </div>
                </div>
                <div class="col-md-4">
                    <div class="container-cart">
                        <div class="button-container">
                            <div class="price-container">
                                <span class="current-price">${{course.priceAfterDiscount}}</span>
                                {% if course.discount %}
                                <div>
                                    <span class="old-price">${{course.price}}</span>
                                    <span class="discount-label">{{course.discount}}% off</span>
                                </div>
                                {% endif %}
                            </div>
                            <button class="add-to-cart">
                                <span><img src="{{ asset('assets/icons/cart.svg') }}" alt=""></span>
                                Add to Cart
                            </button>

                            <button class="buy-now">
                                <span><img src="{{ asset('assets/icons/cart.svg') }}" alt=""></span>
                                Buy Now
                            </button>
                            <div class="promo-container">
                                <label for="promo-code">Promotion or Discount code</label>
                                <div class="promo-input-group">
                                    <input type="text" id="promo-code" placeholder="Enter code">
                                    <button class="apply-btn">Apply</button>
                                </div>
                            </div>
                        </div>

                        <div class="course-includes">
                            <h3 class="course-includes-title">Course Includes</h3>
                            <div>
                                <p><img src="{{ asset('assets/icons/playIcon.svg') }}" alt=""> 2 hours on-demand
                                    video
                                </p>
                                <p><img src="{{ asset('assets/icons/article.svg') }}" alt=""> 1 article</p>
                                <p><img src="{{ asset('assets/icons/downloadIcon.svg') }}" alt=""> 50
                                    downloadable
                                    resources</p>
                                <p><img src="{{ asset('assets/icons/lifetimeIcon.svg') }}" alt=""> Full lifetime
                                    access
                                </p>
                                <p><img src="{{ asset('assets/icons/phoneIcon.svg') }}" alt=""> Access on mobile
                                    and TV
                                </p>
                                <p><img src="{{ asset('assets/icons/languageIcone.svg') }}" alt=""> Language:
                                    {{course.language.name}}</p>
                            </div>
                        </div>

                        <div class="about-instructor">
                            <h3 class="about-instructor-title">About the Instructor</h3>
                            <div class="review-comment">
                                <div class="review-img">
                                    <img src="{{ asset('assets/images/userImg01.png') }}" alt="rating">
                                </div>
                                <div>
                                    <div class="user-name">{{course.author.firstName}}</div>
                                </div>
                            </div>
                            <div class="rating-container">
                                <div class="rating-info">
                                    <span>5</span>accordion-item
                                    <div class="stars" style="--rating: 3"></div>
                                </div>
                                <div>
                                    <img src="{{ asset('assets/icons/coursIcon.svg') }}" alt="">
                                    <span>50 Courses</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

    </section>



</main>
{% include 'includes/footer.html.twig' %}

{% endblock %}