@extends('layouts.app')

@section('title', 'Access Logs')

@push('styles')
<link rel="stylesheet" href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}">
@endpush

@section('content')
<div class="card mb-3" id="accessLogsTableCard" data-route="system-administration.manage-users.access-logs"
     data-list='{"valueNames":["id","time","user","role","action","details"],"page":10,"pagination":true}'>
  <div class="card-header">
    <div class="row flex-between-center">
      <div class="col-4 col-sm-auto d-flex align-items-center pe-0">
        <h5 class="fs-9 mb-0 text-nowrap py-2 py-xl-0">Access Logs</h5>
      </div>
      <div class="col-8 col-sm-auto text-end ps-2">
        <div id="table-access-logs-replace-element">
          <button class="btn btn-falcon-default btn-sm mx-2" type="button" data-bs-toggle="collapse" data-bs-target="#accessLogsFilters">
            <span class="fas fa-filter" data-fa-transform="shrink-3 down-2"></span>
            <span class="d-none d-sm-inline-block ms-1">Filter</span>
          </button>
          <button class="btn btn-falcon-default btn-sm" type="button" id="exportAccessLogs">
            <span class="fas fa-external-link-alt" data-fa-transform="shrink-3 down-2"></span>
            <span class="d-none d-sm-inline-block ms-1">Export</span>
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="collapse" id="accessLogsFilters">
    <div class="card-body border-top fs-10 p-2">
      <div class="bg-100 rounded-1 border border-200 p-2 px-sm-3 py-2 mx-2">
        <form id="accessLogsFilterForm" class="row gy-1 gx-2 align-items-center w-100">
          <div class="col-auto">
            <label class="form-label form-label-sm mb-1">Date Range</label>
            <div class="d-flex align-items-center">
              <div class="input-group input-group-sm" style="width: 240px;">
                <span class="input-group-text bg-100 text-700"><span class="far fa-calendar"></span></span>
                <input type="text" id="al_date_range" name="date_range" class="form-control" placeholder="YYYY-MM-DD to YYYY-MM-DD" />
              </div>
              <div class="btn-group btn-group-sm ms-1" role="group" aria-label="Quick ranges">
                <button class="btn btn-falcon-default" type="button" data-range="7">Last 7d</button>
                <button class="btn btn-falcon-default" type="button" data-range="30">Last 30d</button>
                <button class="btn btn-falcon-default" type="button" data-range="">Clear</button>
              </div>
            </div>
          </div>
          <div class="col-auto">
            <label class="form-label form-label-sm mb-1">Role</label>
            <select id="al_role_id" name="role_id" class="form-select form-select-sm" style="width: 200px;">
              <option value="">All roles</option>
            </select>
          </div>
          <div class="col-auto">
            <label class="form-label form-label-sm mb-1">User</label>
            <select id="al_user_id" name="user_id" class="form-select form-select-sm" style="width: 200px;">
              <option value="">All users</option>
            </select>
          </div>
          <div class="col-12 d-flex justify-content-end">
            <button class="btn btn-falcon-default btn-sm me-1" type="button" id="al_apply_filters">Apply</button>
            <button class="btn btn-falcon-default btn-sm" type="button" id="al_clear_filters">Clear</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="card-body p-0">
    <div class="table-responsive scrollbar">
      <table class="table table-sm table-striped fs-10 mb-0 overflow-hidden" id="access-logs-table">
        <thead class="bg-200">
          <tr>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="id" style="width: 100px;">ID</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="time" style="width: 200px;">Time</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="user">User</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="role">Role</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="action" style="width: 160px;">Action</th>
            <th class="text-900 sort pe-1 align-middle white-space-nowrap" data-sort="details">Details</th>
          </tr>
        </thead>
        <tbody class="list" id="table-access-logs-body">
          <tr class="btn-reveal-trigger">
            <td class="id align-middle py-2"></td>
            <td class="time align-middle white-space-nowrap py-2"></td>
            <td class="user align-middle py-2"></td>
            <td class="role align-middle py-2"></td>
            <td class="action align-middle py-2"></td>
            <td class="details align-middle py-2"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendors/flatpickr/flatpickr.min.js') }}"></script>
@endpush

@push('scripts')
<script>
(function(){
  const routes = {
    list: '{{ route('system-administration.manage-users.access-logs.list') }}',
    roles: '{{ route('system-administration.manage-users.access-logs.roles') }}',
    users: '{{ route('system-administration.manage-users.access-logs.users') }}'
  };
  let listInstance = null;
  let currentRows = [];
  let fp = null;

  // Utils
  function formatDate(d){
    const pad = n => String(n).padStart(2,'0');
    return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}`;
  }

  function parseRange(){
    if (fp && Array.isArray(fp.selectedDates) && fp.selectedDates.length){
      const [s,e] = fp.selectedDates;
      if (fp.selectedDates.length === 2) return { from: formatDate(s), to: formatDate(e) };
      return { from: formatDate(s), to: formatDate(s) };
    }
    const raw = ($('#al_date_range').val() || '').trim();
    if (!raw) return { from: '', to: '' };
    const parts = raw.split(/\s+to\s+/i);
    if (parts.length === 2) return { from: parts[0], to: parts[1] };
    return { from: raw, to: raw };
  }

  function rowHtml(x){
    const details = x.details ? JSON.stringify(x.details) : '';
    return `<tr>
      <td class="id">${x.id}</td>
      <td class="time">${x.created_at}</td>
      <td class="user">${x.user_name || ('User#'+(x.user_id||''))}</td>
      <td class="role">${x.role_name || ('Role#'+(x.role_id||''))}</td>
      <td class="action"><span class="badge badge-phoenix fs-10 badge-phoenix-info"><span class="badge-label">${x.action}</span></span></td>
      <td class="details"><code class="text-wrap d-inline-block" style="max-width: 520px; white-space: pre-wrap;">${details}</code></td>
    </tr>`;
  }

  function render(rows){
    const html = rows.length ? rows.map(rowHtml).join('') : '<tr><td colspan="6" class="text-center py-3 text-muted">No logs</td></tr>';
    $('#table-access-logs-body').html(html);
    if (!listInstance) {
      const $card = $('#accessLogsTableCard');
      const opts = $card.data('list');
      listInstance = new window.List('accessLogsTableCard', opts || {});
    } else {
      listInstance.reIndex();
    }
  }

  function loadLogs(){
    const r = parseRange();
    const params = { date_from: r.from, date_to: r.to, role_id: $('#al_role_id').val() || '', user_id: $('#al_user_id').val() || '', limit: 200 };
    $('#table-access-logs-body').html('<tr><td colspan="6" class="text-center py-3 text-muted">Loading…</td></tr>');
    standardGetRequest(routes.list, params, function(resp){
      currentRows = Array.isArray(resp.data) ? resp.data : [];
      render(currentRows);
    }, function(){
      $('#table-access-logs-body').html('<tr><td colspan="6" class="text-center py-3 text-muted">Failed to load</td></tr>');
    }, { skipLoading: true });
  }

  function loadRoles(){
    const d = $.Deferred();
    standardGetRequest(routes.roles, {}, function(resp){
      const $sel = $('#al_role_id');
      const opts = (resp.data || []).map(r => `<option value="${r.id}">${r.name}</option>`).join('');
      $sel.append(opts); d.resolve();
    }, function(){ d.resolve(); }, { skipLoading: true });
    return d.promise();
  }
  function loadUsers(){
    const d = $.Deferred();
    standardGetRequest(routes.users, {}, function(resp){
      const $sel = $('#al_user_id');
      const opts = (resp.data || []).map(u => `<option value="${u.id}">${u.name}</option>`).join('');
      $sel.append(opts); d.resolve();
    }, function(){ d.resolve(); }, { skipLoading: true });
    return d.promise();
  }

  function setQuickRange(days){
    if (!days) {
      if (fp) fp.clear(); else $('#al_date_range').val('');
      return;
    }
    const end = new Date();
    const start = new Date();
    start.setDate(end.getDate() - (parseInt(days, 10) - 1));
    if (fp) {
      fp.setDate([start, end], true);
    } else {
      $('#al_date_range').val(`${formatDate(start)} to ${formatDate(end)}`);
    }
  }

  function exportCsv(){
    if (!currentRows.length) return;
    const headers = ['ID','Time','User','Role','Action','Details'];
    const lines = [headers.join(',')].concat(currentRows.map(x => {
      const details = x.details ? JSON.stringify(x.details).replaceAll('"','""') : '';
      return [x.id, x.created_at, (x.user_name||''), (x.role_name||''), x.action, `"${details}"`].join(',');
    }));
    const blob = new Blob([lines.join('\n')], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url; a.download = `access-logs-${new Date().toISOString().slice(0,10)}.csv`;
    document.body.appendChild(a); a.click(); document.body.removeChild(a);
    URL.revokeObjectURL(url);
  }

  // Events
  $(document).on('click', '[data-range]', function(){ setQuickRange($(this).data('range')); });
  $('#al_apply_filters').on('click', loadLogs);
  $('#al_clear_filters').on('click', function(){ if (fp) fp.clear(); else $('#al_date_range').val(''); $('#al_role_id').val(''); $('#al_user_id').val(''); loadLogs(); });
  $('#exportAccessLogs').on('click', exportCsv);

  // Init
  if (window.flatpickr) {
    fp = window.flatpickr('#al_date_range', { mode: 'range', dateFormat: 'Y-m-d', allowInput: true });
  }
  $.when(loadRoles(), loadUsers()).always(function(){ setQuickRange(7); loadLogs(); });
})();
</script>
@endpush