@extends('web.layouts.layout')
@section('content')


<main>

    <!-- ---------- breadcrumb ----------- -->
    <div class="breadcrumb_links">
        <div class="container">
            <div class="links">
                <a href="{{route('home')}}"> <i class="fas fa-home"></i> </a>
                <a href="{{route('courses.index')}}"> {{__('web.courses')}} </a>
                <a href="#"> {{$title}} </a>
            </div>
        </div>
    </div>

    <!-- ---------- pg_course_details ----------- -->
    <section class="pg_course_details">
        <div class="bg_title">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="title_cont">
                            <h1> {{$course->name}} </h1>
                            <div class="title_links"> <a > <i class="fal fa-calendar me-2"></i> <span> {{$course->date_time}} </span> </a>  <a> <i class="fal fa-clock me-2"></i> <span> {{$course->hours}} {{__('web.hour')}} </span> </a> <a > <i class="fal fa-map-marker-alt me-2"></i> <span> {{$course->city->details->name}} </span> </a> </div>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{$course->image_url}}" alt="" class="bg">
        </div>
        <div class="container">
            <div class="course_det_info section_padding">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="info pe-lg-5">
                            <div class="text">
                                {!! $course->description !!}
                            </div>
                            {!! $course->details !!}
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="course_det_box">
                            <h4 class="mb-4 pb-2 border-bottom"> {{__('web.course_details')}} </h4>
                            <div class="items">
                                <div class="item_row">
                                    <div class="item">
                                        <span class="icon"> <i class="fal fa-calendar me-2 mainColor"></i> </span> <span> {{__('web.course_date')}} </span>
                                    </div>
                                    <div class="item">
                                        <strong> {{$course->date_time}} </strong>
                                    </div>
                                </div>
                                <div class="item_row">
                                    <div class="item">
                                        <span class="icon"> <i class="fal fa-clock me-2 mainColor"></i> </span> <span> {{__('web.course_hours')}} </span>
                                    </div>
                                    <div class="item">
                                        <strong> {{$course->hours}} {{__('web.hour')}} </strong>
                                    </div>
                                </div>
                                <div class="item_row">
                                    <div class="item">
                                        <span class="icon"> <i class="fal fa-map-marker-alt me-2 mainColor"></i> </span> <span> {{__('web.course_location')}} </span>
                                    </div>
                                    <div class="item">
                                        <strong> {{$course->city->details->name}} </strong>
                                    </div>
                                </div>
                            </div>
                            <div class="register_card mt-5">
                                <a href="{{$course->url_apply}}" class="butn w-100 py-4 border-2"> <span> {{__('web.course_apply')}} </span> </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


</main>

@section('inject_js')
@endsection


@endsection
