@extends('admin.layout.master')
@section('content')
@include('admin/countries/country_js')

<style>
    .dataTables_length{
       display: none !important;
   }

</style>

<div class='bg-white rounded'>
  <div class="nav-scroller">
      <nav class="nav justify-content-between">
          <li class="nav-item d-flex align-items-center">
              <a class='nav-link fw-bold text-primary' href="{{url('/home')}}">{{trans('admin.home')}}</a>
              <span class="bi bi-caret-right"></span>
              <span class="mx-2"> {{ trans('admin.UserLoginLog') }} </span>
          </li>


          <li class="mx-auto me-2 d-flex align-items-center gap-2">
              <label> {{ trans('admin.show') }} </label>
              <select class="form-select form-select-sm" id="no_of_entries">
                  <option value="10" selected>10</option>
                  <option value="30">30</option>
                  <option value="50">50</option>
                  <option value="100">100</option>
                  <option value="200">200</option>
                  <option value="300">300</option>
                  <option value="400">400</option>
                  <option value="400">500</option>
                  <option value="-1">{{ trans('admin.all') }}</option>
              </select>
          </li>


          <li class="nav-item me-2">
              <input type="text" class="form-control form-control-sm" id="search_new" placeholder="{{trans('project.search')}}">
          </li>


          <li class="nav-item">
            <a class="nav-link" data-bs-toggle="dropdown">
                <b class="bi-box-arrow-up-right me-2"></b> {{ trans('admin.export') }}
            </a>
            <ul class="dropdown-menu">
                <li>
                    <a class="dropdown-item" onclick="jQuery('.data-table').print()">
                        <i class="bi-printer mx-2"></i>
                        {{__('project.print')}}
                    </a>
                        <a class="dropdown-item" onclick="exportTable('data-table', 'pdf', '{{trans('home slider')}} 2024-10-18 02:31:34')">
                            <i class="bi bi-file-earmark-pdf mx-2"></i>
                            {{__('project.pdf')}}
                        </a>
                    <a class="dropdown-item" onclick="exportTable('data-table', 'csv', '{{trans('home slider')}} 2024-10-18 02:31:34')">
                        <i class="bi bi-file-spreadsheet mx-2"></i>
                        {{__('project.excel_csv')}}
                    </a>
                </li>

      </nav>
  </div>
</div>




<main class="px-0 scroll-y">
  <!-- body content  -->
  <div class="card rounded border-0">
    <div class="card-body pt-0">
      <div class="row">
        <div class="col-lg-12">
          <div class="table-responsive">
            <table class="table w-100 table-sm table-hover mb-0 table-bordered data-table">
              <thead class="bg-light">
                  <tr>
                    <th>{{trans('admin.id')}}</th>
                    {{-- <th>{{trans('admin.Name')}}</th> --}}
                    <th>{{trans('admin.user')}}</th>
                    <th>{{trans('admin.Browser')}}</th>
                    <th>{{trans('admin.OperatingSystem')}}</th>
                    <th>{{trans('admin.device')}}</th>
                    <th>{{trans('admin.deviceModel')}}</th>
                    <th>{{trans('admin.ip')}}</th>
                    <th>{{trans('admin.Country')}}</th>
                    <th>{{trans('admin.city')}}</th>
                    <th>{{trans('admin.state')}}</th>
                    <th>{{trans('admin.postal_code')}}</th>
                    <th>{{trans('admin.continent')}}</th>
                    <th>{{trans('admin.iso_code')}}</th>
                    <th>{{trans('admin.Time')}}</th>

                    {{-- <th>{{trans('admin.Action')}}</th> --}}
                  </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>
      </div>
    </div>
  </div>
</div>
</main>


<style>
    .dataTables_filter {
    display: none;
  }
</style>

@endsection
@section('custom-js')
<script type="text/javascript">
  var table ="";
  $(function () {
    table = $('.data-table').DataTable({
      processing: true,
      serverSide: true,
        ajax: {
            url: "{{ route('user-login-log') }}",
            data: function (d) {
                d.fromDate = $('input[name=fromDate]').val();
                d.toDate = $('input[name=toDate]').val();
            }
        },
      columns: [
          {data: 'id', name: 'id'},
          {data: 'user', name: 'user'},

          {data: 'browser', name: 'browser'},
          {data: 'operating_system', name: 'operating_system'},
          {data: 'device_family', name: 'device_family'},
          {data: 'device_model', name: 'device_model'},
          {data: 'user_ip', name: 'user_ip'},

          {data:'country',name:'country'},
          {data: 'city', name: 'city'},
          {data: 'state', name: 'state'},
          {data: 'postal_code', name: 'postal_code'},
          {data: 'continent', name: 'continent'},
          {data: 'iso_code', name: 'iso_code'},
          {data: 'created_at', name: 'created_at'},

        //   {data: 'action', name: 'action',
        //    orderable: false, searchable: false},
      ],
      "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
    });
  });
  $("body").on('reset','.search-form',function(e){
      $(this)[0].reset();
      table.draw();
  });
  $("#search_new").on("keyup search input paste cut", function() {
     table.search(this.value).draw();
  });
  $('body').on('submit','.search-form',function (e) {
    e.preventDefault();
    if($('input[name=fromDate]').val() == "" && $('input[name=toDate]').val() =="")
    {
        swal("{{trans('admin.empty_fields_are_not_allowed')}}","warn");
        return
    }
    table.draw();
  });

</script>

@endsection