@extends('layouts/contentNavbarLayout')
@section('title', 'API Provider Logs')

@section('vendor-style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

    <style>
        .api-log-card {
            border: 0;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 0.375rem 1rem rgba(161, 172, 184, 0.18);
        }

        .api-log-card .card-header {
            background: linear-gradient(135deg, #086070, #086070);
            border-bottom: 0;
            padding: 1rem 1.25rem;
        }

        .api-log-card .card-header h5 {
            margin: 0;
            color: #fff;
            font-weight: 700;
        }

        .api-log-card .card-header p {
            margin: 0.25rem 0 0;
            color: rgba(255, 255, 255, 0.8);
            font-size: 10px;
        }

        .table-wrap {
            padding: 1rem;
        }

        #api-provider-log-table {
            width: 100% !important;
        }

        #api-provider-log-table thead th {
            white-space: nowrap;
            vertical-align: middle;
            font-size: 10px;
            font-weight: 700;
        }

        #api-provider-log-table tbody td {
            vertical-align: middle;
            font-size: 10px;
        }

        .log-link {
            text-decoration: none;
            font-weight: 600;
            cursor: pointer;
        }

        .log-link:hover {
            text-decoration: underline;
        }

        .created-at-cell {
            white-space: nowrap;
        }

        .badge-soft-primary {
            background: rgba(105, 108, 255, 0.12);
            color: #086070;
            padding: 0.45rem 0.7rem;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 600;
        }

        .badge-soft-success {
            background: rgba(40, 199, 111, 0.12);
            color: #28c76f;
            padding: 0.45rem 0.7rem;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 600;
        }

        .badge-soft-danger {
            background: rgba(234, 84, 85, 0.12);
            color: #086070;
            padding: 0.45rem 0.7rem;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 600;
        }

        .badge-soft-dark {
            background: rgba(67, 89, 113, 0.12);
            color: #435971;
            padding: 0.45rem 0.7rem;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 600;
        }

        .log-modal .modal-dialog {
            max-width: 1000px;
        }

        .log-modal .modal-content {
            border: 0;
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.18);
        }

        .log-modal .modal-header {
            background: linear-gradient(135deg, #7367f0, #7367f0);
            color: #fff;
            border-bottom: 0;
            padding: 1rem 1.25rem;
        }

        .log-modal .modal-title {
            font-weight: 700;
            font-size: 1.2rem;
            line-height: 1.2;
        }

        .log-modal-subtitle {
            color: rgba(255, 255, 255, 0.82);
            font-size: 10px;
            margin-top: 0.2rem;
        }

        .log-modal-toolbar {
            background: #f8f9fa;
            border-bottom: 1px solid #ebeef0;
            padding: 0.75rem 1rem;
        }

        .log-modal-body {
            background: #f8fafc;
            padding: 1rem;
            max-height: 70vh;
            overflow: auto;
        }

        .log-pre-box {
            margin: 0;
            padding: 1rem;
            min-height: 260px;
            border-radius: 14px;
            background: #0f172a;
            color: #e2e8f0;
            font-size: 13px;
            line-height: 1.7;
            white-space: pre-wrap;
            word-break: break-word;
            overflow-wrap: anywhere;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        }

        .dataTables_wrapper .dataTables_filter input {
            border: 1px solid #d9dee3;
            border-radius: 8px;
            padding: 0.35rem 0.6rem;
            margin-left: 0.5rem;
        }

        .dataTables_wrapper .dataTables_length select {
            border: 1px solid #d9dee3;
            border-radius: 8px;
            padding: 0.25rem 1.8rem 0.25rem 0.5rem;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border-radius: 8px !important;
        }

        .filter-card {
            border: 1px solid #ebeef0;
            border-radius: 12px;
            padding: 1rem;
            background: #fff;
            margin-bottom: 1rem;
        }

        .filter-card .form-label {
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 0.35rem;
        }

        .filter-card .form-control {
            border: 1px solid #d9dee3;
            border-radius: 8px;
        }

        @media (max-width: 768px) {
            .table-wrap {
                padding: 0.75rem;
            }

            .log-modal .modal-dialog {
                max-width: 95%;
                margin: 1rem auto;
            }

            .log-modal .modal-title {
                font-size: 1rem;
            }

            .log-pre-box {
                font-size: 12px;
                min-height: 220px;
            }
        }
    </style>
@endsection

@section('content')
    <div class="card api-log-card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <h5>API Provider Logs</h5>
                </div>
            </div>
        </div>

        <div class="card-body table-wrap">
            <form method="GET" action="{{ route('admin.provider_api_logs') }}" class="filter-card">
                <div class="row g-3 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label">Start Date</label>
                        <input type="date" name="start_date" class="form-control"
                            value="{{ request('start_date', now()->format('Y-m-d')) }}">
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">End Date</label>
                        <input type="date" name="end_date" class="form-control"
                            value="{{ request('end_date', now()->format('Y-m-d')) }}">
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Txn ID</label>
                        <input type="text" name="txn_id" class="form-control"
                            value="{{ request('txn_id') }}" placeholder="Enter Txn ID">
                    </div>

                    <div class="col-md-3 d-flex gap-2">
                        <button type="submit" class="btn btn-primary w-100">Filter</button>
                        <a href="{{ route('admin.provider_api_logs') }}" class="btn btn-outline-secondary w-100">Reset</a>
                    </div>
                </div>
            </form>

            <div class="table-responsive">
                <table id="api-provider-log-table" class="table table-bordered table-striped table-hover align-middle text-center">
                    <thead class="table-primary">
                        <tr>
                            <th>ID</th>
                            <th>Txn ID</th>
                            <th>Provider</th>
                            <th>Event</th>
                            <th>URL</th>
                            <th>Request</th>
                            <th>Response Code</th>
                            <th>Response</th>
                            <th>Created At</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($logs as $log)
                            <tr>
                                <td>{{ $log->id }}</td>

                                <td>
                                    <span class="badge-soft-dark">{{ $log->txn_id ?: '-' }}</span>
                                </td>

                                <td>
                                    <span class="badge-soft-primary">{{ $log->provider_name ?: '-' }}</span>
                                </td>

                                <td>
                                    <span class="badge-soft-success">{{ $log->event_name ?: '-' }}</span>
                                </td>

                                <td>
                                    @if (!empty($log->url))
                                        <a href="javascript:void(0)"
                                            class="log-link text-primary open-log-modal"
                                            data-title="URL"
                                            data-subtitle="Endpoint URL"
                                            data-content="{{ e($log->url) }}">
                                            View URL
                                        </a>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>

                                <td>
                                    @if (!empty($log->request_body))
                                        <a href="javascript:void(0)"
                                            class="log-link text-success open-log-modal"
                                            data-title="Request Body"
                                            data-subtitle="Formatted request payload"
                                            data-content="{{ e($log->request_body) }}">
                                            View Request
                                        </a>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>

                                <td>
                                    @if (!is_null($log->response_status_code))
                                        @php
                                            $code = (int) $log->response_status_code;
                                            $codeClass =
                                                $code >= 200 && $code < 300
                                                    ? 'badge-soft-success'
                                                    : ($code >= 400
                                                        ? 'badge-soft-danger'
                                                        : 'badge-soft-primary');
                                        @endphp
                                        <span class="{{ $codeClass }}">{{ $code }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>

                                <td>
                                    @if (!empty($log->response_body))
                                        <a href="javascript:void(0)"
                                            class="log-link text-danger open-log-modal"
                                            data-title="Response Body"
                                            data-subtitle="Formatted response payload"
                                            data-content="{{ e($log->response_body) }}">
                                            View Response
                                        </a>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>

                                <td class="created-at-cell">
                                    {{ !empty($log->created_at) ? \Carbon\Carbon::parse($log->created_at)->format('d M Y h:i:s A') : '-' }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center text-danger">No data found</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade log-modal" id="logViewModal" tabindex="-1" aria-labelledby="logViewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title mb-0" id="logViewModalLabel"></h5>
                        <div class="log-modal-subtitle" id="logViewModalSubTitle"></div>
                    </div>
                    <button type="button" class="btn-close btn-close-white shadow-none" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>

                <div class="log-modal-toolbar d-flex justify-content-between align-items-center">
                    <span class="small text-muted">Structured content display</span>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="copyLogContent">Copy</button>
                </div>

                <div class="log-modal-body">
                    <pre id="logModalContent" class="log-pre-box"></pre>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function() {
            $.fn.dataTable.ext.errMode = 'none';

            var rowCount = $('#api-provider-log-table tbody tr').length;
            if (rowCount > 0 && $('#api-provider-log-table tbody td').first().attr('colspan') != 9) {
                $('#api-provider-log-table').DataTable({
                    pageLength: 25,
                    order: [
                        [0, 'desc']
                    ]
                });
            }

            function decodeHtmlEntities(text) {
                const textarea = document.createElement('textarea');
                textarea.innerHTML = text;
                return textarea.value;
            }

            function tryParseJson(content) {
                try {
                    return JSON.stringify(JSON.parse(content), null, 4);
                } catch (e) {
                    return content;
                }
            }

            function normalizeContent(title, content) {
                let decoded = decodeHtmlEntities(content || '').trim();

                if (!decoded) {
                    return '-';
                }

                if (title === 'URL') {
                    return decoded;
                }

                decoded = decoded.replace(/\\\//g, '/');
                return tryParseJson(decoded);
            }

            $(document).on('click', '.open-log-modal', function() {
                let title = $(this).data('title') || '';
                let subtitle = $(this).data('subtitle') || '';
                let content = $(this).attr('data-content') || '';
                let formattedContent = normalizeContent(title, content);

                $('#logViewModalLabel').text(title);
                $('#logViewModalSubTitle').text(subtitle);
                $('#logModalContent').text(formattedContent);
                $('#logViewModal').modal('show');
            });

            $('#copyLogContent').on('click', function() {
                let content = $('#logModalContent').text();

                navigator.clipboard.writeText(content).then(function() {
                    $('#copyLogContent').text('Copied');
                    setTimeout(function() {
                        $('#copyLogContent').text('Copy');
                    }, 1500);
                });
            });
        });
    </script>
@endsection