@section('title', __('radio.menu_item_5_sub_5'))
@section('head')
    <link rel="stylesheet" href="/assets/js/plugins/highlightjs/styles/atom-one-dark.css">
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
@endsection
@include('includes/header')
@include('includes/topRadio')
<div class="content">

    <div class="row">
        <div class="col-12">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
                <div class="flex-grow-1">
                    <h1 class="h3 fw-bold mb-2">
                        {{ __('radio.menu_item_5_sub_5') }}
                    </h1>
                </div>
                <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-alt push mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('radio.home.r') }}">{{ __('radio.menu_item_1') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0)">{{ __('radio.menu_item_5') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('radio.menu_item_5_sub_5') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">

            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title">
                        {{ __('radio.api_token_limits_title') }}
                    </h3>
                </div>
                <div class="block-content p-0">

                    <div class="row p-3 align-items-center">
                        <div class="col-lg-7 col-md-12 me-lg-2 mb-4 mb-lg-0">
                            <div class="mb-0">
                                <label class="form-label" for="one-ecom-product-meta-title">Auth Token</label>
                                <div class="input-group">
                                    <input type="text" class="form-control form-control-alt" id="authTokenApi" @if($getTokenAuth->count()) placeholder="{{ $getTokenAuth->first()->id }}|*******" @else placeholder="{{ __('radio.api_token_none') }}" @endif readonly="readonly">
                                    <button type="button" class="btn btn-secondary genToken">{{ ($getTokenAuth->count() == 0 ? __('general.action_generate') : __('radio.action_update')) }}</button>
                                </div>
                                <div class="form-text fs-sm">
                                    {{ __('radio.api_token_help') }}
                                </div>
                            </div>

                        </div>
                        <div class="col-lg-4 col-md-12 ms-lg-5">
                            <h5 class="mb-2">{{ __('radio.api_daily_limit') }}</h5>
                            @php $percentage = ($userLogged->limit_used / $userLogged->limit_total) * 100; @endphp
                            <p class="mb-0"><b>{{ $userLogged->limit_used }}</b> / <b>{{ $userLogged->limit_total }}</b></p>
                            <div class="progress mb-1" style="height: 10px;">
                                <div class="progress-bar {{ (round($percentage) <= 70 ? 'bg-primary' : (round($percentage) > 70 && round($percentage) <= 94 ? 'bg-warning' : 'bg-danger')) }} bg-primary" role="progressbar" style="width: {{ number_format($percentage,1, '.', '') }}%;" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <p class="fs-xs fw-semibold mb-lg-1">{{ round($percentage) }}%</p>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>


    <div class="row">

        <div class="col-lg-12">
            <h1 class="h3 fw-bold mb-2">
                {{ __('radio.api_docs_title') }}
            </h1>

            <div class="block block-rounded row g-0">
                <ul class="nav nav-tabs nav-tabs-block flex-md-column col-md-3" role="tablist">
                    <li class="nav-item d-md-flex flex-md-column" role="presentation">
                        <button class="nav-link text-md-start active" id="btabs-auth-tab" data-bs-toggle="tab" data-bs-target="#btabs-auth" role="tab" aria-controls="btabs-auth" aria-selected="true">
                            <i class="fa fa-fw fa-key opacity-50 me-1 d-none d-sm-inline-block"></i> {{ __('radio.api_tab_auth') }}
                            <span class="d-none d-md-block fs-xs fw-medium opacity-75 mt-md-2">
                                {{ __('radio.api_tab_auth_desc') }}
                            </span>
                        </button>
                    </li>
                    <li class="nav-item d-md-flex flex-md-column" role="presentation">
                        <button class="nav-link text-md-start" id="btabs-data-tab" data-bs-toggle="tab" data-bs-target="#btabs-data" role="tab" aria-controls="btabs-data" aria-selected="false" tabindex="-1">
                            <i class="fa fa-fw fa-list opacity-50 me-1 d-none d-sm-inline-block"></i> {{ __('radio.api_tab_data') }}
                            <span class="d-none d-md-block fs-xs fw-medium opacity-75 mt-md-2">
                                {{ __('radio.api_tab_data_desc') }}
                            </span>
                        </button>
                    </li>
                    <li class="nav-item d-md-flex flex-md-column" role="presentation">
                        <button class="nav-link text-md-start" id="btabs-errors-tab" data-bs-toggle="tab" data-bs-target="#btabs-errors" role="tab" aria-controls="btabs-errors" aria-selected="false" tabindex="-1">
                            <i class="fa fa-fw fa-circle-xmark opacity-50 me-1 d-none d-sm-inline-block"></i> {{ __('radio.api_tab_errors') }}
                            <span class="d-none d-md-block fs-xs fw-medium opacity-75 mt-md-2">
                                {{ __('radio.api_tab_errors_desc') }}
                            </span>
                        </button>
                    </li>
                    <li class="nav-item d-md-flex flex-md-column" role="presentation">
                        <button class="nav-link text-md-start" id="btabs-faq-tab" data-bs-toggle="tab" data-bs-target="#btabs-faq" role="tab" aria-controls="btabs-faq" aria-selected="false" tabindex="-1">
                            <i class="fa fa-fw fa-circle-question opacity-50 me-1 d-none d-sm-inline-block"></i> FAQ
                            <span class="d-none d-md-block fs-xs fw-medium opacity-75 mt-md-2">
                                {{ __('radio.api_tab_faq_desc') }}
                            </span>
                        </button>
                    </li>
                </ul>
                <div class="tab-content col-md-9">
                    <div class="block-content tab-pane active" id="btabs-auth" role="tabpanel" aria-labelledby="btabs-auth-tab" tabindex="0">
                        <h4 class="fw-semibold">{{ __('radio.api_tab_auth') }}</h4>
                        <p class="fs-sm">
                            {{ __('radio.api_auth_intro') }}
                        </p>
                        <div class="table-responsive">
                        <table class="table table-vcenter table-sm">
                            <thead>
                            <tr>
                                <th class="text-start" style="width: 20%;">{{ __('radio.api_table_property') }}</th>
                                <th class="text-center">{{ __('radio.api_table_description') }}</th>
                                <th class="text-center" style="width: 15%;">{{ __('radio.api_table_type') }}</th>
                                <th class="text-center" style="width: 15%;">{{ __('radio.api_table_size') }}</th>
                                <th class="text-end" style="width: 20%;">{{ __('radio.api_table_required') }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill bg-gray-light text-dark">Authorization</span></td>
                                <td class="text-center">Bearer [AuthToken]</td>
                                <td class="text-center">{{ __('radio.api_type_text') }}</td>
                                <td class="text-center">43</td>
                                <td class="text-end pe-3">{{ __('site.action_yes') }}</td>
                            </tr>
							<tr>
                                <td><span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill bg-gray-light text-dark">Accept</span></td>
                                <td class="text-center">application/json</td>
                                <td class="text-center">{{ __('radio.api_type_text') }}</td>
                                <td class="text-center">43</td>
                                <td class="text-end pe-3">{{ __('site.action_yes') }}</td>
                            </tr>
                            </tbody>
                        </table>
                        </div>
                        <p class="mt-3 mb-0">{!! __('radio.api_auth_header_note') !!}</p>
                        <p class="mb-3"><code>{ "Bearer": "1|jhdsAUEdsk...xD0i0jqcw" }</code></p>
                        <p class="mt-0 mb-0">{!! __('radio.api_response_json_note') !!}</p>
                        <p class="mb-3"><code>{
                               <br> "status": "success",
                                <br>...<br>
                                }</code></p>
                    </div>
                    <div class="block-content tab-pane" id="btabs-data" role="tabpanel" aria-labelledby="btabs-data-tab" tabindex="0">
                        <h4 class="fw-semibold">{{ __('radio.api_data_title') }}</h4>
                        <p class="fs-sm">
                            {{ __('radio.api_data_intro') }}
                        </p>
                        <div class="fs-6 fw-semibold p-2 mb-4 border-start border-4 border-primary bg-body-light overflow-auto">
                            <span class="text-primary fw-bold">URL:</span> {{ env('APP_URL') }}/api/radio/data/{{ session('siteID') }}/{{ EncryptBras($siteData->domain.'|'.$streamData->port) }}
                        </div>
                        <p class="mt-0 mb-0">{!! __('radio.api_response_json_note') !!}</p>
                        <p class="mb-3"><code>{
                                <br>"status": "success",<br>
                                <span class="ps-3">"plan": {</span><br>
                                <span class="ps-5">"radio_name": "Nome da rádio",</span><br>
                                <span class="ps-5">"listeners": 1000,</span><br>
                                <span class="ps-5">"bitrate": 128</span><br>
                                <span class="ps-3">},</span><br>
                               <span class="ps-3"> "listeners": {</span><br>
                                <span class="ps-5">"current": "25",</span><br>
                                <span class="ps-5">"peak": "200"</span><br>
                                <span class="ps-3"> },</span><br>
                                <span class="ps-3">"onair_data": {</span><br>
                                <span class="ps-5">"current_music": "Áudio atual",</span><br>
                                <span class="ps-5">"next_music": "Próximo áudio",</span><br>
                                <span class="ps-5 ms-5">"stream_data": {</span><br>
                                <span class="ps-5 ms-7">"codec": "aac",</span><br>
                                <span class="ps-5  ms-7">"bitrate": "128"</span><br>
                               <span class="ps-5 ms-5"> }</span><br>
                                <span class="ps-3"> }</span><br>
                                }</code>
                        </p>
                        <hr class="mt-3 mb-2">
                        <h5 class="mb-3">{{ __('radio.api_response_title') }}</h5>
                        <div class="table-responsive">
                            <table class="table table-vcenter table-sm">
                                <thead>
                                <tr>
                                    <th class="text-start" style="width: 15%;">{{ __('radio.api_table_property') }}</th>
                                    <th class="text-center">{{ __('radio.api_table_description') }}</th>
                                    <th class="text-center" style="width: 15%;">{{ __('radio.api_table_type') }}</th>
                                    <th class="text-center" style="width: 15%;">{{ __('radio.api_table_size') }}</th>
                                    <th class="text-center" style="width: 20%;">{{ __('radio.api_table_format') }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td><span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill bg-gray-light text-dark">status</span></td>
                                    <td class="text-center">{{ __('radio.api_field_status') }}</td>
                                    <td class="text-center">{{ __('radio.api_type_text') }}</td>
                                    <td class="text-center">36</td>
                                    <td class="text-center">success | error</td>
                                </tr>
                                <tr>
                                    <td><span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill bg-gray-light text-dark">plan.radio_name</span></td>
                                    <td class="text-center">{{ __('radio.api_field_radio_name') }}</td>
                                    <td class="text-center">{{ __('radio.api_type_text') }}</td>
                                    <td class="text-center">255</td>
                                    <td class="text-center">Rádio Brascast</td>
                                </tr>
                                <tr>
                                    <td><span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill bg-gray-light text-dark">plan.listeners</span></td>
                                    <td class="text-center">{{ __('radio.api_field_plan_listeners') }}</td>
                                    <td class="text-center">{{ __('radio.api_type_number') }}</td>
                                    <td class="text-center">25</td>
                                    <td class="text-center">1000</td>
                                </tr>
                                <tr>
                                    <td><span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill bg-gray-light text-dark">plan.bitrate</span></td>
                                    <td class="text-center">{{ __('radio.api_field_plan_bitrate') }}</td>
                                    <td class="text-center">{{ __('radio.api_type_number') }}</td>
                                    <td class="text-center">40</td>
                                    <td class="text-center">128</td>
                                </tr>
                                <tr>
                                    <td><span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill bg-gray-light text-dark">listeners.current</span></td>
                                    <td class="text-center">{{ __('radio.api_field_listeners_current') }}</td>
                                    <td class="text-center">{{ __('radio.api_type_number') }}</td>
                                    <td class="text-center">40</td>
                                    <td class="text-center">25</td>
                                </tr>
                                <tr>
                                    <td><span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill bg-gray-light text-dark">listeners.peak</span></td>
                                    <td class="text-center">{{ __('radio.api_field_listeners_peak') }}</td>
                                    <td class="text-center">{{ __('radio.api_type_number') }}</td>
                                    <td class="text-center">40</td>
                                    <td class="text-center">200</td>
                                </tr>
                                <tr>
                                    <td><span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill bg-gray-light text-dark">onair_data.current_music</span></td>
                                    <td class="text-center">{{ __('radio.api_field_current_music') }}</td>
                                    <td class="text-center">{{ __('radio.api_type_text') }}</td>
                                    <td class="text-center">255</td>
                                    <td class="text-center">{{ __('radio.api_format_audio_name') }}</td>
                                </tr>
                                <tr>
                                    <td><span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill bg-gray-light text-dark">onair_data.next_music</span></td>
                                    <td class="text-center">{{ __('radio.api_field_next_music') }}</td>
                                    <td class="text-center">{{ __('radio.api_type_text') }}</td>
                                    <td class="text-center">255</td>
                                    <td class="text-center">{{ __('radio.api_format_audio_name') }}</td>
                                </tr>
                                <tr>
                                    <td><span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill bg-gray-light text-dark">onair_data.stream_data.codec</span></td>
                                    <td class="text-center">{{ __('radio.api_field_codec') }}</td>
                                    <td class="text-center">{{ __('radio.api_type_text') }}</td>
                                    <td class="text-center">3</td>
                                    <td class="text-center">aac</td>
                                </tr>
                                <tr>
                                    <td><span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill bg-gray-light text-dark">onair_data.stream_data.codec</span></td>
                                    <td class="text-center">{{ __('radio.api_field_bitrate') }}</td>
                                    <td class="text-center">{{ __('radio.api_type_number') }}</td>
                                    <td class="text-center">3</td>
                                    <td class="text-center">128</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <p class="mb-3 fs-sm"><b>*</b>{!! __('radio.api_limit_warning') !!}</p>
                    </div>
                    <div class="block-content tab-pane" id="btabs-errors" role="tabpanel" aria-labelledby="btabs-errors-tab" tabindex="0">
                        <h4 class="fw-semibold">{{ __('radio.api_errors_title') }}</h4>
                        <p class="mb-1">{{ __('radio.api_errors_intro') }}</p>
                        <p>{{ __('radio.api_errors_note') }}</p>
                        <div class="table-responsive">
                            <table class="table table-vcenter table-sm">
                                <thead>
                                <tr>
                                    <th class="text-start" style="width: 20%;">HTTP STATUS CODE</th>
                                    <th class="text-center">{{ __('radio.api_table_description') }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td class="text-start fw-semibold">200</td>
                                    <td class="text-center">{{ __('radio.api_error_200') }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start fw-semibold">402</td>
                                    <td class="text-center">{{ __('radio.api_error_402') }}</td>
                                </tr>
                                <tr>
                                    <td class="text-start fw-semibold">403</td>
                                    <td class="text-center">{{ __('radio.api_error_403') }}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="block-content tab-pane" id="btabs-faq" role="tabpanel" aria-labelledby="btabs-faq-tab" tabindex="0">
                        <h4 class="fw-semibold">{{ __('radio.api_faq_title') }}</h4>

                        <div id="faq3" role="tablist" aria-multiselectable="true">
                            <div class="block block-rounded block-bordered overflow-hidden mb-1">
                                <div class="block-header block-header-default" role="tab" id="faq3_h1">
                                    <a class="text-muted collapsed" data-bs-toggle="collapse" data-bs-parent="#faq3" href="#faq3_q1" aria-expanded="false" aria-controls="faq3_q1">{{ __('radio.api_faq_q1') }}</a>
                                </div>
                                <div id="faq3_q1" class="collapse" role="tabpanel" aria-labelledby="faq3_h1" data-bs-parent="#faq3" style="">
                                    <div class="block-content">
                                        <p>{{ __('radio.api_faq_unavailable') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>

    </div>



</div>

</div>

</main>


@include('includes/footer')

</div>
<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script src="/assets/js/plugins/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script>
    $('.genToken').click(function() {

        @if($getTokenAuth->count())

        @php $apiTokenWarning = __('radio.api_token_update_warning', ['token' => $getTokenAuth->first()->id.'|******']); @endphp
        Swal.fire({
            title: @json(__('radio.api_token_update_confirm')),
            html: @json($apiTokenWarning),
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#239e76',
            cancelButtonColor: '#d33',
            cancelButtonText: @json(__('radio.app_action_cancel')),
            confirmButtonText: @json(__('radio.action_update'))
        }).then((result) => {
            if (result.isConfirmed) {
                $.post('{{ route('radio.api-integration.c') }}')
                    .done(function( data ) {
                        $('#authTokenApi').val(data);
                        $('#authTokenApi').select();
                        document.execCommand('copy');
                        One.helpers('jq-notify', {type: 'primary', icon: 'fa fa-check me-1', from: 'bottom', align: 'center', message: @json(__('radio.api_token_copied'))});
                    });
            }
        });

        @else
        $.post('{{ route('radio.api-integration.c') }}')
            .done(function( data ) {
                $('#authTokenApi').val(data);
                $('#authTokenApi').select();
                document.execCommand('copy');
                One.helpers('jq-notify', {type: 'primary', icon: 'fa fa-check me-1', from: 'bottom', align: 'center', message: @json(__('radio.api_token_copied'))});
            });
        @endif
    });
</script>
</body>
</html>