@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>{{ $category_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="library_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') }}">Coaching Forms</a></li>
                    <li><a href="{{ route('frontend.library') }}" class="active">Library</a></li>
                </ul>
                <div class="mid_inner2 ps_45">
                    <h2 class="title3 mb-4 pb-2">{{ $category_title }}</h2>

                    @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" :target="form.link ? '_blank':'_self'"
                                       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($library_items);


        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.file.file_name.includes('pdf') ? 'pdf' : 'word';
            } catch (e) {
                form.file_type = 'unknown'
            }

            form.download_link = form.link;
            if(form.file){
                form.download_link = form.file.original_url.replace('http:','https:');

            }
            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