@extends('layouts.layout')

@section('title', 'Cursos')

@section('background', asset('img/curso.jpg'))

@section('content')
    <div class="container mx-auto px-6 py-5">
        <div class="sec-title text-center mb-5">
            <h2 class="text-gray-900 relative uppercase text-4xl pb-4">Cursos</h2>
			<p class="py-5">Aprende más</p>
        </div>
        <div class="grid md:grid-flow-col md:auto-cols-auto gap-4">
            <div class="w-full py-2">
                <h2 class="text-gray-900 text-xl border-b border-gray-400">Calendario de Cursos</h2>
                CALENDARIO
            </div>
            <div class="mt-2 w-full">
                <h2 class="text-gray-900 text-xl border-b border-gray-400">Proximos Cursos</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    @foreach ($courses_present_schedule as $schedule)
                        <div class="border border-gray-300 m-5 text-center">
                            <div class="text-gray-800 text-lg h-14 py-4">{{ $schedule->course->title }}</div>
                            <div class="bg-gray-200 text-gray-400 py-4">
                                <span class="text-3xl">Bs.</span>
                                <span>{{ $schedule->course->price }}</span>
                            </div>
                            <ul>
                                <li class="border-t border-gray-300 py-4 text-sm">
									<i class="fas fa-calendar"></i>
                                    {{ $schedule->date_from->format('d/m/Y') }}<br />
									<i class="fas fa-clock"></i>
                                    {{ date('h:i A', strtotime($schedule->time_start)) }} a
                                    {{ date('h:i A', strtotime($schedule->time_end)) }}
								</li>
                                <li class="border-t border-gray-300 py-4 uppercase text-auto-blue-light">
									<a href="{{ route('course', $schedule->course->id) }}">Leer Más</a>
								</li>
                            </ul>
                        </div>
                    @endforeach
                </div>
                <h2 class="text-gray-900 text-xl border-b border-gray-400 pt-2">Cursos Pasados</h2>
                <ul>
                    @foreach ($courses_last_schedule as $schedule)
                        <li class="pt-1 hover:text-black">
							<a href="{{ route('course', $schedule->course->id) }}">
								{{ $schedule->course->title }} |
                                <span class="text-auto-blue-light text-sm">
									<i class="fas fa-calendar"></i> {{ $schedule->date_from->format('Y-m-d') }}
								</span>
							</a>
						</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
@endsection