@section('title', __('radio.menu_item_5_sub_4'))
@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.menu_item_5_sub_4') }}
                    </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_4') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

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

            <div class="block block-rounded">
                <ul class="nav nav-tabs nav-tabs-block" role="tablist">
                    <li class="nav-item">
                        <a href="{{ route('radio.players.r') }}" class="nav-link {{ ($type == 1 ? 'active' : '') }}"><i class="fa fa-square-caret-right me-1"></i> {{ __('radio.players_tab_bar') }}</a>
                    </li>
                    <li class="nav-item">
                        <a href="{{ route('radio.players.r','2') }}" class="nav-link {{ ($type == 2 ? 'active' : '') }}"><i class="fa fa-layer-group me-1"></i> Mini Player</a>
                    </li>
                    <li class="nav-item">
                        <a href="{{ route('radio.players.r','3') }}" class="nav-link {{ ($type == 3 ? 'active' : '') }}"><i class="fa fa-clone me-1"></i> Pop-ups</a>
                    </li>
                    <li class="nav-item">
                        <a href="{{ route('radio.players.r','4') }}" class="nav-link {{ ($type == 4 ? 'active' : '') }}"><i class="fa fa-tv me-1"></i> Player box</a>
                    </li>
                </ul>
                @if($type == 1)
                <div class="block-content tab-content">
                    <div class="tab-pane active">
                        <h4 class="fw-normal">{{ __('radio.players_choose_model') }}</h4>

                        <div class="row items-push">

                            <div class="col-md-6 col-xl-3">
                                <a href="{{ route('radio.players.r.playercode',['html','1']) }}" class="block block-rounded h-100 mb-0 bg-gray-light">
                                    <div class="block-content p-1">
                                        <div class="options-container">
                                            <img class="img-fluid options-item" src="/players/style01.png" >
                                        </div>
                                    </div>
                                    <div class="block-content pb-4">
                                            <div class="fw-semibold float-end ms-1">HTML</div>
                                            <b class="h4" href="">{{ __('radio.players_model', ['number' => '01']) }}</b>
                                    </div>
                                </a>
                            </div>


                            <div class="col-md-6 col-xl-3">
                                <a href="{{ route('radio.players.r.playercode',['html','2']) }}" class="block block-rounded h-100 mb-0 bg-gray-light">
                                    <div class="block-content p-1">
                                        <div class="options-container">
                                            <img class="img-fluid options-item" src="/players/style02.png" >
                                        </div>
                                    </div>
                                    <div class="block-content pb-4">
                                        <div class="fw-semibold float-end ms-1">HTML</div>
                                        <b class="h4" href="">{{ __('radio.players_model', ['number' => '02']) }}</b>
                                    </div>
                                </a>
                            </div>


                            <div class="col-md-6 col-xl-3">
                                <a href="{{ route('radio.players.r.playercode',['html','3']) }}" class="block block-rounded h-100 mb-0 bg-gray-light">
                                    <div class="block-content p-1">
                                        <div class="options-container">
                                            <img class="img-fluid options-item" src="/players/style03.png" >
                                        </div>
                                    </div>
                                    <div class="block-content pb-4">
                                        <div class="fw-semibold float-end ms-1">HTML</div>
                                        <b class="h4" href="">{{ __('radio.players_model', ['number' => '03']) }}</b>
                                    </div>
                                </a>
                            </div>

                            <div class="col-md-6 col-xl-3">
                                <a href="{{ route('radio.players.r.playercode',['html','4']) }}" class="block block-rounded h-100 mb-0 bg-gray-light">
                                    <div class="block-content p-1">
                                        <div class="options-container">
                                            <img class="img-fluid options-item" src="/players/style04.png" >
                                        </div>
                                    </div>
                                    <div class="block-content pb-4">
                                        <div class="fw-semibold float-end ms-1">HTML</div>
                                        <b class="h4" href="">{{ __('radio.players_model', ['number' => '04']) }}</b>
                                    </div>
                                </a>
                            </div>

                            <div class="col-md-6 col-xl-3">
                                <a href="{{ route('radio.players.r.playercode',['html','5']) }}" class="block block-rounded h-100 mb-0 bg-gray-light">
                                    <div class="block-content p-1">
                                        <div class="options-container">
                                            <img class="img-fluid options-item" src="/players/style05.png" >
                                        </div>
                                    </div>
                                    <div class="block-content pb-4">
                                        <div class="fw-semibold float-end ms-1">HTML</div>
                                        <b class="h4" href="">{{ __('radio.players_model', ['number' => '05']) }}</b>
                                    </div>
                                </a>
                            </div>

                        </div>


                    </div>
                </div>
                @elseif($type == '2')
                    <div class="block-content tab-content">
                        <div class="tab-pane active">
                            <h4 class="fw-normal">Mini</h4>

                            <div class="row items-push">

                                <div class="col-md-6 col-xl-3" style="height: 150px;">
                                    <a href="{{ route('radio.players.r.playercode',['mini','1']) }}" class="block block-rounded h-100 mb-0 bg-gray-light">
                                        <div class="block-content p-1">
                                            <div class="options-container">
                                                <img class="img-fluid options-item" src="/players/style-mini01.png">
                                            </div>
                                        </div>
                                        <div class="block-content pb-4">
                                            <div class="fw-semibold float-end ms-1">Mini</div>
                                            <b class="h4" href="">{{ __('radio.players_model', ['number' => '01']) }}</b>
                                        </div>
                                    </a>
                                </div>

                                <div class="col-md-6 col-xl-3" style="height: 130px;">
                                    <a href="{{ route('radio.players.r.playercode',['mini','2']) }}" class="block block-rounded h-100 mb-0 bg-gray-light">
                                        <div class="block-content p-1">
                                            <div class="options-container">
                                                <img class="img-fluid options-item" src="/players/style-mini02.png">
                                            </div>
                                        </div>
                                        <div class="block-content pb-4">
                                            <div class="fw-semibold float-end ms-1">Mini</div>
                                            <b class="h4" href="">{{ __('radio.players_model', ['number' => '02']) }}</b>
                                        </div>
                                    </a>
                                </div>

                                <div class="col-md-6 col-xl-2">
                                    <a href="{{ route('radio.players.r.playercode',['mini','3']) }}" class="block block-rounded h-100 mb-0 bg-gray-light">
                                        <div class="block-content p-1 text-center">
                                            <div class="options-container">
                                                <img class="img-fluid options-item" src="/players/style-mini03.png">
                                            </div>
                                        </div>
                                        <div class="block-content pb-4">
                                            <div class="fw-semibold float-end ms-1">Mini</div>
                                            <b class="h4" href="">{{ __('radio.players_model', ['number' => '03']) }}</b>
                                        </div>
                                    </a>
                                </div>

                            </div>

                        </div>
                    </div>
                @elseif($type == '3')
                    <div class="block-content tab-content">
                        <div class="tab-pane active">
                            <h4 class="fw-normal">Pop-ups</h4>

                            <div class="row items-push">

                                <div class="col-md-6 col-xl-3" style="height: 170px;">
                                    <a href="{{ route('radio.players.r.playercode',['popup','1']) }}" class="block block-rounded h-100 mb-0 bg-gray-light">
                                        <div class="block-content p-1">
                                            <div class="options-container">
                                                <img class="img-fluid options-item" src="/players/style-pop01.png">
                                            </div>
                                        </div>
                                        <div class="block-content pb-4">
                                            <div class="fw-semibold float-end ms-1">Pop-up</div>
                                            <b class="h4" href="">{{ __('radio.players_model', ['number' => '01']) }}</b>
                                        </div>
                                    </a>
                                </div>


                                <div class="col-md-6 col-xl-3" style="height: 220px;">
                                    <a href="{{ route('radio.players.r.playercode',['popup','2']) }}" class="block block-rounded h-100 mb-0 bg-gray-light">
                                        <div class="block-content p-1">
                                            <div class="options-container">
                                                <img class="img-fluid options-item" src="/players/style-pop02.png">
                                            </div>
                                        </div>
                                        <div class="block-content pb-4">
                                            <div class="fw-semibold float-end ms-1">Pop-up</div>
                                            <b class="h4" href="">{{ __('radio.players_model', ['number' => '02']) }}</b>
                                        </div>
                                    </a>
                                </div>

                            </div>

                        </div>
                    </div>
                @elseif($type == '4')
                    <div class="block-content tab-content">
                        <div class="tab-pane active">
                            <h4 class="fw-normal">Player Box</h4>
                            <img style="max-width:600px" class="mb-3" src="/players/stylebox.png">

                            <pre><code class="html hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">iframe src="{{ env('APP_URL') }}/player/box/{{ str_replace('/','brascsep',EncryptBras($siteData->stream_port)) }}" border="0" scrolling="no" frameborder="0" allow="autoplay; clipboard-write" allowtransparency="true" width="100%"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</code></pre>

                        </div>
                    </div>
                @endif
            </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>
</body>
</html>