@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 class="text-gray-100 uppercase text-xl">Course</h1>
            <span class=" font-mija text-white text-3xl md:text-5xl font-semibold">
                    {{$course->title}}
            </span>
            <i 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 src="{{asset('uploads/'.$course->image)}}" alt="{{$course->slug}}" class="w-full max-h-[calc(100vh-9rem)] object-cover rounded-md">

            <div 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
