@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>
        <ol class="breadcrumb px-4 py-2 mb-5 bg-gray-200 rounded">
            <li class="inline-block text-blue-dark hover:text-blue-500">
				<a href="{{ route('courses') }}">Cursos</a>
			</li>
            <li class="inline-block text-sm text-gray-600">Curso</li>
        </ol>
        <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">
                <div class="grid gap-10 grid-cols-1 md:grid-cols-4 py-4">
                    <div>
                        <img src="{{ asset($course->urlImage) }}" alt="{{ $course->title }}" title="{{ $course->title }}" class="w-full rounded" />
                    </div>
                    <div class="md:col-span-3">
                        <h6 class="text-auto-blue-dark text-xl">{{ $course->title }}</h6>
                        <div class="flex flex-row justify-between text-auto-blue-light text-sm my-2">
                            <div>Costo <br /> {{ $course->price }} Bs.</div>
                            <div>Duración <br /> {{ $course->duration }}</div>
                            <div>Lugar <br /> {{ $course->place }}</div>
                        </div>
                        <div class="py-1 border-t border-gray-400">
                            @foreach ($course->schedules as $schedule)
                                <div class="pb-1">
                                    <i class="fas fa-calendar"></i> {{ $schedule->date_from->dayName }},
                                    {{ $schedule->date_from->format('d/m/Y') }} | <i class="fas fa-clock"></i>
                                    {{ date('h:i A', strtotime($schedule->time_start)) }} a
                                    {{ date('h:i A', strtotime($schedule->time_end)) }}
                                </div>
                            @endforeach
                        </div>
						<div class="py-4">{!! $course->content !!}</div>
						<div class="py-4">{!! $course->description !!}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection