@extends('layouts.admin')
@section('title', 'Detail Log Aktivitas')
@section('page-title', 'Detail Log')

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <div class="breadcrumb">
            <a href="{{ route('admin.dashboard') }}">Dashboard</a>
            <span class="breadcrumb-sep">›</span>
            <a href="{{ route('admin.log-aktivitas.index') }}">Log Aktivitas</a>
            <span class="breadcrumb-sep">›</span>
            <span>Detail</span>
        </div>
        <h1 class="page-header-title">Detail Log #{{ $log->id }}</h1>
        <p class="page-header-sub">{{ $log->created_at->translatedFormat('l, d F Y — H:i:s') }}</p>
    </div>
    <div class="page-header-actions">
        <a href="{{ route('admin.log-aktivitas.index') }}" class="btn btn-outline">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                 stroke-width="2" stroke="currentColor" width="14" height="14">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
            </svg>
            Kembali
        </a>
        <form method="POST"
              action="{{ route('admin.log-aktivitas.destroy', $log) }}"
              onsubmit="return confirm('Hapus log ini secara permanen?')">
            @csrf @method('DELETE')
            <button type="submit" class="btn btn-danger">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                     stroke-width="2" stroke="currentColor" width="14" height="14">
                    <path stroke-linecap="round" stroke-linejoin="round"
                          d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                </svg>
                Hapus Log
            </button>
        </form>
    </div>
</div>

<div class="log-detail-grid">

    {{-- Kolom Kiri --}}
    <div style="display:flex;flex-direction:column;gap:14px;">

        {{-- Aktivitas --}}
        <div class="card">
            <div class="card-header">
                <span class="card-title">Aktivitas</span>
                @php
                    $lower = strtolower($log->aktivitas);
                    if (str_contains($lower, 'tambah') || str_contains($lower, 'buat') || str_contains($lower, 'create') || str_contains($lower, 'registr')) {
                        $badgeClass = 'badge-success'; $badgeText = 'Create';
                    } elseif (str_contains($lower, 'hapus') || str_contains($lower, 'delete') || str_contains($lower, 'truncat')) {
                        $badgeClass = 'badge-danger'; $badgeText = 'Delete';
                    } elseif (str_contains($lower, 'verifikasi')) {
                        $badgeClass = 'badge-primary'; $badgeText = 'Verifikasi';
                    } elseif (str_contains($lower, 'revisi') || str_contains($lower, 'batal')) {
                        $badgeClass = 'badge-warning'; $badgeText = 'Revisi';
                    } elseif (str_contains($lower, 'ubah') || str_contains($lower, 'update') || str_contains($lower, 'edit')) {
                        $badgeClass = 'badge-info'; $badgeText = 'Update';
                    } elseif (str_contains($lower, 'login') || str_contains($lower, 'logout') || str_contains($lower, 'masuk') || str_contains($lower, 'keluar')) {
                        $badgeClass = 'badge-gray'; $badgeText = 'Auth';
                    } else {
                        $badgeClass = 'badge-gray'; $badgeText = 'Lainnya';
                    }
                @endphp
                <span class="badge {{ $badgeClass }}">{{ $badgeText }}</span>
            </div>
            <div class="card-body" style="padding:20px 18px;">
                <p style="font-size:1.05rem;font-weight:600;color:var(--gray-800);line-height:1.5;">
                    {{ $log->aktivitas }}
                </p>
            </div>
        </div>

        {{-- Detail Teknis --}}
        <div class="card">
            <div class="card-header">
                <span class="card-title">Detail Teknis</span>
            </div>
            <div class="card-body" style="padding:0;">
                <table style="width:100%;border-collapse:collapse;">
                    @php
                    $rows = [
                        ['Tabel',      $log->tabel      ?? '—', true],
                        ['ID Data',    $log->data_id    ? '#'.$log->data_id : '—', true],
                        ['IP Address', $log->ip_address ?? '—', true],
                        ['Log ID',     '#'.$log->id, true],
                        ['Dibuat',     $log->created_at->translatedFormat('d M Y, H:i:s'), false],
                    ];
                    @endphp
                    @foreach($rows as [$label, $value, $mono])
                    <tr style="border-bottom:1px solid var(--gray-100);">
                        <td style="padding:12px 18px;width:130px;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-400);white-space:nowrap;vertical-align:middle;">
                            {{ $label }}
                        </td>
                        <td style="padding:12px 18px;font-size:.85rem;color:var(--gray-700);vertical-align:middle;@if($mono) font-family:monospace; @endif">
                            {{ $value }}
                        </td>
                    </tr>
                    @endforeach
                </table>
            </div>
        </div>

    </div>

    {{-- Kolom Kanan --}}
    <div style="display:flex;flex-direction:column;gap:14px;">

        {{-- Info Pengguna --}}
        <div class="card">
            <div class="card-header">
                <span class="card-title">Pengguna</span>
            </div>
            <div class="card-body" style="padding:18px;">
                @if($log->user)
                <div style="display:flex;align-items:center;gap:14px;margin-bottom:16px;">
                    <div style="width:48px;height:48px;border-radius:50%;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;flex-shrink:0;border:2px solid rgba(31,110,92,.15);">
                        {{ strtoupper(substr($log->user->name, 0, 1)) }}
                    </div>
                    <div>
                        <div style="font-weight:700;font-size:.95rem;line-height:1.2;">
                            {{ $log->user->name }}
                        </div>
                        <div style="font-size:.78rem;color:var(--gray-400);margin-top:3px;text-transform:capitalize;">
                            {{ $log->user->role }}
                        </div>
                    </div>
                </div>
                <div style="display:flex;flex-direction:column;gap:10px;">
                    <div>
                        <div style="font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-400);margin-bottom:3px;">Username</div>
                        <div style="font-size:.85rem;font-family:monospace;color:var(--gray-700);">{{ $log->user->username }}</div>
                    </div>
                    @if($log->user->email)
                    <div>
                        <div style="font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-400);margin-bottom:3px;">Email</div>
                        <div style="font-size:.85rem;color:var(--gray-700);">{{ $log->user->email }}</div>
                    </div>
                    @endif
                    <div>
                        <div style="font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-400);margin-bottom:3px;">Status Akun</div>
                        <span class="badge badge-{{ $log->user->status }}">
                            {{ ucfirst($log->user->status) }}
                        </span>
                    </div>
                </div>
                @else
                <div style="display:flex;align-items:center;gap:10px;color:var(--gray-400);">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                         stroke-width="2" stroke="currentColor" width="20" height="20">
                        <path stroke-linecap="round" stroke-linejoin="round"
                              d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                    </svg>
                    <span style="font-size:.84rem;">Pengguna tidak ditemukan (mungkin sudah dihapus)</span>
                </div>
                @endif
            </div>
        </div>

        {{-- Timestamp --}}
        <div class="card">
            <div class="card-header"><span class="card-title">Waktu</span></div>
            <div class="card-body" style="padding:16px 18px;">
                <div style="display:flex;flex-direction:column;gap:10px;">
                    <div>
                        <div style="font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-400);margin-bottom:4px;">Tanggal</div>
                        <div style="font-size:.9rem;font-weight:600;">{{ $log->created_at->translatedFormat('l, d F Y') }}</div>
                    </div>
                    <div>
                        <div style="font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-400);margin-bottom:4px;">Jam</div>
                        <div style="font-size:.9rem;font-weight:600;font-family:monospace;">{{ $log->created_at->format('H:i:s') }} WIB</div>
                    </div>
                    <div>
                        <div style="font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-400);margin-bottom:4px;">Relatif</div>
                        <div style="font-size:.84rem;color:var(--gray-500);">{{ $log->created_at->diffForHumans() }}</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Navigasi log --}}
        <div style="display:flex;gap:8px;">
            @if($prev = \App\Models\LogAktivitas::where('id', '<', $log->id)->latest('id')->first())
            <a href="{{ route('admin.log-aktivitas.show', $prev) }}"
               class="btn btn-outline" style="flex:1;justify-content:center;">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                     stroke-width="2" stroke="currentColor" width="14" height="14">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
                </svg>
                Log Sebelumnya
            </a>
            @endif
            @if($next = \App\Models\LogAktivitas::where('id', '>', $log->id)->oldest('id')->first())
            <a href="{{ route('admin.log-aktivitas.show', $next) }}"
               class="btn btn-outline" style="flex:1;justify-content:center;">
                Log Berikutnya
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                     stroke-width="2" stroke="currentColor" width="14" height="14">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                </svg>
            </a>
            @endif
        </div>

    </div>
</div>

@push('styles')
<style>
.log-detail-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 840px) {
    .log-detail-grid { grid-template-columns: 1fr; }
}
</style>
@endpush
@endsection