{% extends '@syndexTrack/layout.html.twig' %}

{% trans_default_domain "lesson" %}

{% block title %}
 {{ 'مسار'  }}  {{course.title}} {{'- شمرا أكاديميا' }}
{% endblock %}

{% block schemaBlock %}
<script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@id": "{{ path('syndex_lesson_list' , {course_slug : course.slug}) }} ",
      "@type": "Course",
      "name": "{{course.title}}",
      "description": "{{course.shortDescription}}",
      "publisher": {
         "@type": "Person",
        "name": "{{course.createdBy.firstname}} {{" "}} {{course.createdBy.lastname}}",
        "email": "{{course.createdBy.email}}"
      },
      "provider": {
        "@type": "Organization",
        "name": "Shamra Academia",
        "url": "{{ path('syndex_academic_homepage') }}"
      },
      "image": [
        "asset('uploads/course/'){{ course.imageCover }}"
      ],
      {% if course.raters > 0 %}
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": {{ course.rate }},
        "ratingCount": {{ course.raters }}
      },
      {% endif %}
      "offers": [{
        "@type": "Offer",
        "category": "Paid",
        "priceCurrency": "USD",
        "price": 4.99
      }],
      "totalHistoricalEnrollment": {{numberOfCustomer}},
      "datePublished": "{{ course.createdAt | date() }}",
      "about": [
        {% for tag in course.tags %}
            "{{ tag }}"
            {{ loop.last ?'': ',' }}
        {% endfor %}
      ],
      "inLanguage": "ar",
      "syllabusSections": [
        {% for lesson in lessons %}
            {
            "@type": "Syllabus",
            "name": "{{ lesson.title }}",
            "description": "{{lesson.description}}",
            "timeRequired": "PT{{lesson.estimatedminutes|date('H:i:s') }}"
            }
            {{ loop.last ?'': ',' }}
        {% endfor %}
      ],
      "review": [],
      "coursePrerequisites": [
        "{{ course.prerequest }}"
      ],
      "hasCourseInstance": [
      {
        // Online self-paced course that takes 2 days to complete.
        "@type": "CourseInstance",
        "courseMode": "Online",
        "courseWorkload": "P{{ (totalTime/86400) | number_format }}DT{{ ((totalTime % 86400)/3600)| number_format}}H{{ ((totalTime % 3600)/60)| number_format}}M{{ (totalTime % 60)| number_format}}S"
      }]
    }
    </script>

{% endblock %}

{% block og_title %} {{course.title}} {% endblock %}
{% block og_description %}{{course.description}}{% endblock %}
{% block og_url %}{{path('syndex_lesson_list' , {'course_slug' : course.slug } ) }}{% endblock %}
{% block og_image %} {{ "uploads/course/" ~ course.imageCover }} {% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/comment/css/ShamraComments.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/syndextrack/css/list.css') }}" />

{% endblock %}

{% set img = asset('uploads/') %}
{% set img_Profile = asset('uploads/profile/img/tmp/') %}


 {% block content %}
    <div id="course" class="container">
        {% if imageError %}
            <div class="alert alert-danger  alert-dismissible">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                {{imageError|trans}}
            </div>
        {% endif %}
        {% if isCustomer %}
            <div class="alert alert-info  alert-dismissible">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                لديك وصول كامل للكورس
            </div>
        {% endif %}
        {% if status == "success" %}
            <div class="alert alert-success  alert-dismissible">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
                {{message|trans}}
            </div>
        {% elseif status == "error" %}
            <div class="alert alert-danger  alert-dismissible">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                {{message|trans}}
            </div>
        {% endif %}
        {% if  app.user == course.createdBy  %}
            {% if course.status == "accepted" %}
                <div class="alert alert-success" role="alert">
                    الكورس مقبول
                    {% if course.numberOfAddedLessons != course.numberOfLessons  %}
                        <div> ترغب بإضافة درس جديد <a href="{{path('syndex_lesson_new' , {'course_slug' : course.slug } ) }}"> انقر هنا</a> </div>
                    {% endif %}
                </div>
            {% elseif course.status == "feedback" %}
                <div class="alert alert-warning" role="alert">
                    لكي يتم الموافقة على الكورس يرجى مراعاة مايلي
                    <ul>
                        {% for row in course.feedback %}
                            <li>
                                {{ row.content }}
                            </li>
                        {% endfor %}
                    </ul>
                    <a href="{{ path('resend_approve_request' , {'slug': course.slug}) }}">إعادة طلب موافقة</a>
                </div>
            {% elseif course.status == "pending" %}
                <div class="alert alert-info" role="alert">
                    بانتظار معاينة الادارة
                    <br>
                    لا يمكنك إضافة أو تعديل دروس حتى يتم الموافقة على الكورس
                </div>
            {% else %}
                <div class="alert alert-danger" role="alert">
                    الكورس مرفوض
                </div>
            {% endif %}
        {% endif %}


        <div id="page-header" class="new-research-header section-head">
            <div class="header">
                <span> {{course.title}}</span>
                {% for field in course.fields %}
                    <span class="field research-keyword">
                        <a href="{{ path('syndex_all_tracks') }}?field={{ field }}">{{ field }}</a>
                    </span>
                {% endfor %}
                {% for tag in course.tags %}
                    <span class="field research-keyword">
                        <a href="{{ path('syndex_all_tracks') }}?tags={{ tag }}">{{ tag }}</a>
                    </span>
                {% endfor %}
            </div>
            <div class="meta"  style="color:#90949c;display: flex;">
                <span id="rates" class="meta pad">
                    <i class="fa fa-user" data-toggle="tooltip" title="{{ 'form.rate.lesson.all-rater'|trans({},'lesson') }}"></i>
                    {% if course.raters %}
                        {{ course.raters }}
                    {% else %}
                        {{ 0 }}
                    {% endif %}
                     &nbsp;
                </span>

                <span title="{{ 'track.views'|trans({},'track') }}" data-toggle="tooltip" >
                    <i style="color:#90949c" class="fa fa-eye academia-icon"></i>
                    {{ course.hits }} &nbsp;
                </span>

                <span title="{{ 'track.buy'|trans({},'track') }}"   data-toggle="tooltip">
                    <i  style="color:#90949c" class="fa fa-shopping-cart academia-icon"></i>
                    {{numberOfCustomer}} &nbsp;
                </span>

                <span data-toggle="tooltip">
                    <i  style="color:#90949c" class="fa fa-calendar academia-icon"></i>
                    {{time}}
                </span>

                {% if course.status != "accepted" and  app.user == course.createdBy %}
                    <a style="flex-grow: 1;" href="{{ path('syndex_one_track_edit' , {'slug':course.slug })}}">
                        <span style="float:left;" class="btn btn-success" data-toggle="tooltip">
                            {{'تعديل'}}
                        </span>
                    </a>
                {% endif %}
            </div>
        </div>
        {% include "@syndexTrack/Lesson/courseCard.html.twig" %}

        <div id="lessons-container" class="row">
            {% if course.video != '' and course.video is not null %}
                <center>
                    <div id="player"></div>
                </center>
                <br>
            {% endif %}
            <div class="col-md-8 col-xs-12 lesson-list">
                <span class="section-head"  style="font-size:20px" >{{ 'list.content'|trans }}:</span>
                {% for lesson in lessons %}
                   <div class="list-group col-md-8 col-xs-12 border-right">
                        <div style="color:#ff8600;font-size:25px;" class="col-md-2 col-xs-1">
                            {{loop.revindex}}
                        </div>
                        <div  class="col-md-8 col-xs-11 shadow">
                            <a href="{% if app.user == course.createdBy or isCustomer or trust_user %}{{path('syndex_lesson_index' , {'course_slug':course.slug ,  'slug':lesson.slug})}}{% else %}#{% endif %}" class="list-group-item list-group-item-action flex-column align-items-start noborder">
                                <h5 ><b> {{ 'list.Title'|trans }} : {{lesson.title}}</b></h5>
                                <small>{{ 'list.Time'|trans }} : {{lesson.estimatedminutes|date('H:i') }}</small>
                                <p >{{ 'list.Description'|trans }} : {{lesson.description}}</p>
                            </a>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <div id="bio" class="col-md-4 col-xs-12 shadow" style="text-align:center;">
                <span class="section-head" style="font-size:20px">{{ 'list.trainer'|trans }}</span>
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title"><a href="/users/{{owner.username}}">{{owner.firstName}} {{owner.lastName}}</a></h4>
                        <p class="card-text">{{course.teacherBio}}</p>
                        <a href="{{course.url}}" style="margin-bottom:10px;color:#0073b1;" ><span style="padding:5px;">{{ 'profile.link'|trans }}</span><i style="font-size:24px" class="fa">&#xf08c;</i></a>
                    </div>
                </div>
            </div>
        </div>

        <div id="lessons-rate" class="row shadow">
            <div class="col-md-6 col-xs-12">
                <span class="section-head" >{{ 'form.rate.lesson.all'|trans }}</span>
                <span class="fa fa-star-o medium  full-rate" style="color: #FD4" data-rate="1" data-toggle="tooltip" title="{{ 'form.rate.bad'|trans }}"></span>
                <span class="fa fa-star-o medium  full-rate" style="color: #FD4" data-rate="2" data-toggle="tooltip" title="{{ 'form.rate.fair'|trans }}"></span>
                <span class="fa fa-star-o medium  full-rate" style="color: #FD4" data-rate="3" data-toggle="tooltip" title="{{ 'form.rate.good'|trans }}"></span>
                <span class="fa fa-star-o medium  full-rate" style="color: #FD4" data-rate="4" data-toggle="tooltip" title="{{ 'form.rate.veryGood'|trans }}"></span>
                <span class="fa fa-star-o medium  full-rate" style="color: #FD4" data-rate="5" data-toggle="tooltip" title="{{ 'form.rate.excellent'|trans }}"></span>
            </div>
            {% set route = app.request.attributes.get('_route') %}
            {% if route =='syndex_lesson_list' %}
                <div id="my-rate" class="col-md-12 col-xs-10">
                    <div class="comment-form">
                        {% include '@Comment/commentViews/commentBase.twig' %}
                        {% if app.user and app.user != course.createdBy and isCustomer  %}
                            <div class="col-md-8 col-xs-12">
                                <span class="section-head" >{{ 'form.rate.lesson.you'|trans }}</span>
                                <span class="fa fa-star-o medium rate" style="color: #FD4" data-rate="1" data-toggle="tooltip" title="{{ 'form.rate.bad'|trans }}"></span>
                                <span class="fa fa-star-o medium rate" style="color: #FD4" data-rate="2" data-toggle="tooltip" title="{{ 'form.rate.fair'|trans }}"></span>
                                <span class="fa fa-star-o medium rate" style="color: #FD4" data-rate="3" data-toggle="tooltip" title="{{ 'form.rate.good'|trans }}"></span>
                                <span class="fa fa-star-o medium rate" style="color: #FD4" data-rate="4" data-toggle="tooltip" title="{{ 'form.rate.veryGood'|trans }}"></span>
                                <span class="fa fa-star-o medium rate" style="color: #FD4" data-rate="5" data-toggle="tooltip" title="{{ 'form.rate.excellent'|trans }}"></span>
                            </div>
                        {% elseif app.user == course.createdBy %}

                        {% else %}
                            <div class="alert alert-warning" role="alert" onclick="$('#loginMenu').click()">
                             {{ 'login_to_rate'|trans }}</div>
                        {% endif %}
                    </div>
                </div>
            {% endif %}
        </div>

    </div>
 {% endblock %}


{% block javascripts %}
    {{ parent() }}
    <script>
        $('.profile-pic').on('click',function(){
            $('.edit').css("display","block");
        });
    </script>

    <script src="{{ asset('bundles/comment/js/shamraComments.js') }}"></script>
    <script>
        var AcademiaComment=new Comment("academia_course","{{ course.slug }}","{{ userman.csrfToken }}",{% if app.user %}true{% else %}false{% endif %});
        AcademiaComment.init();
    </script>

    <script>
       $(document).on('click','#checkout-button',function () {
           $('#checkout-button').text('الرجاء الانتظار');
       })
    </script>

    <script>

        var half = 0;
        $('.full-rate').each(function () {
           if(parseInt($(this).attr('data-rate')) <= {{course.rate}}) {
                $(this).removeClass('fa-star-o')
                $(this).removeClass('fa-star-half-o')
                $(this).addClass('fa-star')
            }
        })

        $('.full-rate').each(function () {
            half = parseInt($(this).attr('data-rate'))
            if($(this).hasClass('fa-star-o')){
                if(half - 0.5 <= {{course.rate}}) {
                    $(this).removeClass('fa-star-o')
                    $(this).removeClass('fa-star')
                    $(this).addClass('fa-star-half-o')
                }
            }
        })


        $(document).on('mouseenter','.rate',function(){
            var rate=$(this).attr('data-rate')

            if($(this).hasClass('fa-star-o')){
                $('.rate').each(function () {
                    if($(this).attr('data-rate') < rate) {
                        $(this).removeClass('fa-star-o')
                        $(this).addClass('fa-star')
                    }
                })
                $(this).removeClass('fa-star-o')
                $(this).addClass('fa-star')
            }
            else if($(this).hasClass('fa-star')){
                $('.rate').each(function () {
                    if($(this).attr('data-rate') > rate) {
                        $(this).removeClass('fa-star')
                        $(this).addClass('fa-star-o')
                    }
                })
            }
        })
        $(document).on('click','.rate',function () {
            var rate=$(this).attr('data-rate')
            $.ajax({
                method:'get',
                url:Routing.generate('shamra_track_rate'),
                data:{
                    slug: "{{course.slug}}",
                    rate: rate
                },
                success:function (data,status) {

                    half = 0;
                    $('.full-rate').each(function () {
                        $(this).removeClass('fa-star')
                        $(this).removeClass('fa-star-half-o')
                        $(this).addClass('fa-star-o')
                    })
                    $('.full-rate').each(function () {
                        if(parseInt($(this).attr('data-rate')) <= data.rate) {
                            $(this).removeClass('fa-star-o')
                            $(this).removeClass('fa-star-half-o')
                            $(this).addClass('fa-star')
                        }
                    })

                    $('.full-rate').each(function () {
                        half = parseInt($(this).attr('data-rate'))
                        if($(this).hasClass('fa-star-o')){
                            if(half - 0.5 <= data.rate) {
                                $(this).removeClass('fa-star-o')
                                $(this).removeClass('fa-star')
                                $(this).addClass('fa-star-half-o')
                            }
                        }
                    })
                    $('.total-rate').text("( " + data.num + " )")
                },
                error:function (xhr) {

                }
            })
        })
    </script>
    <script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
    <script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript">
        // Create an instance of the Stripe object with your publishable API key
        var stripe = Stripe("{{ pk_key }}");
        var checkoutButton = document.getElementById('checkout-button');

        checkoutButton.addEventListener('click', function() {
            fetch('{{ path("syndex_track_checkout") }}?slug={{course.slug}}', {
                method: 'POST'
            })
            .then(function(response ) {
                if(response.status != 404 ){
                    return response.json();
                }
                throw new Error();
            })
            .then(function(session) {
                return stripe.redirectToCheckout({ sessionId: session.id });
            })
            .catch((error)=>{
                $(document).on('click','#checkout-button',function () {
                    $('#checkout-button').text('حدث خطاء, عذرا !');
                })
            })
        });


    </script>

    <script>
        const select = ()=>{
            $('#course_imageCover').click();
        }
        $('#course_imageCover').on('change' , ()=>{
             $('#form_course_imageCover').submit();
        });
    </script>
    {% if course.video != '' and course.video is not null %}
        <script>
            var videoURL = "{{ course.video }}";

            var tag = document.createElement('script');

            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                    height: '400',
                    width: '100%',
                    videoId: videoURL.substr( videoURL.indexOf('v=') + 2 ),
                    playerVars: {
                        'playsinline': 1
                    },
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                });
            }

            function onPlayerReady(event) {
                event.target.playVideo();
            }

            function onPlayerStateChange(event) {
                ;
            }

            function onPlayerReady(event) {
                player.playVideo();
            }

            function stopVideo() {
                player.stopVideo();
            }
        </script>
    {% endif %}

{% endblock %}

{# 154, 212 #}