@extends('layouts.app')

@section('content')
<div id='carousel' class='carousel'>
    <div class="slides">
        <div class='slide' style="background-image: url('img/1.jpg')"></div>
        <div class='slide' style="background-image: url('img/2.jpg')"></div>
        <div class='slide' style="background-image: url('img/3.jpg')"></div>
        <div class='slide' style="background-image: url('img/4.jpg')"></div>              
        <div class='slide' style="background-image: url('img/5.jpg')"></div>              
        <div class='slide' style="background-image: url('img/6.jpg')"></div>              
    </div>
    <div class="indicators">
        <input class="indicator" name="indicator" data-slide="1" data-state="active" checked type="radio" />
        <input class="indicator" name="indicator" data-slide="2" type="radio" />
        <input class="indicator" name="indicator" data-slide="3" type="radio" />
        <input class="indicator" name="indicator" data-slide="4" type="radio" />
    </div>
</div>

<div id='info-bar'>
    <div class="container">
        <div id="info-bar-inner">
            <div class="info-bar-items">
                <div class="info-bar-item">
                    <i class="fas fa-chalkboard"></i>
                    <div class="info-bar-item-text">
                        <h3>Cursos especializados</h3>
                        <p>Descubre que curso se adapta mejor a ti</p>
                    </div>
                </div>
                <div class="info-bar-item">
                    <i class="fas fa-user-check"></i>
                    <div class="info-bar-item-text">
                        <h3>Instructores capacitados</h3>
                        <p>Contacto directo con tu instructor </p>
                    </div>
                </div>
                <div class="info-bar-item">
                    <i class="fas fa-history"></i>
                    <div class="info-bar-item-text">
                        <h3>Acceso para siempre</h3>
                        <p>Aprende a tu ritmo</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if (session('status'))
    <div class="alert alert-success">
        {{ session('status') }}
        <i onClick="remove(this)" id='alert-close' class="fa fa-times"></i>
    </div>
@endif

@if(count($userPurchases) > 0)
    <section id='my-courses'>
        <div class='container'>
            <div class='box'>
                <div class="box-content">
                    <h2>Cursos comprados</h2>
                    <p>Estos son los cursos que has adquirido</p>
                </div>
                <div class="box-content">
                    <div class='box-courses'>
                        @foreach($userPurchases as $userPurchase)
                            @php 
                                $course = $userPurchase->course()->withTrashed()->first();
                            @endphp
                            <div class='box-course'>
                                <a href="{!! route('courses.show', $course->id ) !!}">
                                    <img src="/storage/cursos/{{ $course->photo }}" alt="{{ $course->title }}">
                                    <div class="content">
                                        <h4>{{ $course->title }}</h4>
                                        <p>{{ $course->instructor->name }}</p>
                                        
                                        <div class="stars">
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                            <i class="fas fa-star"></i>
                                        </div>
                                        <div class="price">
                                            <h3>{{ $course->price }} US$</h3>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif

<section id='courses'>
    <div class='container'>
        <div class='box'>
            <div class="box-content">
                <h2>Todos nuestros cursos</h2>
                <p>Descubre y conoce nuestros cursos disponibles</p>
                @include('courses/_boxCourses')
            </div>
        </div>
    </div>
</section>

<div id='fixed-icons'>
    <a href='https://wa.me/099999999' target='_blank'>
        <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>
</div>

@endsection