@section('title', __('general.header_web_players_title'))
@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">
                        {{ __('general.header_web_players_title') }}
                    </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') }}">{{ __('general.breadcrumb_home') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0)">{{ __('general.sec_tools') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('general.perm_players') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    
    
    
    <div class="row">
        <div class="col-md-12">

            
            
<div class="block block-rounded row g-0">

    @include('widgets.side')

    <div class="tab-content col-md-9 border-start">
        <div class="block-content tab-pane active p-3">

            <div class="row items-push">

                            <div class="col-md-6 col-xl-4">
                                <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#modal-block-html" data-id="01" data-nome="Modelo 01" 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="">{{ __('general.widgets_model_n', ['number' => '01']) }}</b>
                                    </div>
                                </a>
                            </div>


                            <div class="col-md-6 col-xl-4">
                                <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#modal-block-html" data-id="02" data-nome="Modelo 02" 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="">{{ __('general.widgets_model_n', ['number' => '02']) }}</b>
                                    </div>
                                </a>
                            </div>


                            <div class="col-md-6 col-xl-4">
                                <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#modal-block-html" data-id="03" data-nome="Modelo 03" 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="">{{ __('general.widgets_model_n', ['number' => '03']) }}</b>
                                    </div>
                                </a>
                            </div>

                            <div class="col-md-6 col-xl-4">
                                <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#modal-block-html" data-id="04" data-nome="Modelo 04" 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="">{{ __('general.widgets_model_n', ['number' => '04']) }}</b>
                                    </div>
                                </a>
                            </div>

                            <div class="col-md-6 col-xl-4">
                                <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#modal-block-html" data-id="05" data-nome="Modelo 05" 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="">{{ __('general.widgets_model_n', ['number' => '05']) }}</b>
                                    </div>
                                </a>
                            </div>

                            <div class="col-md-6 col-xl-4">
                                <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#modal-block-html" data-id="06" data-nome="Modelo 06" 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/style06.png" >
                                        </div>
                                    </div>
                                    <div class="block-content pb-4">
                                        <div class="fw-semibold float-end ms-1">HTML</div>
                                        <b class="h4" href="">{{ __('general.widgets_model_n', ['number' => '06']) }}</b>
                                    </div>
                                </a>
                            </div>

                            <div class="col-md-6 col-xl-4">
                                <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#modal-block-html" data-id="07" data-nome="Modelo 07" 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/style07.png" >
                                        </div>
                                    </div>
                                    <div class="block-content pb-4">
                                        <div class="fw-semibold float-end ms-1">HTML</div>
                                        <b class="h4" href="">{{ __('general.widgets_model_n', ['number' => '07']) }}</b>
                                    </div>
                                </a>
                            </div>

                            <div class="col-md-6 col-xl-4">
                                <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#modal-block-html" data-id="08" data-nome="Modelo 08" 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/style08.png" >
                                        </div>
                                    </div>
                                    <div class="block-content pb-4">
                                        <div class="fw-semibold float-end ms-1">HTML</div>
                                        <b class="h4" href="">{{ __('general.widgets_model_n', ['number' => '08']) }}</b>
                                    </div>
                                </a>
                            </div>

                            <div class="col-md-6 col-xl-4">
                                <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#modal-block-html" data-id="09" data-nome="Modelo 09" 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/style09.png" >
                                        </div>
                                    </div>
                                    <div class="block-content pb-4">
                                        <div class="fw-semibold float-end ms-1">HTML</div>
                                        <b class="h4" href="">{{ __('general.widgets_model_n', ['number' => '09']) }}</b>
                                    </div>
                                </a>
                            </div>

                        </div>

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

</div>


  <div class="modal" id="modal-block-html" tabindex="-1" role="dialog" aria-labelledby="modal-block-html" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="block block-rounded block-transparent mb-0">
          <div class="block-header block-header-default">
            <h3 class="block-title hupper" id="tituloModal">{{ __('general.widgets_embed_code_title') }}</h3>
            <div class="block-options">
              <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
                <i class="fa fa-fw fa-times"></i>
              </button>
            </div>
          </div>
          <div class="block-content fs-sm">
            <textarea class="form-control mb-3" rows="4" id="code" disabled="disabled"></textarea>      
          </div>
          <div class="block-content block-content-full text-end bg-body">
            <button type="button" class="btn btn-sm btn-alt-secondary me-1" onclick="copyCode(this)">{{ __('general.action_copy_code') }}</button>
            <button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal">{{ __('general.action_done') }}</button>
          </div>
        </div>
      </div>
    </div>
  </div>

<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script src="/assets/js/plugins/bootstrap-notify/bootstrap-notify.min.js"></script>
  <script>
      const hashPlayer = '{{ str_replace('/','brascsep',EncryptBras($siteData->stream_port)) }}';
      const modal = document.getElementById('modal-block-html');

    modal.addEventListener('show.bs.modal', function (event) {
      const button = event.relatedTarget; // botão clicado

      const id = button.getAttribute('data-id');
      const nome = button.getAttribute('data-nome');

      document.getElementById('tituloModal').textContent = nome;
      document.getElementById('code').textContent = '<iframe src="{{ env('APP_URL') }}/player/'+id+'/'+hashPlayer+'" style="width:100%;height:400px;border-radius:20px;" border="0" frameborder="0" allow="autoplay; clipboard-write" allowtransparency="true"></iframe>';
      
    });
    
    let timeout;

    function copyCode(btn) {
      btn.disabled = true;

      const code = document.getElementById('code').value;

      navigator.clipboard.writeText(code)
        .then(() => {
          One.helpers('jq-notify', {
            type: 'primary',
            icon: 'fa fa-check me-1',
            message: 'Copiado com sucesso!'
          });
        })
        .finally(() => {
          setTimeout(() => btn.disabled = false, 1500);
        });
    }
  </script>
  
  </body>
</html>