@extends('frontend.layout')
@section('page_title', 'All Products')

@section('content')

<section class="section">
    <div class="container">
        
        <div class="row" style="height: max-content !important;">
            <div class="col-md-12" style="border-left: 5px solid green;margin-left:10px; margin-bottom: 20px;">
                <h2 style="margin:0px;">{{ ucfirst($cat_name) ?? ''}}</h2>
            </div>
        </div>
        
        <form action="" method="GET">
            <div class="row mb-4">
                <div class="col-md-2 mb-4">
                    <h4>Filter By:</h4>
                </div>
                
                <div class="col-md-3 col-sm-12 mb-4">
                    <select name="product_id" id="product_name" data-placeholder="Select Item">
                        @foreach($productsSelect as $product)
                        <option value="{{ $product->id }}">{{ $product->name ?? ''}}</option>
                        @endforeach
                    </select>
                </div> 
                
                <div class="col-md-3 col-sm-12 mb-4">
                    <select name="brand_id" id="brand_name" data-placeholder="Select Brand">
                        @foreach($brands as $brand)
                        <option value="{{ $brand->id }}">{{ $brand->brand_name ?? ''}}</option>
                        @endforeach
                    </select>
                </div>  
                
                <div class="col-md-3 col-sm-12 mb-4">
                    <select name="company_id" id="company_name" data-placeholder="Select Company">
                        @foreach($companies as $company)
                        <option value="{{ $company->id }}">{{ $company->company_name ?? ''}}</option>
                        @endforeach
                    </select>
                </div>      
                
                <div class="col-md-1 mb-4">
                    <button type="submit" class="btn btn-success">Search</button>
                </div>
            </div>
        </form>
        
        <div class="row">
            <div class="col-md-12 table-responsive">
                <table class="table table-bordered table-striped">
                <thead class="bg-success">
                    <tr>
                        <th class="text-white">#SL</th>
                        <th class="text-white">Item Name</th>
                        <th class="text-white">Specification</th>
                        <th class="text-white">Brand Name</th>
                        <th class="text-white">Unit</th>
                        <th class="text-white">Origin</th>
                        <th class="text-white">Company</th>
                        <th class="text-white">Market Rate</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($products as $item)
                    <tr>
                        <td>{{ ++$sl }}</td>
                        <td><a href="{{url('products')}}/{{$item->id}}/{{strtolower(str_replace('/', '&',str_replace(' ', '-', $item->name)))}}">{{ $item->name ?? '' }}</a></td>
                        <td>{{ $item->specification ?? '' }}</td>
                        <td>{{ $item->brand_name ?? '' }}</td>
                        <td>{{ $item->unit ?? '' }}</td>
                        <td>{{ $item->origin ?? '' }}</td>
                        <td>{{ $item->company_name ?? '' }}</td>
                        <td>&#2547; {{ $item->price ?? '0' }}</td>
                    </tr>
                    @endforeach 
                </tbody>
            </table>
            </div>

        </div>
        {{$products->links()}}
    </div>
</section>

@endsection

@section('styles')
  <style>
        .text-white{
            color: #fff !important;
        }
      .select2-container .select2-selection--single {
          box-sizing: border-box;
          cursor: pointer;
          display: block;
          height: 35px;
          user-select: none;
          -webkit-user-select: none;
          background: #fff !important;
          box-shadow: 5px 5px 12px #fdfd;
        }
        
        .select2-results {
            display: block;
            min-height: max-content;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .mb-4 {
            margin-bottom: 10px !important;
        }

  </style>
@endsection

@section('scripts')
<script src="{{ asset('backend_assets/bower_components/jquery/dist/jquery.min.js') }}"></script>
  <!-- Select2 -->
  <script src="{{asset('backend_assets/bower_components/select2/dist/js/select2.full.min.js')}}"></script>
<script>
    $(document).ready(function(){
        
        init();
        
    });
    
    
    function init(){
        $('#company_name').select2({
            theme: 'bootstrap4'
        }).val(null).trigger("change");
        
        $('#product_name').select2({
            theme: 'bootstrap4'
        }).val(null).trigger("change");
        
        $('#brand_name').select2({
            theme: 'bootstrap4'
        }).val(null).trigger("change");
    }
    
    
    function clearFilter(){
        $('#company_name').val(null).trigger("change");
        $('#product_name').val(null).trigger("change");
        $('#brand_name').val(null).trigger("change");
    }
</script>
@endsection