@section('title', 'Player '.($id < 10 ? '0'.$id : $id))
@section('head')
    <link rel="stylesheet" href="/assets/js/plugins/highlightjs/styles/github.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.player_code_h1', ['number' => ($id < 10 ? '0'.$id : $id)]) }}
                    </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">
                            <a href="{{ route('radio.players.r') }}">{{ __('radio.menu_item_5_sub_4') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Player {{ ($id < 10 ? '0'.$id : $id) }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="row">

        <div class="col-md-12 text-center rounded mb-0">
            <div style="background:#fff;"><img src="/players/style-mini01.png" style="max-width:400px;"/></div>
        </div>

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

            <div class="block block-rounded">
                <div class="block-content p-0">

                    <div class="d-flex w-100 justify-content-center pt-2 pb-2">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="1" id="val-autoplay" name="val-autoplay">
                            <label class="form-check-label" for="val-autoplay">Autoplay</label>
                        </div>
                    </div>

                    <pre><code class="html hljs xml"><span class="hljs-tag tagHtml">&lt;iframe src="{{ env('APP_URL') }}/player-mini/{{ ($id < 10 ? '0'.$id : $id) }}/{{ str_replace('/','brascsep',EncryptBras($siteData->stream_port)) }}" border="0" scrolling="no" frameborder="0" allow="autoplay; clipboard-write" allowtransparency="true" width="450" height="90"<span class="hljs-name"></span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</code></pre>


                </div>
            </div>

        </div>
    </div>



</div>

</div>

</main>


@include('includes/footer')

</div>
<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script>
    let code = '&lt;iframe src="{{ env('APP_URL') }}/player-mini/{{ ($id < 10 ? '0'.$id : $id) }}/{{ str_replace('/','brascsep',EncryptBras($siteData->stream_port)) }}';
    var code2 = '" border="0" scrolling="no" frameborder="0" allow="autoplay; clipboard-write" allowtransparency="true" width="450" height="90">';
    $('input#val-autoplay').on('input',function(e){
        let check = $("#val-autoplay").is(":checked");
        if(check){
            $('.tagHtml').html(code+'/true'+code2);
        }else{
            $('.tagHtml').html(code+code2);
        }
    });
</script>
</body>
</html>