@extends('layouts.app')

@section('content')
<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">{{ __('common.activity_log') }}</h1>
        </div>
    </div>
</div>

<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card">
            <div class="card-header border-0 pt-6">
                <form method="GET" class="row g-3 align-items-end w-100">
                    <div class="col-md-6">
                        <label class="form-label">{{ __('common.search') }}</label>
                        <input type="text" name="q" value="{{ request('q') }}" class="form-control form-control-solid" placeholder="{{ __('common.activity_search_placeholder') }}">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">{{ __('common.date_from') }}</label>
                        <input type="date" name="date_from" value="{{ request('date_from') }}" class="form-control form-control-solid">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">{{ __('common.date_to') }}</label>
                        <input type="date" name="date_to" value="{{ request('date_to') }}" class="form-control form-control-solid">
                    </div>
                    <div class="col-md-2 d-flex gap-2">
                        <button class="btn btn-primary w-100" type="submit">{{ __('common.filter') }}</button>
                        <a href="{{ route('activity-logs.index') }}" class="btn btn-light w-100">{{ __('common.cancel') }}</a>
                    </div>
                </form>
            </div>
            <div class="card-body pt-0">
                <div class="table-responsive">
                    <table class="table align-middle table-row-dashed fs-6 gy-5">
                        <thead>
                            <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                <th>ID</th>
                                <th>{{ __('common.description') }}</th>
                                <th>{{ __('common.event_type') }}</th>
                                <th>{{ __('common.user') }}</th>
                                <th>{{ __('common.created_at') }}</th>
                                <th class="text-end min-w-80px">{{ __('common.actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="fw-semibold text-gray-600">
                            @forelse($rows as $row)
                                <tr>
                                    <td>{{ $row->id }}</td>
                                    <td>
                                        @php
                                            $descKey = 'common.event_' . strtolower($row->description);
                                        @endphp
                                        {{ Lang::has($descKey) ? __($descKey) : $row->description }}
                                    </td>
                                    <td>
                                        @if($row->subject_type)
                                            @php
                                                $modelBase = strtolower(class_basename($row->subject_type));
                                                $modelKey = 'common.model_' . $modelBase;
                                            @endphp
                                            {{ Lang::has($modelKey) ? __($modelKey) : class_basename($row->subject_type) }}
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>{{ $row->causer?->name ?? ('#'.$row->causer_id) }}</td>
                                    <td>{{ $row->created_at?->format('d.m.Y H:i') }}</td>
                                    <td class="text-end">
                                        <button type="button"
                                                class="btn btn-icon btn-sm btn-light-primary btn-view-activity"
                                                data-bs-toggle="modal"
                                                data-bs-target="#kt_activity_detail_modal"
                                                data-description="{{ $row->description }}"
                                                data-event-type="{{ $row->subject_type ? class_basename($row->subject_type) : 'Sistem' }}"
                                                data-properties="{{ json_encode($row->properties) }}"
                                                title="{{ __('common.view') }}">
                                            <i class="ki-duotone ki-eye fs-4"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center py-10">{{ __('common.no_record_found') }}</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="d-flex flex-stack flex-wrap pt-10">
                    <div class="fs-6 fw-semibold text-gray-700">
                        {{ __('common.showing_entries', ['from' => $rows->firstItem() ?? 0, 'to' => $rows->lastItem() ?? 0, 'total' => $rows->total()]) }}
                    </div>
                    <ul class="pagination mb-0">
                        {{ $rows->links('pagination::bootstrap-5') }}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!--begin::Modal - Activity Detail-->
<div class="modal fade" id="kt_activity_detail_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">Aktivite Detayı</h2>
                <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                    <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
                </div>
            </div>
            <div class="modal-body scroll-y mx-5 my-3">
                <!-- Dynamically populated comparison table -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('common.close') }}</button>
            </div>
        </div>
    </div>
</div>
<!--end::Modal-->
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('kt_activity_detail_modal');
    if (!modal) return;
    
    const modalBody = modal.querySelector('.modal-body');
    
    document.querySelectorAll('.btn-view-activity').forEach(button => {
        button.addEventListener('click', function() {
            const eventType = this.getAttribute('data-event-type');
            const propertiesStr = this.getAttribute('data-properties');
            let properties = {};
            try {
                properties = JSON.parse(propertiesStr);
            } catch(e) {}
            
            let html = '';
            const attributes = properties.attributes || {};
            const old = properties.old || {};
            
            if (Object.keys(attributes).length === 0 && Object.keys(old).length === 0) {
                html = '<div class="text-center text-muted my-5">Değişiklik detayı bulunmamaktadır.</div>';
            } else {
                html = `
                <div class="table-responsive">
                    <table class="table table-striped table-bordered align-middle fs-6 gy-3">
                        <thead>
                            <tr class="fw-bold text-gray-800 bg-light">
                                <th>Alan (Field)</th>
                                <th>Eski Değer (Old)</th>
                                <th>Yeni Değer (New)</th>
                            </tr>
                        </thead>
                        <tbody>
                `;
                
                const keys = Array.from(new Set([...Object.keys(attributes), ...Object.keys(old)]));
                
                keys.forEach(key => {
                    if (['password', 'remember_token', 'updated_at', 'created_at'].includes(key)) return;
                    
                    const oldValue = old[key] !== undefined ? (typeof old[key] === 'object' ? JSON.stringify(old[key]) : old[key]) : '-';
                    const newValue = attributes[key] !== undefined ? (typeof attributes[key] === 'object' ? JSON.stringify(attributes[key]) : attributes[key]) : '-';
                    
                    html += `
                        <tr>
                            <td class="fw-bold text-gray-700">${key}</td>
                            <td class="text-danger font-monospace text-break">${oldValue !== null ? oldValue : 'null'}</td>
                            <td class="text-success font-monospace text-break">${newValue !== null ? newValue : 'null'}</td>
                        </tr>
                    `;
                });
                
                html += `
                        </tbody>
                    </table>
                </div>
                `;
            }
            
            modalBody.innerHTML = html;
            modal.querySelector('.modal-title').textContent = `${eventType} - Değişiklik Detayı`;
        });
    });
});
</script>
@endpush