@extends('layouts.public')
@section('title', $api['name'] . ' – ' . config('app.name'))
@section('description', $api['description'])

@push('styles')
    {{-- Swagger UI official CSS --}}
    <link rel="stylesheet" type="text/css" href="{{ l5_swagger_asset('default', 'swagger-ui.css') }}">
    <style>
        /* ── Hero ── */
        .api-hero {
            background: var(--bg-white);
            border-bottom: 1px solid var(--border);
            padding: 36px 0 0;
        }

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--text-muted);
            text-decoration: none;
            margin-bottom: 20px;
            transition: color .15s;
        }

        .back-link:hover {
            color: var(--blue);
        }

        .hero-top {
            display: flex;
            align-items: flex-start;
            gap: 18px;
            margin-bottom: 20px;
        }

        .hero-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .hero-icon i {
            color: #f59e0b !important;
        }

        .hero-meta h1 {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.9rem;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .hero-meta p {
            color: var(--text-muted);
            font-size: 15px;
            max-width: 640px;
            line-height: 1.7;
        }

        .hero-actions {
            display: flex;
            align-items: center;
            gap: 14px;
            margin: 20px 0;
            flex-wrap: wrap;
        }

        .btn-get-key {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--blue);
            color: #fff;
            font-weight: 600;
            font-size: 14px;
            padding: 11px 22px;
            border-radius: 9px;
            text-decoration: none;
            transition: background .15s;
        }

        .btn-get-key:hover {
            background: var(--blue-hover);
        }

        /* Stats bar */
        .stats-bar {
            display: flex;
            gap: 0;
            border-top: 1px solid var(--border);
            margin-top: 8px;
        }

        .stat-item {
            padding: 14px 24px;
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .stat-item:first-child {
            padding-left: 0;
        }

        .stat-label {
            font-size: 11px;
            color: var(--text-light);
            text-transform: uppercase;
            letter-spacing: .06em;
            font-weight: 600;
        }

        .stat-value {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
        }

        .stat-value.mono {
            font-family: 'JetBrains Mono', monospace;
            font-size: 13px;
        }

        .stat-online {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .stat-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--green);
            flex-shrink: 0;
        }

        /* ── Swagger UI wrapper ── */
        .swagger-section {
            padding: 32px 0 56px;
        }

        /* ── Override Swagger UI to match our design system & Prevent Dark Mode Clashes ── */
        .swagger-section #swagger-ui-container {
            font-family: 'Inter', sans-serif !important;
            background: var(--bg);
            color: var(--text);
            color-scheme: light !important;
            /* Force light mode context if supported */
        }

        #swagger-ui-container .swagger-ui {
            color: var(--text) !important;
        }

        .opblock-tag-section {
            background-color: #fff !important;
        }

        #swagger-ui-container .swagger-ui .wrapper {
            padding: 0 !important;
            margin: 0 !important;
            max-width: 100% !important;
            background: transparent !important;
        }

        #swagger-ui-container .swagger-ui .model-box {
            background-color: transparent !important;
        }

        #swagger-ui-container .swagger-ui * {
            color-scheme: light !important;
        }



        /* Prevent Bootstrap or Native dark mode from flipping these to black/white inappropriately */
        #swagger-ui-container .swagger-ui p,
        #swagger-ui-container .swagger-ui h1,
        #swagger-ui-container .swagger-ui h2,
        #swagger-ui-container .swagger-ui h3,
        #swagger-ui-container .swagger-ui h4,
        #swagger-ui-container .swagger-ui h5,
        #swagger-ui-container .swagger-ui li,
        #swagger-ui-container .swagger-ui label,
        #swagger-ui-container .swagger-ui a,
        #swagger-ui-container .swagger-ui span {
            color: inherit;
        }

        /* Hide Swagger's own topbar, info block, and scheme drop down */
        #swagger-ui-container .swagger-ui .topbar,
        #swagger-ui-container .swagger-ui .info,
        #swagger-ui-container .swagger-ui .scheme-container {
            display: none !important;
        }

        /* Filter / search bar */
        #swagger-ui-container .swagger-ui .filter-container {
            background: var(--bg-white);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 10px 14px;
            margin-bottom: 18px;
        }

        #swagger-ui-container .swagger-ui .filter .operation-filter-input {
            background: var(--bg-white) !important;
            border: 1px solid var(--border) !important;
            border-radius: 7px !important;
            font-family: 'Inter', sans-serif !important;
            font-size: 13px !important;
            color: var(--text) !important;
            padding: 7px 12px !important;
            width: 100% !important;
            outline: none !important;
        }

        /* Operations container & Tag */
        #swagger-ui-container .swagger-ui .opblock-tag {
            font-family: 'Space Grotesk', sans-serif !important;
            font-size: 15px !important;
            font-weight: 700 !important;
            color: var(--text) !important;
            border-bottom: 1px solid var(--border) !important;
            padding: 14px 0 !important;
            margin-bottom: 10px !important;
            background: transparent !important;
        }

        #swagger-ui-container .swagger-ui .opblock-tag small {
            font-family: 'Inter', sans-serif !important;
            font-size: 13px !important;
            font-weight: 400 !important;
            color: var(--text-muted) !important;
        }

        /* Expand/Collapse arrow icons in tags */
        #swagger-ui-container .swagger-ui .opblock-tag svg {
            fill: var(--text-muted) !important;
        }

        /* Each endpoint block */
        #swagger-ui-container .swagger-ui .opblock {
            border-radius: 10px !important;
            box-shadow: none !important;
            margin-bottom: 10px !important;
            overflow: hidden !important;
            background: var(--bg-white) !important;
        }

        #swagger-ui-container .swagger-ui .opblock:hover {
            border-color: var(--blue) !important;
            box-shadow: 0 2px 12px rgba(29, 78, 216, 0.06) !important;
        }

        /* Block Headers Background explicitly set to prevent dark mode transparency blackouts */
        #swagger-ui-container .swagger-ui .opblock .opblock-summary {
            background: transparent !important;
        }

        /* GET */
        #swagger-ui-container .swagger-ui .opblock.opblock-get {
            margin-top: 24px;
            background: var(--blue-light) !important;
            /* border-left: 3px solid var(--blue) !important;
                                border-color: #bfdbfe !important; */
        }

        #swagger-ui-container .swagger-ui .opblock.opblock-get .opblock-summary-method {
            background: var(--blue) !important;
            color: #fff !important;
        }

        /* POST */
        #swagger-ui-container .swagger-ui .opblock.opblock-post {
            background: var(--green-bg) !important;
            border-left: 3px solid var(--green) !important;
            border-color: #bbf7d0 !important;
        }

        #swagger-ui-container .swagger-ui .opblock.opblock-post .opblock-summary-method {
            background: var(--green) !important;
            color: #fff !important;
        }

        /* PUT / PATCH */
        #swagger-ui-container .swagger-ui .opblock.opblock-put,
        #swagger-ui-container .swagger-ui .opblock.opblock-patch {
            background: var(--amber-bg) !important;
            border-left: 3px solid var(--amber) !important;
            border-color: #fde68a !important;
        }

        #swagger-ui-container .swagger-ui .opblock.opblock-put .opblock-summary-method,
        #swagger-ui-container .swagger-ui .opblock.opblock-patch .opblock-summary-method {
            background: var(--amber) !important;
            color: #fff !important;
        }

        /* DELETE */
        #swagger-ui-container .swagger-ui .opblock.opblock-delete {
            background: var(--red-bg) !important;
            border-left: 3px solid var(--red) !important;
            border-color: #fecaca !important;
        }

        #swagger-ui-container .swagger-ui .opblock.opblock-delete .opblock-summary-method {
            background: var(--red) !important;
            color: #fff !important;
        }

        /* Method badge */
        #swagger-ui-container .swagger-ui .opblock-summary-method {
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            border-radius: 5px !important;
            padding: 4px 9px !important;
            min-width: 70px !important;
            text-align: center !important;
        }

        /* Path */
        #swagger-ui-container .swagger-ui .opblock-summary-path a span {
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 13.5px !important;
            color: var(--text) !important;
        }

        /* Summary description */
        #swagger-ui-container .swagger-ui .opblock-summary-description {
            font-family: 'Inter', sans-serif !important;
            font-size: 13px !important;
            color: var(--text-muted) !important;
        }

        /* Expanded body */
        #swagger-ui-container .swagger-ui .opblock-body {
            background: var(--bg-white) !important;
            border-top: 1px solid var(--border) !important;
        }

        #swagger-ui-container .swagger-ui .opblock-section-header {
            background: var(--bg) !important;
            border-bottom: 1px solid var(--border) !important;
        }

        #swagger-ui-container .swagger-ui .opblock-section-header h4 {
            color: var(--text) !important;
        }

        /* Titles inside endpoints */
        #swagger-ui-container .swagger-ui h4.opblock-title span {
            color: var(--text) !important;
        }

        /* Parameters table */
        #swagger-ui-container .swagger-ui table thead tr th {
            font-family: 'Inter', sans-serif !important;
            font-size: 12px !important;
            font-weight: 600 !important;
            color: var(--text-muted) !important;
            text-transform: uppercase !important;
            letter-spacing: .05em !important;
            border-bottom: 1px solid var(--border) !important;
            padding: 8px 12px !important;
            background: var(--bg) !important;
        }

        #swagger-ui-container .swagger-ui table tbody tr td {
            font-family: 'Inter', sans-serif !important;
            font-size: 13px !important;
            padding: 10px 12px !important;
            border-bottom: 1px solid var(--border) !important;
            color: var(--text) !important;
            background: var(--bg-white) !important;
        }

        /* Parameter name */
        #swagger-ui-container .swagger-ui .parameter__name {
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            color: var(--text) !important;
        }

        #swagger-ui-container .swagger-ui .parameter__type {
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 12px !important;
            color: var(--text-muted) !important;
        }

        #swagger-ui-container .swagger-ui .parameter__in {
            font-size: 12px !important;
            color: var(--text-light) !important;
        }

        /* Input fields */
        #swagger-ui-container .swagger-ui input[type=text],
        #swagger-ui-container .swagger-ui textarea,
        #swagger-ui-container .swagger-ui select {
            font-family: 'Inter', sans-serif !important;
            font-size: 13px !important;
            border: 1px solid var(--border) !important;
            border-radius: 6px !important;
            padding: 8px 12px !important;
            background: var(--bg-white) !important;
            color: var(--text) !important;
            outline: none !important;
            transition: all .15s !important;
            box-shadow: none !important;
        }

        #swagger-ui-container .swagger-ui input[type=text]:focus,
        #swagger-ui-container .swagger-ui textarea:focus {
            border-color: var(--blue) !important;
            box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1) !important;
        }

        /* Checkboxes */
        #swagger-ui-container .swagger-ui input[type=checkbox] {
            accent-color: var(--blue) !important;
            width: 16px !important;
            height: 16px !important;
        }

        /* Execute / Try it buttons */
        #swagger-ui-container .swagger-ui .btn.execute {
            font-family: 'Inter', sans-serif !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            background: var(--blue) !important;
            color: #fff !important;
            border: none !important;
            border-radius: 7px !important;
            padding: 10px 20px !important;
            transition: background .15s !important;
            box-shadow: 0 2px 4px rgba(29, 78, 216, 0.2) !important;
        }

        #swagger-ui-container .swagger-ui .btn.execute:hover {
            background: var(--blue-hover) !important;
            box-shadow: 0 4px 6px rgba(29, 78, 216, 0.3) !important;
        }

        #swagger-ui-container .swagger-ui .btn.btn-clear {
            font-family: 'Inter', sans-serif !important;
            font-weight: 600 !important;
            color: var(--text-muted) !important;
            background: var(--bg) !important;
            border: 1px solid var(--border) !important;
        }

        #swagger-ui-container .swagger-ui .btn.btn-clear:hover {
            color: var(--text) !important;
            background: var(--border) !important;
        }

        #swagger-ui-container .swagger-ui .btn.try-out__btn {
            font-family: 'Inter', sans-serif !important;
            font-size: 12px !important;
            border-radius: 6px !important;
            background: var(--bg-white) !important;
            border: 1px solid var(--border-mid) !important;
            color: var(--text-muted) !important;
            transition: all .15s !important;
            padding: 5px 12px !important;
        }

        #swagger-ui-container .swagger-ui .btn.try-out__btn:hover {
            border-color: var(--blue) !important;
            color: var(--blue) !important;
        }

        #swagger-ui-container .swagger-ui .btn.try-out__btn.cancel {
            border-color: var(--red) !important;
            color: var(--red) !important;
        }

        /* Authorize button */
        #swagger-ui-container .swagger-ui .btn.authorize {
            font-family: 'Inter', sans-serif !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            background: var(--bg-white) !important;
            border: 1.5px solid var(--blue) !important;
            color: var(--blue) !important;
            border-radius: 7px !important;
            padding: 7px 16px !important;
            transition: all .15s !important;
        }

        #swagger-ui-container .swagger-ui .btn.authorize:hover {
            background: var(--blue) !important;
            color: #fff !important;
        }

        #swagger-ui-container .swagger-ui .btn.authorize svg {
            fill: var(--blue) !important;
        }

        #swagger-ui-container .swagger-ui .btn.authorize:hover svg {
            fill: #fff !important;
        }

        #swagger-ui-container .swagger-ui .authorization__btn.unlocked svg {
            fill: var(--text-muted) !important;
        }

        #swagger-ui-container .swagger-ui .authorization__btn.locked svg {
            fill: var(--blue) !important;
        }

        /* Responses table inner padding */
        #swagger-ui-container .swagger-ui .responses-wrapper {
            padding: 10px !important;
        }

        /* Response code chips */
        #swagger-ui-container .swagger-ui .response-col_status {
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 13px !important;
            font-weight: 700 !important;
            color: var(--text) !important;
        }

        #swagger-ui-container .swagger-ui .response-col_links i,
        #swagger-ui-container .swagger-ui .response-col_description p {
            color: var(--text) !important;
        }

        /* Response Code Snippets & CURL (Black backgrounds) */
        #swagger-ui-container .swagger-ui .highlight-code pre,
        #swagger-ui-container .swagger-ui .microlight,
        #swagger-ui-container .swagger-ui .curl-command {
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 12.5px !important;
            background: #0f172a !important;
            /* Strict dark navy */
            color: #e2e8f0 !important;
            /* Strict light gray text */
            border-radius: 8px !important;
            padding: 16px 18px !important;
            line-height: 1.7 !important;
            white-space: pre-wrap !important;
        }

        #swagger-ui-container .swagger-ui .highlight-code pre *,
        #swagger-ui-container .swagger-ui .microlight *,
        #swagger-ui-container .swagger-ui .curl-command * {
            color: #e2e8f0 !important;
            /* Ensure internal tokens are readable */
        }

        /* Code Samples Tabs */
        #swagger-ui-container .swagger-ui .tab {
            background: var(--bg) !important;
            border-radius: 6px !important;
            padding: 2px !important;
            display: inline-flex !important;
            margin-bottom: 10px !important;
        }

        #swagger-ui-container .swagger-ui .tab li {
            font-family: 'Inter', sans-serif !important;
            font-size: 12px !important;
            font-weight: 500 !important;
            padding: 6px 12px !important;
            border-radius: 5px !important;
            color: #000 !important;
            cursor: pointer !important;
        }

        #swagger-ui-container .swagger-ui .tab li button {
            color: #000 !important;
        }

        #swagger-ui-container .swagger-ui .tab li.active {
            background: var(--blue-hover) !important;
            color: var(--text-white) !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        }

        .swagger-ui .tab li:first-of-type:after {
            display: none !important;
        }

        #swagger-ui-container .swagger-ui .tab li.active button {
            color: var(--text-white) !important;
        }

        /* Copy curl btn */
        #swagger-ui-container .swagger-ui .curl-command .copy-to-clipboard,
        #swagger-ui-container .swagger-ui .copy-to-clipboard {
            background: var(--blue) !important;
            color: #fff !important;
            border-radius: 5px !important;
            border: none !important;
        }

        /* Download btn */
        #swagger-ui-container .swagger-ui .download-contents {
            background: var(--bg) !important;
            color: var(--text) !important;
            border: 1px solid var(--border) !important;
            border-radius: 5px !important;
        }

        /* Servers dropdown */
        #swagger-ui-container .swagger-ui .servers-title,
        #swagger-ui-container .swagger-ui .servers>label {
            font-family: 'Inter', sans-serif !important;
            font-size: 13px !important;
            color: var(--text-muted) !important;
        }

        /* Models section */
        #swagger-ui-container .swagger-ui section.models {
            border: 1px solid var(--border) !important;
            border-radius: 10px !important;
            background: var(--bg-white) !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
            overflow: hidden !important;
        }

        .models {
            margin-top: 0 !important;
        }

        #swagger-ui-container .swagger-ui section.models.is-open {
            padding: 0 !important;
            margin-bottom: 30px !important;
        }

        #swagger-ui-container .swagger-ui section.models h4 {
            font-family: 'Space Grotesk', sans-serif !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            padding: 14px 18px !important;
            background: var(--bg) !important;
            border-bottom: 1px solid var(--border) !important;
            color: var(--text) !important;
            margin: 0 !important;
            cursor: pointer !important;
        }

        #swagger-ui-container .swagger-ui section.models h4:hover {
            background: var(--border) !important;
        }

        #swagger-ui-container .swagger-ui section.models h4 svg {
            fill: var(--text) !important;
        }

        #swagger-ui-container .swagger-ui .model-container {
            margin: 16px !important;
            background: var(--bg) !important;
            border-radius: 8px !important;
            padding: 16px !important;
            border: 1px solid var(--border) !important;
        }

        #swagger-ui-container .swagger-ui .model-title {
            color: var(--text) !important;
            font-family: 'JetBrains Mono', monospace !important;
            font-weight: 600 !important;
        }

        #swagger-ui-container .swagger-ui .prop-name {
            color: var(--blue) !important;
            font-family: 'JetBrains Mono', monospace !important;
        }

        #swagger-ui-container .swagger-ui .prop-type,
        #swagger-ui-container .swagger-ui .prop-format {
            color: var(--text-light) !important;
            font-family: 'JetBrains Mono', monospace !important;
        }

        #swagger-ui-container .swagger-ui .prop {
            color: var(--text) !important;
        }

        /* Dialogs / Auth Modal */
        #swagger-ui-container .swagger-ui .dialog-ux .modal-ux {
            background: var(--bg-white) !important;
            border: 1px solid var(--border) !important;
            border-radius: 12px !important;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
        }

        #swagger-ui-container .swagger-ui .dialog-ux .modal-ux-header {
            border-bottom: 1px solid var(--border) !important;
            padding: 16px 20px !important;
        }

        #swagger-ui-container .swagger-ui .dialog-ux .modal-ux-header h3 {
            color: var(--text) !important;
            font-family: 'Space Grotesk', sans-serif !important;
            font-weight: 700 !important;
        }

        #swagger-ui-container .swagger-ui .dialog-ux .modal-ux-content {
            padding: 20px !important;
            color: var(--text) !important;
        }

        #swagger-ui-container .swagger-ui .dialog-ux .modal-ux-content p {
            color: var(--text-muted) !important;
        }

        #swagger-ui-container .swagger-ui .dialog-ux .modal-ux-content input {
            background: var(--bg) !important;
            color: var(--text) !important;
        }

        #swagger-ui-container .swagger-ui .auth-btn-wrapper .btn-done,
        #swagger-ui-container .swagger-ui .auth-btn-wrapper .btn-authorize {
            background: var(--blue) !important;
            color: #fff !important;
            border: none !important;
        }


        /* ── Auth banner shown when user is logged in ── */
        .auth-bar {
            background: #eff6ff;
            border: 1px solid #bfdbfe;
            border-radius: 10px;
            padding: 14px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
            font-size: 13.5px;
            color: var(--blue);
        }

        .auth-bar svg {
            flex-shrink: 0;
        }

        .auth-bar strong {
            font-weight: 700;
        }

        .auth-bar code {
            font-family: 'JetBrains Mono', monospace;
            background: #dbeafe;
            padding: 2px 7px;
            border-radius: 4px;
            font-size: 12px;
        }

        .swagger-ui {
            background-color: #fff !important;
        }

        @media (max-width: 768px) {
            .stats-bar {
                flex-wrap: wrap;
            }
        }

        .col_header {
            color: var(--text) !important;
        }
    </style>
@endpush

@section('content')
    {{-- ── HERO ── --}}
    <div class="api-hero">
        <div class="container">
            <a href="{{ route('public.apis') }}" class="back-link">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="15 18 9 12 15 6" />
                </svg>
                Back to catalog
            </a>
            <div class="hero-top">
                <div class="hero-icon" style="background:#fef3c7;">
                    @if($api->icon)
                        {!! $api->icon !!}
                    @else
                        <i class='bx bx-code-alt'></i>
                    @endif
                </div>
                <div class="hero-meta">
                    <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
                        <h1>{{ $api['name'] }}</h1>
                    </div>
                    <p>{{ $api['description'] }}</p>
                </div>
            </div>
            @auth
                @if(!auth()->user()->apiKeyGenerated())
                    <div class="hero-actions">
                        <a href="{{ route('apikeys') }}" class="btn-get-key">
                            <i class='bx bx-key'></i>
                            Get API Key
                        </a>
                    </div>
                @endif
            @endauth
            @guest
                <div class="hero-actions">
                    <a href="{{ route('apikeys') }}" class="btn-get-key">
                        <i class='bx bx-key'></i>
                        Get API Key
                    </a>
                </div>
            @endguest

            <div class="stats-bar">
                <div class="stat-item">
                    <span class="stat-label">Uptime</span>
                    <span class="stat-value">100%</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Version</span>
                    <span class="stat-value">{{ $api->version }}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Category</span>
                    <span class="stat-value">{{ $api?->category?->name }}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Base URL</span>
                    <span class="stat-value mono">{{ $api->base_url }}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Status</span>
                    <span class="stat-value stat-online"><span class="stat-dot"></span>
                        @if($api->status == \App\Models\Product::ACTIVE)
                            Active
                        @else
                            Inactive
                        @endif
                    </span>
                </div>
            </div>
        </div>
    </div>

    {{-- ── SWAGGER UI ── --}}
    <div class="swagger-section">
        <div class="container">
            {{-- Swagger UI mount point --}}
            <div id="swagger-ui-container"></div>
        </div>
    </div>
@endsection

@push('scripts')
    {{-- Swagger UI JS bundle --}}
    <script src="{{ l5_swagger_asset('default', 'swagger-ui-bundle.js') }}"></script>
    <script src="{{ l5_swagger_asset('default', 'swagger-ui-standalone-preset.js') }}"></script>

    <script>
        window.onload = function () {

            const ui = SwaggerUIBundle({
                url: "{{ route('l5-swagger.default.docs', ['jsonFile' => 'api-docs.json'], false) }}",
                dom_id: '#swagger-ui-container',
                defaultModelsExpandDepth: -1,
                defaultModelExpandDepth: -1,
                deepLinking: true,
                presets: [
                    SwaggerUIBundle.presets.apis,
                    SwaggerUIStandalonePreset
                ],
                plugins: [
                    SwaggerUIBundle.plugins.DownloadUrl
                ],
                layout: "StandaloneLayout",
                tagsSorter: 'alpha',
                operationsSorter: 'alpha',
                docExpansion: 'list',
                filter: false,
                persistAuthorization: true,
                requestInterceptor: function (request) {
                    request.headers['X-CSRF-TOKEN'] = '{{ csrf_token() }}';
                    return request;
                },
                responseInterceptor: function (response) {
                    if (!response.url || !response.url.includes('api-docs.json')) {
                        return response;
                    }

                    try {
                        const currentSlug = @json($api->slug);

                        let specText = response.text || response.data;
                        if (typeof specText !== 'string') {
                            specText = JSON.stringify(specText);
                        }

                        const spec = JSON.parse(specText);

                        if (spec && spec.paths) {
                            const httpMethods = ['get', 'post', 'put', 'patch', 'delete', 'options', 'head'];
                            const filteredPaths = {};

                            for (const path in spec.paths) {
                                const pathItem = spec.paths[path];
                                const filteredMethods = {};
                                let hasMatch = false;

                                for (const method in pathItem) {
                                    if (!httpMethods.includes(method)) {
                                        filteredMethods[method] = pathItem[method];
                                        continue;
                                    }

                                    const operation = pathItem[method];
                                    if (operation['x-product-slug'] === currentSlug) {
                                        filteredMethods[method] = operation;
                                        hasMatch = true;
                                    }
                                }

                                if (hasMatch) {
                                    filteredPaths[path] = filteredMethods;
                                }
                            }

                            spec.paths = filteredPaths;

                            // ── ADD THIS BLOCK ──────────────────────────────────
                            // Remove tag group headers
                            spec.tags = [];

                            // Strip tags from each operation to prevent auto-grouping
                            for (const path in filteredPaths) {
                                for (const method in filteredPaths[path]) {
                                    if (filteredPaths[path][method].tags) {
                                        delete filteredPaths[path][method].tags;
                                    }
                                }
                            }
                            // ────────────────────────────────────────────────────
                        }

                        // Overwrite BOTH so SwaggerUI picks it up regardless of which it reads
                        const filtered = JSON.stringify(spec);
                        response.data = filtered;
                        response.text = filtered;
                        response.obj = spec;

                    } catch (e) {
                        console.error('Failed to filter Swagger spec', e);
                    }

                    return response;
                },
                        @auth
                                    @php $userKey = auth()->user()->apiKeys()->latest()->first(); @endphp
                            @if($userKey)
                                onComplete: function () {
                                    ui.preauthorizeApiKey('ApiKeyAuth', 'Bearer {{ $userKey->apikey }}');

                                    // ── Hide default tag header ──
                                    document.querySelectorAll('#swagger-ui-container .opblock-tag').forEach(function (el) {
                                        el.style.display = 'none';
                                    });
                                },
                            @else
                                        onComplete: function () {
                                            // ── Hide default tag header ──
                                            document.querySelectorAll('#swagger-ui-container .opblock-tag').forEach(function (el) {
                                                el.style.display = 'none';
                                            });
                                        },
                                    @endif
                        @else
                    onComplete: function () {
                        // ── Hide default tag header ──
                        document.querySelectorAll('#swagger-ui-container .opblock-tag').forEach(function (el) {
                            el.style.display = 'none';
                        });
                    },
                @endauth
                    });
        window.ui = ui;
                    }
    </script>
@endpush