@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')

    @include('layouts.navbars.auth.topnav', ['title' => 'Log Aktivitas NCR'])

    @php
        $actionLabels = [
            'C' => 'Create',
            'U' => 'Update',
            'D' => 'Delete',
            'E' => 'Error',
        ];

        $actionBadgeClasses = [
            'C' => 'ncrlog-badge-create',
            'U' => 'ncrlog-badge-update',
            'D' => 'ncrlog-badge-delete',
            'E' => 'ncrlog-badge-error',
        ];

        $statusLabels = [
            '1' => 'Sukses',
            '0' => 'Gagal',
        ];

        $auditTypeLabels = [
            'internal' => 'Internal',
            'external' => 'External',
        ];

        $activeFilters = [];

        if ($frdate || $todate) {
            $activeFilters[] = 'Periode ' . ($frdate ? date('d-m-Y', strtotime($frdate)) : 'Awal') . ' s/d ' . ($todate ? date('d-m-Y', strtotime($todate)) : 'Akhir');
        }

        if ($audit_type) {
            $activeFilters[] = 'Jenis: ' . ($auditTypeLabels[$audit_type] ?? ucfirst($audit_type));
        }

        if ($tipe) {
            $activeFilters[] = 'Aksi: ' . ($actionLabels[$tipe] ?? $tipe);
        }

        if ($status !== '') {
            $activeFilters[] = 'Status: ' . ($statusLabels[$status] ?? $status);
        }

        if ($username) {
            $activeFilters[] = 'User: ' . $username;
        }

        $filterSummary = count($activeFilters) ? implode(' | ', $activeFilters) : 'Semua aktivitas NCR';
        $pageStart = $list->firstItem() ?? 0;
        $pageEnd = $list->lastItem() ?? 0;
    @endphp

    <style>
        .ncrlog-page {
            color: #344767;
        }

        .ncrlog-toolbar {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 18px;
        }

        .ncrlog-title {
            margin: 0;
            font-size: 15px;
            font-weight: 800;
            letter-spacing: .02em;
            text-transform: uppercase;
        }

        .ncrlog-subtitle {
            color: #67748e;
            font-size: 12px;
            line-height: 1.5;
            margin-top: 4px;
        }

        .ncrlog-filter-panel {
            border: 1px solid #e9ecef;
            border-radius: 8px;
            background: #f8fafc;
            padding: 16px;
            margin-bottom: 16px;
        }

        .ncrlog-filter-panel label {
            color: #525f7f;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .02em;
            text-transform: uppercase;
            margin-bottom: 6px;
        }

        .ncrlog-filter-panel .form-control {
            min-height: 40px;
            font-size: 13px;
        }

        .ncrlog-filter-actions {
            display: flex;
            align-items: end;
            gap: 8px;
            height: 100%;
        }

        .ncrlog-summary {
            display: grid;
            grid-template-columns: 170px 190px 1fr;
            gap: 10px;
            margin-bottom: 16px;
        }

        .ncrlog-summary-item {
            border: 1px solid #e9ecef;
            border-radius: 8px;
            background: #fff;
            padding: 12px 14px;
            min-width: 0;
        }

        .ncrlog-summary-label {
            color: #8392ab;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 5px;
        }

        .ncrlog-summary-value {
            color: #344767;
            font-size: 14px;
            font-weight: 800;
            line-height: 1.35;
            word-break: break-word;
        }

        .ncrlog-table {
            border-collapse: separate;
            border-spacing: 0;
            min-width: 1120px;
            width: 100%;
            font-size: 12px;
        }

        .ncrlog-table thead th {
            background: #0f766e;
            color: #fff;
            border: 0;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .03em;
            padding: 11px 10px;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .ncrlog-table tbody td {
            border-color: #eef1f4;
            color: #344767;
            padding: 12px 10px;
            vertical-align: top;
        }

        .ncrlog-table tbody tr:hover {
            background: #f8fafc;
        }

        .ncrlog-time {
            display: block;
            font-weight: 800;
            white-space: nowrap;
        }

        .ncrlog-date {
            color: #8392ab;
            display: block;
            font-size: 11px;
            margin-top: 2px;
            white-space: nowrap;
        }

        .ncrlog-user {
            color: #344767;
            display: block;
            font-weight: 800;
            line-height: 1.35;
        }

        .ncrlog-user-name,
        .ncrlog-muted {
            color: #8392ab;
            display: block;
            font-size: 11px;
            line-height: 1.4;
            margin-top: 2px;
        }

        .ncrlog-description {
            line-height: 1.5;
            max-width: 520px;
            white-space: normal;
            word-break: break-word;
        }

        .ncrlog-badge {
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 800;
            line-height: 1;
            min-height: 24px;
            padding: 6px 10px;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .ncrlog-badge-create {
            background: #dcfce7;
            color: #166534;
        }

        .ncrlog-badge-update {
            background: #dbeafe;
            color: #1d4ed8;
        }

        .ncrlog-badge-delete {
            background: #fee2e2;
            color: #b91c1c;
        }

        .ncrlog-badge-error {
            background: #f3f4f6;
            color: #4b5563;
        }

        .ncrlog-badge-success {
            background: #e0f2fe;
            color: #0369a1;
        }

        .ncrlog-badge-failed {
            background: #fff7ed;
            color: #c2410c;
        }

        .ncrlog-detail-btn {
            border-radius: 6px;
            font-size: 11px;
            font-weight: 700;
            padding: 6px 10px;
        }

        .ncrlog-empty {
            border: 1px dashed #cbd5e1;
            border-radius: 8px;
            color: #67748e;
            padding: 24px;
            text-align: center;
        }

        .ncrlog-modal-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }

        .ncrlog-meta-chip {
            background: #f8fafc;
            border: 1px solid #e9ecef;
            border-radius: 999px;
            color: #525f7f;
            font-size: 11px;
            font-weight: 700;
            padding: 5px 10px;
        }

        .ncrlog-change-table {
            min-width: 900px;
            table-layout: fixed;
            width: 100%;
            font-size: 12px;
        }

        .ncrlog-change-table th {
            background: #f8fafc;
            color: #525f7f;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .02em;
            text-transform: uppercase;
        }

        .ncrlog-change-table th,
        .ncrlog-change-table td {
            border-color: #eef1f4;
            padding: 10px;
            vertical-align: top;
            white-space: pre-wrap;
            word-break: break-word;
        }

        @media (max-width: 991.98px) {
            .ncrlog-toolbar {
                align-items: stretch;
                flex-direction: column;
            }

            .ncrlog-filter-actions {
                align-items: stretch;
                flex-wrap: wrap;
                margin-top: 4px;
            }

            .ncrlog-filter-actions .btn {
                flex: 1 1 auto;
            }

            .ncrlog-summary {
                grid-template-columns: 1fr;
            }
        }
    </style>

    <div class="container-fluid py-4 ncrlog-page">
        <div class="card shadow-lg border-0">
            <div class="card-body">
                <div class="ncrlog-toolbar">
                    <div>
                        <h5 class="ncrlog-title">Log Aktivitas NCR</h5>
                        <div class="ncrlog-subtitle">
                            Pantau aktivitas create, update, delete, dan error untuk NCR internal maupun external.
                        </div>
                    </div>

                    <a href="{{ request()->fullUrl() }}" class="btn btn-outline-primary btn-sm mb-0">
                        <i class="fas fa-sync-alt me-1"></i> Refresh
                    </a>
                </div>

                <form method="GET" action="{{ url($url_menu) }}" class="ncrlog-filter-panel">
                    <div class="row g-3">
                        <div class="col-md-6 col-lg-2">
                            <label for="frdate">Dari Tanggal</label>
                            <input type="date" id="frdate" name="frdate" class="form-control" value="{{ $frdate }}">
                        </div>

                        <div class="col-md-6 col-lg-2">
                            <label for="todate">Sampai Tanggal</label>
                            <input type="date" id="todate" name="todate" class="form-control" value="{{ $todate }}">
                        </div>

                        <div class="col-md-6 col-lg-2">
                            <label for="audit_type">Jenis NCR</label>
                            <select id="audit_type" name="audit_type" class="form-control">
                                <option value="">Semua</option>
                                <option value="internal" {{ $audit_type === 'internal' ? 'selected' : '' }}>Internal</option>
                                <option value="external" {{ $audit_type === 'external' ? 'selected' : '' }}>External</option>
                            </select>
                        </div>

                        <div class="col-md-6 col-lg-2">
                            <label for="tipe">Aksi</label>
                            <select id="tipe" name="tipe" class="form-control">
                                <option value="">Semua</option>
                                <option value="C" {{ $tipe === 'C' ? 'selected' : '' }}>Create</option>
                                <option value="U" {{ $tipe === 'U' ? 'selected' : '' }}>Update</option>
                                <option value="D" {{ $tipe === 'D' ? 'selected' : '' }}>Delete</option>
                                <option value="E" {{ $tipe === 'E' ? 'selected' : '' }}>Error</option>
                            </select>
                        </div>

                        <div class="col-md-6 col-lg-2">
                            <label for="status">Status Log</label>
                            <select id="status" name="status" class="form-control">
                                <option value="">Semua</option>
                                <option value="1" {{ $status === '1' ? 'selected' : '' }}>Sukses</option>
                                <option value="0" {{ $status === '0' ? 'selected' : '' }}>Gagal</option>
                            </select>
                        </div>

                        <div class="col-md-6 col-lg-2">
                            <label for="username">User</label>
                            <input type="text" id="username" name="username" class="form-control"
                                value="{{ $username }}" placeholder="Username/nama">
                        </div>

                        <div class="col-12">
                            <div class="ncrlog-filter-actions">
                                <button type="submit" class="btn btn-primary btn-sm mb-0">
                                    <i class="fas fa-search me-1"></i> Tampilkan
                                </button>

                                <a href="{{ url($url_menu) }}" class="btn btn-outline-secondary btn-sm mb-0">
                                    <i class="fas fa-undo me-1"></i> Reset
                                </a>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="ncrlog-summary">
                    <div class="ncrlog-summary-item">
                        <div class="ncrlog-summary-label">Total Log</div>
                        <div class="ncrlog-summary-value">{{ number_format($list->total(), 0, ',', '.') }}</div>
                    </div>

                    <div class="ncrlog-summary-item">
                        <div class="ncrlog-summary-label">Halaman Ini</div>
                        <div class="ncrlog-summary-value">
                            {{ $list->count() ? $pageStart . ' - ' . $pageEnd : '0' }} dari {{ number_format($list->total(), 0, ',', '.') }}
                        </div>
                    </div>

                    <div class="ncrlog-summary-item">
                        <div class="ncrlog-summary-label">Filter Aktif</div>
                        <div class="ncrlog-summary-value">{{ $filterSummary }}</div>
                    </div>
                </div>

                @if ($list->count())
                    <div class="table-responsive">
                        <table class="table table-bordered align-items-center ncrlog-table mb-0">
                            <thead>
                                <tr>
                                    <th style="width: 132px;">Waktu</th>
                                    <th style="width: 150px;">User</th>
                                    <th style="width: 120px;">Jenis/Menu</th>
                                    <th style="width: 96px;" class="text-center">Aksi</th>
                                    <th>Deskripsi</th>
                                    <th style="width: 92px;" class="text-center">Detail</th>
                                    <th style="width: 96px;" class="text-center">Status</th>
                                    <th style="width: 120px;">IP</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($list as $row)
                                    @php
                                        $rowAuditType = $row->dmenu === 'ncrint' ? 'Internal' : 'External';
                                        $rowActionClass = $actionBadgeClasses[$row->tipe] ?? 'ncrlog-badge-error';
                                        $rowStatusClass = (string) $row->status === '1' ? 'ncrlog-badge-success' : 'ncrlog-badge-failed';
                                    @endphp

                                    <tr>
                                        <td>
                                            <span class="ncrlog-time">{{ date('H:i:s', strtotime($row->created_at)) }}</span>
                                            <span class="ncrlog-date">{{ date('d-m-Y', strtotime($row->created_at)) }}</span>
                                        </td>
                                        <td>
                                            <span class="ncrlog-user">{{ $row->username ?: '-' }}</span>
                                            <span class="ncrlog-user-name">{{ $row->fullname ?: '-' }}</span>
                                        </td>
                                        <td>
                                            <span class="ncrlog-user">{{ $rowAuditType }}</span>
                                            <span class="ncrlog-muted">{{ $row->menu_name ?: $row->dmenu }}</span>
                                        </td>
                                        <td class="text-center">
                                            <span class="ncrlog-badge {{ $rowActionClass }}">
                                                {{ $row->action_name ?: ($actionLabels[$row->tipe] ?? $row->tipe) }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="ncrlog-description">{{ $row->description ?: '-' }}</div>
                                        </td>
                                        <td class="text-center">
                                            @if ($row->has_changes)
                                                <button type="button" class="btn btn-outline-primary btn-sm mb-0 ncrlog-detail-btn"
                                                    data-bs-toggle="modal" data-bs-target="#auditDetail{{ $row->id }}">
                                                    <i class="fas fa-eye me-1"></i> Detail
                                                </button>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            <span class="ncrlog-badge {{ $rowStatusClass }}">{{ $row->status_name }}</span>
                                        </td>
                                        <td>{{ $row->ipaddress ?: '-' }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    @foreach ($list as $row)
                        @if ($row->has_changes)
                            @php
                                $modalAuditType = $row->dmenu === 'ncrint' ? 'Internal' : 'External';
                                $modalActionClass = $actionBadgeClasses[$row->tipe] ?? 'ncrlog-badge-error';
                                $modalStatusClass = (string) $row->status === '1' ? 'ncrlog-badge-success' : 'ncrlog-badge-failed';
                            @endphp

                            <div class="modal fade" id="auditDetail{{ $row->id }}" tabindex="-1"
                                aria-labelledby="auditDetailLabel{{ $row->id }}" aria-hidden="true">
                                <div class="modal-dialog modal-xl modal-dialog-scrollable">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <div class="pe-3">
                                                <h6 class="modal-title mb-1" id="auditDetailLabel{{ $row->id }}">
                                                    Detail Perubahan NCR {{ $modalAuditType }}
                                                </h6>
                                                <div class="text-sm text-muted">{{ $row->description ?: '-' }}</div>
                                                <div class="ncrlog-modal-meta">
                                                    <span class="ncrlog-meta-chip">
                                                        <i class="fas fa-clock me-1"></i>
                                                        {{ date('d-m-Y H:i:s', strtotime($row->created_at)) }}
                                                    </span>
                                                    <span class="ncrlog-meta-chip">
                                                        <i class="fas fa-user me-1"></i>
                                                        {{ $row->username ?: '-' }}
                                                    </span>
                                                    <span class="ncrlog-meta-chip">
                                                        <i class="fas fa-hashtag me-1"></i>
                                                        ID: {{ $row->reference_id ?: '-' }}
                                                    </span>
                                                    <span class="ncrlog-badge {{ $modalActionClass }}">
                                                        {{ $row->action_name ?: ($actionLabels[$row->tipe] ?? $row->tipe) }}
                                                    </span>
                                                    <span class="ncrlog-badge {{ $modalStatusClass }}">
                                                        {{ $row->status_name }}
                                                    </span>
                                                </div>
                                            </div>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <div class="table-responsive">
                                                <table class="table table-bordered ncrlog-change-table mb-0">
                                                    <thead>
                                                        <tr>
                                                            <th style="width: 130px;">Bagian</th>
                                                            <th style="width: 170px;">Field</th>
                                                            <th>Before</th>
                                                            <th>After</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @forelse ($row->change_rows as $change)
                                                            @php
                                                                $changeSection = $change['section'] ?? '-';
                                                                $changeField = $change['field'] ?? '-';
                                                                $changeBefore = array_key_exists('before', $change) ? $change['before'] : '-';
                                                                $changeAfter = array_key_exists('after', $change) ? $change['after'] : '-';
                                                            @endphp
                                                            <tr>
                                                                <td>{{ $changeSection === '' ? '-' : $changeSection }}</td>
                                                                <td>{{ $changeField === '' ? '-' : $changeField }}</td>
                                                                <td>{{ $changeBefore === '' ? '-' : $changeBefore }}</td>
                                                                <td>{{ $changeAfter === '' ? '-' : $changeAfter }}</td>
                                                            </tr>
                                                        @empty
                                                            <tr>
                                                                <td colspan="4" class="text-center text-muted">Tidak ada detail perubahan</td>
                                                            </tr>
                                                        @endforelse
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endforeach

                    <div class="mt-3">
                        {{ $list->links() }}
                    </div>
                @else
                    <div class="ncrlog-empty">
                        <div class="font-weight-bold mb-1">Data log tidak ditemukan</div>
                        <div class="text-sm">Coba ubah filter periode, jenis NCR, aksi, status, atau user.</div>
                    </div>
                @endif
            </div>
        </div>
    </div>

@endsection