@section('title', __('radio.menu_item_5_sub_5'))

@section('head')
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/siteconfig.css') }}">
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/radioapi.css') }}">
@endsection

@php
    $breadcrumb = [
        ['label' => __('general.header_nav_radio')],
        ['label' => __('radio.menu_item_5_sub_5')],
    ];

    $tokenRow  = $getTokenAuth->first();
    $hasToken  = $tokenRow !== null;
    $tokenMask = $hasToken ? str_repeat('*', 32) : null;

    /* the plain token is never stored: after it is generated the screen can only say when it was made and used */
    $tokenCreated = $hasToken && $tokenRow->created_at ? DateShort($tokenRow->created_at) : null;
    $tokenUsed = $hasToken && $tokenRow->last_used_at ? DateShort($tokenRow->last_used_at) : null;

    $v1EndsAt = '2027-01-01';
    $v1EndsAtLabel = \Carbon\Carbon::parse($v1EndsAt)->format('d/m/Y');

    $limitTotal = max(1, (int) $userLogged->limit_total);
    $limitUsed  = (int) $userLogged->limit_used;
    $limitPct   = min(100, round($limitUsed * 100 / $limitTotal));
    $limitState = $limitPct <= 70 ? 'ok' : ($limitPct <= 94 ? 'warn' : 'crit');

    $endpoint = rtrim(config('app.url'), '/') . '/api/v2/radio/data';

    /* v1 address: the encrypted part is rewritten because a raw slash in it breaks the route */
    $endpointV1 = rtrim(config('app.url'), '/') . '/api/radio/data/' . session('siteID') . '/'
        . str_replace('/', '|brasbar', EncryptBras($siteData->domain . '|' . $streamData->port));

    $sampleToken = __('radio.api_token_placeholder');

    $samples = [
        'curl' => 'cURL',
        'php' => 'PHP',
        'js' => 'JavaScript',
        'python' => 'Python',
    ];

    $code = [];

    $code['curl'] = 'curl -X GET "' . $endpoint . '" \
  -H "Authorization: Bearer ' . $sampleToken . '" \
  -H "Accept: application/json"';

    $code['php'] = '$ch = curl_init(\'' . $endpoint . '\');

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    \'Authorization: Bearer ' . $sampleToken . '\',
    \'Accept: application/json\',
]);

$data = json_decode(curl_exec($ch), true);
curl_close($ch);

echo $data[\'onair\'][\'current_music\'];';

    $code['js'] = 'const res = await fetch(\'' . $endpoint . '\', {
  headers: {
    Authorization: \'Bearer ' . $sampleToken . '\',
    Accept: \'application/json\'
  }
});

const data = await res.json();

console.log(data.onair.current_music);';

    $code['python'] = 'import requests

res = requests.get(\'' . $endpoint . '\', headers={
    \'Authorization\': \'Bearer ' . $sampleToken . '\',
    \'Accept\': \'application/json\',
})

print(res.json()[\'onair\'][\'current_music\'])';

    /* the v1 samples change only the address: the header and the reading stay as they are documented today */
    $codeV1 = [];
    foreach ($code as $key => $sample) {
        $codeV1[$key] = str_replace([$endpoint, '[\'onair\']', '.onair.'], [$endpointV1, '[\'onair_data\']', '.onair_data.'], $sample);
    }

    $sampleResponse = '{
    "status": "success",
    "station": {
        "name": "' . __('radio.api_sample_radio_name') . '",
        "domain": "' . ($siteData->domain ?: 'suaradio.com.br') . '",
        "port": ' . (int) $streamData->port . '
    },
    "plan": {
        "listeners": 1000,
        "bitrate": 128
    },
    "listeners": {
        "current": 25,
        "peak": 200
    },
    "onair": {
        "current_music": "' . __('radio.api_sample_current') . '",
        "next_music": "' . __('radio.api_sample_next') . '",
        "codec": "aac",
        "bitrate": 128
    },
    "limit": {
        "used": 132,
        "total": 5000
    }
}';

    $sampleResponseV1 = '{
    "status": "success",
    "plan": {
        "radio_name": "' . __('radio.api_sample_radio_name') . '",
        "listeners": 1000,
        "bitrate": 128
    },
    "listeners": {
        "current": "25",
        "peak": "200"
    },
    "onair_data": {
        "current_music": "' . __('radio.api_sample_current') . '",
        "next_music": "' . __('radio.api_sample_next') . '",
        "stream_data": {
            "codec": "aac",
            "bitrate": "128"
        }
    }
}';

    $sampleError = '{
    "status": "error",
    "error": {
        "code": "stream_unreachable",
        "message": "The streaming server did not answer."
    }
}';

    $sampleErrorV1 = '{
    "status": "error",
    "data": {
        "error_code": 403,
        "message": "Access denied"
    }
}';

    $authHeaders = [
        ['Authorization', 'Bearer ' . $sampleToken],
        ['Accept', 'application/json'],
    ];

    $responseFields = [
        ['status', __('radio.api_field_status'), __('radio.api_type_text'), 'success | error'],
        ['station.name', __('radio.api_field_radio_name'), __('radio.api_type_text'), 'Rádio Brascast'],
        ['station.domain', __('radio.api_field_station_domain'), __('radio.api_type_text'), 'suaradio.com.br'],
        ['station.port', __('radio.api_field_station_port'), __('radio.api_type_number'), '8000'],
        ['plan.listeners', __('radio.api_field_plan_listeners'), __('radio.api_type_number'), '1000'],
        ['plan.bitrate', __('radio.api_field_plan_bitrate'), __('radio.api_type_number'), '128'],
        ['listeners.current', __('radio.api_field_listeners_current'), __('radio.api_type_number'), '25'],
        ['listeners.peak', __('radio.api_field_listeners_peak'), __('radio.api_type_number'), '200'],
        ['onair.current_music', __('radio.api_field_current_music'), __('radio.api_type_text'), __('radio.api_format_audio_name')],
        ['onair.next_music', __('radio.api_field_next_music'), __('radio.api_type_text'), __('radio.api_format_audio_name')],
        ['onair.codec', __('radio.api_field_codec'), __('radio.api_type_text'), 'aac'],
        ['onair.bitrate', __('radio.api_field_bitrate'), __('radio.api_type_number'), '128'],
        ['limit.used', __('radio.api_field_limit_used'), __('radio.api_type_number'), '132'],
        ['limit.total', __('radio.api_field_limit_total'), __('radio.api_type_number'), '5000'],
    ];

    $responseFieldsV1 = [
        ['status', __('radio.api_field_status'), __('radio.api_type_text'), 'success | error'],
        ['plan.radio_name', __('radio.api_field_radio_name'), __('radio.api_type_text'), 'Rádio Brascast'],
        ['plan.listeners', __('radio.api_field_plan_listeners'), __('radio.api_type_number'), '1000'],
        ['plan.bitrate', __('radio.api_field_plan_bitrate'), __('radio.api_type_number'), '128'],
        ['listeners.current', __('radio.api_field_listeners_current'), __('radio.api_type_number'), '25'],
        ['listeners.peak', __('radio.api_field_listeners_peak'), __('radio.api_type_number'), '200'],
        ['onair_data.current_music', __('radio.api_field_current_music'), __('radio.api_type_text'), __('radio.api_format_audio_name')],
        ['onair_data.next_music', __('radio.api_field_next_music'), __('radio.api_type_text'), __('radio.api_format_audio_name')],
        ['onair_data.stream_data.codec', __('radio.api_field_codec'), __('radio.api_type_text'), 'aac'],
        ['onair_data.stream_data.bitrate', __('radio.api_field_bitrate'), __('radio.api_type_number'), '128'],
    ];

    $errorCodes = [
        ['200', 'ok', __('radio.api_error_200'), __('radio.api_error_200_fix')],
        ['401', 'crit', __('radio.api_error_401'), __('radio.api_error_401_fix')],
        ['403', 'crit', __('radio.api_error_403_v2'), __('radio.api_error_403_v2_fix')],
        ['429', 'warn', __('radio.api_error_429'), __('radio.api_error_429_fix')],
        ['502', 'warn', __('radio.api_error_502'), __('radio.api_error_502_fix')],
    ];

    $errorCodesV1 = [
        ['200', 'ok', __('radio.api_error_200'), __('radio.api_error_200_fix')],
        ['402', 'warn', __('radio.api_error_402'), __('radio.api_error_402_fix')],
        ['403', 'crit', __('radio.api_error_403'), __('radio.api_error_403_fix')],
    ];

    $steps = [
        ['fa-key', __('radio.api_step_1_title'), __('radio.api_step_1_text')],
        ['fa-paper-plane', __('radio.api_step_2_title'), __('radio.api_step_2_text')],
        ['fa-code', __('radio.api_step_3_title'), __('radio.api_step_3_text')],
    ];

    $tabs = [
        ['start', 'fa-rocket', __('radio.api_tab_start'), __('radio.api_tab_start_desc')],
        ['auth', 'fa-key', __('radio.api_tab_auth'), __('radio.api_tab_auth_desc')],
        ['data', 'fa-list', __('radio.api_tab_data'), __('radio.api_tab_data_desc')],
        ['errors', 'fa-circle-xmark', __('radio.api_tab_errors'), __('radio.api_tab_errors_desc')],
        ['v1', 'fa-clock-rotate-left', __('radio.api_tab_v1'), __('radio.api_tab_v1_desc', ['date' => $v1EndsAtLabel])],
        ['faq', 'fa-circle-question', 'FAQ', __('radio.api_tab_faq_desc')],
    ];

    $faq = [
        [__('radio.api_faq_q1'), __('radio.api_faq_a1')],
        [__('radio.api_faq_q2'), __('radio.api_faq_a2')],
        [__('radio.api_faq_q3'), __('radio.api_faq_a3')],
        [__('radio.api_faq_q4'), __('radio.api_faq_a4')],
    ];
@endphp

@include('includes/header-novo')

<main class="app-main">

    @include('includes.breadcrumb')

    @include('includes.flash')

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ __('radio.menu_item_5_sub_5') }}</h1>
            <p class="page-sub">{{ __('radio.api_page_sub') }}</p>
        </div>
    </header>

    <div class="api"
         data-url-token="{{ route('radio.api-integration.c') }}"
         data-has-token="{{ $hasToken ? '1' : '0' }}"
         data-msg-title="{{ __('radio.api_token_update_confirm') }}"
         data-msg-text="{{ __("radio.api_token_update_warning_station") }}"
         data-msg-confirm="{{ __('radio.action_update') }}"
         data-msg-copied="{{ __('general.action_copied') }}"
         data-msg-token-copied="{{ __('radio.api_token_copied') }}"
         data-msg-copy-error="{{ __('general.widgets_copy_error') }}"
         data-msg-error="{{ __('radio.api_token_error') }}">

        <p class="api__alert">
            <i class="fa-solid fa-triangle-exclamation"></i>
            <span>{{ __('radio.api_v1_deprecated', ['date' => $v1EndsAtLabel]) }}</span>
        </p>

        <section class="sec">
            <header class="sec__head">
                <h2 class="sec__title">{{ __('radio.api_token_limits_title') }}</h2>
            </header>

            <div class="sec__body api__top">

                <div class="api__token" data-token-row>
                    <span class="api__label">Auth Token</span>

                    <div class="api__field">
                        <code class="api__value @if(!$hasToken) api__value--empty @endif" data-token>{{ $hasToken ? $tokenMask : __('radio.api_token_none') }}</code>

                        {{-- só o token recém-gerado pode ser copiado: do gravado existe apenas o hash --}}
                        <button type="button" class="api__copy" data-copy data-tip="{{ __('general.action_copy') }}" hidden>
                            <i class="fa-regular fa-copy"></i>
                        </button>

                        <button type="button" class="btn btn--primary api__gen" data-gen>
                            <i class="fa-solid fa-rotate"></i>
                            <span>{{ $hasToken ? __('radio.action_update') : __('general.action_generate') }}</span>
                            @include('includes.spinner')
                        </button>
                    </div>

                    <p class="api__help">{{ __('radio.api_token_help') }}</p>

                    @if($hasToken)
                        <p class="api__help">
                            {{ __('radio.api_token_created', ['date' => $tokenCreated]) }}
                            &middot;
                            {{ $tokenUsed ? __('radio.api_token_last_used', ['date' => $tokenUsed]) : __('radio.api_token_never_used') }}
                        </p>
                    @endif

                    <p class="api__help api__help--note">
                        <i class="fa-solid fa-circle-info"></i>
                        <span>{{ __('radio.api_token_once') }}</span>
                    </p>
                </div>

                <div class="api__limit">
                    <span class="api__label">{{ __('radio.api_daily_limit') }}</span>

                    <p class="api__limit-num">
                        <b>{{ number_format($limitUsed, 0, ',', '.') }}</b>
                        <span>/ {{ number_format($limitTotal, 0, ',', '.') }}</span>
                    </p>

                    <div class="api__bar">
                        <span class="api__bar-fill is-{{ $limitState }}" style="width: {{ $limitPct }}%"></span>
                    </div>

                    <p class="api__limit-foot">
                        <span class="api__pct is-{{ $limitState }}">{{ $limitPct }}%</span>
                        <span>{{ __('radio.api_limit_reset') }}</span>
                    </p>
                </div>

            </div>
        </section>

        <div class="api__docs">

            <nav class="api__nav">
                <span class="api__nav-title">{{ __('radio.api_docs_title') }}</span>

                @foreach($tabs as $index => $tab)
                    <button type="button" class="api__nav-item @if(!$index) is-active @endif" data-go="{{ $tab[0] }}">
                        <span class="api__nav-ic"><i class="fa-solid {{ $tab[1] }}"></i></span>
                        <span class="api__nav-txt">
                            <b>{{ $tab[2] }}</b>
                            <span>{{ $tab[3] }}</span>
                        </span>
                    </button>
                @endforeach
            </nav>

            <section class="sec api__panel" data-pane="start">
                <header class="sec__head">
                    <h2 class="sec__title">{{ __('radio.api_start_title') }}</h2>
                </header>

                <div class="sec__body api__body">
                    <p class="api__text">{{ __('radio.api_start_intro') }}</p>

                    <ol class="api__steps">
                        @foreach($steps as $index => $step)
                            <li class="api__step">
                                <span class="api__step-num">{{ $index + 1 }}</span>
                                <span class="api__step-txt">
                                    <b>{{ $step[1] }}</b>
                                    <span>{{ $step[2] }}</span>
                                </span>
                            </li>
                        @endforeach
                    </ol>

                    <div class="api__code" data-code>
                        <div class="api__code-head">
                            <div class="api__code-tabs">
                                @foreach($samples as $key => $label)
                                    <button type="button" class="api__code-tab @if($key === 'curl') is-active @endif" data-code-go="{{ $key }}">{{ $label }}</button>
                                @endforeach
                            </div>

                            <button type="button" class="api__copy" data-copy data-tip="{{ __('general.action_copy') }}">
                                <i class="fa-regular fa-copy"></i>
                            </button>
                        </div>

                        @foreach($code as $key => $sample)
                            <pre data-code-pane="{{ $key }}" data-copy-value="{{ $sample }}" @if($key !== 'curl') hidden @endif>{{ $sample }}</pre>
                        @endforeach
                    </div>

                    <p class="api__note api__note--info">
                        <i class="fa-solid fa-lightbulb"></i>
                        <span>{{ __('radio.api_start_tip') }}</span>
                    </p>
                </div>
            </section>

            <section class="sec api__panel" data-pane="auth" hidden>
                <header class="sec__head">
                    <h2 class="sec__title">{{ __('radio.api_tab_auth') }}</h2>
                </header>

                <div class="sec__body api__body">
                    <p class="api__text">{{ __('radio.api_auth_intro') }}</p>

                    <div class="api__table-wrap">
                        <table class="api__table">
                            <thead>
                                <tr>
                                    <th>{{ __('radio.api_table_header') }}</th>
                                    <th>{{ __('radio.api_table_value') }}</th>
                                    <th class="api__cell--end">{{ __('radio.api_table_required') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($authHeaders as $header)
                                    <tr>
                                        <td><span class="api__prop">{{ $header[0] }}</span></td>
                                        <td><span class="api__mono">{{ $header[1] }}</span></td>
                                        <td class="api__cell--end">{{ __('site.action_yes') }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <p class="api__note">
                        <i class="fa-solid fa-triangle-exclamation"></i>
                        <span>{{ __('radio.api_auth_warning') }}</span>
                    </p>

                    <h3 class="api__sub">{{ __('radio.api_auth_scope_title') }}</h3>
                    <p class="api__text">{{ __('radio.api_auth_scope_text') }}</p>
                </div>
            </section>

            <section class="sec api__panel" data-pane="data" hidden>
                <header class="sec__head">
                    <h2 class="sec__title">{{ __('radio.api_data_title') }}</h2>
                </header>

                <div class="sec__body api__body">
                    <p class="api__text">{{ __('radio.api_data_intro') }}</p>

                    <div class="api__endpoint">
                        <span class="api__method">GET</span>
                        <code class="api__url" data-copy-value="{{ $endpoint }}">{{ $endpoint }}</code>
                        <button type="button" class="api__copy" data-copy data-tip="{{ __('general.action_copy') }}">
                            <i class="fa-regular fa-copy"></i>
                        </button>
                    </div>

                    <p class="api__text">{{ __('radio.api_endpoint_note') }}</p>

                    <div class="api__code">
                        <div class="api__code-head">
                            <span class="api__code-label">
                                <span class="api__badge is-ok">200</span>
                                {{ __('radio.api_example_response') }}
                            </span>

                            <button type="button" class="api__copy" data-copy data-tip="{{ __('general.action_copy') }}">
                                <i class="fa-regular fa-copy"></i>
                            </button>
                        </div>

                        <pre data-copy-value="{{ $sampleResponse }}">{{ $sampleResponse }}</pre>
                    </div>

                    <h3 class="api__sub">{{ __('radio.api_response_title') }}</h3>

                    <div class="api__table-wrap">
                        <table class="api__table">
                            <thead>
                                <tr>
                                    <th>{{ __('radio.api_table_property') }}</th>
                                    <th>{{ __('radio.api_table_description') }}</th>
                                    <th>{{ __('radio.api_table_type') }}</th>
                                    <th>{{ __('radio.api_table_format') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($responseFields as $field)
                                    <tr>
                                        <td><span class="api__prop">{{ $field[0] }}</span></td>
                                        <td>{{ $field[1] }}</td>
                                        <td><span class="api__type">{{ $field[2] }}</span></td>
                                        <td><span class="api__mono">{{ $field[3] }}</span></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <p class="api__note">
                        <i class="fa-solid fa-triangle-exclamation"></i>
                        <span>{!! __('radio.api_limit_warning') !!}</span>
                    </p>
                </div>
            </section>

            <section class="sec api__panel" data-pane="errors" hidden>
                <header class="sec__head">
                    <h2 class="sec__title">{{ __('radio.api_errors_title') }}</h2>
                </header>

                <div class="sec__body api__body">
                    <p class="api__text">{{ __('radio.api_errors_intro') }}</p>

                    <div class="api__code">
                        <div class="api__code-head">
                            <span class="api__code-label">
                                <span class="api__badge is-crit">403</span>
                                {{ __('radio.api_example_error') }}
                            </span>

                            <button type="button" class="api__copy" data-copy data-tip="{{ __('general.action_copy') }}">
                                <i class="fa-regular fa-copy"></i>
                            </button>
                        </div>

                        <pre data-copy-value="{{ $sampleError }}">{{ $sampleError }}</pre>
                    </div>

                    <h3 class="api__sub">{{ __('radio.api_errors_note') }}</h3>

                    <ul class="api__codes">
                        @foreach($errorCodes as $error)
                            <li class="api__code-row">
                                <span class="api__status is-{{ $error[1] }}">{{ $error[0] }}</span>
                                <span class="api__code-txt">
                                    <b>{{ $error[2] }}</b>
                                    <span>{{ $error[3] }}</span>
                                </span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </section>

            <section class="sec api__panel" data-pane="v1" hidden>
                <header class="sec__head">
                    <h2 class="sec__title">{{ __('radio.api_v1_title') }}</h2>
                </header>

                <div class="sec__body api__body">
                    <p class="api__alert">
                        <i class="fa-solid fa-triangle-exclamation"></i>
                        <span>{{ __('radio.api_v1_deprecated', ['date' => $v1EndsAtLabel]) }}</span>
                    </p>

                    <p class="api__text">{{ __('radio.api_v1_intro') }}</p>

                    <div class="api__endpoint">
                        <span class="api__method">GET</span>
                        <code class="api__url" data-copy-value="{{ $endpointV1 }}">{{ $endpointV1 }}</code>
                        <button type="button" class="api__copy" data-copy data-tip="{{ __('general.action_copy') }}">
                            <i class="fa-regular fa-copy"></i>
                        </button>
                    </div>

                    <div class="api__code" data-code>
                        <div class="api__code-head">
                            <div class="api__code-tabs">
                                @foreach($samples as $key => $label)
                                    <button type="button" class="api__code-tab @if($key === 'curl') is-active @endif" data-code-go="v1-{{ $key }}">{{ $label }}</button>
                                @endforeach
                            </div>

                            <button type="button" class="api__copy" data-copy data-tip="{{ __('general.action_copy') }}">
                                <i class="fa-regular fa-copy"></i>
                            </button>
                        </div>

                        @foreach($codeV1 as $key => $sample)
                            <pre data-code-pane="v1-{{ $key }}" data-copy-value="{{ $sample }}" @if($key !== 'curl') hidden @endif>{{ $sample }}</pre>
                        @endforeach
                    </div>

                    <div class="api__code">
                        <div class="api__code-head">
                            <span class="api__code-label">
                                <span class="api__badge is-ok">200</span>
                                {{ __('radio.api_example_response') }}
                            </span>

                            <button type="button" class="api__copy" data-copy data-tip="{{ __('general.action_copy') }}">
                                <i class="fa-regular fa-copy"></i>
                            </button>
                        </div>

                        <pre data-copy-value="{{ $sampleResponseV1 }}">{{ $sampleResponseV1 }}</pre>
                    </div>

                    <h3 class="api__sub">{{ __('radio.api_response_title') }}</h3>

                    <div class="api__table-wrap">
                        <table class="api__table">
                            <thead>
                                <tr>
                                    <th>{{ __('radio.api_table_property') }}</th>
                                    <th>{{ __('radio.api_table_description') }}</th>
                                    <th>{{ __('radio.api_table_type') }}</th>
                                    <th>{{ __('radio.api_table_format') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($responseFieldsV1 as $field)
                                    <tr>
                                        <td><span class="api__prop">{{ $field[0] }}</span></td>
                                        <td>{{ $field[1] }}</td>
                                        <td><span class="api__type">{{ $field[2] }}</span></td>
                                        <td><span class="api__mono">{{ $field[3] }}</span></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <h3 class="api__sub">{{ __('radio.api_errors_note') }}</h3>

                    <ul class="api__codes">
                        @foreach($errorCodesV1 as $error)
                            <li class="api__code-row">
                                <span class="api__status is-{{ $error[1] }}">{{ $error[0] }}</span>
                                <span class="api__code-txt">
                                    <b>{{ $error[2] }}</b>
                                    <span>{{ $error[3] }}</span>
                                </span>
                            </li>
                        @endforeach
                    </ul>

                    <div class="api__code">
                        <div class="api__code-head">
                            <span class="api__code-label">
                                <span class="api__badge is-crit">403</span>
                                {{ __('radio.api_example_error') }}
                            </span>

                            <button type="button" class="api__copy" data-copy data-tip="{{ __('general.action_copy') }}">
                                <i class="fa-regular fa-copy"></i>
                            </button>
                        </div>

                        <pre data-copy-value="{{ $sampleErrorV1 }}">{{ $sampleErrorV1 }}</pre>
                    </div>
                </div>
            </section>

            <section class="sec api__panel" data-pane="faq" hidden>
                <header class="sec__head">
                    <h2 class="sec__title">{{ __('radio.api_faq_title') }}</h2>
                </header>

                <div class="sec__body api__body">
                    <div class="api__faq">
                        @foreach($faq as $item)
                            <div class="api__faq-item">
                                <button type="button" class="api__faq-head" data-faq aria-expanded="false">
                                    <span>{{ $item[0] }}</span>
                                    <i class="fa-solid fa-chevron-down"></i>
                                </button>
                                <div class="api__faq-body" hidden>
                                    <p class="api__text">{{ $item[1] }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>

        </div>

    </div>

</main>

@section('scripts')
    <script src="{{ assetv('/assets/js/pages/radio-api.js') }}"></script>
@endsection

@include('includes/footer-novo')