@extends('web.layouts.container')

@section('content')
    <section class="page_header">
        <div class="container">
            <div class="content">
                <ul class="links">
                    <li class="li_link">
                        <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), url('/'), [], true)}}">{{__('main.home_page')}}</a>
                    </li>
                    <li class="li_link">
                        <span>{{$title}}</span>
                    </li>
                </ul>

            </div>
            <div class="section_head text-center">
                <h2>{{$title}}</h2>
            </div>
        </div>
        <img src="{{asset('assets/web/images/heading-pattern-l.png')}}" class="pattern-l">
        <img src="{{asset('assets/web/images/heading-pattern-r.png')}}" class="pattern-r">
    </section>
    <!--Start content-sec -->
    <section class="trainers-sec bg-gray section-padding ">
        <div class="container">
            <div class="row">
                @if(count($instructors))
                    @foreach($instructors as $instructor)
                        <div class="instructor_hidden_block_{{$instructor->id}} d-none">
                            <div class="col-lg-5">
                                <div class="img">
                                    <img src="{{asset($instructor->photo)}}" alt="">
                                </div>
                            </div>
                            <div class="col-lg-7">
                                <div class="info">
                                    <h3>{{$instructor->name}}</h3>
                                    <h6>{{$instructor->job_title}}</h6>
                                    <p>{!! $instructor->description !!}</p>
{{--                                    @if($instructor->phone) <p>{{$instructor->phone}}</p>@endif--}}
{{--                                    <p>{{$instructor->email}}</p>--}}
                                    <ul>
{{--                                        @if($instructor->phone)<li><i class="fas fa-phone"></i>{{$instructor->phone}}</li>@endif--}}
{{--                                        <li><i class="far fa-envelope"></i>{{$instructor->email}}</li>--}}
                                    </ul>
                                    <div class="social">
                                        @if(array_key_exists('facebook', $instructor->social)) <a target="_blank" href="{{$instructor->social['facebook']}}"><i class="fab fa-facebook-f"></i></a> @endif
                                        @if(array_key_exists('twitter', $instructor->social)) <a target="_blank" href="{{$instructor->social['twitter']}}"><i class="fab fa-twitter"></i></a> @endif
                                        @if(array_key_exists('instagram', $instructor->social)) <a target="_blank" href="{{$instructor->social['instagram']}}"><i class="fab fa-instagram"></i></a> @endif
                                        @if(array_key_exists('linkedin', $instructor->social)) <a target="_blank" href="{{$instructor->social['linkedin']}}"><i class="fab fa-linkedin-in"></i></a> @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="trainer-card">
                                <img src="{{asset($instructor->photo)}}" class="trainer-img">
                                <div class="text">
                                    <h6>{{$instructor->name}}</h6>
                                    <span>{{$instructor->job_title}}</span>
                                </div>
                                <button class="expand-btn instructor_button" data-href=".instructor_hidden_block_{{$instructor->id}}" type="button" data-toggle="modal" data-target="#trainerModal"><i class="fas fa-expand-arrows-alt"></i></button>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
    </section>
    <!-- Trainer Modal -->
    <div class="modal fade" id="trainerModal" tabindex="-1" aria-labelledby="trainerModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="modal-body">
                    <div class="trainer_modal_content">
                        <div class="row"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('inner_js')
    <script>
        $('main').addClass('trainers-page');

        $('.instructor_button').click(function () {
            let instructorContainer = $($(this).data('href')).html();
            $('.modal-body .row').html(instructorContainer);
        })
    </script>
@endsection