@extends('Admin.default')
@section('content')
<div class="row page-titles mx-0">
  <div class="col p-md-0">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="{{ route('Dashboard') }}">Dashboard</a></li>
      <li class="breadcrumb-item active"><a href="javascript:void(0)">Location Listing</a></li>
    </ol>
  </div>
</div>

<div class="container-fluid mt-0">
  <div class="row">
    <span class="col-lg-12" id="ErrorLog">
      @if (Session::has('message'))
        {{ Session::get('message') }}
      @endif
    </span>
    <div class="col-lg-12 col-md-12">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col-sm-6">
              <h5 class="card-title">Location</h5>
            </div>
          </div>
          
          <div class="table-responsive"> 
            <table class="table table-bordered table-striped verticle-middle">
              <thead>
                <tr>
                  <th scope="col">Location</th>
                  <th scope="col">Status</th>
                  <th scope="col">Sort Order</th>
                  <th scope="col" colspan="2">Action</th>
                </tr>
              </thead>
              <thead>
                <tr>
                  <th scope="col">
                    <input type="text" class="form-control" id="Location" placeholder="Location">
                  </th>
                  <th scope="col">
                    <select class="form-control" id="Status" onchange="Search();">
                      <option value="All">All</option>
                      <option value="1">Active</option>
                      <option value="0">De-Active</option>
                    </select>
                  </th>
                  <th scope="col">
                    <select class="form-control" id="Sort" onchange="Search();">
                      <option value="ASC">Ascending</option>
                      <option value="DESC">Descending</option>
                    </select>
                  </th>
                  <th scope="col">
                    <button type="button" onclick="Search()" class="btn btn-primary pull-left">Search</button>
                  </th>
                  <th scope="col">
                    <a href="{{ route('AddLocation') }}" class="btn btn-success pull-left">Add New</a>
                  </th>
                </tr>
              </thead>
              <tbody id="Result"></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@stop

@section('javascript')
<script type="text/javascript">
$(document).ready(function() {
    Search();
});

function Search() {
    AllLocation(1);
}

function Pagination(page) {
    AllLocation(page);
}

function AllLocation(page) {
    $("#Result").html('<tr><td colspan="10"><center>Loading..</center></td></tr>');
    var Location = $("#Location").val();
    var Status = $("#Status").val();
    var Sort = $("#Sort").val();
    var no_of_page = 10;
    var _token = "{{ csrf_token() }}";

    $.ajax({
        url: "{{ route('AllLocation') }}",
        type: "POST",
        data: {
            'Location': Location, 
            'Status': Status, 
            'Sort': Sort, 
            'no_of_page': no_of_page, 
            'page': page, 
            '_token': _token
        },
        headers: {
            'X-CSRF-TOKEN': _token
        },
        success: function(response) {
            $("#Result").html(response);
        },
        error: function(xhr) {
            console.error('Error:', xhr.responseText);
            $("#Result").html('<tr><td colspan="10"><center>Error loading data.</center></td></tr>');
        }
    });
}
</script>
@stop