@section('title', __('general.header_web_startpage_title'))
@section('head')
<link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
<style>
  .page-layout {
      display: grid;
      grid-template-columns: 60fr 40fr;
      gap: 0;
      min-height: 100vh;
      align-items: start;
    }
    .col-form { padding: 1.5rem; }
    .col-preview {
      background: #f1f3f5;
      border-left: 1px solid #dee2e6;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: sticky;
      top: 0;
      min-height: 100vh;
      overflow-x: auto;
    }

    /* ---- Swatches ---- */
    .swatch-wrap { display: flex; gap: 8px; flex-wrap: wrap; }
    .swatch { width:30px; height:30px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:transform 0.1s,border-color 0.15s; }
    .swatch:hover { transform: scale(1.15); }
    .swatch.selected { border-color: #212529; }
    .swatch-none { width:30px; height:30px; border-radius:50%; background:#fff; border:2px solid #ced4da; cursor:pointer; position:relative; display:flex; align-items:center; justify-content:center; }
    .swatch-none::after { content:''; position:absolute; width:62%; height:1.5px; background:#adb5bd; transform:rotate(-45deg); }
    .swatch-none.selected { border-color:#212529; border-width:2.5px; }

    /* ---- Links & Social disabled ---- */
    .link-item { background:#fff; border:1px solid #dee2e6; border-radius:.5rem; padding:.875rem 1rem; margin-bottom:.75rem; transition:opacity .25s; }
    .link-item.disabled-item { opacity:.4; }
    .link-item .row-label { font-size:.8rem; font-weight:500; color:#6c757d; padding-top:.5rem; }
    .social-row { display:flex; align-items:center; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid #dee2e6; transition:opacity .25s; }
    .social-row.disabled-item { opacity:.4; }
    .social-info { display:flex; align-items:center; gap:10px; }
    .social-icon-wa { width:32px; height:32px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; }

    /* ---- Preview header ---- */
    .preview-header { width:100%; margin-bottom:1.25rem; }

    .publish-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .75rem 1rem;
      background: #fff;
      border: 1px solid #dee2e6;
      border-radius: .75rem;
      margin-bottom: .75rem;
      box-shadow: 0 1px 4px rgba(0,0,0,.06);
    }
    .publish-row-left { display:flex; align-items:center; gap:10px; }
    .publish-icon {
      width: 36px; height: 36px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
      transition: background .3s, color .3s;
    }
    .publish-icon.on  { background:#d1fae5; color:#059669; }
    .publish-icon.off { background:#fee2e2; color:#dc2626; }
    .publish-label { font-size:.85rem; font-weight:600; color:#212529; }
    .publish-sub   { font-size:.72rem; color:#6c757d; }

    .preview-url-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #fff;
      border: 1px solid #dee2e6;
      border-radius: .75rem;
      padding: .6rem 1rem;
      width: 100%;
      box-shadow: 0 1px 4px rgba(0,0,0,.06);
      margin-bottom: 1rem;
      text-decoration: none;
    }
    .preview-url-icon {
      width: 32px; height: 32px;
      border-radius: 8px;
      background: #eff6ff;
      color: #2563eb;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
    }
    .preview-url-text { font-size:.78rem; color:#2563eb; font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .preview-url-ext  { color:#9ca3af; font-size:11px; flex-shrink:0; }

    /* ---- Phone frame ---- */
    .phone-outer { transform-origin:top center; transform:scale(var(--phone-scale,.68)); margin-bottom:var(--phone-margin,-240px); }
    .phone-wrap  { position:relative; width:448px; }
    .phone-frame { width:448px; height:820px; border:14px solid #1a1a1a; border-radius:52px; position:relative; overflow:hidden; box-shadow:0 12px 48px rgba(0,0,0,.22); transition:background .3s; }
    .phone-notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:110px; height:28px; background:#1a1a1a; border-radius:0 0 20px 20px; z-index:10; }
    .phone-btn-r  { position:absolute; right:-5px; top:110px; width:5px; height:46px; background:#1a1a1a; border-radius:0 4px 4px 0; }
    .phone-btn-l1 { position:absolute; left:-5px; top:96px;  width:5px; height:28px; background:#1a1a1a; border-radius:4px 0 0 4px; }
    .phone-btn-l2 { position:absolute; left:-5px; top:136px; width:5px; height:46px; background:#1a1a1a; border-radius:4px 0 0 4px; }
    .phone-btn-l3 { position:absolute; left:-5px; top:196px; width:5px; height:46px; background:#1a1a1a; border-radius:4px 0 0 4px; }
    .phone-inner { width:100%; height:100%; border-radius:38px; overflow:hidden; display:flex; flex-direction:column; align-items:center; transition:background .3s; }
    .phone-iframe-slot { width:420px; height:764px; border:none; flex-shrink:0; }

    /* phone-content: o preview "ao vivo" */
    .phone-content { width:420px; height:764px; flex-shrink:0; overflow-y:auto; scrollbar-width:none; display:flex; flex-direction:column; align-items:center; transition:background .3s,color .3s; }
    .phone-content::-webkit-scrollbar { display:none; }

    /* ícones do topo */
    .phone-share { position:absolute; top:36px; left:20px; z-index:5; font-size:18px; }
    .phone-globe { position:absolute; top:36px; right:20px; z-index:5; }
    .phone-globe-btn { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; border:none; cursor:pointer; }

    /* logo */
    .phone-logo-box { margin-top:56px; width:100px; height:100px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; border:3px solid rgba(255,255,255,.2); }
    .phone-logo-box img { width:100%; height:100%; object-fit:cover; }

    /* nome + descrição */
    .phone-radio-name { font-size:20px; font-weight:700; margin:12px 0 4px; text-align:center; padding:0 24px; }
    .phone-radio-desc { font-size:12px; text-align:center; padding:0 24px; margin-bottom:16px; opacity:.75; }

    /* player */
    .phone-player { width:100%; border-radius:14px 14px 0 0; padding:12px 14px; display:flex; gap:12px; align-items:center; flex-shrink:0; border:1px solid rgba(128,128,128,.2); border-bottom:none; transition:background .3s; }
    .phone-player-left { flex:1; min-width:0; }
    .phone-player-label { font-size:10px; font-weight:600; letter-spacing:.06em; opacity:.6; text-transform:uppercase; }
    .phone-player-track { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:2px 0; }
    .phone-player-status { display:flex; align-items:center; gap:4px; font-size:11px; opacity:.7; }
    .phone-player-dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
    .phone-play-btn { width:48px; height:48px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .3s; }
    .phone-play-icon { width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:16px solid white; margin-left:3px; }
    .phone-vol-bar { flex:1; height:4px; border-radius:2px; background:rgba(128,128,128,.25); }
    .phone-vol-fill { width:65%; height:100%; border-radius:2px; transition:background .3s; }

    /* redes sociais */
    .phone-socials { display:flex; gap:14px; margin-bottom:18px; flex-shrink:0; }
    .phone-social-btn { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .3s; }

    /* links */
    .phone-links-area { width:calc(100% - 32px); display:flex; flex-direction:column; gap:10px; flex-shrink:0; }
    .phone-link-btn { width:100%; border-radius:32px; padding:13px; text-align:center; font-size:15px; font-weight:600; border:none; cursor:pointer; transition:background .3s,color .3s; }
    .phone-link-empty { font-size:14px; font-style:italic; text-align:center; padding:10px 0; opacity:.5; }

    /* footer */
    .phone-footer { font-size:11px; padding:20px 0 16px; text-align:center; flex-shrink:0; margin-top:auto; opacity:.5; }

    /* ---- Responsivo ---- */
    @media (max-width: 900px) {
      .page-layout { grid-template-columns:1fr; }
      .col-preview { order:-1; position:static; border-left:none; border-bottom:1px solid #dee2e6; min-height:auto; padding:1.25rem 1rem 2rem; }
      .col-form { order:1; }
      .phone-outer { transform:scale(var(--phone-scale-mobile,.75)); margin-bottom:var(--phone-margin-mobile,-200px); }
    }
  </style>
@endsection
@include('includes/header')
@include('includes/topSite')
<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_startpage_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="javascript:void(0)">{{ __('general.header_nav_web') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('site.menu_item_3_sub_7') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    @if (\Session::has('success'))
        <div class="alert alert-primary alert-icon alert-dismissible fade show" role="alert">
            <b>{!! \Session::get('success') !!}</b>
        </div>
        @php Session::forget('success'); @endphp
    @endif

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

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

  <!-- ===== COLUNA FORMULÁRIO ===== -->
  <div class="col-form">

    <!-- Logotipo -->
    <div class="card mb-3">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-start mb-3">
          <div>
            <h5 class="card-title mb-1">{{ __('site.pagelink_logo_title') }}</h5>
            <p class="text-muted small mb-0">{{ __('site.pagelink_logo_desc') }}</p>
          </div>
          <button class="btn btn-primary btn-sm" onclick="saveAll(this)">{{ __('site.action_save') }}</button>
        </div>

        <input type="file" id="logo-file-input" accept="image/*" onchange="onLogoFileChange(this)" style="display:none">

        <!-- Sem logo -->
        <div id="logo-empty-state" class="d-flex align-items-center gap-3">
          <div style="width:72px;height:72px;border:2px dashed #ced4da;border-radius:50%;background:#f8f9fa;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <i class="fa-regular fa-image text-secondary" style="font-size:1.6rem"></i>
          </div>
          <div>
            <p class="mb-1 text-muted small">{{ __('site.pagelink_logo_empty') }}</p>
            <button class="btn btn-outline-secondary btn-sm" onclick="document.getElementById('logo-file-input').click()">
              <i class="fa-solid fa-pen me-1"></i> {{ __('site.action_edit_label') }}
            </button>
          </div>
        </div>

        <!-- Com logo -->
        <div id="logo-loaded-state" class="d-none">
          <div class="d-flex align-items-center gap-3">
            <!-- Thumb com overlay de loading -->
            <div style="width:72px;height:72px;border-radius:50%;overflow:hidden;background:#e9ecef;flex-shrink:0;position:relative;">
              <img id="thumb-sq" src="" alt="Logo" style="width:100%;height:100%;object-fit:cover;">
              <div id="logo-removing-overlay" style="display:none;position:absolute;inset:0;background:rgba(0,0,0,.5);align-items:center;justify-content:center;border-radius:50%;">
                <i class="fa-solid fa-rotate fa-spin" style="color:#fff;font-size:18px;"></i>
              </div>
            </div>
            <div id="logo-actions">
              <div id="logo-upload-status" class="small text-muted mb-1"></div>
              <button id="btn-logo-edit" class="btn btn-outline-secondary btn-sm d-block mb-2" onclick="document.getElementById('logo-file-input').click()">
                <i class="fa-solid fa-pen me-1"></i> {{ __('site.action_edit_label') }}
              </button>
              <button id="btn-logo-remove" class="btn btn-link btn-sm text-danger p-0" onclick="clearLogo()">
                <i class="fa-solid fa-trash me-1"></i> {{ __('site.btn_remove') }}
              </button>
            </div>
          </div>
        </div>
		
		
		
		<div class="mb-3 pt-2 mt-3 border-top">
        <h5 class="card-title mb-1">{{ __('site.menu_item_2') }}</h5>
        <p class="text-muted small mb-3">{{ __('site.pagelink_general_desc') }}</p>
        <div class="mb-3">
          <label class="form-label d-flex justify-content-between">
            {{ __('site.pagelink_input_name') }}
            <span class="text-muted" style="font-size:0.75rem"><span id="nome-count">14</span>/150</span>
          </label>
          <input type="text" class="form-control" id="input-nome" value="{{ $curPage->name ?? __('site.pagelink_default_name') }}" maxlength="150" oninput="updatePreview()" placeholder="{{ __('site.pagelink_input_name') }}">
        </div>
        <div class="mb-3">
          <label class="form-label d-flex justify-content-between">
            {{ __('site.label_description') }}
            <span class="text-muted" style="font-size:0.75rem"><span id="desc-count">0</span>/255</span>
          </label>
          <textarea class="form-control" id="input-desc" rows="2" maxlength="255" placeholder="{{ __('site.pagelink_input_desc_place') }}" oninput="updatePreview()">{{ $curPage->description ?? __('site.pagelink_default_desc_radio') }}</textarea>
        </div>
		
		 <div class="form-check form-switch mb-0">
          <input class="form-check-input" type="checkbox" role="switch" id="switchPlayer"
		  {{ ($curPage->player ?? 1) ? 'checked' : '' }}
		  onchange="togglePlayerPreview(this.checked)">
          <label class="form-check-label fw-medium" for="switchPlayer">{{ __('site.pagelink_show_player') }}</label>
        </div>
      </div>
	  
	   <div class="mb-3 border-top pt-2">
        <h5 class="card-title mb-3">{{ __('site.pagelink_colors_title') }}</h5>
        <div class="mb-3">
          <label class="form-label">{{ __('site.pagelink_theme_label') }}</label>
          <div class="d-flex gap-2">
            <button class="btn {{ ($curPage->theme ?? 'light') === 'light' ? 'btn-primary' : 'btn-outline-secondary' }} btn-sm"
			  id="theme-light" onclick="setTheme('light')">{{ __('site.pagelink_theme_light') }}</button>

			<button class="btn {{ ($curPage->theme ?? 'light') === 'dark' ? 'btn-primary' : 'btn-outline-secondary' }} btn-sm"
			  id="theme-dark" onclick="setTheme('dark')">{{ __('site.pagelink_theme_dark') }}</button>
          </div>
        </div>
        <div class="mb-0">
          <label class="form-label">{{ __('site.pagelink_color_label') }}</label>
          <div class="swatch-wrap">
            <div class="swatch-none {{ (!isset($curPage) || $curPage->color == 'none' ? 'selected' : '') }}" id="swatch-none" data-color="" onclick="selectColor('',this)" title="{{ __('site.pagelink_color_default') }}"></div>
            <div class="swatch {{ ($curPage->color == 'red' ? 'selected' : '') }}" style="background:#e53935" data-color="#e53935" onclick="selectColor('#e53935',this)"></div>
            <div class="swatch {{ ($curPage->color == 'orange' ? 'selected' : '') }}" style="background:#fb8c00" data-color="#fb8c00" onclick="selectColor('#fb8c00',this)"></div>
            <div class="swatch {{ ($curPage->color == 'green' ? 'selected' : '') }}" style="background:#43a047" data-color="#43a047" onclick="selectColor('#43a047',this)"></div>
            <div class="swatch {{ ($curPage->color == 'blue' ? 'selected' : '') }}" style="background:#1e88e5" data-color="#1e88e5" onclick="selectColor('#1e88e5',this)"></div>
            <div class="swatch {{ ($curPage->color == 'cyano' ? 'selected' : '') }}" style="background:#00897b" data-color="#00897b" onclick="selectColor('#00897b',this)"></div>
            <div class="swatch {{ ($curPage->color == 'purple' ? 'selected' : '') }}" style="background:#8e24aa" data-color="#8e24aa" onclick="selectColor('#8e24aa',this)"></div>
            <div class="swatch {{ ($curPage->color == 'pink' ? 'selected' : '') }}" style="background:#e91e8c" data-color="#e91e8c" onclick="selectColor('#e91e8c',this)"></div>
			<div class="swatch {{ ($curPage->color == 'yellow' ? 'selected' : '') }}" style="background:#bdad27" data-color="#bdad27" onclick="selectColor('#bdad27',this)"></div>
          </div>
        </div>
      </div>
	  
	  
		
      </div>
    </div>



    <!-- Redes Sociais -->
    <div class="card mb-3">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-start mb-3">
          <div>
            <h5 class="card-title mb-1">{{ __('site.pagelink_social_title') }}</h5>
            <p class="text-muted small mb-0">{{ __('site.pagelink_social_desc') }}</p>
          </div>
          <a href="/settings" class="small text-primary">{{ __('site.pagelink_social_manage') }} <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
        </div>
		
		@foreach($redes as $i => $rede)
		<div class="social-row {{ !$rede['active'] ? 'disabled-item' : '' }}"
			 data-id="{{ $i }}"
			 data-slug="{{ $rede['slug'] }}"
			 id="social-row-{{ $i }}"
			 {{ !$rede['active'] ? 'class=disabled-item' : '' }}>
		  <div class="social-info">
			<i class="{{ $rede['icon'] }} fa-fw" style="font-size:20px;width:24px;text-align:center"></i>
			<span class="small">{{ $rede['value'] }}</span>
		  </div>
		  <div class="form-check form-switch mb-0">
			<input class="form-check-input" type="checkbox" role="switch"
			  {{ $rede['active'] ? 'checked' : '' }}
			  onchange="toggleSocial({{ $i }}, '{{ $rede['slug'] }}', this.checked)">
		  </div>
		</div>
		@endforeach
		
      </div>
    </div>

    <!-- Links -->
    <div class="card mb-3">
      <div class="card-body">
        <h5 class="card-title mb-1">{{ __('site.menu_item_3_sub_10') }}</h5>
        <p class="text-muted small mb-3">{{ __('site.pagelink_links_desc') }}</p>
        <hr class="mt-0">
        <div id="links-container"></div>
        <div class="d-flex justify-content-between align-items-center mt-2">
          <button class="btn btn-primary btn-sm" onclick="addLink()">
            <i class="fa-solid fa-plus me-1"></i> {{ __('site.page_links_new_h1') }}
          </button>
          <button class="btn btn-primary" onclick="saveAll(this)">{{ __('site.action_save') }}</button>
        </div>
      </div>
    </div>

  </div><!-- /col-form -->

  <!-- ===== COLUNA PREVIEW ===== -->
  <div class="col-preview">

    <!-- Topo: publicar + URL — largura total da coluna -->
    <div class="preview-header">

      <!-- Linha de publicar -->
      <div class="publish-row">
        <div class="publish-row-left">
          <div class="publish-icon on" id="publish-icon">
            <i class="fa-solid fa-wifi" id="publish-icon-i"></i>
          </div>
          <div>
            <div class="publish-label" id="publish-label">{{ __('site.pagelink_publish_label') }}</div>
            <div class="publish-sub" id="publish-sub">{{ __('site.pagelink_publish_sub') }}</div>
          </div>
        </div>
        <div class="d-flex align-items-center gap-2">
          <span class="publish-sub" id="publish-switch-label" style="font-weight:500;color:#212529">{{ __('site.pagelink_publish_switch') }}</span>
          <div class="form-check form-switch mb-0">
            <input class="form-check-input" type="checkbox" role="switch" id="publish-switch"
			  {{ ($curPage->status ?? 1) ? 'checked' : '' }}
			  style="cursor:pointer; width:2.5em; height:1.25em;"
			  onchange="togglePublish(this)">
          </div>
        </div>
      </div>

      <!-- URL badge -->
      <a href="https://{{ $siteData->domain }}/links" class="preview-url-badge" target="_blank">
        <div class="preview-url-icon">
          <i class="fa-solid fa-link"></i>
        </div>
        <span class="preview-url-text">https://{{ $siteData->domain }}/links</span>
        <i class="fa-solid fa-arrow-up-right-from-square preview-url-ext"></i>
      </a>

    </div>

    <!-- Phone: centralizado -->
    <div style="display:flex;justify-content:center;width:100%">

      <div class="phone-outer">
        <div class="phone-wrap">
          <div class="phone-btn-r"></div>
          <div class="phone-btn-l1"></div>
          <div class="phone-btn-l2"></div>
          <div class="phone-btn-l3"></div>
          <div class="phone-frame" id="phone-frame">
            <div class="phone-notch"></div>
            <div class="phone-inner" id="phone-inner">
              <div class="phone-globe">
                <button class="phone-globe-btn" id="phone-globe-btn">
                  <i class="fa fa-share-nodes"></i>
                </button>
              </div>

              <!-- Em produção substitua por: <iframe src="..." class="phone-iframe-slot"></iframe> -->
              <div class="phone-content" id="phone-content">

                <!-- Logo -->
                <div class="phone-logo-box" id="phone-logo-box">
                  <div id="phone-logo-empty" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem;opacity:.4">
                    <i class="fa-regular fa-image"></i>
                  </div>
                  <img id="phone-logo-img" src="" alt="Logo" style="width:100%;height:100%;object-fit:cover;display:none">
                </div>

                <!-- Nome e descrição -->
                <div class="phone-radio-name" id="preview-name">{{ $curPage->name ?? __('site.pagelink_default_name') }}</div>
                <div class="phone-radio-desc" id="preview-desc">{{ $curPage->description ?? __('site.pagelink_default_desc') }}</div>

                <!-- Player (somente para rádio) -->
				@if(isset($siteData->stream_port))
                <div id="phone-player-wrap" style="width:calc(100% - 32px);margin-bottom:16px;flex-shrink:0;border:1px solid rgba(128,128,128,.2);border-radius:14px;overflow:hidden;">
                  <div class="phone-player" id="phone-player" style="border:none;border-radius:0;margin-bottom:0;">
                    <!-- Thumb -->
                    <div style="width:52px;height:52px;border-radius:10px;background:rgba(128,128,128,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                      <i class="fa-solid fa-music" style="font-size:16px;opacity:.4"></i>
                    </div>
                    <!-- Info -->
                    <div class="phone-player-left">
                      <div class="phone-player-label">{{ __('radio.home_player_current') }}</div>
                      <div class="phone-player-track">{{ __('site.pagelink_player_click') }}</div>
                      <div class="phone-player-status">
                        <span class="phone-player-dot"></span>
                        <span>{{ __('site.pagelink_player_onair') }}</span>
                      </div>
                    </div>
                    <!-- Play + Volume empilhados -->
                    <div style="display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;">
                      <button class="phone-play-btn" id="phone-play-btn">
                        <div class="phone-play-icon"></div>
                      </button>
                      <!-- Volume abaixo do play -->
                      <div id="phone-vol-wrap" style="display:flex;align-items:center;gap:5px;width:72px;">
                        <i class="fa-solid fa-volume-low" style="font-size:10px;opacity:.4;flex-shrink:0;"></i>
                        <div class="phone-vol-bar" style="flex:1;height:3px;">
                          <div class="phone-vol-fill" id="phone-vol-fill"></div>
                        </div>
                        <i class="fa-solid fa-volume-high" style="font-size:10px;opacity:.4;flex-shrink:0;"></i>
                      </div>
                    </div>
                  </div>
                </div>
				@endif

                <div class="phone-socials" id="preview-socials" style="display: flex;"><div class="phone-social-btn" style="background:#ffffff;color:#212529"><i class="fa-brands fa-facebook-f" style="font-size:18px"></i></div><div class="phone-social-btn" style="background:#ffffff;color:#212529"><i class="fa-brands fa-instagram" style="font-size:18px"></i></div><div class="phone-social-btn" style="background:#ffffff;color:#212529"><i class="fa-brands fa-whatsapp" style="font-size:18px"></i></div></div>

                <!-- Links -->
                <div class="phone-links-area" id="preview-links">
                  <div class="phone-link-empty">{{ __('site.pagelink_links_empty') }}</div>
                </div>

                <div class="phone-footer">by <strong>BRASCAST</strong></div>
              </div>
            </div>
          </div><!-- /phone-wrap -->
      </div><!-- /phone-outer -->
    </div><!-- /phone center wrapper -->

  </div><!-- /col-preview -->

</div>




</div>
<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script>
 let currentTheme = '{{ $curPage->theme ?? 'light' }}';
  let currentColor = '{{ $hexColor }}';  // hex ou '' para padrão

  /* Paleta de temas */
  const THEMES = {
    light: { bg:'#f1f1f1', text:'#212529', textSub:'#6c757d', playerBg:'#ffffff', volFill:'#adb5bd', linkBg:'#ffffff', linkColor:'#212529', globeBg:'#e9ecef', globeColor:'#495057', sharColor:'#495057' },
    dark:  { bg:'#1a1a1a', text:'#f8f9fa', textSub:'#adb5bd', playerBg:'#2a2a2a', volFill:'#6c757d', linkBg:'#2a2a2a', linkColor:'#f8f9fa', globeBg:'rgba(255,255,255,.12)', globeColor:'#f8f9fa', sharColor:'#f8f9fa' },
  };

  /* Cor de acento: se vazia usa azul padrão */
  function accentColor() {
    if (currentColor) return currentColor;
    return currentTheme === 'dark' ? '#6a6a6a' : '#000000';
  }

  /* ======================================================
     UPLOAD DE LOGO — envia ao servidor
  ====================================================== */
  function onLogoFileChange(input) {
    const file = input.files[0];
    if (!file) return;
    if (file.size > 2 * 1024 * 1024) { alert('A imagem deve ter no máximo 2MB.'); input.value=''; return; }

    /* Preview local imediato */
    const reader = new FileReader();
    reader.onload = (e) => applyLogo(e.target.result);
    reader.readAsDataURL(file);

    /* Envio ao servidor — altere a rota abaixo */
    uploadLogo(file);
  }

  async function uploadLogo(file) {
    const statusEl = document.getElementById('logo-upload-status');
    statusEl.innerHTML = '<span class="text-warning"><i class="fa-solid fa-rotate me-1"></i>Enviando...</span>';

    const formData = new FormData();
    formData.append('logo', file);  // campo 'logo' para o backend

    try {
      /* ↓ ALTERE A ROTA AQUI */
      const response = await fetch('/site/pagelinkAssetDo', {
        method: 'POST',
        // headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
        body: formData,
      });

      if (!response.ok) throw new Error('Erro ' + response.status);

      const data = await response.json();
      statusEl.innerHTML = '<span class="text-success"><i class="fa-solid fa-circle-check me-1"></i>Salvo!</span>';
      setTimeout(() => statusEl.innerHTML = '', 3000);

      /* Se o servidor retornar a URL final, atualize o preview com ela */
      if (data.url) applyLogoFromUrl(data.url);

    } catch (err) {
      statusEl.innerHTML = '<span class="text-danger"><i class="fa-solid fa-circle-exclamation me-1"></i>Erro ao enviar</span>';
      console.error('Erro upload logo:', err);
    }
  }

  function applyLogo(src) {
    document.getElementById('thumb-sq').src = src;
    const img = document.getElementById('phone-logo-img');
    img.src = src+'?_t='+Date.now(); img.style.display = 'block';
    document.getElementById('phone-logo-empty').style.display = 'none';
    document.getElementById('logo-empty-state').classList.add('d-none');
    document.getElementById('logo-loaded-state').classList.remove('d-none');
  }

  function applyLogoFromUrl(url) {
    document.getElementById('thumb-sq').src = url+'?_t='+Date.now();
    document.getElementById('phone-logo-img').src = url+'?_t='+Date.now();
  }
  
  
    async function clearLogo() {
    const thumb      = document.getElementById('thumb-sq');
    const currentSrc = thumb.src;
    if (!currentSrc) return;

    const filename = currentSrc.split('/').pop();

    // Bloqueia interação — mostra loading
    const overlay   = document.getElementById('logo-removing-overlay');
    const btnEdit   = document.getElementById('btn-logo-edit');
    const btnRemove = document.getElementById('btn-logo-remove');
    const fileInput = document.getElementById('logo-file-input');

    overlay.style.display   = 'flex';
    btnEdit.disabled         = true;
    btnRemove.disabled       = true;
    fileInput.disabled       = true;
    document.getElementById('logo-upload-status').innerHTML =
      '<span class="text-muted"><i class="fa-solid fa-rotate fa-spin me-1"></i>Removendo...</span>';

    try {
      const fd = new FormData();
      const response = await fetch('/site/pagelinkAssetDo/remove', {
        method: 'POST',
        headers: { 'Accept': 'application/json' },
        body: fd,
      });

      if (!response.ok) throw new Error('HTTP ' + response.status);

      fileInput.value = '';
      thumb.src = '';
      const img = document.getElementById('phone-logo-img');
      img.src = ''; img.style.display = 'none';
      document.getElementById('phone-logo-empty').style.display = 'flex';
      document.getElementById('logo-loaded-state').classList.add('d-none');
      document.getElementById('logo-empty-state').classList.remove('d-none');
      document.getElementById('logo-upload-status').innerHTML = '';

    } catch (err) {
      // Erro: restaura UI com mensagem
      console.error('Erro ao remover logo:', err);
      document.getElementById('logo-upload-status').innerHTML =
        '<span class="text-danger"><i class="fa-solid fa-circle-exclamation me-1"></i>Erro ao remover</span>';
      setTimeout(function() {
        document.getElementById('logo-upload-status').innerHTML = '';
      }, 3000);

    } finally {
      // Sempre restaura os controles se ainda estiver no estado "com logo"
      overlay.style.display  = 'none';
      btnEdit.disabled        = false;
      btnRemove.disabled      = false;
      fileInput.disabled      = false;
    }
  }
  
  

  function applyPhoneTheme() {
    try {
      const t = THEMES[currentTheme];
      const acc = accentColor();

      const content  = document.getElementById('phone-content');
      const frame    = document.getElementById('phone-frame');
      const inner    = document.getElementById('phone-inner');
      const player   = document.getElementById('phone-player');
      const playBtn  = document.getElementById('phone-play-btn');
      const volFill  = document.getElementById('phone-vol-fill');
      const globeBtn = document.getElementById('phone-globe-btn');
      const shareIco = document.getElementById('phone-share-icon');

      if (frame)    frame.style.background    = t.bg;
      if (inner)    inner.style.background    = t.bg;
      if (content)  { content.style.background = t.bg; content.style.color = t.text; }
      if (player)   player.style.background   = t.playerBg;
      const volWrap = document.getElementById('phone-vol-wrap');
      if (volWrap)  volWrap.style.background  = t.playerBg;
      if (playBtn)  playBtn.style.background  = acc;
      if (volFill)  volFill.style.background  = acc;
      if (globeBtn) { globeBtn.style.background = t.globeBg; globeBtn.style.color = t.globeColor; }
      if (shareIco) shareIco.style.color       = t.sharColor;

      renderPreviewLinks();
      renderPreviewSocials();

      const emptyEl = document.querySelector('.phone-link-empty');
      if (emptyEl) emptyEl.style.color = t.textSub;

      const logoBox = document.getElementById('phone-logo-box');
      if (logoBox) logoBox.style.borderColor = acc + '44';

      const footer = document.querySelector('.phone-footer strong');
      if (footer) footer.style.color = acc;

    } catch(e) {
      console.error('applyPhoneTheme error:', e);
    }
  }

  function setTheme(t) {
    currentTheme = t;
    document.getElementById('theme-light').className = t==='light' ? 'btn btn-primary btn-sm' : 'btn btn-outline-secondary btn-sm';
    document.getElementById('theme-dark').className  = t==='dark'  ? 'btn btn-primary btn-sm' : 'btn btn-outline-secondary btn-sm';
    applyPhoneTheme();
  }

  function selectColor(color, el) {
    currentColor = color;
    document.querySelectorAll('.swatch,.swatch-none').forEach(s => s.classList.remove('selected'));
    el.classList.add('selected');
    applyPhoneTheme();
  }

  /* ======================================================
     PREVIEW — NOME E DESCRIÇÃO
  ====================================================== */
  function updatePreview() {
    const nome = document.getElementById('input-nome').value;
    const desc = document.getElementById('input-desc').value;
    document.getElementById('nome-count').textContent = nome.length;
    document.getElementById('desc-count').textContent = desc.length;
    document.getElementById('preview-name').textContent = nome.trim() || 'Cidade Web Rock';
    document.getElementById('preview-desc').textContent = desc.trim() || 'Descrição da seu site';
  }

  /* ======================================================
     VERIFICAR SE LOGO JÁ EXISTE NO SERVIDOR
  ====================================================== */
  async function checkLogoExists(url) {
    try {
      const res = await fetch(url+'?_t='+Date.now(), { method: 'HEAD' });
      if (res.ok) applyLogo(url);
    } catch (_) {
      // sem logo — mantém estado vazio
    }
  }

  checkLogoExists('/assets-page/{{ $siteData->stream_port }}.png'+'?_t='+Date.now());

  /* ======================================================
     LINKS
  ====================================================== */
let links = @json($allLinks);
let nextId = {{ $allLinks->isNotEmpty() ? $allLinks->max('id') + 1 : 1 }};
let _tempId = -1;
  function isValidUrl(str) {
    if (!str||!str.trim()) return false;
    try { const u=new URL(str.trim()); return u.protocol==='http:'||u.protocol==='https:'; } catch { return false; }
  }
  function esc(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

  function getKey(l) { return l.id !== null ? l.id : l._tid; }
function findLink(key) { return links.find(function(l) { return getKey(l) == key; }); }

function renderLinks() {
    const c = document.getElementById('links-container');
    if (links.length === 0) {
        c.innerHTML = '<p class="text-muted small fst-italic text-center py-2">Nenhum link adicionado ainda.</p>';
        renderPreviewLinks(); return;
    }
    c.innerHTML = links.map(function(l) {
        const key = getKey(l);
        return `
        <div class="link-item${l.ativo ? '' : ' disabled-item'}" id="item-${key}">
            <div class="row g-2 align-items-center mb-2">
                <div class="col-auto row-label">Título</div>
                <div class="col">
                    <input type="text" class="form-control form-control-sm" id="titulo-${key}"
                        value="${esc(l.titulo)}" placeholder="Ex: Nosso site"
                        oninput="updateField(${key},'titulo',this.value)">
                    <div class="invalid-feedback">O título é obrigatório.</div>
                </div>
                <div class="col-auto">
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" role="switch"
                            ${l.ativo ? 'checked' : ''}
                            onchange="updateField(${key},'ativo',this.checked)">
                    </div>
                </div>
            </div>
            <div class="row g-2 align-items-start">
                <div class="col-auto row-label">Link</div>
                <div class="col">
                    <input type="text" class="form-control form-control-sm" id="url-${key}"
                        value="${esc(l.url)}" placeholder="https://exemplo.com"
                        oninput="updateField(${key},'url',this.value)"
                        onblur="validateUrlField(${key})">
                    <div class="invalid-feedback">URL inválida. Use http:// ou https://</div>
                </div>
                <div class="col-auto">
                    <button class="btn btn-outline-danger btn-sm" onclick="removeLink(${key})">
                        <i class="fa-solid fa-trash"></i>
                    </button>
                </div>
            </div>
        </div>`;
    }).join('');
    renderPreviewLinks();
}

  function renderPreviewLinks() {
    const area = document.getElementById('preview-links');
    const ativos = links.filter(l=>l.ativo&&l.titulo.trim());
    const isLight  = currentTheme === 'light';
    const hasColor = currentColor !== '';
    const btnBg    = hasColor ? currentColor : (isLight ? '#ffffff' : '#2c2c2c');
    const btnColor = hasColor ? '#ffffff'    : (isLight ? '#212529' : '#ffffff');
    if (ativos.length===0) {
      area.innerHTML = '<div class="phone-link-empty" style="color:#adb5bd">Nenhum link adicionado</div>';
    } else {
      area.innerHTML = ativos.map(l => `
        <button class="phone-link-btn" style="background:${btnBg};color:${btnColor};">${esc(l.titulo)}</button>`
      ).join('');
    }
  }

  function updateField(key, field, value) {
    const l = findLink(key); if (!l) return;
    l[field] = value;
    if (field === 'titulo') document.getElementById('titulo-' + key)?.classList.remove('is-invalid');
    if (field === 'url')    document.getElementById('url-' + key)?.classList.remove('is-invalid');
    if (field === 'ativo')  document.getElementById('item-' + key)?.classList.toggle('disabled-item', !value);
    renderPreviewLinks();
}

  function validateUrlField(key) {
    const l = findLink(key); if (!l || !l.url.trim()) return true;
    const valid = isValidUrl(l.url);
    document.getElementById('url-' + key)?.classList.toggle('is-invalid', !valid);
    return valid;
}

  function validateAll() {
    let ok = true;
    links.forEach(function(l) {
        const key = getKey(l);
        const emptyTitle = !l.titulo.trim();
        const emptyUrl   = !l.url.trim();
        if (emptyTitle && emptyUrl) return; // ignora linha vazia
        if (emptyTitle) { document.getElementById('titulo-' + key)?.classList.add('is-invalid'); ok = false; }
        if (emptyUrl || !isValidUrl(l.url)) { document.getElementById('url-' + key)?.classList.add('is-invalid'); ok = false; }
    });
    return ok;
}

  function addLink() {
    links.push({ id: null, _tid: _tempId--, titulo: '', url: '', ativo: true });
    renderLinks();
    document.querySelector('#links-container .link-item:last-child input')?.focus();
}
  function removeLink(key) {
    links = links.filter(function(l) { return getKey(l) != key; });
    renderLinks();
}
  
  
  const SOCIAL_ICONS = {
    facebook:  'fa-brands fa-facebook-f',
    instagram: 'fa-brands fa-instagram',
    whatsapp:  'fa-brands fa-whatsapp',
    youtube:   'fa-brands fa-youtube',
    tiktok:    'fa-brands fa-tiktok',
    twitter:   'fa-brands fa-x-twitter',
    telegram:  'fa-brands fa-telegram',
    spotify:   'fa-brands fa-spotify',
  };

  function toggleSocial(id, slug, active) {
    // Opacidade no form
    const row = document.getElementById('social-row-' + id);
    if (row) row.classList.toggle('disabled-item', !active);
    // Atualiza preview
    renderPreviewSocials();
  }

  function renderPreviewSocials() {
    const area = document.getElementById('preview-socials');
    if (!area) return;

    const isLight  = currentTheme === 'light';
    const hasColor = currentColor !== '';
    const btnBg    = hasColor ? currentColor : (isLight ? '#ffffff' : '#2c2c2c');
    const btnColor = hasColor ? '#ffffff'    : (isLight ? '#212529' : '#ffffff');

    // Lê todos os .social-row ativos do form
    const rows = document.querySelectorAll('.social-row[data-slug]');
    let html = '';
    rows.forEach(function(row) {
      const toggle = row.querySelector('input[type=checkbox]');
      if (!toggle || !toggle.checked) return; // pula desabilitados
      const slug = row.dataset.slug;
      const icon = SOCIAL_ICONS[slug] || 'fa-solid fa-share-nodes';
      html += '<div class="phone-social-btn" style="background:' + btnBg + ';color:' + btnColor + '">' +
              '<i class="' + icon + '" style="font-size:18px"></i>' +
              '</div>';
    });

    area.innerHTML = html || '';
    area.style.display = html ? 'flex' : 'none';
  }

  /* ======================================================
     TOGGLE PLAYER NO PREVIEW
  ====================================================== */
  function togglePlayerPreview(show) {
    const wrap = document.getElementById('phone-player-wrap');
    if (wrap) wrap.style.display = show ? 'block' : 'none';
  }

  /* ======================================================
     PUBLICAR / DESPUBLICAR
  ====================================================== */
  function applyPublishUI(published) {
    const icon    = document.getElementById('publish-icon');
    const iconI   = document.getElementById('publish-icon-i');
    const label   = document.getElementById('publish-label');
    const sub     = document.getElementById('publish-sub');
    const swLabel = document.getElementById('publish-switch-label');

    if (published) {
      icon.className      = 'publish-icon on';
      iconI.className     = 'fa-solid fa-wifi';
      label.textContent   = 'Start page publicada';
      sub.textContent     = 'Acessível através dos seus domínios';
      swLabel.textContent = 'Publicada';
    } else {
      icon.className      = 'publish-icon off';
      iconI.className     = 'fa-solid fa-eye-slash';
      label.textContent   = 'Start page despublicada';
      sub.textContent     = 'A start page não está visível ao público';
      swLabel.textContent = 'Despublicada';
    }
  }

  async function togglePublish(checkbox) {
    const published = checkbox.checked;

    checkbox.checked = !published;

    const result = await Swal.fire({
        title: published ? 'Publicar Start page?' : 'Despublicar Start page?',
        text: published
            ? 'A Start page ficará visível ao público.'
            : 'A Start page ficará oculta ao público.',
        showCancelButton: true,
        confirmButtonText: published ? 'Sim, publicar' : 'Sim, despublicar',
        cancelButtonText: 'Cancelar',
        confirmButtonColor: published ? '#059669' : '#dc2626',
        cancelButtonColor: '#6c757d',
    });

    if (!result.isConfirmed) return;

    checkbox.checked = published;
    checkbox.disabled = true;
    applyPublishUI(published);

    try {
        const response = await fetch('/site/pagelinkPublish', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            },
            body: JSON.stringify({ published }),
        });

        if (!response.ok) throw new Error('HTTP ' + response.status);

        Swal.fire({
            toast: true,
            position: 'top-end',
            icon: 'success',
            title: published ? 'Página publicada!' : 'Página despublicada!',
            showConfirmButton: false,
            timer: 2000,
        });

    } catch (err) {
        console.error('Erro ao alterar publicação:', err);
        checkbox.checked = !published;
        applyPublishUI(!published);

        Swal.fire({
            toast: true,
            position: 'top-end',
            icon: 'error',
            title: 'Erro ao alterar publicação',
            showConfirmButton: false,
            timer: 3000,
        });
    } finally {
        checkbox.disabled = false;
    }
}


  function collectPayload() {
    const socialNetworks = Array.from(document.querySelectorAll('.social-row[data-slug]')).map(function(row) {
    return {
        id:     parseInt(row.dataset.id),
        slug:   row.dataset.slug,
        active: row.querySelector('input[type=checkbox]').checked,
    };
});

    return {
      name:            document.getElementById('input-nome').value.trim(),
      description:     document.getElementById('input-desc').value.trim(),
      theme:           currentTheme,
      color:           currentColor,
      show_player:     document.getElementById('switchPlayer').checked,
      links:           links .filter(function(l) { return l.titulo.trim() !== '' && l.url.trim() !== ''; }) .map(function(l) { return { id: l.id, title: l.titulo, url: l.url, active: l.ativo }; }),
      social_networks: socialNetworks,
    };
  }

  async function saveAll(btn) {
	links = links.filter(function(l) {
		return l.titulo.trim() !== '' || l.url.trim() !== '';
	});
	renderLinks();  
	  
    if (!validateAll()) {
      btn.textContent = 'Corrija os erros';
      btn.classList.replace('btn-primary', 'btn-danger');
      setTimeout(() => { btn.textContent = 'Salvar'; btn.classList.replace('btn-danger', 'btn-primary'); }, 2000);
      return;
    }

    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Salvando...';

    try {
      const response = await fetch('/site/pagelinkDo', {
        method:  'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept':       'application/json',
        },
        body: JSON.stringify(collectPayload()),
      });
	  
      if (!response.ok) throw new Error('HTTP ' + response.status);

      btn.innerHTML = '<i class="fa-solid fa-check me-1"></i> Salvo!';
      setTimeout(() => {
        btn.innerHTML = 'Salvar';
        btn.disabled = false;
      }, 2000);

    } catch (err) {
      console.error('Erro ao salvar:', err);
      btn.innerHTML = '<i class="fa-solid fa-circle-exclamation me-1"></i> Erro ao salvar';
      btn.classList.replace('btn-primary', 'btn-danger');
      setTimeout(() => {
        btn.innerHTML = 'Salvar';
        btn.classList.replace('btn-danger', 'btn-primary');
        btn.disabled = false;
      }, 2500);
    }
  }

  function saveLinks(btn) { saveAll(btn); }
  function handleSave(btn) { saveAll(btn); }



  /* ======================================================
     SCALE DINÂMICO DO CELULAR
  ====================================================== */
  function calcPhoneScale() {
    const col = document.querySelector('.col-preview'); if (!col) return;
    const isMobile = window.innerWidth <= 900;
    const padding  = isMobile ? 32 : 48; // 1rem*2 mobile, 1.5rem*2 desktop
    const available = col.offsetWidth - padding;
    const scale = Math.min(available / 448, isMobile ? 0.98 : 0.84);
    const margin = (820 * scale - 820) / 2 - 60;
    const root = document.documentElement;
    if (isMobile) { root.style.setProperty('--phone-scale-mobile',scale); root.style.setProperty('--phone-margin-mobile',margin+'px'); }
    else           { root.style.setProperty('--phone-scale',scale);        root.style.setProperty('--phone-margin',margin+'px'); }
  }

  /* ======================================================
     INIT
  ====================================================== */
  calcPhoneScale();
  window.addEventListener('resize', calcPhoneScale);
  applyPhoneTheme();
  renderLinks();
  renderPreviewSocials();
  togglePlayerPreview({{ ($curPage->player ?? 1) ? 'true' : 'false' }});
  applyPublishUI({{ ($curPage->status ?? 1) ? 'true' : 'false' }});
</script>

</body>
</html>