@extends('front.layouts.app')

@section('meta_title', 'Meet Our Faculty | Engaging CLE Podcast Instructors')
@section('meta_description', 'Browse the faculty directory of Clearly Legal. From top trial lawyers to financial experts, our speakers make earning CLE credits interesting and easy.')

@section('content')
    <section class="innerpage_wrap faculty_wrap">
        <div class="container">
            {{-- <div class="innerpagebg"><img src="{{ asset('assets/web/images/background/innerpagebg.png') }}" class="img-fluid"
                    alt="innerpagebg"></div> --}}
            @foreach ($pages as $page)
                @if ($page->slug == 'faculty')
                    {!! $page->description !!}
                @endif
            @endforeach
        </div>
    </section>

    <section class="section-height  pt-5  faculty_wrap">
        <div class="container">
            <div class="row  py-4 facultybox text-center">
                @foreach ($faculty as $index => $fcl)
                    <div class="col-sm-4">
                        <div class="facultybox text-center">
                            @if ($index % 2 == 0)
                                <a href="{{ route('faculty.show', [$fcl->slug]) }}" target="_blank" class="speaker_click">
                                    <div class="faculty_left">
                                        <div class="faculty_box">
                                            {{-- <div class="faculty_left_block">
                                                <img src="{{ asset('assets/web/images/faculty/faculty_left_block.png') }}"
                                                    alt="faculty_left_block">
                                            </div> --}}
                                            <div class="faculty_box_in">
                                                <img src="{{ $fcl->image_path }}" alt="Faculty"
                                                    class="img-fluid mx-auto d-block faculty_image">
                                            </div>
                                        </div>
                                        {{-- <img src="{{ asset('assets/web/images/faculty/faculty_left_main_bg.png') }}"
                                            alt="" class="img-fluid mx-auto d-block"> --}}
                                    </div>
                                </a>
                                <a href="{{ route('faculty.show', [$fcl->slug]) }}" target="_blank">
                                    <div class="mb-5">
                                        <h5>{{ $fcl->name }}</h5>
                                        <p>{{ $fcl->firm_name }}</p>
                                    </div>
                                </a>
                            @else
                                <a href="{{ route('faculty.show', [$fcl->slug]) }}" target="_blank">
                                    <div class="faculty_right">
                                        <div class="faculty_box">
                                            {{-- <div class="faculty_right_block">
                                                <img src="{{ asset('assets/web/images/faculty/faculty_right_block.png') }}"
                                                    alt="faculty_right_block">
                                            </div> --}}
                                            <div class="faculty_box_in">
                                                <img src="{{ $fcl->image_path }}" alt="Faculty"
                                                    class="img-fluid mx-auto d-block faculty_image">
                                            </div>
                                        </div>
                                        {{-- <img src="{{ asset('assets/web/images/faculty/faculty_right_main_bg.png') }}"
                                            alt="" class="img-fluid mx-auto d-block"> --}}
                                    </div>
                                </a>
                                <a href="{{ route('faculty.show', [$fcl->slug]) }}" target="_blank">
                                    <div class="mb-5">
                                        <h5>{{ $fcl->name }}</h5>
                                        <p>{{ $fcl->firm_name }}</p>
                                    </div>
                                </a>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="row  text-center pt-5 ">
                <div class="col-sm-12">
                    <h4>Interested in being on the faculty? Email us at <a href="mailto:contact@clearly.legal"
                            target="_blank">contact@clearly.legal</a></h4>
                </div>
            </div>
        </div>
    </section>

    <section class="bottom_line mb-5">
        <img src="{{ asset('assets/web/images/background/course_bottom_line.png') }}" width="" height="" class=" mx-auto d-block"
            alt="course_bottom_line">
    </section>

    <!-- ======= Subscribe Section ======= -->
    @include('front.modules.subscribe.index')
    <!-- End Subscribe Section -->

    <!-- ======= Account Section ======= -->
    @include('front.modules.contact.index')
    <!-- End Contact Section -->
@endsection