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

@section('css')

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.0/vue.min.js"
            integrity="sha512-2v91ndX8jAw9J2IAZ4RnH+lKMOi0PzyFJ1i6D69Nx1RlY2UJpy6r1WIo35HrRkHG4ARj1Xl/xyoh0X9ze+6Y2w=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
        .form-lists {
            columns: 2;
        }

        @media (max-width: 500px) {
            /* smartphones, Android phones, landscape iPhone */
            .form-lists {
                columns: 1;
            }
        }


    </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/form_banner.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="forms_main_wrap bg_gray2 pt-3 pb-5">
            <div class="container  pb-5">
                <ul class="dotsbetween pb-5">
                    <li><a href="{{ route('frontend.resources') }}">Resources</a></li>
{{--                    <li><a href="{{ route('frontend.podcasts') }}">Podcasts</a></li>--}}
                    <li><a href="{{ route('frontend.forms') }}" class="active">Coaching Forms</a></li>
                    <li><a href="{{ route('frontend.library') }}">Library</a></li>
                </ul>

                <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

                    @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

                    @verbatim
                        <div id="app" class="forms_sec">
                            <div class="row mb-5" style="margin: 10px auto">
                                <div class="input-group col-sm m-2">
                                    <input @input="onSearch" type="text" class="form-control" placeholder="Search..."
                                           v-model="searchText">
                                    <button v-if="searchText != ''" type="button" class="btn bg-transparent"
                                            style="margin-left: -40px; z-index: 100;">
                                        <i @click="clearSearch" class="fa fa-times"></i>
                                    </button>
                                </div>
                                <div class="col-sm-2 m-2">
                                    <button  style="width: 200px" class="btn btn-primary" @click="sortByFile">Sort by
                                        file
                                    </button>
                                </div>

                            </div>


                            <ul class="m-0 p-0 ms-5 ps-4 list-unstyled form-lists" style="">


                                <li class="mb-2" v-for="(form,index) in forms" :key="index">
                                    <a :href="form.download_link"
                                       class="d-inline-flex align-items-center">
                                        <i class="me-2">

                                            <img v-if="form.file_type == 'pdf'" src="/assets/images/pdf.png" class="m-0"
                                                 alt="img">

                                            <img v-else src="/assets/images/xls.png" class="m-0"
                                                 alt="img">
                                        </i>
                                        <p class="m-0">
                                            {{ form.title }}
                                        </p>
                                    </a>
                                </li>
                                <div v-if="forms.length == 0" class="mx-auto text-center">
                                    <span>No file found. :(</span>
                                </div>

                            </ul>


                        </div>
                    @endverbatim

                </div>


            </div>
        </section>

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


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


@endsection

@section('scripts')
    <script>
        var forms = @json($forms);


        function dynamicSort(property) {
            var sortOrder = 1;
            if (property[0] === "-") {
                sortOrder = -1;
                property = property.substr(1);
            }
            return function (a, b) {
                /* next line works with strings and numbers,
                 * and you may want to customize it to your needs
                 */
                var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
                return result * sortOrder;
            }
        }


        forms = forms.map(function (form) {
            try {
                form.file_type = form.form.file_name.includes('pdf') ? 'pdf' : 'word';
            } catch (e) {
                form.file_type = 'unknown'
            }
            form.download_link = '/forms/' + form.id;
            return form;
        });

        forms = forms.sort(dynamicSort("title"))


        console.log(forms)
        var app = new Vue({
            el: "#app",
            data: {
                searchText: '',
                main_forms: forms,
                showingForms: forms,
                sort: 'title'

            },
            methods: {
                clearSearch() {
                    this.searchText = ''
                    this.onSearch()
                },
                onSearch() {

                    this.showingForms = this.main_forms.filter((form) => {
                        console.log('Search Text', this.searchText, 'Current Form', form.title, 'Is Match', form.title.includes(this.searchText))
                        return form.title.toLowerCase().includes(this.searchText.toLocaleLowerCase())
                    })
                },
                sortByFile() {
                    if (this.sort === 'title') {
                        this.showingForms = this.showingForms.sort(dynamicSort("file_type"))
                        this.sort = 'file_type'
                    } else {
                        this.showingForms = this.showingForms.sort(dynamicSort("title"))
                        this.sort = 'title'
                    }
                }
            },
            computed: {
                forms() {
                    return this.showingForms
                }
            }
        });

    </script>
@endsection