@extends('layouts.app')

@section('content')
    <div class="content-wrapper">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Activity Logs</h5>
                    </div>
                    <div class="card-body">
                        {{-- Form Filter --}}
                        <div class="card mb-4">
                            <div class="card-header">Filter Data</div>
                            <div class="card-body">
                                <form action="{{ route('audit-log.index') }}" method="GET">
                                    <div class="row g-3 align-items-end">
                                        <div class="col-md-4">
                                            <label for="auditable_type" class="form-label">Model</label>
                                            <select class="form-control" id="auditable_type" name="auditable_type">
                                                <option value="">-- Semua Model --</option>
                                                @foreach ($auditableTypes as $type)
                                                    <option value="{{ $type }}"
                                                        {{ request('auditable_type') == $type ? 'selected' : '' }}>
                                                        {{ class_basename($type) }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="auditable_id" class="form-label">ID Model</label>
                                            <input type="text" class="form-control" id="auditable_id" name="auditable_id"
                                                placeholder="Cari berdasarkan ID model..."
                                                value="{{ request('auditable_id') }}">
                                        </div>
                                        <div class="col-md-4">
                                            <button type="submit" class="btn btn-primary">Terapkan Filter</button>
                                            <a href="{{ route('audit-log.index') }}"
                                                class="btn btn-secondary">Reset</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        {{-- Tabel Log Audit --}}
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Waktu</th>
                                        <th>Aktor</th>
                                        <th>Model</th>
                                        <th>ID Model</th>
                                        <th>Event</th>
                                        <th width="150px">Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($audits as $audit)
                                        <tr>
                                            <td class="text-center">{{ $audits->firstItem() + $loop->index }}</td>
                                            <td>{{ $audit->created_at->format('d M Y H:i') }}</td>
                                            <td>{{ $audit->user->name ?? 'N/A' }}</td>
                                            <td>{{ class_basename($audit->auditable_type) }}</td>
                                            <td>{{ $audit->auditable_id }}</td>
                                            <td>{{ $audit->event }}</td>
                                            <td>
                                                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                                                    data-bs-target="#dataModal"
                                                    data-old-json="{{ json_encode($audit->old_values) }}"
                                                    data-new-json="{{ json_encode($audit->new_values) }}">
                                                    Lihat Detail
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="d-flex justify-content-center mt-4">
                            {{ $audits->links('vendor.pagination.bootstrap-5') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('modal')
    <!-- Modal untuk menampilkan data lama/baru -->
    <div class="modal fade" id="dataModal" tabindex="-1" aria-labelledby="dataModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="dataModalLabel">Detail Data Perubahan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h6>Data Lama</h6>
                    <pre><code id="old-json-content"></code></pre>
                    <hr>
                    <h6>Data Baru</h6>
                    <pre><code id="new-json-content"></code></pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const dataModal = document.getElementById('dataModal');
            dataModal.addEventListener('show.bs.modal', function(event) {
                const button = event.relatedTarget;
                const oldJsonData = button.getAttribute('data-old-json');
                const newJsonData = button.getAttribute('data-new-json');

                const oldModalBody = dataModal.querySelector('#old-json-content');
                const newModalBody = dataModal.querySelector('#new-json-content');

                try {
                    const parsedOldData = JSON.parse(oldJsonData);
                    oldModalBody.textContent = JSON.stringify(parsedOldData, null, 2);
                } catch (e) {
                    oldModalBody.textContent = oldJsonData;
                }

                try {
                    const parsedNewData = JSON.parse(newJsonData);
                    newModalBody.textContent = JSON.stringify(parsedNewData, null, 2);
                } catch (e) {
                    newModalBody.textContent = newJsonData;
                }
            });
        });
    </script>
@endpush