@extends('frontend.home')
@section('content')
    <style>
        .cplgr-listing-grid {
            border-radius: 20px;
            margin-bottom: 30px;
            background: #ffffff;
        }

        .cplgr-listing-grid .cplgr-listing-thumb-container {
            position: relative;
        }

        .cplgr-listing-grid .cplgr-listing-thumb-container:before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 90px;
            background: -webkit-linear-gradient(transparent, #000000);
            background: -o-linear-gradient(transparent, #000000);
            background: -moz-linear-gradient(transparent, #000000);
            background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#000000));
            background: linear-gradient(transparent, #000000);
        }

        cplgr-listing-grid .cplgr-listing-thumb-container .cplgr-listing-thumb a {
            display: block;
        }

        .cplgr-listing-grid .cplgr-listing-description-container .cplgr-listing-description {
            margin-bottom: 20px;
            padding: 0 30px;
        }
        .cplgr-listing-grid .cplgr-listing-description-container .cplgr-listing-description .author-avatar-thumb {
            position: relative;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            height: 60px;
            width: 60px;
            float: left;
            border-radius: 50%;
            border: 1px solid #ffffff;
        }
        .cplgr-listing-grid .cplgr-listing-description-container .cplgr-listing-description .author-avatar-thumb .cplgr-verified {
            position: absolute;
            top: 2px;
            right: 1px;
            height: 12px;
            width: 12px;
            background: #7fba00;
            border-radius: 50%;
        }
        .cplgr-listing-grid .cplgr-listing-description-container .cplgr-listing-description .author-avatar-thumb .cplgr-verified:before {
            content: "\f05d";
            font-family: FontAwesome;
            color: #ffffff;
            position: absolute;
            top: 0;
            left: 0;
            line-height: 1;
        }
        .cplgr-listing-grid .cplgr-listing-description-container .cplgr-listing-description .cplgr-listing-categories {
            float: left;
            padding-left: 15px;
            margin-top: 5px;
        }
        .cplgr-listing-grid .cplgr-listing-description-container .cplgr-listing-description .cplgr-status-open, .cplgr-listing-grid .cplgr-listing-description-container .cplgr-listing-description .cplgr-status-close, .cplgr-listing-grid .cplgr-listing-description-container .cplgr-listing-description .cplgr-status-expired {
            float: right;
            width: auto;
            margin-top: 10px;
            position: relative;
            text-align: right;
            padding-right: 15px;
        }
        .cplgr-listing-grid .cplgr-listing-description-container .cplgr-listing-description .cplgr-status-open:before {
            background: #7fba00;
        }
        .cplgr-listing-grid .cplgr-listing-description-container .cplgr-listing-description .cplgr-status-open:before, .cplgr-listing-grid .cplgr-listing-description-container .cplgr-listing-description .cplgr-status-close:before, .cplgr-listing-grid .cplgr-listing-description-container .cplgr-listing-description .cplgr-status-expired:before {
            content: "";
            height: 10px;
            width: 10px;
            border-radius: 50%;
            position: absolute;
            top: 2px;
            right: 0;
        }
        .fix {
            clear: both;
        }
        .cplgr-listing-grid .cplgr-listing-description-container .cplgr-listing-description .cplgr-listing-title {
            margin-bottom: 10px;
        }
        h6, .h6 {
            font-size: 1.8rem;
        }
        h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
            font-family: "Comfortaa", sans-serif;
            font-weight: 500;
            line-height: 1.3;
            margin-top: 0;
            margin-bottom: 0;
        }
        .cplgr-listing-grid .cplgr-listing-description-container .cplgr-listing-desription-footer {
            -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            padding: 13px 30px;
        }
        .cplgr-listing-grid .cplgr-listing-description-container .cplgr-listing-desription-footer a {
            color: #111111;
        }
        .cplgr-listing-grid .cplgr-listing-description-container .cplgr-listing-desription-footer .cplgr-phone-number {
            float: right;
        }
        .multi-search {
            background: #ffffff;
            border-radius: 25px;
            padding-left: 15px;
            margin: 20px 10px;
        }
        .multi-search label {
            font-family: 'Comfortaa', sans-serif;
            font-size: 14px;
            font-weight: 400;
            color: #111111;
        }
        .multi-search .easy-autocomplete {
            width: 160px !important;
            display: inline-block !important;
        }
        .easy-autocomplete {
            position: relative;
        }
        .multi-search .easy-autocomplete .form-control {
            max-width: 100%;
        }
        .multi-search .form-control {
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .easy-autocomplete input {
            border-color: #ccc;
            border-radius: 4px;
            border-style: solid;
            border-width: 1px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
            color: #555;
            float: none;
            padding: 6px 12px;
        }
        .easy-autocomplete-container {
            left: 0;
            position: absolute;
            width: 100%;
            z-index: 2;
        }
        .easy-autocomplete-container ul {
            background: none repeat scroll 0 0 #ffffff;
            border-top: 1px dotted #ccc;
            display: none;
            margin-top: 0;
            padding-bottom: 0;
            padding-left: 0;
            position: relative;
            top: -1px;
        }
        .multi-search .easy-autocomplete {
            width: 160px !important;
            display: inline-block !important;
        }
        .easy-autocomplete {
            position: relative;
        }
        .multi-search .easy-autocomplete .form-control {
            max-width: 100%;
        }
        .multi-search .form-control {
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .easy-autocomplete-container {
            left: 0;
            position: absolute;
            width: 100%;
            z-index: 2;
        }
        #page_container {
            margin-top: 15px;
            margin-bottom: 15px;
            margin-left: -28px;
        }
        #accordion_search_bar_container {
            position: relative;
        }
        #accordion_search_bar_container:after {
            content: '\e003';
            font-family: Glyphicons Halflings;
            width: 18px;
            height: 18px;
            position: absolute;
            right: 39px;
            bottom: 15px;
        }
        #accordion_search_bar_container #accordion_search_bar {
            display: block;
            margin: 10px auto;
            width: 98%;
            padding: 7px 10px;
            border: 1px solid #cacaca;
            border-radius: 25px;
            outline: 0;
        }
        .panel-title a {
            display: block;
        }

    </style>
    <div id="app">
        <div id="pricing" style="margin-top: 130px;background-color: whitesmoke;">
            <div class="container">
                <!-- Section Title Start -->
                <div class="section--title">
                    <div class="row">
                        <div class="col-md-6">
                            <h2>Locate<span> Partners</span></h2>
                        </div>
                        <div class="col-md-6">

                        </div>
                    </div>
                </div>
                <!-- Section Title End -->
                <div class="row reset-gutter">
                    <div class="container-fluid">
                        <div class="container"
                             id="page_container">
                            <div id="accordion_search_bar_container">
                                <input type="search" id="accordion_search_bar" v-model="keywords" placeholder="Search Partners"/>
                            </div>
                        </div>
                         <div class="row">
                            <div class="col-md-12">
                                <div class="cplgr-listing-search-result">
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12" v-if="results.length > 0">
                                            <div class="cplgr-listing-grid" v-for="result in results">
                                                <div class="cplgr-listing-description-container">
                                                    <div class="cplgr-listing-description">
                                                        <div class="cplgr-listing-categories">
                                                            <a href="@{{result.website}}"><i class="fa fa-home" aria-hidden="true"></i>
                                                            @{{ result.name }}
                                                        </div>
                                                        <div class="cplgr-status-open">
                                                            <p>Open</p>
                                                        </div>
                                                        <div class="fix"></div>
                                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                                                            eiusmod</p>
                                                    </div>
                                                    <div class="cplgr-listing-desription-footer">
                                                        <a href="#" class="cplgr-listing-location"><i
                                                                    class="fa fa-map-marker"></i> Nepal</a>
                                                        <div class="cplgr-phone-number"><i class="fa fa-phone"></i>
                                                            +1-0000-000-000
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- modal start here -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            keywords: null,
            results: [],
            error_txt: ""
        },
        watch: {
            keywords(after, before) {
                this.fetch();
            }
        },
        methods: {
            fetch() {
                axios.get('/clientCheck', { params: { keywords: this.keywords } })
                    .then(
                        response => this.results = response.data
                    )
                    .catch(error => {});
            }
        }
    })
</script>
@endpush