@extends('layouts.app')

@section('content')
<div class='cover'>
    <img src='/storage/cursos/{{ $course->photo2 }}'>
</div>
<div class='course-title'>
    <h2>{{ $course->title }}</h2>
</div>
<section id='course'>
    <div class="container">
        <div id="course-inner">
            <div class='box left'>
                <div class="box-content">
                    <h2>{{ $course->title }}</h2>

                    <div class='description'>
                        {!! $course->description !!}

                    </div>
                    <div class="instructor">
                        <p><b>Instructor:</b> {{ $course->instructor->name}}</p>
                    </div>

                    <hr class='hr-full'>

                    <h2>Contenido del curso</h2>
                    <div class='modules-list'>
                        @foreach($course->modules as $module)
                            <div class="item">
                                <div class="content">
                                    <i class="fas fa-angle-up"></i>
                                    <p>
                                        {{ $module->title }}
                                    </p>
                                </div>
                                <div class="tab">
                                    {!! $module->description !!}
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="box right" style="padding: 0;">
                <div class='course-info'>
                    <img src="/storage/cursos/{{ $course->photo }}" alt="{{ $course->title }}">

                    <div class="content">
                        @if (Auth::user())
                            @if (!Auth::user()->hasCourse($course->id))
                                <div class="item">
                                    <h3 class='price'>{{ $course->price }} US$</h3>
                                </div>
                                <div class="item">
                                    <a href="{{ route('courses.buy', ['id' => $course->id ]) }}">
                                        <button class='btn btn-primary'>Comprar ahora</button>
                                    </a>
                                </div>
                            @else
                                <div class="item">
                                    <p>¡Felicidades! Has adquirido este curso</p>
                                </div>
                                <div class="item">
                                    <a href="{{ route('courses.go', $course->id) }}">
                                        <button class='btn btn-primary'>Ver</button>
                                    </a>
                                </div>
                            @endif
                        @else
                            <a href="{{ route('login') }}">
                                <button class='btn btn-primary'>Comprar ahora</button>
                            </a>
                        @endif
                    </div>
                    <hr>
                    <div class="content">
                        <h3>Este curso incluye:</h3>
                        <ul class='includes'>
                            <li>
                                <i class="fas fa-sticky-note"></i>
                                {{ count($course->modules) }} modulos
                            </li>
                            <li>
                                <i class="fas fa-infinity"></i>
                                Acceso para siempre
                            </li>
                            <li>
                                <i class="fas fa-chalkboard-teacher"></i>
                                Asistencia personalizada
                            </li>
                            <li>
                                <i class="fas fa-file"></i>
                                Material descargable
                            </li>
                            <li>
                                <i class="fas fa-user-graduate"></i>
                                Certificación
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    @if(count($boxCourses) > 0)
        <div class="container" style='margin-top: 30px;'>
            <div class="box">
                <h2 class='text-center'>Explora mas cursos</h2>
                @include('courses/_boxCourses')
            </div>
        </div>
    @endif
</section>

<section id='fixed-icons'>
    <a href='https://wa.me/099999999'>
        <div id="whatsapp" class='fixed-icon'>
            <i class="fab fa-whatsapp"></i>
        </div>
    </a>
    <div id="scroll-up" class='fixed-icon' onclick='scrollToTop()'>
        <i class="fas fa-arrow-up"></i>
    </div>
</section>

<script>
    document.querySelectorAll('.modules-list .item').forEach(i => {
        let tab = i.querySelector('.tab')
        let icon = i.querySelector('.content i')
        i.addEventListener('click', e => {
            tab.classList.toggle('open')
            icon.classList.toggle('open')
            console.log('a')
        })
    })
</script>
@endsection