@extends('frontend')

@section('content')
    <div class="row">
        <div class="col-12 col-md-12 col-lg-12 p-0">
            <img src="{{ asset( $category->store_banner->link ) }}" class="w-100">
        </div>
    </div>
    <div class="row justify-content-center pt-5" style="background:#fff;">
        <div class="col-12 col-md-12 col-lg-12" style="">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-9 col-lg-9">
                        <h2><b>{{ $category->name }}</b></h2>
                    </div>
                    <div class="col-12 col-md-3 col-lg-3">
                        <div class="text-end">
                            <select id="store_tag" class="form-select rounded-pill" aria-label="Default select example">
                                <option value="hot" {{ Request::input('store_tag') == 'hot' ? 'selected' : '' }}>ร้านค้าโปรแรง</option>
                                <option value="rec" {{ Request::input('store_tag') == 'rec' ? 'selected' : '' }}>ร้านค้าแนะนำ</option>
                                <option value="new" {{ Request::input('store_tag') == 'new' ? 'selected' : '' }}>ร้านค้าใหม่</option>
                                <option value=""  {{ !Request::has('store_tag') ? 'selected' : '' }}>ทั้งหมด</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row mt-4 mb-5">
                    @if ( $stores )
                        @foreach ( $stores as $store )
                            @php
                                $images = $store->images;
                            @endphp
                            <div class="col-6 col-md-4 col-lg-3 mb-5">
                                <div class="rounded shadow-sm a-p">
                                    <a href="{{ url('product/detail/' . $store->id .'/'. encodeLink( $store->name ) ) }}" class="d-block text-dark text-decoration-none">
                                        <div class="position-relative shop-image">
                                            <img src="{{ url(count($images) > 0 ? productImage($images[0]->link) : 'assets/frontend/img/shop_banner-13.jpg' ) }}" alt="" class="w-100">
                                            <span class="tag-banner {{ tagBgColor($store->store_type) }} text-white">{{ storeTags($store->store_type) }}</span>
                                        </div>
                                    </a>
                                    <div class="p-3 position-relative" style="background-color:#fff;min-height:160px;">
                                        <a href="{{ url('product/detail/' . $store->id .'/'. encodeLink( $store->name ) ) }}" class="d-block text-dark text-decoration-none">
                                            <div>
                                                <h4><b>{{ $store->name}}</b></h4>
                                            </div>
                                            <div>
                                                @php
                                                    $rating = rating( $store->id );
                                                    $review = review( $store->id );
                                                @endphp
                                                <i class="fa fa-star {{ $rating >= 1 ? 'ico-yellow' : 'ico-gray' }}" aria-hidden="true"></i>
                                                <i class="fa fa-star {{ $rating >= 2 ? 'ico-yellow' : 'ico-gray' }}" aria-hidden="true"></i>
                                                <i class="fa fa-star {{ $rating >= 3 ? 'ico-yellow' : 'ico-gray' }}" aria-hidden="true"></i>
                                                <i class="fa fa-star {{ $rating >= 4 ? 'ico-yellow' : 'ico-gray' }}" aria-hidden="true"></i>
                                                <i class="fa fa-star {{ $rating >= 5 ? 'ico-yellow' : 'ico-gray' }}" aria-hidden="true"></i>
                                            </div>
                                            <div class="c-g">{{ $store->tags }}</div>
                                        </a>
                                    </div>
                                    <div class="text-end pt-3 position-absolute" style="right: 15px;bottom: 15px;">
                                        <span data-bs-toggle="collapse" href="#socials-share-{{ $store->id }}" role="button" aria-expanded="true">
                                            <img src="{{ url('assets/frontend/icon/sh.svg') }}" alt="" class="">
                                        </span>
                                    </div>
                                    <div class="collapse box-share " id="socials-share-{{ $store->id }}" style="">
                                        <div class="text-center p-2">
                                            <span data-bs-toggle="collapse" href="#socials-share-{{ $store->id }}" role="button">
                                                <img src="{{ url('assets/frontend/icon/close.svg') }}" alt="" class="">
                                            </span>
                                        </div>
                                        <div class="card card-body">
                                            <ul>
                                                <li><a  href="https://www.facebook.com/sharer/sharer.php?u={{ url('product/detail/' . $store->id .'/'. encodeLink( $store->name ) ) }}" target="_blank"><img src="{{ url('assets/frontend/icon/icon-facebook.svg') }}"
                                                            alt=""></a></li>
                                                <li><a href="https://twitter.com/intent/tweet?text={{ $store->name }}&url={{ url('product/detail/' . $store->id .'/'. encodeLink( $store->name ) ) }}" target="_blank"><img src="{{ url('assets/frontend/icon/icon-twitter.svg') }}"
                                                            alt=""></a></li>
                                                <li><a href="line://msg/text/{{ url('product/detail/' . $store->id .'/'. encodeLink( $store->name ) )  }}" target="_blank"><img src="{{ url('assets/frontend/icon/icon-line.svg') }}"
                                                            alt=""></a></li>
                                                <li><button class="share-link" data-link="{{ url('product/detail/' . $store->id .'/'. encodeLink( $store->name ) ) }}"><img src="{{ url('assets/frontend/icon/icon-link.svg') }}"
                                                            alt=""></button></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                    {{-- @include('frontend.includes.empty-logs') --}}
                
                </div>
                @if ($stores->lastPage() > 1 )
                <div class="row mt-4 mb-5" id="shop-result"></div>
                <div class="row mb-5 pb-5" id="btn-load-shop">
                    <div class="col-12 text-center">
                        <input type="hidden" id="current_page" value="2"/>
                        <a href="#" data-lastpage="{{ $stores->lastPage() }}" id="shop-list" class="rounded-pill d-inline-block a-regis text-decoration-none text-white border-0"
                            style="background-color: #F66074;padding: 7px 50px;">
                            แสดงเพิ่มเติม
                        </a>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
@endsection
@section('modals')
    @include('frontend.modals.share-link')
@endsection
@section('javascript')
<script type="text/javascript">
    function callShop(params){
        let url = `{{ url('shop-list') }}${params ?  params : ''}`;
        console.log('url : ', url);
        $.ajax({
            url : url,
            success : function(data){
                $('#shop-result').append( data );

                $('.share-link').on('click',function(e){
                    $('#link-share').val($(this).data( 'link') );
                    $('#btn-copy-link').text('คัดลอกลิ้ง');
                    console.log('open modal url : ')
                    var myModal = new bootstrap.Modal(document.getElementById("Modal-share-link"), {});
                        myModal.show();
                });

                $('#btn-copy-link').on('click',function(e){
                    e.preventDefault();
                    let input = $('#link-share');
                    input.select();
                    navigator.clipboard.writeText(input.val());
                    $(this).text('คัดลอกแล้ว');
                });
            }
        })
    }

    (function($){
        $('#shop-list').on('click',function(e){
            e.preventDefault();
            let page        = $('#current_page').val();
            let lastPage    = $(this).data('lastpage');
            console.log( 'current page : ', page ,' last page : ', lastPage );
            let store_tag   = $('#store_tag').val();
            let params      = [];

            params.push(`page=${page}`);
            params.push(`category_id={{ $category->id }}`);
            if( store_tag )
                params.push(`store_tag=${store_tag}`);

            if( page <= lastPage )
                callShop(`?${params.join('&')}`);

            page++;
            $('#current_page').val(page);
            if( page > lastPage )
                $('#btn-load-shop').hide();
            console.log('click page no : ', page );
        });

        $('#store_tag').on('change',function(e){
            let url = "{{ url('category/'. $category->id .'/'. encodelink($category->name) ) }}" + ( $(this).val() ? '?store_tag=' + $(this).val() : '' );
            console.log('locatoion : ', url);

            location.href = url;
        })

        $('.share-link').on('click',function(e){
            $('#link-share').val($(this).data( 'link') );
            $('#btn-copy-link').text('คัดลอกลิ้ง');
            console.log('open modal url : ')
            var myModal = new bootstrap.Modal(document.getElementById("Modal-share-link"), {});
                myModal.show();
        });

        $('#btn-copy-link').on('click',function(e){
            e.preventDefault();
            let input = $('#link-share');
            input.select();
            navigator.clipboard.writeText(input.val());
            $(this).text('คัดลอกแล้ว');
        });
    }(jQuery));
    </script>
@endsection