@extends('web.layouts.container')

@section('content')
    <div class="page-heading">
        <div class="overlay"></div>
        <div class="container">
            <div class="text text-center">
                <h4>{{__('main.education_training')}}</h4>
            </div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="#">{{__('main.home_page')}}</a>
                        <i class="far fa-dot-circle"></i>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{__('main.education_training')}}</li>
                </ol>
            </nav>
        </div>
    </div>
    <section class="training-pg">
        <div class="container">
            <div class="text-heading">
                <div class="text">
                    <span class="title">{{__('courses.head')}}</span>
                    {{--                    <span class="bg">{{__('courses.courses_conferences')}}</span>--}}
                    <h3>{{__('courses.courses_conferences')}}</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <select class="form-control city" id="exampleFormControlSelect1">
                            <option value="">{{__('jobs.city_id')}}</option>
                            @if(count($cities))
                                @foreach($cities as $city)
                                    <option value="{{$city->id}}">{{$city->name}}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <select class="form-control month" id="exampleFormControlSelect1">
                            <option value="">{{__('courses.month')}}</option>
                            <option value="01">{{__('courses.jan')}}</option>
                            <option value="02">{{__('courses.feb')}}</option>
                            <option value="03">{{__('courses.mar')}}</option>
                            <option value="04'">{{__('courses.apr')}}</option>
                            <option value="05">{{__('courses.may')}}</option>
                            <option value="06'">{{__('courses.jun')}}</option>
                            <option value="07">{{__('courses.jul')}}</option>
                            <option value="08">{{__('courses.aug')}}</option>
                            <option value="09">{{__('courses.sep')}}</option>
                            <option value="10">{{__('courses.oct')}}</option>
                            <option value="11">{{__('courses.nov')}}</option>
                            <option value="12">{{__('courses.dec')}}</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <select class="form-control instructor" id="exampleFormControlSelect1">
                            <option value="">{{__('courses.instructor')}}</option>
                            @if(count($instructors))
                                @foreach($instructors as $instructor)
                                    <option value="{{$instructor->id}}">{{$instructor->name }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <select class="form-control category" id="exampleFormControlSelect1">
                            <option value="">{{__('courses.category_id')}}</option>
                            @if(count($categories))
                                @foreach($categories as $category)
                                    <option value="{{$category->id}}">{{$category->name}}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </div>
            </div>
            <div class="training-inner">
                <div class="row mb-5 training_container">
                    @if($trainings->count())
                        @foreach($trainings as $training)
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <a href="{{route('trainings.show', $training->id)}}">
                                        <div class="images-container">
                                            <img src="{{count($training['images'])>0?asset($training['images'][0]) : asset('/assets/web/images/pic-3.jpg')}}" class="main-img">
                                            <img src="{{count($training['images'])>1?asset($training['images'][1]) : asset($training['images'][0])}}" class="img-hover">
                                        </div>
                                        <div class="card-body text-center">
                                            <h5>{{$training->name }}</h5>
                                            <p>{{str_limit(strip_tags($training->description))}}</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="alert alert-info text-danger text-center col-md-12">{{__('courses.no_courses')}}</div>
                    @endif
                </div>
            </div>
            <div class="text-heading">
                <div class="text">
                    <span class="title">{{__('courses.training')}}</span>
                    {{--                    <span class="bg">{{__('courses.approved_training_centers')}}</span>--}}
                    <h3>{{__('courses.training_center')}}</h3>
                </div>
            </div>
            <div class="training-inner">
                <div class="row mb-5">
                    @if($trainingCenters->count())
                        @foreach($trainingCenters as $trainingCenter)
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <a href="{{route('showTrainingCenter', $trainingCenter->id)}}">
                                        <div class="images-container">
                                            <img src="{{count($trainingCenter->images)>0 ? asset($trainingCenter->images[0]) : asset($trainingCenter->images[0]) }}" class="main-img">
                                            <img src="{{count($trainingCenter->images)>1 ? asset($trainingCenter->images[1]) : asset($trainingCenter->images[0]) }}" class="img-hover">
                                        </div>
                                        <div class="card-body text-center">
                                            <h5>{{$trainingCenter->name}}</h5>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>
        $(document).ready(function () {
            $('.city, .month, .instructor, .category').change(async function (e) {
                e.preventDefault();
                let city = $('.city').val(),
                    month = $('.month').val(),
                    instructor = $('.instructor').val(),
                    category = $('.category').val(),
                    data = {},
                    url = "{{route('courseSearch')}}",
                    method = 'get';


                if (city){
                    data.city_id = city
                }
                if (month){
                    data.month = month
                }
                if (instructor){
                    data.instructor_id = instructor
                }
                if (category){
                    data.category_id = category
                }

                const response=await ajax({
                    url,
                    data,
                    dataType: 'html',
                    method
                });

                if (response) {
                    $('.training_container').html(response)
                }
            });
        });

    </script>
@endsection