@extends('client.layouts.app')

@section("content")
    <div class="wrapper">
      <div class="content-header">
        <div class="container">
          <div class="pt-4">
            <h2 class="title before:bg-[url('../images/icon01.png')]">搜尋: {{$search}}</h2>
          </div>
        </div>
      </div>
      <div class="content-inner">
        <div class="container">
          <div class="ml-auto rounded-full border border-[#ccc] bg-white flex mb-6 md:max-w-[340px] md:mr-0">
            <input class="bg-transparent py-2 px-4 focus:outline-none focus:border-none w-4/5" type="text" name="search" id="search" value="{{$search}}">
            <button class="w-1/5" type="submit" id="myBtn" onclick="searchSubmit();"><img class="w-[28px] block ml-auto mr-4" src="/honda_static/images/search.png"></button>
          </div>
          <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:gap-6">
            @foreach($clientDetail as $k => $v)
            <div class="bg-white 2xl:text-2xl"><img class="block w-full" src="/{{$v->img}}">
              <div class="p-4 pr-0 2xl:p-6 2xl:pr-2">
                <div class="grid grid-cols-2 gap-x-2 gap-y-1 border-l-[6px] border-[#cc0033] font-medium 2xl:text-2xl 2xl:gap-y-4 2xl:border-l-[10px] [&amp;&gt;div]:px-4">
                  <div>
                                      </div>
                  <div class="text-right">{{$v->name}}</div>
                  <div class="col-span-2">{{$v->text}}</div>
                </div>
              </div>
            </div>
            @endforeach
          </div>
              <nav class="pagination2">
                @if($page > 1)
                  <a class="prev" href="?search={{$search}}&page={{$page-1}}">〈</a>
                @endif
                  <div class="pagination__context--variable">
                      <div class="pagination__context">
                          <span>Page</span>
                      </div>
                      <div class="form-group pagination__input">
                          <input type="number" id="page" name="page" min="1" max="{{$clientDetail->lastPage()}}" value="{{$page}}" class="form-style" onchange="goto();">
                      </div>
                      <div class="pagination__context">
                          <span>of</span>
                          <span class="pagination__pages">{{$clientDetail->lastPage()}}</span>
                      </div>
                  </div>
                        @if($page < $clientDetail->lastPage())
                  <a class="next" href="?search={{$search}}&page={{$page+1}}">〉</a>
                        @endif
              </nav>
        </div>
      </div>
    </div>
@endsection

@section("script")
<script type="text/javascript">
    @include("partials.message")

    function goto() {
      var page = $('input[id=page]').val();
      location.href = "?search={{$search}}&page="+page;
    }

    function searchSubmit() {
      
      if($('input[id=search]').val().length === 0){
          swal({
              title: "錯誤",
              text:'搜尋不能為空',
              type:'warning'
          });
          return false;
      }

      var text = $('input[id=search]').val();

      location.href = "/search?search="+text;
    }

    // Get the input field
    var input = document.getElementById("search");

    // Execute a function when the user presses a key on the keyboard
    input.addEventListener("keypress", function(event) {
      // If the user presses the "Enter" key on the keyboard
      if (event.key === "Enter") {
        // Cancel the default action, if needed
        event.preventDefault();
        // Trigger the button element with a click
        document.getElementById("myBtn").click();
      }
    });
</script>
@stop