@extends('layouts.sadmin')
@section('title', 'Audit Logs')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="page-title mb-0">Audit Trail</h1>
        <p class="text-muted mb-0" style="font-size:13px">Permanent, tamper-proof system activity log</p>
    </div>
    <span class="badge bg-danger text-white px-3 py-2" style="font-size:12px">
        <i class="bi bi-shield-lock me-1"></i>Read Only
    </span>
</div>

{{-- Filter Bar --}}
<div class="card mb-3">
    <div class="card-body py-3">
        <form method="GET" action="{{ route('sadmin.audit-logs') }}" class="row g-2 align-items-end">
            <div class="col-12 col-md-3">
                <label class="form-label mb-1" style="font-size:12px;font-weight:600">Company</label>
                <select name="company_id" class="form-select form-select-sm">
                    <option value="">All Companies</option>
                    @foreach($companies as $c)
                        <option value="{{ $c->id }}" {{ request('company_id')==$c->id ? 'selected':'' }}>
                            {{ $c->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label mb-1" style="font-size:12px;font-weight:600">Module</label>
                <select name="module" class="form-select form-select-sm">
                    <option value="">All Modules</option>
                    @foreach(['auth','company','vouchers','ar','ap','inventory','settings','users','audit','super_admin'] as $mod)
                        <option value="{{ $mod }}" {{ request('module')==$mod ? 'selected':'' }}>{{ ucfirst($mod) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label mb-1" style="font-size:12px;font-weight:600">Action</label>
                <select name="action" class="form-select form-select-sm">
                    <option value="">All Actions</option>
                    @foreach(['login','logout','create','update','delete','post','approve','reject','failed_login','password_change','status_change'] as $act)
                        <option value="{{ $act }}" {{ request('action')==$act ? 'selected':'' }}>{{ str_replace('_',' ',ucfirst($act)) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label mb-1" style="font-size:12px;font-weight:600">Date From</label>
                <input type="date" name="date_from" class="form-control form-control-sm" value="{{ request('date_from') }}">
            </div>
            <div class="col-6 col-md-2">
                <label class="form-label mb-1" style="font-size:12px;font-weight:600">Date To</label>
                <input type="date" name="date_to" class="form-control form-control-sm" value="{{ request('date_to') }}">
            </div>
            <div class="col-12 col-md-1">
                <button type="submit" class="btn btn-primary btn-sm w-100">
                    <i class="bi bi-search"></i>
                </button>
            </div>
        </form>
    </div>
</div>

{{-- Logs Table --}}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-journal-text me-2"></i>Activity Logs</span>
        <span class="text-muted" style="font-size:12px">{{ $logs->total() }} records found</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" style="font-size:12.5px">
                <thead>
                    <tr>
                        <th style="width:140px">Time</th>
                        <th>Company</th>
                        <th>User</th>
                        <th>Action</th>
                        <th>Module</th>
                        <th>Record</th>
                        <th>Description</th>
                        <th>IP Address</th>
                        <th style="width:60px">Detail</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($logs as $log)
                    <tr>
                        <td class="text-muted">
                            <div>{{ $log->created_at->format('d M Y') }}</div>
                            <div style="font-size:11px">{{ $log->created_at->format('H:i:s') }}</div>
                        </td>
                        <td>
                            @if($log->company_id)
                                @php $co = $companies->firstWhere('id', $log->company_id); @endphp
                                <span style="font-size:12px">{{ $co?->name ?? 'ID:'.$log->company_id }}</span>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td>
                            <div>
                                @if($log->user_type === 'super_admin')
                                    <span class="badge bg-danger" style="font-size:10px">Super Admin</span>
                                @else
                                    <span class="badge bg-light text-dark" style="font-size:10px">User</span>
                                @endif
                            </div>
                            <div class="text-muted" style="font-size:11px">ID: {{ $log->user_id ?? '—' }}</div>
                        </td>
                        <td>
                            @php
                                $actionColors = [
                                    'login'          => '#d1e7dd|#0a3622',
                                    'logout'         => '#e9ecef|#495057',
                                    'create'         => '#cfe2ff|#084298',
                                    'update'         => '#fff3cd|#664d03',
                                    'delete'         => '#f8d7da|#842029',
                                    'post'           => '#d1e7dd|#0a3622',
                                    'approve'        => '#d1e7dd|#0a3622',
                                    'reject'         => '#fff3cd|#664d03',
                                    'failed_login'   => '#f8d7da|#842029',
                                    'status_change'  => '#fff3cd|#664d03',
                                    'password_change'=> '#cfe2ff|#084298',
                                ];
                                [$bg,$fg] = explode('|', $actionColors[$log->action] ?? '#e9ecef|#495057');
                            @endphp
                            <span class="badge" style="background:{{ $bg }};color:{{ $fg }};font-size:11px">
                                {{ str_replace('_',' ',ucfirst($log->action)) }}
                            </span>
                        </td>
                        <td><span class="text-muted">{{ $log->module }}</span></td>
                        <td>
                            @if($log->record_id)
                                <code style="font-size:11px">#{{ $log->record_id }}</code>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td style="max-width:220px">
                            <span style="font-size:12px" title="{{ $log->description }}">
                                {{ Str::limit($log->description, 60) }}
                            </span>
                        </td>
                        <td><code style="font-size:11px">{{ $log->ip_address }}</code></td>
                        <td>
                            @if($log->old_values || $log->new_values)
                                <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal"
                                        data-bs-target="#detailModal"
                                        data-old="{{ json_encode($log->old_values, JSON_PRETTY_PRINT) }}"
                                        data-new="{{ json_encode($log->new_values, JSON_PRETTY_PRINT) }}"
                                        data-desc="{{ $log->description }}">
                                    <i class="bi bi-eye"></i>
                                </button>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-5">
                            <i class="bi bi-journal display-6 d-block text-muted mb-2"></i>
                            <span class="text-muted">No audit records found for the selected filters</span>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($logs->hasPages())
            <div class="px-4 py-3 border-top">
                {{ $logs->withQueryString()->links() }}
            </div>
        @endif
    </div>
</div>

{{-- Detail Modal --}}
<div class="modal fade" id="detailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" style="font-size:15px">
                    <i class="bi bi-journal-text me-2 text-primary"></i>Change Details
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted mb-3" id="modalDesc" style="font-size:13px"></p>
                <div class="row g-3">
                    <div class="col-6">
                        <div class="form-label" style="font-size:12px;font-weight:700;color:#E74C3C">BEFORE</div>
                        <pre id="oldValPre" class="p-3 rounded" style="background:#fff5f5;font-size:11.5px;max-height:300px;overflow:auto;border:1px solid #f8d7da"></pre>
                    </div>
                    <div class="col-6">
                        <div class="form-label" style="font-size:12px;font-weight:700;color:#27AE60">AFTER</div>
                        <pre id="newValPre" class="p-3 rounded" style="background:#f0fff4;font-size:11.5px;max-height:300px;overflow:auto;border:1px solid #d1e7dd"></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('detailModal').addEventListener('show.bs.modal', function(e) {
    const btn = e.relatedTarget;
    document.getElementById('oldValPre').textContent  = btn.dataset.old || 'null';
    document.getElementById('newValPre').textContent  = btn.dataset.new || 'null';
    document.getElementById('modalDesc').textContent  = btn.dataset.desc || '';
});
</script>
@endpush