@extends('admin.default')
@section('title', 'Admin | Vehicles List')
@section('content')	
@php
$permissions= getPermissions();
@endphp
   <nav class="page-breadcrumb">
      <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="#">Dashboard</a>/ Vehicles List</li>
         
      </ol>
   </nav>
    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    @if(isset($permissions) && isset($permissions['vehicle_clear_filter']) && $permissions['vehicle_clear_filter']==1)
                        <div class="d-inline">                        
                            <a class="btn btn-sm btn-primary text-white" href="{{route('vehicles')}}">Clear Filter</a>
                        </div>
                        <div class="form-inline float-right">
                            <input type="hidden" name="sort" id="sort" value="{{Request::get('sort')}}">
                            <input type="hidden" name="order" id="order" value="{{Request::get('order')}}">
                            <input type="hidden" name="page" id="page" value="1">
                            <select name="status" id="status" class="form-control mr-2">
                                <option value="active" {{ (Request::get('status') != null && Request::get('status') == 'active') ? 'selected' : '' }} >Active</option>
                                <option value="sold" {{ (Request::get('status') != null && Request::get('status') == 'sold') ? 'selected' : '' }} >Sold</option>
                            </select>
                            <!-- ---------- -->
                            <select name="dealer" id="dealer" class="form-control mr-2">
                            <option value="" selected> -- Select Dealer --</option>
                            <option value="" ></option>
                                @foreach ($dealers as $dealer) 
                                    <option value="{{$dealer->id}}" selected>{{ $dealer->first_name }} {{ $dealer->last_name }}</option>
                                @endforeach
                            </select>
                            <!-- ---------- -->

                            <select name="make" id="make" class="form-control mr-2" placeholder="Make Name">
                                <option value="" selected>Select Makes</option>
                            </select>
                            <span id="model-msg" class="text-danger mx-4" style="display:none;">Loading....</span>
                            <select name="model" id="model" class="form-control mr-2" placeholder="Make Name">
                                <option  value="" selected>Select Model</option>
                                
                            </select>
                            <input type="submit" name="filter" id="filter" class="btn btn-success" value="Filter">
                        </div>
                     @endif
                    <div class="table-responsive"> 
                        <table class="table">
                            <thead>
                                <tr>
                                <th>
                                    Title 
                                    <span class="float-right d-inline">
                                        <span class="sortingItem" data-id="asc" data-value="title"><i data-feather="arrow-up" width="15" height="15"></i></span>
                                        <span class="sortingItem" data-id="desc" data-value="title"><i data-feather="arrow-down" width="15" height="15"></i></span>
                                    </span>
                                </th>
                                <th>
                                    Price
                                    <span class="float-right d-inline">
                                        <span class="sortingItem" data-id="asc" data-value="price"><i data-feather="arrow-up" width="15" height="15"></i></span>
                                        <span class="sortingItem" data-id="desc" data-value="price"><i data-feather="arrow-down" width="15" height="15"></i></span>
                                    </span>
                                </th>
                                <th>
                                    Status
                                    <span class="float-right d-inline">
                                        <span class="sortingItem" data-id="desc" data-value="status"><i data-feather="arrow-up" width="15" height="15"></i></span>
                                        <span class="sortingItem" data-id="asc" data-value="status"><i data-feather="arrow-down" width="15" height="15"></i></span>
                                    </span>
                                </th>
                                <th>
                                    Impressions
                                    <span class="float-right d-inline">
                                        <span class="sortingItem" data-id="asc" data-value="impressions"><i data-feather="arrow-up" width="15" height="15"></i></span>
                                        <span class="sortingItem" data-id="desc" data-value="impressions"><i data-feather="arrow-down" width="15" height="15"></i></span>
                                    </span>
                                </th>
                                <th>
                                    Clicks
                                    <span class="float-right d-inline">
                                        <span class="sortingItem" data-id="asc" data-value="clicks"><i data-feather="arrow-up" width="15" height="15"></i></span>
                                        <span class="sortingItem" data-id="desc" data-value="clicks"><i data-feather="arrow-down" width="15" height="15"></i></span>
                                    </span>
                                </th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row"> 

        @foreach($data as $key) 
   {{$key->first_name}}
      <div class="col-md-3 grid-margin stretch-card">
         <div class="card">
            <div class="card-body">
                <div class="row">
                        
                    <div class="col-md-12">
                        <img class="img-responsive w-100" width="260" height="140"
                        src="{{(isset($key->thumb) && !empty($key->thumb))?Storage::disk('core_ftp')->url('/media/vehicles/thumbnail/'.$key->user_id.'/'.$key->thumb):Storage::disk('core_ftp')->url('/media/vehicles/thumbnail/default.jpg')}}" alt="Vehicle Thumbnail">
                        <a class="card-title text-primary " target="_blank" href="https://www.autocoincars.com/buy-with-bitcoin/{{$key->vehicle_slug}}"><span data-toggle="tooltip" data-placement="bottom" title="{{$key->title}}">{{Str::limit($key->title, 50, '...')}}</span>   </a>   
                        <div class="d-block mt-2">
                            <h6 class="text-danger  d-inline">£ {{$key->price}}</h6>
                        </div>
                            <!-- <h6 >Clicks: {{-- }}</h6>
                            <h6>Impressions: {{-- }}</h6> -->
                            @if(isset($permissions) && isset($permissions['vehicleDetail']) && $permissions['vehicleDetail']==1)
                    <a href="{{route('vehicleDetail',$key->id)}}" class="btn btn-primary ">Detail</a>
                    @endif
                    <!-- <a href="{{route('customers',$key->id.'-'.$key->thumb)}}" class="btn btn-primary ">Set Image</a> -->
                    <!-- <button type="button" class="btn btn-primary" onclick='image("{{$key->id}}","{{$key->thumb}}")' data-thumb="{{$key->thumb}}" data-toggle="modal" data-target="#uploadImage">Set Image</button> -->
                    </div>
                </div>
            </div>
         </div>
      </div>
     @endforeach
   </div>

    <span>Page No. <b>{{$data->currentPage()}}</b></span>
    <span>Total <b>{{$data->total()}}</b> entries</span>
    <span class="float-right">{{$data->links()}}<span>


<!-- model start here -->

<!-- Button trigger modal -->

<!-- Modal -->
<div class="modal fade" id="uploadImage_change" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Set Image</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       
<div class="row">
    <label>Upload Image</label>
    <input type="input" class="form-control" name="image_id" id="image_id" value="">
    <input type="input" class="form-control" name="uploadThumb" id="uploadThumb" value="">
    <input type="file" class="form-control" name="uploadImage" id="uploadImage" value="">
</div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

<!-- model end here -->


<script type="text/javascript">
   $(document).ready(function() {
    $.ajax({
         dataType: "json",
         url: "/administrator/get-makes",
         type: 'get',
         success: function(data){
               if(data){
                  $.each(data, function() {
                     // makes (makes name)
                     $("#make").append($("<option />").val(this.id).text(this.name));
                  });
                  // selected options
                // makes (makes name)
                $("#make").val("{{(Request::get('make') != null)?Request::get('make'):''}}");
               }               
         }
      });
      @if(Request::get('make') != null)
      $.ajax({
         dataType: "json",
         url: "/administrator/get-model/{{Request::get('make')}}",
         type: 'get',
         success: function(data){
               if(data){
                  $.each(data, function() {
                     // makes (makes name)
                     $("#model").append($("<option />").val(this.id).text(this.name));
                  });
                  // selected options
                // makes (makes name)
                $("#model").val("{{(Request::get('model') != null)?Request::get('model'):''}}");
               }               
         }
      });
      @endif
      $('#make').change(function(){
            let title;
            make_id = $('#make').val();
            $.ajax({
                dataType: "json",
                url: "/administrator/get-model/"+make_id,
                type: 'get',
                beforeSend: function(xhr){
                    $("#model").empty().append($("<option />").val('').text('Select Model'));
                    $("#model-msg").css("display", 'block');
                    $("#model").css("display", 'none');
                },
                success: function(data){
                    if(data){
                        console.log(data);
                        $.each(data, function() {
                            $("#model").append($("<option />").val(this.id).text(this.name));
                        });
                    }
                    $("#model-msg").css("display", 'none');
                    // $("#model").val("{{(Request::get('model') != null)?Request::get('model'):''}}");
                    $("#model").css("display", 'block');
                }
            });
        });
    //   console.log("Ready");
      $(document).on("click", "#filter" , function() {
         var dealer = $('#dealer').val();
         var order = $('#order').val();
         var sort = $('#sort').val();
         var model = $('#model').val();
         var make = $('#make').val();
         var status = $('#status').val();
         var page = $('#page').val();
         window.location = '/administrator/vehicle-list?sort='+sort+'&dealer='+dealer+'&order='+order+'&model='+model+'&make='+make+'&status='+status+'&page='+page;
      });

      $(document).on("click", ".sortingItem" , function() {
         var order = $(this).data('id');
         var sort = $(this).data('value');
         var model = $('#model').val();
         var make = $('#make').val();
         var status = $('#status').val();
         var page = $('#page').val();
         window.location = '/administrator/vehicle-list?sort='+sort+'&order='+order+'&model='+model+'&make='+make+'&status='+status+'&page='+page;
      });

      $(document).on("click", ".type" , function() {
         $(".type").css('background-color','#727CF5');
         $('#type').val($(this).data('value'));
         $(this).css('background-color','#2f3689');
      });
	});

// pass data to modal
function image(id,thumb){
    var id = $("#image_id").val(id);
    var image = $("#uploadThumb").val(thumb);
    var uploadImage = $("#uploadImage").val(thumb);

}



</script>
@stop