@extends('administrative.layouts.main')
@section('title', 'Password Update Logs')
@section('content')
  <x-breadcrumb />

  <div class="flex justify-between items-center mt-5">
    <div>
      <h4 class="text-2xl font-semibold">Password Update Logs</h4>
    </div>
    <x-button link="true" url="{{ request()->fullUrlWithQuery(['download' => '']) }}" variant="red"
      size="sm">Download</x-button>
  </div>

  <div class="mt-6 rounded-lg bg-white p-4 shadow-[0_0_10px_0_rgba(183,192,206,0.2)]">
    <table id="datatables" class="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Customer Name</th>
          <th>Username</th>
          <th>Phone</th>
          <th>Email</th>
          <th>Password Last Updated At</th>
          <th>Password Last Updated By</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
@endsection
@section('pageScripts')
  <script>
    $(document).ready(function() {
      let url = new URL('{{ route('administrative.passwordChangeLogData') }}');

      $('#datatables').DataTable({
        layout: {
          topEnd: {
            search: {
              placeholder: 'Search...'
            }
          }
        },
        lengthMenu: [10, 25, 50, 100, {
          label: 'All',
          value: -1
        }],
        pageLength: 50,
        language: {
          search: ""
        },
        scrollX: true,
        processing: true,
        serverSide: true,
        ajax: '{{ route('administrative.passwordChangeLogData') }}',
        columns: [{
            data: 'DT_RowIndex',
            name: 'DT_RowIndex',
            orderable: true,
            searchable: false
          },
          {
            data: 'customer_name',
            name: 'customer_name'
          },
          {
            data: 'username',
            name: 'username'
          },
          {
            data: 'phone_number',
            name: 'phone_number'
          },
          {
            data: 'email',
            name: 'email'
          },
          {
            data: 'password_updated_at',
            name: 'password_updated_at'
          },
          {
            data: 'password_updated_by',
            name: 'password_updated_by'
          },
        ],
        order: [
          [3, 'desc']
        ]
      });
    });
  </script>
@endsection