{{-- mainLayouts extends --}}
@extends('layouts.contentLayoutMaster')

{{-- Page title --}}
@section('title', 'Car Model List')

@section('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2-materialize.css')}}">
@endsection

{{-- page style --}}
@section('page-style')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/form-select2.css')}}">
@endsection

@section('content')
{{-- <div class="container">
  <div class="row">
    <div class="col m6">
    </div>
    <div class="col m6">
      <div class="input-field">
        <form action="{{ route('admin.car-model.index') }}" method="get" id="company-form">
          <select class="select2 browser-default" name="company_id" id="company-select">
            <option value="">All</option>
            @foreach ($car_companies as $company)
            <option value="{{ $company->id }}"
              {{ request()->get('company_id') && request()->get('company_id') == $company->id ? "selected" : '' }}
              >{{ $company->name }}</option>
              @endforeach
            </select>
          </form>
        </div>
      </div>
    </div>
  </div> --}}

  <section class="users-list-wrapper section">
    <div class="users-list-table">
      <div class="card">
        <div class="row pl-1 pr-1">
            <div class="col s4">
                <h5><b>Car Model</b></h5>
            </div>
            <div class="input-field col s5">
                <form action="{{ route('admin.car-model.index') }}" method="get" id="report-search-form">
                    <input class="search-keyword" type="text" name="keyword" id="keyword" value="{{ request('keyword') ?? '' }}" placeholder="Search...">
                    <i class="material-icons prefix custom-search-icon">search</i>
                </form>
                <a class="modal-trigger" href="#modal1">
                    <i class="material-icons prefix custom-filter-icon">filter_list</i>
                </a>
            </div>
            <div class="col s3 mt-2">
                <a href="{{ route('admin.car-model.create') }}" class="btn waves-effect waves-light border-radius-button right"><i class="material-icons left">list</i>Add Car Model</a>
            </div>
        </div>
        <div class="card-content pt-0">
          <!-- datatable start -->
          <div class="responsive-table">
            <div class="center">
              {{ $car_models->withQueryString()->links() }}
            </div>
            <table id="users-list-datatable" class="table responsive-table striped">
              <thead class="grey lighten-2">
                <tr>
                  <th></th>
                  <th>#</th>
                  <th>Car Model</th>
				  <th>Car Company</th>
				  <th>Created</th>
				  <th>Created By</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                @forelse ($car_models as $key => $car_model)
                <tr>
                  <td></td>
                  <td>{{$key + $car_models->firstItem()}}</td>
                  <td>{{$car_model->name ?? '-'}}</td>
                  <td>{{$car_model->company->name ?? '-'}}</td>
				  <td>{{$car_model->created_time ?? '-'}}</td>
				  <td>Admin</td>
                  <td>
					<div class="right">
						<i class="material-icons left pt-3">
							<a class="blue lighten-4 border-radius-button z-depth-1" href="{{ route('admin.car-model.edit',$car_model->id) }}" style="padding: 6px 10px;">edit</a>
						</i>
						<form action="{{ route('admin.car-model.destroy', $car_model->id) }}" method="POST" onsubmit="return confirm('Are You Sure?');" style="display: inline-block;">
							<input type="hidden" name="_method" value="DELETE">
							<input type="hidden" name="_token" value="{{ csrf_token() }}">
							<button class="btn waves-effect waves-light red darken-2 border-radius-button" type="submit"><i class="material-icons left">delete_forever</i>Delete</button>
						</form>
					</div>
                  </td>
                </tr>
                @empty

                @endforelse
              </tbody>
            </table>
            <div class="center">
				{{$car_models->withQueryString()->links()}}
			</div>
          </div>
          <!-- datatable ends -->
        </div>
      </div>
      <div id="modal1" class="modal big-size-modal modal-fixed-header">
        <form action="{{ route('admin.car-model.index') }}" method="get">
            <div class="modal-filter-header modal-header pt-1">
                {{-- <div class="col s8 custom-d-flex">
                    <h6 class="m-0 pr-2"><b>Car Company Filter</b></h6>
                    <a href="#" class="mt-1 pl-2 clear-filter" id="clearFilter">Clear Filter</a>
                </div> --}}
                <div class="col s8 custom-d-flex">
                    <h5 class="m-0 pr-2 custom-border-right"><b>Car Model Filter</b></h5>
                    <a href="#" class="mt-1 pl-2 clear-filter" id="clearFilter">Clear Filter</a>
                </div>
                <div class="col s4">
                    <a href="javascript:void(0)" class="right modal-close">
                        <i class="material-icons prefix custom-close-icon">close</i>
                    </a>
                    <button class="right btn waves-effect waves-light red border-radius-10 mr-4" type="submit">Filter</button>
                </div>
            </div>
            <div class="modal-content modal-content-bg">
                <div class="modal-filter-body">
                    <div class="col s3 mb-3  custom-border-right">
                        <h6 class="mb-5 mt-0"><b>Car Company</b></h6>
                        <div >
                            @forelse ($car_companies as $car_company)
                                <div>
                                    <div onclick="checkFilter({{ $car_company->id }}, 'company')" id="filter-box-company-{{ $car_company->id }}" class="filter-box mb-3 @if(request('car_company') && in_array($car_company->id, request('car_company'))) box-checked @endif">{{ $car_company->name }}</div>
                                    <input type="checkbox" value="{{ $car_company->id }}" name="car_company[]" id="filter-check-company-{{ $car_company->id }}" class="filter-check" @if(request('car_company') && in_array($car_company->id, request('car_company'))) checked="checked" @endif>
                                </div>
                            @empty
                            @endforelse
                        </div>
                    </div>
                </div>
        </form>
    </div>
    </div>
  </section>
  @endsection


  @section('vendor-script')
  <script src="{{asset('vendors/select2/select2.full.min.js')}}"></script>
  @endsection

  @section('page-script')
  <script src="{{asset('js/scripts/form-select2.js')}}"></script>
  <script>
    $(document).ready(function() {
      $(".select2").select2({
        dropdownAutoWidth: true,
        width: '100%'
      });
      $('#company-select').on('change', function() {
        $('#company-form').submit();
      });
    });
  </script>
    <script>
        $(document).ready(function(){
            $('.modal').modal();
        });
        function checkFilter(id, type) {
            var filter_box = "#filter-box-" + type + '-' + id;
            var filter_check = "#filter-check-" + type + '-' + id;

            if ($(filter_box).hasClass("box-checked")) {
                $(filter_box).removeClass("box-checked");
                $(filter_check).removeAttr('checked');
            } else {
                $(filter_box).addClass("box-checked");
                $(filter_check).attr('checked', 'checked');
            }
        }

        $('#clearFilter').on('click', function() {
            $('.filter-box').removeClass('box-checked');
            $('.filter-check').removeAttr('checked');
            $('.date-filter').val('');
        })

        function Close() {
            $('.modal').modal().hide();
        }

    </script>


  @endsection