@extends('frontend.m9')
@section('styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/shoppage.css')}}">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="{{asset('css/slick-theme.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/slick.min.css')}}">
<link href="{{ asset('css/adminltev3.css') }}" rel="stylesheet" />
<style media="screen">
button.product_btn_one.disabled {
  opacity: 0.5;
}
.set_product_design_storage.active span {
    border: 2px solid #0099ff;
}
.storage_size .set_product_design_storage{
  display:none;
}
.storage_size .slider{
  /* display:flex; */
  min-height:24px;
}
.set_product_design_storage.active{
  display:inline-block;
}
.d-show{
  display:inline-block!important;
}
.d-none{
  display:none!important;
}
.set_product_design_storage span{
  padding:2px 0px;
}
a.product_btn_one.full-width,
.full-width{
  width:100%;
}
</style>
@endsection
@section('content')
@php $language = session()->get('language'); @endphp
<div id="content">
  <div class="gb-gnb__bar"></div>
  <div class="cm-breadcrumb">
    <div class="cm-breadcrumb__inner">
    @if($language == 'en')
      <ul class="cm-breadcrumb__path">
        <li>
          <a href="/">Home</a>/
        </li>
        <li>
        </li>
        <li>
        </li>
      </ul>
      @else
      <ul class="cm-breadcrumb__path">
        <li>
          <a href="#">ပင်မစာမျက်နှာ</a>/
        </li>
        <li>
        </li>
        <li>
        </li>
      </ul>
      @endif
    </div>
  </div>

  {{-- title --}}
  <div class="pr-flagship-header shop-header">
    <div class="pr-flagship-header__wrap">
      <div class="cm-g-text-block-container aem-GridColumn aem-GridColumn--default--12">

        <section class="text-block-container   text-color--black" style="background: #FFFFFF">
          <div class="text-block-container__title-wrap">

            <div class="text-block-container__headline-wrap">
                <h2 class="text-block-container__headline">Looking for something else?</h2>
            </div>

          </div>

        </section>
    <div class="aem-Grid aem-Grid--12 aem-Grid--default--12 ">

    </div>

    </div>
    <div class="ho-g-home-search aem-GridColumn aem-GridColumn--default--12">

        <section class="home-page-search">
          <div class="home-page-search__wrap">
            <form action="{{ route('search')}}" method="get" class="home-page-search__form" role="search">
            @csrf
              <fieldset>
                <legend></legend>
                <div class="home-page-search__form-container">
                  <div class="text-field text-field--hide-label" an-tr="fn03_home search-home-text-search" an-ca="home content click" an-ac="popular search" an-la="popular search:keyword submit">
                    <label for="home-page-search"></label>
                    <input id="home-page-search" type="text" name="serach_data" value="{{$request->serach_data}}" onfocusout="myFunction()" autocomplete="off"/>
                    <svg class="icon" viewBox="0 0 96 96">
                      <path d="M48 2.5c25.088.001 45.5 20.413 45.5 45.5 0 25.088-20.412 45.5-45.5 45.5-12.154.001-23.58-4.732-32.174-13.326C7.232 71.581 2.5 60.155 2.5 48.001 2.5 22.912 22.911 2.5 48.002 2.5zm15.203 23.93l-15.91 15.91-15.91-15.91-4.95 4.95 15.91 15.91-15.91 15.91 4.95 4.95 15.91-15.91 15.91 15.91 4.95-4.95-15.91-15.91 15.91-15.91-4.95-4.95z"></path>
                    </svg>
                  </div>

                  <button type="button" class="home-page-search__form-submit"><span class="hidden">search</span>
                    <svg class="icon" focusable="false" viewBox="0 0 96 96">
                      <path d="M40.581 4.09c20.126 0 36.5 16.374 36.5 36.5a36.325 36.325 0 01-7.963 22.733l22.8 22.948-5.674 5.639-22.767-22.913a36.327 36.327 0 01-22.896 8.093c-20.126 0-36.5-16.374-36.5-36.5s16.374-36.5 36.5-36.5zm0 8c-15.715 0-28.5 12.785-28.5 28.5s12.785 28.5 28.5 28.5 28.5-12.785 28.5-28.5-12.785-28.5-28.5-28.5z"></path>
                    </svg>
                  </button>
                </div>
              </fieldset>
            </form>
          </div>
        </section>

    </div>
    </div>
  </div>

  <!-- content layout -->
  {{-- <div class="filter-sort__head-wrap">
    <div class="filter-sort__head">
      <div class="filter-sort__head-title">
        <span>Filters</span>
      </div> --}}

      {{-- <div class="filter-sort-info__results-text">
        <p class="filter-count"></p>
        <span class="filter-sort-info__number" id="product_count">111111</span>
        Result(s)
      </div> --}}

      {{-- <div class="filter-sort-applied">
          <ul class="applied-list">
            <div id="result">
            </div>
          </ul>
      </div> --}}

        {{-- <div class="filter-select-box-meta">
            <span class="filter_text_on">Sort By: </span>
            <select name="my-select" class="js-my-select">
                <option value="new_date">Newest</option>
                <option value="old_date">Oldest</option>
                <option value="max">Price Highest</option>
                <option value="min">Price Lowest</option>
            </select>
        </div> --}}

    </div>
  </div>
  <!-- content product -->

  <!-- left side -->
  <!-- right side -->
<div class="product-filter-list">
    <div class="product-grid-list">
      <section class="product-card-nature">
          <div id="sort-product" class="product-card-nature-group__list">

        <!-- Nav tabs -->
    <ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link active" data-toggle="tab" href="#home">All ({{$data['total_count']}})  </a>
        </li>
        <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#menu1">Product ({{$data['count']}})</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" data-toggle="tab" href="#menu2">Explore ({{$data['explore_count']}})</a>
        </li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
          <div id="home" class="container-search tab-pane active "><br>
              @include('frontend.search_data')
                @if(count($data['explores']))
                @foreach ($data['explores'] as $key=>$explore)
                @php
                    $strip_desc = strip_tags($explore->video_description??'There is no description ...');
                    $limit_desc = \Illuminate\Support\Str::limit($strip_desc, 200,'...');
                @endphp
                    <div class="row mb-2" tabindex="0">
                        <div class="col-3 search-data-img">
                        <a class="" title="learn more" href="{{ route('explore', $explore->id) }}">
                            @if ($explore->youtube_image)
                                <img class="" src="{{ asset('storage/uploads/explore/youtube_image') }}/{{ $explore->youtube_image }}" />
                            @endif
                        </a>
                        </div>
                        <div class="col-9">
                            <a class="" href="{{ route('explore', $explore->id) }}" > <span class="">0{{ ++$key }} {{ $explore->title ?? '' }}</span> </a><br>
                            <p>{{$limit_desc}} ...</p>
                        </div>
                    </div>
                @endforeach
                @endif
          </div>
          <div id="menu1" class="container-search tab-pane fade"><br>
            @include('frontend.search_data')
          </div>
          <div id="menu2" class="container-search tab-pane fade"><br>
                @if(count($data['explores']))
                @foreach ($data['explores'] as $key=>$explore)
                @php
                    $strip_desc = strip_tags($explore->video_description??'There is no description ...');
                    $limit_desc = \Illuminate\Support\Str::limit($strip_desc, 200,'...');
                @endphp
                <div class="row mb-2" tabindex="0">
                    <div class="col-3 search-data-img">
                    <a class="" title="learn more" href="{{ route('explore', $explore->id) }}">
                        @if ($explore->youtube_image)
                            <img class="" src="{{ asset('storage/uploads/explore/youtube_image') }}/{{ $explore->youtube_image }}" />
                        @endif
                    </a>
                    </div>
                    <div class="col-9">
                        <a class="" href="{{ route('explore', $explore->id) }}" > <span class="">0{{ ++$key }} {{ $explore->title ?? '' }}</span> </a><br>
                        <p>{{$limit_desc}} ...</p>
                    </div>
                </div>
                @endforeach
                @endif
          </div>
      </div>

          </div>
      </section>
    </div>
  </div>
  <!-- right side -->

  </div>
    <!-- content product -->
    <!-- shop page footer -->

    <div class="pr-g-product-disclaimer">
      <div class="pr-g-product-disclaimer__inner">
        <div class="pr-g-product-disclaimer__inner-wrap pr-g-product-disclaimer__inner-wrap__col1">
          <div class="pr-g-product-disclaimer__column">
            <p>
              * Key feature may different from Key Spec.
              <br>

  * Battery : Actual battery life varies by network environment, features and apps used, frequency of calls and messages, number of times charged, and many other factors.
  <br>

  * User Available Memory : User memory is less than the total memory due to storage of the operating system and software used to operate the device features. Actual user memory will vary depending on the operator and may change after software upgrades are performed.
  <br>

  * Network : The bandwidths supported by the device may vary depending on the region or service provider.
  <br>

  * Galaxy Note20 Ultra 5G is 5G-capable and can be used to access 5G network in Singapore after local 5G network are launched.  SIM card upgrade and/or software update may be required. Data subscription fees apply. Images are simulated for illustration purposes.
  <br>

  * Image at the top of page of Galaxy Z Fold2 unfolded and seen from the front with the butterfly graphic wallpaper onscreen simulated for illustration purposes.
  <br>
            </p>
          </div>
        </div>
      </div>
    </div>
  <!-- shop page footer -->
</div>
@endsection
@section('scripts')
<script src="{{ asset('js/bootstrap.min.js') }}"></script>
<script  src="{{ asset('js/shopage.js')}}"></script>
<script src="{{asset('js/jquery.js')}}"></script>
<script src="{{ asset('js/productcolorchange.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script src="{{ asset('js/slick.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.js"></script>
<script>
  $(document).ready(function(){
    $('#product_count').text($('#total_count').val());
    $('.js-my-select').select2();
    tinysort('#sort-product>div.product_item',{selector:'div', order:'desc', data:'date'});
  });
    var selected = new Array();
    $('.category').on('change',function(){
        let $form   = $(this).parents('form'),
          smartPhone = false;
          $form.find('[name="smartphone[]"]').each(function(){
            if( $(this).prop('checked') )
              smartPhone = true;
          })
        if( !smartPhone ){
          $form.append( '<input type="hidden" name="show" value="all">' );
        }
        $form.submit();
    });

    $('.btn-x').on('click',function(){
      let checkbox = $(`input[value=${$(this).data('value')}]`);
          checkbox.prop('checked',false).trigger('change');
    });

    $('.js-my-select').on('change',function(){
        let sort_value = $(this).val();
        let option = {selector:'div', order:'desc', data:'date'};
        if(sort_value == 'old_date' || sort_value == 'min') {
            option.order = 'asc';
        }
        if(sort_value == 'min' || sort_value == 'max') {
            option.data = sort_value;
            $(window).trigger('sort_product', {value: sort_value});
        }
        tinysort('#sort-product>div.product_item', option);
    });

    $(window).on('sort_product', function(event, data){
        let sort_value = data.value;
        $('#sort-product>div.product_item').each(function(){
            let filter_class = $(this).data('pricemin');
            if(sort_value == 'max') filter_class = $(this).data('pricemax');
            let color_wrap =  $(this).find('.color_wrap ul li').filter("[data-price-filter='"+filter_class+"']");
            color_wrap.click();
        })
    });
</script>
<script>
    loadFile = function(event, id) {
        var output = document.getElementById(id);
        output.src = URL.createObjectURL(event.target.files[0]);
    };
</script>
@endsection