@extends('admin.default')
@section('title', 'Admin | Dealer Active Stock')
@section('content')
   <nav class="page-breadcrumb">
      <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
         <li class="breadcrumb-item"><a href="{{url('administrator/dealers/status/active')}}">Dealers</a></li>
         <li class="breadcrumb-item active" aria-current="page">Active Stock</li>
      </ol>
   </nav>

   <div class="row mb-2">
    <div class="col-md-6">
        <div class="btn-group mr-2" role="group" aria-label="Scroll to Sections">
            <a class="btn btn-dark border-right" href="{{route('dealerShowForm', [request()->user_id])}}" >Profile</a>
            <a class="btn btn-dark border active" href="{{route('dealerActiveStock', ['user_id' => Request::get('user_id')])}}" >Active Stock</a>
            <!-- <a class="btn btn-dark border-right" href="{{route('dealerWallet', Request::get('user_id'))}}">Wallet</a> -->
            <!-- <a class="btn btn-dark border-right" href="{{route('dealerReports', Request::get('user_id'))}}">Reports</a> -->
            <a class="btn btn-dark border-right" href="{{route('dealerLegalDocuments', Request::get('user_id'))}}">Legal Documents</a>
            <a class="btn btn-dark border-right" href="{{route('dealerFaqs', request()->user_id)}}">Faqs/Blogs</a>
            <!-- <a class="btn btn-dark" href="{{route('dealerTransaction', Request::get('user_id'))}}">Transaction</a> -->
        </div>
    </div>
    <div class="col-md-6">
        <!-- <div class="btn-group mr-2 float-right" role="group" aria-label="">
            <a class="btn btn-primary border-right text-white" data-toggle="modal" data-target=".bd-example-modal-lg"></a>
        </div> -->
    </div>
</div>
<div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="d-inline">
                        <a class="btn btn-sm btn-primary text-white" href="{{route('dealerActiveStock', ['user_id' => Request::get('user_id')])}}">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="user_id" id="user_id" value="{{Request::get('user_id')}}">
                        <input type="hidden" name="page" id="page" value="1">
                        <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>
                    <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)

      <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"
                        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}}">{{$key->title}}</a>
                        <div class="d-block mt-2">
                            <h6 class="text-danger  d-inline">£ {{$key->price}}</h6>
                        </div>
                            <h6 >Clicks: {{$key->clicks}}</h6>
                            <h6>Impressions: {{$key->impressions}}</h6>
                    </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>


    <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 order = $('#order').val();
         var sort = $('#sort').val();
         var model = $('#model').val();
         var make = $('#make').val();
         var page = $('#page').val();
         var user_id = $('#user_id').val();
         window.location = '/administrator/dealer-active-stock?sort='+sort+'&order='+order+'&model='+model+'&make='+make+'&page='+page+'&user_id='+user_id;
      });

      $(document).on("click", ".sortingItem" , function() {
         var order = $(this).data('id');
         var sort = $(this).data('value');
         var model = $('#model').val();
         var make = $('#make').val();
         var page = $('#page').val();
         var user_id = $('#user_id').val();
         window.location = '/administrator/dealer-active-stock?sort='+sort+'&order='+order+'&model='+model+'&make='+make+'&page='+page+'&user_id='+user_id;
      });
	});
</script>
@stop