@extends('layout.app')

@section('content')
        <div class="breadcrumb-option set-bg" data-setbg="img/breadcrumb-bg.jpg">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <div class="breadcrumb__text">
                        <h2>Search</h2>
                        <div class="breadcrumb__links">
                            <a href="./index.html">Home</a>
                            <span>Search</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Breadcrumb End -->
  <section>

              <div class="container">

                <div class="solutions-main">

                  

                  <div class="">



              <p class=" solution_para">With an extensive portfolio of products and comprehensive technical skills, Googoz delivers a solution-led and innovative approach to distribution to assist and support our reseller channel.</p>

                  </div>

                  

                </div> <!--solutions ends-->

              </div>

            </section>

             <section class="about spad">
                  <div class="container searchcontainer">
                  <div class="">
                    <div id="search-main">
                    <input name='txtsearch' id='ecatalogsearch' type="text" placeholder="search..."  class="search-field">
                    <button value="hello" type="submit" id="search"  class="search" >Search</button>
                    </div>
                    </div>
                    </div>

                  <div class="container">
                  <div class="row">
                    <button class="normal-btn view_all_btn" style="display: none;">View All Products</button>
                    <span class="search-icon"></span>
                    <div class="col-md-12">
                               <div class="product-range table-responsive">

                      <table width="100%" border="0" cellpadding="0" cellspacing="0" style="padding:10px" class="table table-bordered table-striped table_search">
                        <thead>
                          <tr bgcolor="#003C4A" height="38" style="color:#FFF; font-weight:bold">


                            <th width="30%">Brand</th>

                             <th width="25%" style="padding-left:15px">	Part No</th>

                            <th width="30%">Part Description</th>
                            <th width="15%">Request Quote</th>
                          </tr>
                          </thead>
                          <div id="success_message"></div>
                          <tbody class="tbody_search">
                          </tbody>
                      
                    </table>

                    </div>
                    </div>
         <div class="product-range table-responsive">

                      <table width="100%" border="0" cellpadding="0" cellspacing="0" style="padding:10px" class="table table-bordered table-striped show_products" >
                        <thead>
                          <tr bgcolor="#003C4A" height="38" style="color:#FFF; font-weight:bold">

                            <th width="25%" style="padding-left:15px">Brand</th>
                            <th width="25%">Part No.</th>
                            <th width="35%">Part Description</th>
                            <th width="15%">Request Quote</th>
                          </tr>
                          </thead>
                          <tbody>
                          @foreach ($products as $product)
                           <tr height="34" bgcolor="#f1f6fc">
                          <td style="padding-left:15px"> {{ $product->manufacture }}</td>
                          <td>{{ $product->part_number }}</td>
                          <td>{{ $product->part_name }}</td>
                          <td><a href="/rfq?partnumber={{ $product->part_number }}"><button name="" type="button" value="Request Quote" class="normal-btn">Request Quote</button></a></td>
                        </tr>
                        @endforeach 
                          </tbody>
                      
                    </table>

                    </div> <!--prodcut-range ends-->
                     <div class="col-lg-12 col-md-12">
                       <div class="product__pag" id="product__pag">
                          {!! $products->appends(request()->input())->links();!!}
                       </div>
                   </div>
        </div>
          </div>
            </section>

<!-- Services Page Section End -->
@endsection
@section('scripts')
<script type="text/javascript">
 $(document).ready(function(){
 $('.table_search').hide();
    $(document).on('click','.search', function (e) {
      e.preventDefault();
     var stud_id = $('#ecatalogsearch').val();
      // console.log(stud_id);
        alert(stud_id);
        if(stud_id=="")
        {
          // alert(stud_id+"empty");
          stud_id="empty";
           $('.tbody_search').html("");
            $('.table_search').hide();
            $('.show_products').show();


        }
           $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
    });

 $.ajax({
         type: "GET",
         url: "/search-product/"+stud_id,
         dataType: "json",
         success: function(response)
         {
         // alert(stud_id+ "ajax");
    console.log(response.products);
    if(response.data!='empty')
    {
     // alert('hello hello');
        if(response.status == 404)
        {
           // alert('hello hello if');
           $('#success_message').html("");
             $('#success_message').addClass('alert alert-danger');
           $('#success_message').text(response.message);

        }
        else
        {
          // alert('hello hello else');
           if(response.products==""){
            // alert('No record return');
            $('#success_message').css("display", "block");
            $('#success_message').html("");
             $('#success_message').addClass('alert alert-danger');
             // console.log(response.products);
           $('#success_message').text(response.message);
           $(function() {
           setTimeout(function() { $("#success_message").fadeOut(1500); }, 2500)
           })
           }
           else{
         $('.table_search').show();
         $('.show_products').hide();
         $('.view_all_btn').css("display", "block");
         $('#search-main').css("display", "none");
         $('#success_message').css("display", "none");
         $('.product__pag').css("display", "none");
         $('.tbody_search').html("");
         $.each(response.products, function (key, item){
         $('.tbody_search').append(
          '<tr>\
       <td>'+item.manufacture+'</td>\
       <td>'+item.part_number+'</td>\
       <td>'+item.part_name+'</td>\
       <td><a href="/rfq?partnumber='+ item.part_number+' "><button name="" type="button" value="Request Quote" class="normal-btn">Request Quote</button></a></td>\
      </tr>'

                );
            });
        }
         }
}
else{
  $('#success_message').css("display", "block");
   $('#success_message').html("");
   $('#success_message').addClass('alert alert-danger');
   $('#success_message').text(response.message);
   $(function() {
setTimeout(function() { $("#success_message").fadeOut(1500); }, 2500)

})
}

         }// success end
  });
  });
      $(document).on('click','.view_all_btn', function (e) {
         setTimeout(function(){// wait for 5 secs(2)
           location.reload(); // then reload the page.(3)
      }, 1000); 
    });
   });// ready end
     

</script>
@endsection