@extends('backendTools.layouts.backend')

@section('title', '工程 LOG')

@section('header')
    <h1 class="h3 mb-0 text-gray-800"><i class="bi bi-code-slash me-2"></i>工程 LOG</h1>
@endsection

@push('styles')
<style>
    .copy-cell {
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;
    }
    .copy-cell:hover {
        background-color: #e9ecef;
    }
</style>
@endpush

@php
    if (!function_exists('pretty_json_for_blade')) {
        function pretty_json_for_blade($data) {
            if (is_string($data)) {
                $decoded = json_decode($data, true);
                if (json_last_error() === JSON_ERROR_NONE) {
                    return json_encode($decoded, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);
                }
            }
            // Fallback for non-string data or invalid JSON string
            return json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);
        }
    }
@endphp

@section('content')
    <div class="container-fluid p-3">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <form method="GET" id="mainForm" class="d-flex align-items-center">
                    <input type="hidden" name="token" value="{{ request('token') ?? '' }}">
                    <label for="dateInput" class="me-2 mb-0">日期:</label>
                    <input type="date" id="dateInput" name="date" class="form-control form-control-sm me-2"
                        value="{{ $date }}" style="max-width: 200px;">
                    <button type="submit" id="form_submit" class="btn btn-primary btn-sm"><i class="bi bi-search me-1"></i>查詢</button>
                </form>
            </div>
            <div class="card-body">
                @if ($logs->isEmpty())
                    <div class="alert alert-info" role="alert">
                        <i class="bi bi-info-circle-fill me-2"></i>沒有任何紀錄
                    </div>
                @else
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped table-hover align-middle">
                            <thead class="table-dark">
                                <tr class="text-center">
                                    <th>#</th>
                                    <th>cagent UID (執行)</th>
                                    <th>動作類型</th>
                                    <th>內容</th>
                                    <th>IP 位址</th>
                                    <th>目標 UID</th>
                                    <th>目標類型</th>
                                    <th>時間</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($logs as $log)
                                    <tr class="text-center">
                                        <td>{{ $log->uid }}</td>
                                        <td>{{ $log->cagent_uid }}</td>
                                        <td class="copy-cell" title="點擊以複製">
                                            @php
                                                $actionClasses = [
                                                    'create' => 'bg-success',
                                                    'update' => 'bg-warning text-dark',
                                                    'delete' => 'bg-danger',
                                                    'login' => 'bg-info',
                                                    'logout' => 'bg-secondary',
                                                ];
                                                $class = $actionClasses[strtolower($log->action_type)] ?? 'bg-primary';
                                            @endphp
                                            <span class="badge {{ $class }}">{{ $log->action_type }}</span>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-outline-primary"
                                                data-bs-toggle="modal"
                                                data-bs-target="#logModal-{{ $loop->index }}">
                                                <i class="bi bi-eye me-1"></i> 查看
                                            </button>
                                        </td>
                                        <td>{{ $log->ip_address }}</td>
                                        <td>{{ $log->target_uid }}</td>
                                        <td>{{ $log->target_type }}</td>
                                        <td>{{ $log->created_at }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>

    @foreach ($logs as $log)
        <!-- Log Data Modal -->
        <div class="modal fade" id="logModal-{{ $loop->index }}" tabindex="-1"
            aria-labelledby="logModalLabel-{{ $loop->index }}" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="logModalLabel-{{ $loop->index }}"><i class="bi bi-file-earmark-code me-2"></i>Log 內容</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h5>original_data</h5>
                                <pre class="bg-dark text-white p-3 rounded"><code>{{ pretty_json_for_blade($log->original_data) }}</code></pre>
                            </div>
                            <div class="col-md-6">
                                <h5>updated_data</h5>
                                <pre class="bg-dark text-white p-3 rounded"><code>{{ pretty_json_for_blade($log->updated_data) }}</code></pre>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">關閉</button>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Submit form on date change
            document.getElementById('dateInput').addEventListener('change', function() {
                document.getElementById('mainForm').submit();
            });

            // Copy action type to clipboard
            const copyCells = document.querySelectorAll('.copy-cell');
            copyCells.forEach(cell => {
                cell.addEventListener('click', function(e) {
                    const textToCopy = e.currentTarget.innerText.trim();
                    if (textToCopy) {
                        navigator.clipboard.writeText(textToCopy).then(() => {
                            const originalContent = e.currentTarget.innerHTML;
                            e.currentTarget.innerHTML = '<span class="badge bg-info">已複製!</span>';
                            setTimeout(() => {
                                e.currentTarget.innerHTML = originalContent;
                            }, 1000);
                        }).catch(err => {
                            console.error('無法複製內容: ', err);
                        });
                    }
                });
            });
        });
    </script>
@endpush