@extends('frontend')
@php
    $timming = $store->store_time;
    $facilities = json_decode( $store->facilities );
    $socials = json_decode( $store->socials );
    $rating = rating( $store->id );
    $review = review( $store->id );
    $images = $store->images;
@endphp
@section('og-tags')
    <meta name="shop-id" content="{{ $id }}">
    <meta property="og:url"           content="{{ url('product/detail/' . $store->id .'/'. encodeLink( $store->name ) ) }}" />
    <meta property="og:type"          content="website" />
    <meta property="og:title"         content="{{ $store->name }}" />
    <meta property="og:description"   content="{{ $store->description }}" />
    <meta property="og:image"         content="{{ url(count($images) > 0 ? productImage($images[0]->link) : 'assets/frontend/img/shop_banner-13.jpg') }}" />
@endsection
@section('stylesheet')
    <link rel="stylesheet" href="{{ asset('assets/frontend/pages/css/detail.css') }}" />
@endsection
@section('content')

    <div class="row justify-content-center" style="background:#F5F5F5;padding-top:150px">
        <div class="col-12 col-md-12 col-lg-12" style="">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-6 col-lg-6">
                        <a href="{{ url('/') }}" class="text-decoration-none text-dark">หน้าแรก</a> 
                        |
                        <a href="{{ url('category/'. $store->category_id .'/'. encodelink($store->category->name) ) }}" class="text-decoration-none text-dark">{{ $store->category->name }}</a> 

                        <b>| {{ $store->name }}</b>
                        <h3 class="mt-5"><b>{{ $store->name }}</b></h3>
                        
                        <div>
                            <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>
                            <span class="ms-3"><b>{{ $rating }} เรตติ้ง {{ $review }} รีวิว</b></span>
                        </div>
                        <div>{!! tagLink( $store->tags ) !!}</div>
                    </div>
                    <div class="col-12 col-md-3 col-lg-3  align-self-end">
                        <div class="text-end">
                            <div class="d-inline-block socials-share">
                                <div class="f-w-b text-start">แชร์</div>
                                {{-- window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent('https://developers.facebook.com/docs/plugins/'),'facebook-share-dialog','width=626,height=436'); return false; --}}
                                <a class="btn btn-light px-0 border-0 background-none" href="https://www.facebook.com/sharer/sharer.php?u={{ url()->full() }}" target="_blank">
                                    <img src="{{ url('assets/frontend/icon/icon-facebook.svg') }}" alt=""></a>
                                <a class="btn btn-light px-0 border-0 background-none" href="https://twitter.com/intent/tweet?text={{ $store->name }}&url={{ url()->full() }}" target="_blank"><img
                                        src="{{ url('assets/frontend/icon/icon-twitter.svg') }}" alt=""></a>
                                <a class="btn btn-light px-0 border-0 background-none" href="line://msg/text/{{ url()->full()  }}" target="_blank">
                                    <img src="{{ url('assets/frontend/icon/icon-line.svg') }}" alt=""></a>
                                <button id="share-link" class="btn btn-light px-0 border-0 background-none"><img
                                        src="{{ url('assets/frontend/icon/icon-link.svg') }}" alt=""></button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-4 mb-5">
                    <div class="col-12 col-md-3 col-lg-3 pb-5">
                        @if ( count($images) > 0 )
                        <div class="rounded">
                            <img src="{{ url( $store->images[0]->path . $store->images[0]->filename ) }}" alt="" class="w-100 rounded">
                            <div class="p-2">
                                <div class="row">
                                    @for ($i = 0; $i <= 1; $i++)

                                    @php
                                        if( !isset( $images[$i] ) )
                                            break;
                                        $image = $images[$i];
                                    @endphp

                                    <div class="col-4 p-1">
                                        <img src="{{ url( $image->link )  }}" style="width:100%"
                                            onclick="openModal();currentSlide($i)" class="hover-shadow cursor rounded">
                                    </div>
                                    @endfor
                                    @if (count($images) > 2 )
                                        
                                    <div class="col-4 p-1 position-relative">
                                        <img src="{{ url($images[2]->link) }}" style="width:100%"
                                            class="hover-shadow cursor rounded">
                                        <div class="position-absolute"
                                            style="height: 100%;top: 0;left: 0;width: 100%;padding: 4px;cursor: pointer;"
                                            onclick="openModal();currentSlide(2)">
                                            <div style="background: rgba(0,0,0,0.5);height: 100%;border-radius: 10px;">
                                                <span class="position-absolute"
                                                    style="top: 50%;left: 50%;transform: translate(-50%, -50%);color: #fff;">
                                                    <h4>+{{ count($images)-2 }}</h4>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>

                    <div class="col-12 col-md-9 col-lg-6 pb-5">
                        <div class="rounded shadow-sm p-4 bg-white">
                            <div>
                                <span class="f-w-b text-green">เปิดอยู่</span>
                                <span class="ms-3">{{ $store->open_day == 0 ? 'เปิดทุกวัน' : 'เปิด ' . workingDays( $store->store_time->open_days ) }} | เวลาเปิด-ปิด : {{ $timming->open_time }} - {{ $timming->close_time }}</span>
                            </div>
                            <div class="mt-3">
                                <h5><b>รายละเอียดร้านค้า</b>
                                    @if ($store->product_type > 0)
                                    <span
                                        class="f-size-default tags-yellow rounded-pill px-3 py-1">{{ $store->product_type == 1 ? 'มือหนึ่ง' : 'มือสอง' }}</span></h5>
                                    @endif

                            </div>
                            <div>
                                {!! nl2br( $store->description ) !!}
                            </div>
                            <div class="mt-4">
                                <h5><b>ช่วงราคา</b></h5>
                            </div>
                            <div>
                                {{ nb( $store->price_start ) }} - {{ nb( $store->price_end ) }} บาท
                            </div>
                            @if ($store->promotion ) 
                                <div class="mt-3">
                                    <h5><b>โปรโมชั่น</b></h5>
                                </div>
                            <div>
                                {!! nl2br( $store->promotion ) !!}
                            </div>
                            @endif
                            @if ($facilities)
                                
                            <div class="mt-4">
                                <h5><b>สิ่งอำนวยความสะดวก</b></h5>
                            </div>
                            <div>
                                <ul class="ms-3 fa-ul ps-2">
                                    @foreach ($facilities as $facilitie)
                                    <li><span class="fa-li"><i class="fa fa-check-circle"
                                                aria-hidden="true"></i></span>{{ obj_facilities( $facilitie ) }}</li>
                                        
                                    @endforeach
                                </ul>
                            </div>
                            @endif

                            <hr>
                            <div class="mt-4">
                                <h5><b>เกี่ยวกับร้านค้า</b></h5>
                            </div>
                            @if ( $store->map && $store->map != 'null' )
                            <div>
                                <a href="{{ $store->map }}" target="_blank">
                            <img src="{{ url( 'assets/frontend/img/map.jpg' ) }}" alt="" class="w-100 rounded">
                        </a>
                                {{-- <iframe
                                    src="{{ $store->map }}"
                                    width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy"></iframe> --}}
                            </div>
                            @endif
                            <div class="mt-3">
                                <span style="color:#F66074;font-size:22px;padding-right:7px"><i class="fa fa-map-marker"
                                        aria-hidden="true"></i></span>
                                        {{ $store->address2 }} {{ $store->district->name_th}} {{ $store->city->name_th }} {{ $store->province->name_th }} {{ $store->zipcode }}
                            </div>
                            <div class="mt-1">
                                <span style="color:#F66074;font-size:22px;padding-right:5px"><i class="fa fa-phone"
                                        aria-hidden="true"></i></span>
                                {!! phoneLink($store->user->phone) !!}, {!! phoneLink($store->phone1) !!} {!! $store->phone2 ? ', '. phoneLink($store->phone2) : ''  !!}
                            </div>
                            @if ( $socials )
                            <div class="mt-4">
                                <h5><b>ช่องทางติดต่อร้านค้า</b></h5>
                            </div>
                            <div class="">
                                <ul class="ms-3 fa-ul ps-2">

                                @if ( $socials->facebook->link )
                                    <li><a href="{{ $socials->facebook->link }}" target="_blank" class="socials-link"><img
                                        src="{{ url('assets/frontend/icon/icon-facebook.svg') }}" alt=""><span class="ml">{{ $socials->facebook->name }}</span></a></li>
                                @endif
                                @if ( $socials->twitter->link )
                                    <li><a href="{{ $socials->twitter->link }}" target="_blank" class="socials-link"><img
                                        src="{{ url('assets/frontend/icon/icon-twitter.svg') }}" alt=""><span class="ml">{{ $socials->twitter->name }}</span></a></li>
                                @endif
                                @if ( $socials->line->link )
                                    <li><a href="{{ $socials->line->link }}" target="_blank" class="socials-link"><img
                                        src="{{ url('assets/frontend/icon/icon-line.svg') }}" alt=""><span class="ml">{{ $socials->line->name }}</span></a></li>
                                @endif
                                @if ( $socials->youtube->link )
                                    <li><a href="{{ $socials->youtube->link }}" target="_blank" class="socials-link"><img
                                        src="{{ url('assets/frontend/icon/icon-youtube.svg') }}" alt=""><span class="ml">{{ $socials->youtube->name }}</span></a></li>
                                @endif
                                @if ( $socials->instagram->link )
                                    <li><a href="{{ $socials->instagram->link }}" target="_blank" class="socials-link"><img
                                        src="{{ url('assets/frontend/icon/icon-instagram.svg') }}" style="width:32px;" alt=""><span class="ml">{{ $socials->instagram->name }}</span></a></li>
                                @endif
                                @if ( $socials->tiktok->link )
                                    <li><a href="{{ $socials->tiktok->link }}" target="_blank" class="socials-link" style="border-radius:24%;"><img
                                        src="{{ url('assets/frontend/icon/icon-tiktok.svg') }}" style="width:32px;" alt=""><span class="ml">{{ $socials->tiktok->name }}</span></a></li>
                                @endif
                                </ul>
                            </div>
                            @endif
                            <div class="mt-5">
                                <i class="fa fa-info-circle" aria-hidden="true" style="font-size: 22px;color:#D3D3D3;"></i>
                                <a href="" class="text-dark" data-bs-toggle="modal"
                                    data-bs-target="#Modal-policy">ข้อกำหนดในการซื้อสินค้าและบริการ ผ่านช่องทางของเรา</a>
                            </div>
                        </div>
                        @include('frontend.includes.shop-reviews')
                    </div>
                    <div class="col-12 col-md-12 col-lg-3">
                        @include('frontend.includes.sidebar-shops')
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
{{-- Modals list --}}
@section('modals')
    <div id="myModal" class="modal-img">
        <span class="close cursor" onclick="closeModal()">&times;</span>
        <div class="modal-content">
            @foreach ($images as $idx => $image)
                <div class="mySlides">
                    {{-- <div class="numbertext">1 / 3</div> --}}
                    <img src="{{ url($image->link) }}" style="">
                </div>
            @endforeach

            <a class="prev" onclick="plusSlides(-1)"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
            <a class="next" onclick="plusSlides(1)"><i class="fa fa-angle-right" aria-hidden="true"></i></a>

        </div>
    </div>
    @include('frontend.modals.policy')
    @include('frontend.modals.share-link')
@endsection
{{-- Javascript --}}
@section('javascript')
    <script src="{{ asset('assets/frontend/js/slide-gellary.js') }}"></script>
    <script src="{{ asset('assets/frontend/pages/js/detail.js') }}"></script>

    <script type="text/javascript">
    (function($){
        $('#share-link').on('click',function(e){
            $('#link-share').val(`{{ url('product/detail/' . $store->id .'/'. encodeLink( $store->name ) ) }}`);
            console.log('open modal url : ');
            $('#btn-copy-link').text('คัดลอกลิ้ง');

            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('คัดลอกแล้ว');
        });
        $('.btn-rating').on('click',function(e){
            e.preventDefault();
            let _this = $(this);
            let score = $(this).data('score');
            const sts = `{{ auth()->check() ? 'online' : 'offline' }}`;
            if( sts == 'offline' ) {
                alert('กรุณาลงชื่อเข้าใช้ก่อนเขียนรีวิว');
                return false;
            }
            $('#review-score').val( score );
            console.log('rating score : ', score ,' : ', $('#review-score') );
            $('.btn-rating').each( function(data,i){
                let rating = $(this).data('score');
                console.log('hasclass', $(this).hasClass('ico-gray') );
                if( rating <= score ){
                    if( $(this).hasClass('ico-gray') ){
                        $(this).removeClass('ico-gray')
                                .addClass('ico-yellow');
                        console.log('score : ', rating ,' : ', score ,' color : yellow' );
                    }
                }else{
                    if( $(this).hasClass('ico-yellow') ){
                        $(this).removeClass('ico-yellow')
                                .addClass('ico-gray');
                        console.log('score : ', rating ,' : ', score ,' color : yellow' );
                    }
                    
                }

            })
        });
        $('#frm-review').on('submit',function(e){
            if( $('#review-score').val() == 0 ){
                alert('กรุณาให้คะแนนร้านค้าด้วย')
                return false;
            }
        })
    }(jQuery));
    </script>
@endsection