@extends('layouts.admin', ['menu' => 'pdesign'])
@section('title', 'পাবলিক পেজের নকশা')
@section('content')
@include('partials.errors')
<div class="pd-wrap">
  <section class="card pd-panel">
    <h2 class="card-title">কোন নকশা বদলাবেন</h2>
    <div class="seg pd-target"><button type="button" data-t="pc" class="on">💻 পিসি / বড় পর্দা</button><button type="button" data-t="m">📱 মোবাইল</button></div>
    <p class="muted small">পিসি আর মোবাইলের নকশা আলাদা — একটায় বদলালে অন্যটায় বদলায় না। <button type="button" class="btn btn-ghost btn-sm" id="pdCopy">পিসির নকশা এখানে কপি করুন</button></p>
    <h3 class="sub">কোন অংশ বদলাবেন</h3>
    <p class="muted small">ডানের পেজে যেকোনো অংশে চাপ দিলেও সেটা বাছাই হবে। বদলালে সাথে সাথে দেখা যাবে; "সংরক্ষণ" চাপলে সবার জন্য বসবে।</p>
    <label>অংশ
      <select id="pdEl">
        @foreach ($groups as $g => $list)
          <optgroup label="{!! htmlspecialchars($g, ENT_QUOTES, 'UTF-8') !!}">
            @foreach ($list as $k => $e)<option value="{{ $k }}">{!! htmlspecialchars($e[0], ENT_QUOTES, 'UTF-8') !!}</option>@endforeach
          </optgroup>
        @endforeach
      </select>
    </label>

    <div class="pd-grid">
      <label class="span-2">আকার — লেখা, বোতাম বা লোগো ছোট/বড় <output id="pdSizeO">১০০%</output>
        <input type="range" id="pdSize" min="50" max="250" step="5" value="100"></label>
      <div class="span-2 pd-btns">
        <span class="pd-lb">লেখা</span>
        <select id="pdBold"><option value="">মোটা/সাধারণ: থিম অনুযায়ী</option><option value="bold">মোটা (Bold)</option><option value="normal">সাধারণ (Unbold)</option></select>
        <label class="inline"><input type="checkbox" id="pdItalic"> বাঁকা</label>
        <label class="inline"><input type="checkbox" id="pdUnder"> নিচে দাগ</label>
      </div>
      <label class="span-2">ফন্ট
        <select id="pdFont">@foreach (pd_fonts() as $k => [$n])<option value="{{ $k }}">{!! $k === '' ? $n : lang_keep($n) !!}</option>@endforeach</select></label>

      <div class="span-2 pd-color" data-prop="color">
        <span class="pd-lb">লেখার রং</span>
        <div class="pd-sw">
          <button type="button" class="sw sw-def" data-c="" title="থিম অনুযায়ী">থিম</button>
          @foreach (pd_theme_colors() as $v => $n)<button type="button" class="sw" data-c="{!! e($v) !!}" title="{!! e($n) !!}" style="background:{!! e($v) !!}"></button>@endforeach
          <input type="color" class="sw-pick" value="#000000" title="নিজের পছন্দের রং">
        </div>
      </div>
      <div class="span-2 pd-color" data-prop="bg" id="pdBgRow">
        <span class="pd-lb">পটভূমির রং</span>
        <div class="pd-sw">
          <button type="button" class="sw sw-def" data-c="" title="থিম অনুযায়ী">থিম</button>
          @foreach (pd_theme_colors() as $v => $n)<button type="button" class="sw" data-c="{!! e($v) !!}" title="{!! e($n) !!}" style="background:{!! e($v) !!}"></button>@endforeach
          <input type="color" class="sw-pick" value="#ffffff" title="নিজের পছন্দের রং">
        </div>
      </div>
      <div class="span-2 pd-color" data-prop="bc" id="pdBcRow">
        <span class="pd-lb">বর্ডারের রং</span>
        <div class="pd-sw">
          <button type="button" class="sw sw-def" data-c="" title="থিম অনুযায়ী">থিম</button>
          @foreach (pd_theme_colors() as $v => $n)<button type="button" class="sw" data-c="{!! e($v) !!}" title="{!! e($n) !!}" style="background:{!! e($v) !!}"></button>@endforeach
          <input type="color" class="sw-pick" value="#dc2626" title="নিজের পছন্দের রং">
        </div>
      </div>
      <div class="span-2 pd-btns" id="pdBoxRow">
        <span class="pd-lb">আকৃতি</span>
        <select id="pdRadius"><option value="">থিম অনুযায়ী</option><option value="0">চৌকো</option><option value="6">সামান্য গোল কোণা</option><option value="14">গোল কোণা</option><option value="24">বেশি গোল</option><option value="999">পুরো গোল (পিল/বৃত্ত)</option></select>
        <label class="pd-minh">উচ্চতা <output id="pdMinhO">থিম অনুযায়ী</output>
          <input type="range" id="pdMinh" min="0" max="200" step="4" value="0"></label>
      </div>
      <p class="muted small span-2">"থিম" বা থিমের রং বাছলে "চেহারা, লোগো ও স্টাইল" পেজে রঙের কম্বিনেশন বদলালে এটাও সেই অনুযায়ী বদলাবে। নিজের রং (শেষের ঘর) দিলে সেটা স্থির থাকবে।</p>

      <div class="span-2 pd-btns">
        <span class="pd-lb">সারিবদ্ধ</span>
        <select id="pdAlign"><option value="">থিম অনুযায়ী</option><option value="left">বাঁয়ে</option><option value="center">মাঝে</option><option value="right">ডানে</option></select>
      </div>
      <div class="span-2 pd-move">
        <span class="pd-lb">অবস্থান সরানো</span>
        <div class="pd-pad">
          <button type="button" data-mv="0,-5" title="উপরে">▲</button>
          <button type="button" data-mv="-5,0" title="বাঁয়ে">◀</button>
          <button type="button" data-mv="reset" title="আগের জায়গায়">●</button>
          <button type="button" data-mv="5,0" title="ডানে">▶</button>
          <button type="button" data-mv="0,5" title="নিচে">▼</button>
        </div>
        <span class="small muted" id="pdPos">০, ০</span>
      </div>
      <label class="inline span-2"><input type="checkbox" id="pdHide"> এই অংশটি লুকিয়ে রাখুন</label>
      <p class="span-2"><button type="button" class="btn btn-ghost btn-sm" id="pdElReset">↺ এই অংশ আগের মতো</button></p>
    </div>

    <h3 class="sub">পুরো পেজের সাজানো</h3>
    <label>“অ্যাডমিন লগইন” লিংক কোথায় থাকবে
      <select id="pdAdminPos"><option value="">মেনুর শেষে (ডান পাশে)</option><option value="start">মেনুর শুরুতে (বাঁ পাশে)</option><option value="footer">নিচে ফুটারে</option></select></label>
    <p class="muted small">লগইন থাকলে "অ্যাডমিন লগইন"-এর জায়গায় নামের বোতাম (যেমন Super Admin) দেখায় — সেটাও মেনুর শুরু/শেষে যায়; ফুটার বাছলে নামের বোতাম মেনুর শেষেই থাকে। উপরের "অংশ" থেকে "অ্যাডমিন লগইন লিংক" বাছাই করে ◀ ▶ দিয়েও সরানো যায়।</p>
    <label class="inline"><input type="checkbox" id="pdSwap"> ক্যালেন্ডার ডানে, দিনের তালিকা বাঁয়ে</label>
    <label class="inline"><input type="checkbox" id="pdAsideSwap"> "কক্ষ ফাঁকা আছে কি না" কার্ড দিনের তালিকার উপরে</label>

    <form method="post" action="{{ route('admin.pdesign.save') }}" id="pdForm" class="pd-save">
      @csrf<input type="hidden" name="design" id="pdDesign">
      <button class="btn btn-primary btn-lg">সংরক্ষণ</button>
      <button class="btn btn-ghost" name="reset" value="1" onclick="return confirm('পুরো পাবলিক পেজের নকশা আগের (ডিফল্ট) অবস্থায় ফেরাবেন?')">↺ সব আগের মতো</button>
    </form>
  </section>

  <section class="card pd-view">
    <div class="pd-view-bar">
      <b>সরাসরি দেখুন</b>
      <span class="seg"><button type="button" class="on" data-t="pc">💻 পিসি / বড় পর্দা</button><button type="button" data-t="m">📱 মোবাইল</button></span>
      <label class="inline small"><input type="checkbox" id="pdPick" checked> চাপ দিয়ে অংশ বাছাই</label>
      <label class="inline small">পেজ <select id="pdPage"><option value="{{ route('home') }}">ক্যালেন্ডার (প্রথম পাতা)</option><option value="{{ route('schedule') }}">অনুষ্ঠানের তালিকা</option></select></label>
    </div>
    <div class="pd-frame-box"><iframe id="pdFrame" src="{{ route('home') }}" title="পাবলিক পেজ"></iframe></div>
  </section>
</div>
<script>window.PD = {!! json_encode($cfg, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP) !!};</script>
<script src="{{ asset('assets/js/pd-editor.js') }}?v=6"></script>
@endsection