@extends('layouts.admin')

@section('title', 'Theme & Design')

@section('content')
@php
  $defaults = [
    'theme_primary' => '#e11d48', 'theme_primary_dark' => '#be123c', 'theme_accent' => '#f59e0b',
    'theme_bg' => '#0d1117', 'theme_surface' => '#161b22', 'theme_surface2' => '#1c2230',
    'theme_text' => '#e6edf3', 'theme_muted' => '#9aa4b2', 'theme_border' => '#2b3440',
    'theme_header' => '#10141b', 'theme_radius' => '12px', 'theme_btn_radius' => '8px',
  ];
  $val = fn($k) => $settings[$k] ?? $defaults[$k];
@endphp

<form method="post" action="{{ route('admin.settings.update', 'theme') }}" id="themeForm">
  @csrf

  <div class="panel-grid-2">
    <div class="panel">
      <div class="panel-head"><h2>🎨 Theme Presets</h2></div>
      <p class="hint">এক ক্লিকে রঙ বদলান, অথবা নিচের পিকার দিয়ে নিজের পছন্দমতো করুন। সেভ করলেই পুরো সাইটে প্রযোজ্য হবে।</p>

      <div class="preset-row">
        <button type="button" class="preset-btn" data-preset='{"theme_primary":"#e11d48","theme_primary_dark":"#be123c","theme_accent":"#f59e0b","theme_bg":"#0d1117","theme_surface":"#161b22","theme_surface2":"#1c2230","theme_text":"#e6edf3","theme_muted":"#9aa4b2","theme_border":"#2b3440","theme_header":"#10141b"}'>
          <span class="sw" style="background:#e11d48"></span> Moviehub Red (Default)
        </button>
        <button type="button" class="preset-btn" data-preset='{"theme_primary":"#2563eb","theme_primary_dark":"#1d4ed8","theme_accent":"#22d3ee","theme_bg":"#0b1220","theme_surface":"#111a2e","theme_surface2":"#16233c","theme_text":"#e2e8f0","theme_muted":"#8fa3bf","theme_border":"#24344f","theme_header":"#0d1626"}'>
          <span class="sw" style="background:#2563eb"></span> Ocean Blue
        </button>
        <button type="button" class="preset-btn" data-preset='{"theme_primary":"#059669","theme_primary_dark":"#047857","theme_accent":"#facc15","theme_bg":"#0a1210","theme_surface":"#101b18","theme_surface2":"#152420","theme_text":"#e7f5ef","theme_muted":"#8faf9f","theme_border":"#213730","theme_header":"#0c1613"}'>
          <span class="sw" style="background:#059669"></span> Emerald
        </button>
        <button type="button" class="preset-btn" data-preset='{"theme_primary":"#d97706","theme_primary_dark":"#b45309","theme_accent":"#dc2626","theme_bg":"#f5f5f4","theme_surface":"#ffffff","theme_surface2":"#f0efe9","theme_text":"#1c1917","theme_muted":"#6b6558","theme_border":"#e3e0d8","theme_header":"#ffffff"}'>
          <span class="sw" style="background:#f5f5f4"></span> Light Modern
        </button>
        <button type="button" class="preset-btn" data-preset='{"theme_primary":"#7c3aed","theme_primary_dark":"#6d28d9","theme_accent":"#f472b6","theme_bg":"#100c18","theme_surface":"#181226","theme_surface2":"#1f1833","theme_text":"#ece9f5","theme_muted":"#a396bb","theme_border":"#2e2445","theme_header":"#140f1f"}'>
          <span class="sw" style="background:#7c3aed"></span> Purple Night
        </button>
      </div>

      <div class="panel-head" style="margin-top:14px"><h2>Colors</h2></div>

      <div class="color-grid">
        @foreach($defaults as $k => $d)
          @if(in_array($k, ['theme_radius', 'theme_btn_radius'], true)) @continue @endif
          <label class="color-field">
            <span>{{ str_replace('_', ' ', substr($k, 6)) }}</span>
            <input type="color" name="{{ $k }}" value="{{ $val($k) }}" data-color="{{ $k }}">
          </label>
        @endforeach
      </div>

      <div class="field-row" style="margin-top:14px">
        <label class="field"><span>Card / Box Radius</span>
          <input type="text" name="theme_radius" value="{{ $val('theme_radius') }}" placeholder="12px">
        </label>
        <label class="field"><span>Button Radius</span>
          <input type="text" name="theme_btn_radius" value="{{ $val('theme_btn_radius') }}" placeholder="8px">
        </label>
      </div>

      <input type="hidden" name="theme_preset" id="themePreset" value="{{ $settings['theme_preset'] ?? 'custom' }}">

      <div class="form-actions">
        <button type="submit" class="btn btn-primary btn-lg">💾 Save Theme</button>
        <a class="btn btn-ghost" href="{{ route('home') }}" target="_blank">Preview Site ↗</a>
      </div>
    </div>

    <div class="panel">
      <div class="panel-head"><h2>👁 Live Preview</h2></div>
      <div class="theme-preview" id="themePreview">
        <div class="tp-header">
          <b>Movie<span class="tp-accent">hub</span></b>
          <span class="tp-search">Search movies...</span>
        </div>
        <div class="tp-body">
          <div class="tp-card">
            <div class="tp-poster"></div>
            <div class="tp-meta"><span>1.91M</span><span>WEB-DL</span></div>
            <div class="tp-title">Sample Movie (2026)</div>
            <button class="tp-btn" type="button">⬇ Download</button>
          </div>
          <div class="tp-card">
            <div class="tp-poster"></div>
            <div class="tp-meta"><span>720.52K</span><span>Series</span></div>
            <div class="tp-title">Another Title (2026)</div>
            <button class="tp-btn" type="button">⬇ Download</button>
          </div>
        </div>
        <div class="tp-footer">© 2026 Moviehub — Developer by gsmhimelbd.com</div>
      </div>
      <p class="hint">রঙ পরিবর্তন করলে প্রিভিউ সাথে সাথে বদলাবে। সেভ না করা পর্যন্ত সাইটে প্রযোজ্য হবে না।</p>
    </div>
  </div>
</form>
@endsection

@push('scripts')
<script>
(function(){
  var form = document.getElementById('themeForm');
  var preview = document.getElementById('themePreview');
  if (!form || !preview) return;

  function apply() {
    var d = {};
    form.querySelectorAll('input[type=color]').forEach(function(i){ d[i.dataset.color] = i.value; });
    var radius = form.theme_radius.value || '12px';
    var btnR = form.theme_btn_radius.value || '8px';
    preview.style.setProperty('--primary', d.theme_primary);
    preview.style.setProperty('--primary-dark', d.theme_primary_dark);
    preview.style.setProperty('--accent', d.theme_accent);
    preview.style.setProperty('--bg', d.theme_bg);
    preview.style.setProperty('--surface', d.theme_surface);
    preview.style.setProperty('--surface-2', d.theme_surface2);
    preview.style.setProperty('--text', d.theme_text);
    preview.style.setProperty('--muted', d.theme_muted);
    preview.style.setProperty('--border', d.theme_border);
    preview.style.setProperty('--header-bg', d.theme_header);
    preview.style.setProperty('--radius', radius);
    preview.style.setProperty('--btn-radius', btnR);
  }

  form.addEventListener('input', apply);

  form.querySelectorAll('.preset-btn').forEach(function(btn){
    btn.addEventListener('click', function(){
      var colors = JSON.parse(btn.getAttribute('data-preset'));
      Object.keys(colors).forEach(function(k){
        var input = form.querySelector('[data-color="'+k+'"]');
        if (input) input.value = colors[k];
      });
      document.getElementById('themePreset').value = 'custom';
      apply();
    });
  });

  apply();
})();
</script>
@endpush