@extends('layouts.admin', ['menu' => 'look', 'noBodyAnim' => true])
@section('title', 'চেহারা, লোগো ও স্টাইল')
@section('content')
@include('partials.errors')
<form method="post" action="{{ route('admin.appearance.save') }}" enctype="multipart/form-data" class="look-form">
  @csrf
  <section class="card">
    @php
      $en = is_en(); $L = $en ? '_en' : '';
      $lfUrl = brand_file_url(setting('logo_file' . $L));
      $bnOnly = $en ? '' : 'bn-only-field';
      $verName = $en ? 'English' : 'বাংলা';
    @endphp
    <input type="hidden" name="ver" value="{{ $en ? 'en' : 'bn' }}">
    <h2 class="card-title">হেডার: লোগো ও লেখা — <span class="ver-badge">{!! ue($verName) !!}</span> ভার্সন</h2>
    <p class="alert alert-info ver-note">এখন <b>{!! ue($verName) !!}</b> ভার্সনের লোগো ও লেখা বদলাচ্ছেন — শুধু এই ভার্সনে বদলাবে।
      অন্য ভার্সনেরটা বদলাতে উপরের <b>{!! $en ? ue('বাংলা') : 'English' !!}</b> বোতাম চাপুন।</p>
    <div class="look-head-preview">
      <div class="lhp">@if ($lfUrl)<img class="brand-logo" src="{{ $lfUrl }}" alt="">@else{!! brand_mark() !!}@endif<div><strong>{!! ue(setting('site_title' . $L) ?: setting('site_title') ?: site_title()) !!}</strong><small>{!! ue(setting('site_subtitle' . $L) ?: setting('site_subtitle') ?: site_subtitle()) !!}</small></div></div>
    </div>
    <div class="form-grid"><fieldset @if ($en) lang="en" class="en-set" @endif>
      <legend>লোগো</legend>
      <label>নতুন লোগো (PNG/JPG/WEBP, সর্বোচ্চ ২ MB)<input type="file" name="logo" accept="image/png,image/jpeg,image/webp"></label>
      <label>লোগোর উচ্চতা (পিক্সেল): <output id="lsOut">{{ bn(setting('logo_size', '46')) }}</output>
        <input type="range" name="logo_size" min="28" max="120" value="{{ setting('logo_size', '46') }}" oninput="lsOut.value=this.value.replace(/\d/g,d=>'০১২৩৪৫৬৭৮৯'[d])"></label>
      @if (setting('logo_file' . $L))<label class="inline span-2"><input type="checkbox" name="remove_logo" value="1"> বর্তমান লোগো মুছে ফেলুন</label>@endif
      @if ($en && !$lfUrl)<p class="muted small span-2">আলাদা English লোগো না দিলে বাংলার লোগোই দেখাবে।</p>@endif
      <label>লোগো না থাকলে যে লেখা দেখাবে<input type="text" name="brand_mark{{ $L }}" maxlength="6" value="{{ old('brand_mark' . $L, setting('brand_mark' . $L, $en ? '' : '৫০১')) }}" class="{{ $bnOnly }}" @if ($en) placeholder="501" @endif></label>
    </fieldset>
    <fieldset @if ($en) lang="en" class="en-set" @endif>
      <legend>হেডারের লেখা</legend>
      <label class="span-2">প্রথম লাইন (বড় লেখা)<input type="text" name="site_title{{ $L }}" value="{{ old('site_title' . $L, setting('site_title' . $L)) }}" placeholder="{{ $en ? 'ICT Cell, GSTU' : setting('office') . ', ' . setting('university_short') }}" class="{{ $bnOnly }}"></label>
      <label class="span-2">দ্বিতীয় লাইন (ছোট লেখা)<input type="text" name="site_subtitle{{ $L }}" value="{{ old('site_subtitle' . $L, setting('site_subtitle' . $L)) }}" placeholder="{{ $en ? 'Room Booking & Schedule' : room_title() . ' — বুকিং ও সময়সূচি' }}" class="{{ $bnOnly }}"></label>
      <label class="span-2">প্রথম পাতার শিরোনামের নিচের লেখা<textarea name="hero_text{{ $L }}" rows="2" class="{{ $bnOnly }}">{{ old('hero_text' . $L, setting('hero_text' . $L) ?: ($en ? special_texts_en()['hero_text'] : special_texts()['hero_text'][1])) }}</textarea></label>
      <p class="muted small span-2">ফাঁকা রাখলে ধূসর লেখাটি (স্বয়ংক্রিয়) দেখাবে। <code>{office}</code> দপ্তর, <code>{university}</code> বিশ্ববিদ্যালয় — নিজে থেকে নাম বসে। পেজের অন্য যেকোনো লেখা বদলাতে <a href="{{ route('admin.texts') }}">লেখা সংশোধন</a> পেজ ব্যবহার করুন।</p>
    </fieldset></div>
  </section>

  <section class="card">
    <h2 class="card-title">রঙের থিম (পুরো সাইট ও কন্ট্রোল প্যানেল)</h2>
    <div class="choice-grid">
      @foreach (themes() as $k => [$label, $c1, $c2])
        <label class="choice">
          <input type="radio" name="theme" value="{{ $k }}" @checked(setting('theme', 'green') === $k)>
          <span class="choice-box"><span class="swatch" style="background:linear-gradient(135deg,{{ $c1 }},{{ $c2 }})"></span><b>{{ $label }}</b></span>
        </label>
      @endforeach
    </div>
  </section>

  <section class="card">
    <h2 class="card-title">"অনুমোদনের অপেক্ষায়" অ্যানিমেশন</h2>
    <div class="choice-grid">
      @foreach (anim_styles() as $k => $label)
        <label class="choice anim-{{ $k }}">
          <input type="radio" name="pend_anim" value="{{ $k }}" @checked(setting('pend_anim', 'wave') === $k)>
          <span class="choice-box"><span class="badge badge-pending"><i class="pend-anim" aria-hidden="true"><b></b><b></b><b></b></i><span>অনুমোদনের অপেক্ষায়</span></span><b>{{ $label }}</b></span>
        </label>
      @endforeach
    </div>
  </section>

  <section class="card">
    <h2 class="card-title">অনুমোদনের ধারার (ধাপের) অ্যানিমেশন</h2>
    <p class="muted small">"আবেদনের অবস্থা" ও বুকিংয়ের বিস্তারিত পেজে যে ধাপ এখন চলছে, সেটির অ্যানিমেশন।</p>
    <div class="choice-grid">
      @foreach (step_anims() as $k => $label)
        <label class="choice step-{{ $k }}">
          <input type="radio" name="step_anim" value="{{ $k }}" @checked(setting('step_anim', 'wave') === $k)>
          <span class="choice-box"><span class="trk-steps mini-trk"><span class="trk-step done"><span class="trk-dot">✓</span></span><span class="trk-step cur"><span class="trk-dot">২</span></span><span class="trk-step off"><span class="trk-dot">৩</span></span></span><b>{{ $label }}</b></span>
        </label>
      @endforeach
    </div>
  </section>

  <section class="card">
    <h2 class="card-title">কন্ট্রোল প্যানেলের স্টাইল</h2>
    <div class="form-grid"><fieldset>
      <legend>মেনুর ধরন</legend>
      <div class="choice-grid span-2">
        @foreach (menu_layouts() as $k => $label)
          <label class="choice"><input type="radio" name="menu_layout" value="{{ $k }}" @checked(setting('menu_layout', 'side') === $k)>
            <span class="choice-box"><span class="mini-layout ml-{{ $k }}"><i></i><i></i></span><b>{{ $label }}</b></span></label>
        @endforeach
      </div>
    </fieldset>
    <fieldset>
      <legend>কার্ডের ধরন</legend>
      <div class="choice-grid span-2">
        @foreach (card_styles() as $k => $label)
          <label class="choice"><input type="radio" name="card_style" value="{{ $k }}" @checked(setting('card_style', 'soft') === $k)>
            <span class="choice-box"><span class="mini-card mc-{{ $k }}"></span><b>{{ $label }}</b></span></label>
        @endforeach
      </div>
    </fieldset>
    <fieldset>
      <legend>তারিখ বাছাইয়ের ক্যালেন্ডার</legend>
      <div class="choice-grid span-2">
        <label class="choice"><input type="radio" name="cal_style" value="popup" @checked(setting('cal_style', 'popup') !== 'simple')><span class="choice-box"><span class="mini-cal popup"></span><b>আধুনিক (মাঝখানে বড় পপআপ)</b></span></label>
        <label class="choice"><input type="radio" name="cal_style" value="simple" @checked(setting('cal_style', 'popup') === 'simple')><span class="choice-box"><span class="mini-cal simple"></span><b>সাধারণ (ঘরের নিচে ছোট)</b></span></label>
      </div>
    </fieldset>
    <fieldset>
      <legend>মোবাইলে ক্যালেন্ডারের তারিখে চাপ দিলে</legend>
      <div class="choice-grid span-2">
        <label class="choice"><input type="radio" name="day_click" value="list" @checked(setting('day_click', 'list') !== 'popup')><span class="choice-box"><b>নিচের তালিকায় দেখাবে</b><small class="muted">পেজ না সরিয়ে ক্যালেন্ডারের নিচে সেই দিনের তালিকা — ক্যালেন্ডারও দেখা যায়</small></span></label>
        <label class="choice"><input type="radio" name="day_click" value="popup" @checked(setting('day_click', 'list') === 'popup')><span class="choice-box"><b>ছোট পপআপ বক্সে দেখাবে</b><small class="muted">সেই দিনের তালিকা একটি ছোট বক্সে খোলে; ✕ চাপলে বন্ধ</small></span></label>
      </div>
      <p class="muted small span-2">পিসি/বড় পর্দায় তালিকা সবসময় ক্যালেন্ডারের পাশে বদলায়। প্রথম পাতা ও অনুষ্ঠানের তালিকা — দুই পেজেই কাজ করে।</p>
    </fieldset></div>
  </section>
  <div class="sticky-save"><button class="btn btn-primary btn-lg">সংরক্ষণ করুন</button></div>
</form>

<section class="card" id="style-xfer">
  <h2 class="card-title">চেহারা অন্য সার্ভারে নিন</h2>
  <p class="muted small">এই সাইটের পুরো চেহারা — রঙের থিম, মেনু ও কার্ডের ধরন, লোগো (বাংলা ও English), হেডারের লেখা ও পাবলিক পেজের নকশা (পিসি ও মোবাইল) — একটি ফাইলে ডাউনলোড করুন। অন্য সার্ভারে এই পেজে সেই ফাইল আপলোড করলে হুবহু একই চেহারা হবে। <b>বুকিং, ইউজার, মেইল, ডাটাবেস বা config বদলায় না।</b></p>
  <p><a class="btn btn-ghost" href="{{ route('admin.appearance.export') }}">⬇ চেহারা ডাউনলোড (.json)</a></p>
  <form method="post" action="{{ route('admin.appearance.import') }}" enctype="multipart/form-data" class="form-inline-wrap" onsubmit="return confirm('এই সাইটের চেহারা আপলোড করা ফাইলের মতো হয়ে যাবে। চালিয়ে যাবেন?')">
    @csrf
    <label>চেহারার ফাইল (.json)<input type="file" name="style" accept=".json,application/json" required></label>
    <button class="btn btn-primary">⬆ আপলোড করে বসান</button>
  </form>
</section>
@endsection