@extends('frontend')

@section('content')
    <div class="row">
        <div class="col-12 col-md-12 col-lg-12 p-0">
            {{-- <img src="{{ url('assets/frontend/img/banner-home.png') }}" class="w-100"> --}}
            @if ($header_slider)
            <div>
                <div id="header-slider" class="carousel slide carousel-fade" style="z-index: 0" data-bs-ride="carousel" data-bs-interval="4000">
                    <div class="carousel-indicators">
                        @foreach ($header_slider as $idx => $item)
                        <button type="button" data-bs-target="#header-slider" data-bs-slide-to="{{ $idx }}" class="active" aria-current="true" aria-label=""></button>
                        @endforeach
                    </div>
                    <div class="carousel-inner">
                        @foreach ($header_slider as $idx => $item)
                      <div class="carousel-item {{ $idx == 0 ? 'active' : '' }}">
                        <a href="{{ $item->link }}">
                        <img src="{{ url( $item->path . $item->filename ) }}" alt="" class="d-block w-100">
                        </a>
                      </div>
                      @endforeach
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#header-slider" data-bs-slide="prev">
                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                      <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#header-slider" data-bs-slide="next">
                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
                      <span class="visually-hidden">Next</span>
                    </button>
                  </div>
            </div>
            @endif
            <div class="position-relative box-home">
                <img src="{{ url('assets/frontend/img/bg-home-1.png') }}" alt="" class="w-100">
                <div class="position-absolute-res trant-50 mttop w-100" style="">
                    <div class="container">
                        <div class="row mb-5">
                            <div class="col-12 col-md-12 col-lg-12 mb-2">
                                <h4><b>ค้นหาร้านค้า / โปรโมชั่น / ที่พัก / จังหวัด </b></h4>
                            </div>
                            <div class="col-12 col-md-12 col-lg-12">
                                <div>
                                    {{-- <form action="{{url('/search')}}" class="position-relative"> --}}
                                    <form action="{{ url('search') }}" class="position-relative">
                                        <input type="text" class="form-control rounded-pill" placeholder="พิมพ์เพื่อค้นหา" name="keywords">
                                        <div class="position-absolute" style="bottom: 0;right:0">
                                            <button type="submit" class="rounded-pill d-inline-block a-regis text-decoration-none text-white border-0 c-search">
                                                ค้นหา
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="row d-none d-md-flex">
                            @if ($category)
                                @foreach ($category as $cate)
                                    <div class="col-6 col-md-4 col-lg-2">
                                        {{-- <a href="#" class="text-decoration-none text-dark soi-mee-1"> --}}
                                        <a href="{{ url('category/'. $cate->id .'/'. encodelink($cate->name) ) }}" class="text-decoration-none text-dark soi-mee-1">
                                            <div>
                                                <img src="{{ url( $cate->store_image ? $cate->store_image->link : '' ) }}" alt="" class="w-100">
                                            </div>
                                            <div class="text-center p-2">
                                                <b>{{ $cate->name }}</b>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach  
                            @endif
                        </div>
                        <div class="row d-flex d-md-none">
                            <div class="col-12">
                                <div class="owl-carousel owl-theme mt-5">
                                @if ($category)
                                    @foreach ($category as $cate)
                                        <div class="item">
                                            <a href="{{ url('category/'. $cate->id .'/'. encodelink($cate->name) ) }}" class="text-decoration-none text-dark soi-mee-1">
                                                <div>
                                                    <img src="{{ url( $cate->store_image ? $cate->store_image->link : '' ) }}" alt="" class="w-100">
                                                </div>
                                                <div class="text-center p-2">
                                                    <b>{{ $cate->name }}</b>
                                                </div>
                                            </a>
                                        </div>
                                    @endforeach
                                @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   {{-- Banner  --}}
    
    <div class="row justify-content-center mt-2 mt-md-5 mb-0 mb-md-5 pb-5">
        <div class="col-12 col-md-11 col-lg-11">
            <div class="row">
                @if ($ads_slider || $ads_banner)                    
                <div class="col-12 col-md-6 col-lg-6 align-self-end">
                    @if ( $ads_slider )
                    <div id="carouselExampleControls" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="4000">
                        <div class="carousel-inner">
                            @foreach ($ads_slider as $idx => $item)                
                                <div class="carousel-item {{ $idx == 0 ? 'active' : '' }}">
                                    <a href="{{ $item->link }}">
                                        <img src="{{ url( $item->path . $item->filename ) }}" alt="" class="d-block w-100">
                                    </a>                
                                </div>
                            @endforeach
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                          <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
                          <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                    @endif
                </div>
                <div class="col-12 col-md-6 col-lg-6">
                    @if( $ads_banner )
                    <a href="" data-bs-toggle="modal" data-bs-target="#Modal-login">
                        <img src="{{ url( $ads_banner->path . $ads_banner->filename ) }}" alt="" class="w-100">
                    </a>             
                    @endif       
                </div> 
                @endif
                @if ($reg_banner)      
                <div class="col-12 col-md-12 col-lg-12">
                    <a href="" data-bs-toggle="modal" data-bs-target="#Modal-register">
                        <img src="{{ url( $reg_banner->path . $reg_banner->filename ) }}" alt="" class="w-100">
                    </a>                    
                </div>
                @endif
            </div>
        </div>
    </div> 
    
    {{-- Shop list --}}
    <div class="row justify-content-center">
        <div class="col-12 col-md-12 col-lg-12"
            style="background-image: url({{ url('assets/frontend/img/bg-03.png') }});background-repeat: no-repeat;background-size: cover;background-position: center top;">
            <div class="container container-b">
                <div class="row">
                    <div class="col-12 col-md-9 col-lg-9">
                        <h2><b>ตลาดนัด หมีดีและถูก</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 ps-4" 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">
                    @include('frontend.includes.shop-list')
                </div>
                <div class="row mt-4 mb-5" id="shop-result"></div>
                @if ($stores->lastPage() > 1 )
                <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-page="2" data-lastpage="{{ $stores->lastPage() }}" id="shop-list" class="load-page 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 class="container container-b">
                @if ( $footer_banner )
                <div class="row mb-5">
                    <div class="col-12 text-center">
                        <a href="{{ $footer_banner->link }}" target="_blank" class="position-relative d-block" style="">
                            <img src="{{ url($footer_banner->path . $footer_banner->filename ) }}" alt="" class="w-100">
                            <span class="tag-ads tag-color-gray text-body f-size-14">Ads by MG Best Autosales</span>
                        </a>
                    </div>
                </div>
                @endif
                <div class="row mb-5 pt-0 pt-md-5 justify-content-center">
                    <div class="col-12 col-md-8 text-center">
                        <h4><b class="openPolicy">ข้อกำหนดเว็ปไซต์</b></h4>
                        <p>บริษัท เบส ออโต้เซลส์ จำกัด
                            เป็นผู้จัดทำเว็บไซต์นี้เพื่อเป็นช่องทางการสื่อสารระหว่างผู้บริโภคและร้านค้าเพื่อเพิ่มโอกาสทางการขายเท่านั้น
                            บริษัทฯ ไม่มีส่วนเกี่ยวข้องกับร้านค้าและจะไม่รับผิดชอบความเสียหายในทุกกรณี</p>
                    </div>
                </div>
            </div>
        </div>
    </div> 
@endsection
    <!-- Modal -->
@section('modals')
    @include('frontend.modals.introl')
    @include('frontend.modals.share-link')
@endsection

@section('javascript')
<script src="{{ asset('assets/frontend/js/shop-list.js') }}"></script>
<script type="text/javascript">
    (function($){
        $('#store_tag').on('change',function(e){
            let url = "{{ url('') }}" + ( $(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>
@if ( auth()->guest() )
<script>
        var myModal = new bootstrap.Modal(document.getElementById("Modal-introl"), {});
        document.onreadystatechange = function () {
            myModal.show();
        };

        var myModallogin = new bootstrap.Modal(document.getElementById("Modal-login"), {});

        document.getElementById("btnSave").addEventListener("click", function () {
            myModal.hide();

            myModallogin.show();

            var x = document.getElementById("myDIV");

            x.style.display = "block";

            var y = document.getElementById("c-a");
            y.style.display = "none";
        });
</script>
@endif
@endsection