@section('title', __('general.page_widget_messages_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">


			<h5 class="mb-2">{{ __('general.widgets_preview') }}</h5>
			<div class="block block-rounded block-bordered">
        <div class="block-content p-1">
          <iframe src="https://{{ $siteServer->name }}/widget/messages/{{ $siteData->id }}" style="width:100%;height:300px;border-radius:20px;" border="0" frameborder="0" allow="autoplay; clipboard-write" allowtransparency="true"></iframe>
        </div>
      </div>
			
			
			
			<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-block-html" data-id="{{ $siteData->id }}">{{ __('general.widgets_generate_code') }}</button>
        </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_generate_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');

	  document.getElementById('code').textContent = '<iframe src="https://{{ $siteServer->name }}/widget/messages/'+id+'" style="width:100%;height:330px;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>