@extends('layouts.template')

@section('main')
    <header class="">
        <div class="h-80 bg-red-500 p-2 flex items-center justify-center flex-col gap-2">
            <h1 data-aos="fade-down" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                class="text-gray-100 uppercase text-xl">Course</h1>
            <span data-aos="flip-right" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                class=" font-mija text-white text-3xl md:text-5xl font-semibold">
                {{ $course->title }}
            </span>
            <i data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                class="{{ $course->icon }} text-3xl text-white"></i>
        </div>
    </header>

    <section class="p-3">
        <div class=" w-full grid grid-cols-1 md:grid-cols-2 gap-5">
            <img data-aos="fade-right" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                src="{{ asset('uploads/' . $course->image) }}" alt="{{ $course->slug }}"
                class="w-full max-h-[calc(100vh-9rem)] h-full object-cover rounded-md">

            <div data-aos="fade-left" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                class="flex flex-col gap-2 justify-center">
                <h1
                    class="flex w-fit items-center gap-2 text-2xl text-red-500 font-semibold mb-5 font-mija relative pe-20 after:right-0
                after:absolute after:w-16 after:rounded-md after:h-2 after:bottom-0 after:bg-red-500">
                    <i class="{{ $course->icon }}"></i>
                    {{ $course->title }}
                </h1>
                <p class="text-gray-400">{{ $course->caption }}</p>

                @php $staff=\App\Models\Admin\Staff::findOrFail($course->tutor) @endphp

                <div class="flex items-center gap-2">
                    <h1 class="font-semibold">By :</h1>
                    <img src="{{ asset('uploads/' . $staff->image) }}" alt="{{ $course->slug }}"
                        class="w-12 h-12 object-cover rounded-full">
                    <h1 class="">{{ $staff->name }}</h1>
                </div>

                <div class="">
                    <h1 class="font-semibold">Course Description</h1>
                    <p class="ps-5 text-gray-400">
                        {{ $course->description }}
                    </p>
                </div>

                <div class="flex">
                    <div class="mt-5 relative w-fit rounded-2xl group  bg-red-500 text-white">
                        <div class="absolute w-4 h-full bg-red-600 rounded-2xl duration-300 group-hover:w-full"></div>
                        <button class="px-8 py-4 flex relative items-center gap-2 z-10 font-dosis tracking-widest">
                            <a href="{{ route('admissions') }}" class="flex relative items-center gap-2">
                                <i class="fa fa-pen"></i>
                                Enrol
                            </a>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection