@extends('layouts.frontend', [
    'meta_keywords' => $page->keywords,
    'meta_description' => $page->description,
    'meta_title' => $page->meta_title
    ])

@section('css')
    <style>
        .col-33 {
            flex: 0 0 33%;
            max-width: calc(33.33% - 30px);
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .video {
            aspect-ratio: 16 / 9;
            width: 100%;
        }

        /* container */
        .ct {
            width: calc(100% - 80px - 80px);
            margin: 0 auto;
        }

        .ct-md {
            max-width: 1260px;
            margin: 0 auto;
        }

        .ct-sm {
            max-width: 980px;
            margin: 0 auto;
        }

        @media screen and (max-width: 767px) {
            .ct {
                width: calc(100% - 20px - 20px);
                margin: 0 auto;
            }

            .col-33 {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }

    </style>
@endsection
@section('content')

    <!--middle start-->
    <main>

        <section class="inner_header hero-banner">
            <div class="container-fluid">
                <div class="row align-items-center">
                    {{--                    <div class="col-md-6">--}}
                    {{--                        <div class="inner_h_thmnl"><img src="{{ $page->banner ? $page->banner->getUrl() : asset('assets/images/resources.jpg') }}" class="w-100" alt="img"></div>--}}
                    {{--                    </div>--}}

                    <div class="col-md-12">
                        <figcaption class="inr_h_descrip ps-5 ms-2 mt-5">
                            <h1 class="title1"><i><img src="{{ asset('assets/images/arrow_right3.png') }}"
                                                       class="img-fluid" alt="img"></i>
                                <span>{{ $page->title }}</span>
                            </h1>
                        <!-- @if($page->banner_2)
                            <div class="lets_go pt-4 pb-4">
                                <img src="{{ $page->banner_2->getUrl() }}" class="img-fluid" alt="img">
                                </div>
                            @endif -->

                            @if(!empty($page->banner_description))
                                <div class="mxwidth mb-4 pt-2 pb-3">
                                    <p class="text-white m-0">
                                        {{ $page->banner_description }}
                                    </p>
                                </div>
                            @endif
                            @if(!Session::exists('coach'))
                                <a href="#" class="get_started" data-bs-toggle="modal"
                                   data-bs-target="#loginmodal"><span>Get</span> Started <i><img
                                            src="{{ asset('assets/images/arrow_right.png') }}" class="img-fluid"
                                            alt="img"></i></a>

                            @else
                                <a href="resources" class="get_started"><span>Get</span> Started <i><img
                                            src="{{ asset('assets/images/arrow_right.png') }}" class="img-fluid"
                                            alt="img"></i></a>
                            @endif
                        </figcaption>


                    </div>
                </div>
            </div>
        </section>

        <section class="contact_main_wrap bg_gray2 pt-3 pb-5">
            <div class="container">

                <ul class="dotsbetween">
                    <li><a href="#">Videos</a></li>
                    <li><a href="{{ route('frontend.video', 'tuesday-coaching-tips') }}"
                           class="@if($slug == 'tuesday-coaching-tips') active @endif">Tuesday Coaching Tips</a></li>
                    <li><a href="{{ route('frontend.video', 'podcasts-w-jim-reed') }}"
                           class="@if($slug == 'podcasts-w-jim-reed') active @endif">Podcasts w/Jim Reed</a></li>
                    <li><a href="{{ route('frontend.video', 'national-lunch-Learn') }}"
                           class="@if($slug == 'national-lunch-Learn') active @endif">National Lunch & Learn</a></li>
                    <li><a href="{{ route('frontend.video', 'financial-friday-tips') }}"
                           class="@if($slug == 'financial-friday-tips') active @endif">Financial Friday Tips</a></li>
                </ul>
            </div>

            <div class="ct  pb-5">

                <div class="mid_inner2 ps_45">
                    @if(!empty($page->content_header_1))
                        <h2 class="title3 mb-4 pb-2">{{ $page->content_header_1 }}</h2>
                    @endif
                    @if(!empty($page->content_1))
                        <p class="mb-5">
                            {!! $page->content_1 !!}
                        </p>
                    @endif
                </div>
                <div class="row mb-5 mt-5 justify-content-center">
                    @if($videos)
                        @foreach($videos->items as $vid)
                            <div class="col-33">
                                <iframe class="video"
                                        src="https://www.youtube.com/embed/{{ $vid->snippet->resourceId->videoId }}"
                                        title="YouTube video player" frameborder="0"
                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                        allowfullscreen></iframe>
                            </div>

                        @endforeach

                    @else
                        <h3>Playlist is empty or could not be found</h3>
                    @endif
                </div>


                <div class="mid_inner2 ps_45">


                    @if(!empty($page->content_header_2))
                        <h2 class="title3 mb-4 pb-2">{{ $page->content_header_2 }}</h2>
                    @endif
                    @if(!empty($page->content_2))
                        <p class="mb-5 mt-5 text-center">
                            {!! $page->content_2 !!}
                        </p>
                    @endif

                    @if(!empty($page->content_header_3))
                        <h2 class="title3 mb-4 pb-2">{{ $page->content_header_3 }}</h2>
                    @endif
                    @if(!empty($page->content_3))
                        <p class="mb-5">
                            {!! $page->content_3 !!}
                        </p>
                    @endif

                    <div class="pt-3">
                        <div class="resource_m_center w-100 m-auto">
                            <ul class="m-0 p-0 list-unstyled d-flex flex-column">
{{--                                <li>--}}
{{--                                    <a href="{{ route('frontend.podcasts') }}" class="d-inline-flex align-items-center">--}}
{{--                                        <figure class="icon mb-0"><i><img--}}
{{--                                                    src="{{ asset('assets/images/podcast2.png') }}" class="img-fluid"--}}
{{--                                                    alt="img"></i></figure>--}}
{{--                                        <figcaption><p class="m-0"><span>Podcast</span></p></figcaption>--}}
{{--                                    </a>--}}
{{--                                </li>--}}

                                <li>
                                    <a href="{{ route('frontend.forms') }}" class="d-inline-flex align-items-center">
                                        <figure class="icon mb-0"><i><img src="{{ asset('assets/images/form2.png') }}"
                                                                          class="img-fluid" alt="img"></i></figure>
                                        <figcaption><p class="m-0"><span>Forms</span></p></figcaption>
                                    </a>
                                </li>

                                <li>
                                    <a href="{{ route('frontend.library') }}" class="d-inline-flex align-items-center">
                                        <figure class="icon mb-0"><i><img
                                                    src="{{ asset('assets/images/library2.png') }}" class="img-fluid"
                                                    alt="img"></i></figure>
                                        <figcaption><p class="m-0"><span>Library</span></p></figcaption>
                                    </a>
                                </li>


                            </ul>

                        </div>

                    </div>


                </div>


            </div>
        </section>

        @if($page->show_testimonials)
            @include('frontend._inc.testimonial')
        @endif


    </main>
    <!--middle end-->
@endsection

@section('scripts')
    <script>

    </script>
@endsection