@extends('layout.admin')

@section('title','General Settings')

@section('content')
<div class="max-w-4xl mx-auto px-1 mt-2">

  @if(session('success'))
    <div class="mb-6 bg-green-50 border border-green-200 text-green-800 rounded-lg p-4 flex items-center gap-2 shadow-sm">
      <i class="fa fa-check-circle text-green-600 text-lg"></i>
      <span>{{ session('success') }}</span>
    </div>
  @endif

  <div class="bg-white rounded-xl shadow-lg border border-gray-200 p-6">
    <h2 class="text-2xl font-bold mb-6 flex items-center gap-2 text-gray-800">
      <i class="fa fa-cog text-blue-600"></i> General Settings
    </h2>

    @php
      $payFastApiKey = old('bondhonpay_api_key', $settings->bondhonpay_api_key);
      $bg  = old('background_color', $settings->background_color ?? '#ffffff');
      $ico = old('icon_color',        $settings->icon_color ?? '#0B5D1E');
      $hov = old('hover_color',       $settings->hover_color ?? '#0F7A2E');
      $txt = old('text_color',        $settings->text_color ?? '#0f172a');
      $pageTutorialDefinitions = $pageTutorialDefinitions ?? [];
      $pageTutorialValues = $pageTutorialValues ?? [];
    @endphp

    <form id="google_seo_verification_form" method="POST" action="{{ route('admin.general-settings.update') }}" class="hidden">
      @csrf
      <input type="hidden" name="settings_section" value="seo_google">
    </form>

    <form id="bing_seo_verification_form" method="POST" action="{{ route('admin.general-settings.update') }}" class="hidden">
      @csrf
      <input type="hidden" name="settings_section" value="seo_bing">
    </form>

    <form method="POST" action="{{ route('admin.general-settings.update') }}"
          enctype="multipart/form-data"
          class="space-y-8">
      @csrf

      {{-- ================= Brand & Theme ================= --}}
      <div class="rounded-xl border border-gray-200">
        <div class="px-4 py-3 border-b bg-gray-50 rounded-t-xl">
          <h3 class="font-bold text-gray-800 flex items-center gap-2">
            <i class="fa fa-paint-brush text-green-700"></i> Brand & Theme
          </h3>
        </div>

        <div class="p-4 grid grid-cols-1 sm:grid-cols-2 gap-6">
          {{-- Site Name --}}
          <div class="sm:col-span-2">
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fa fa-font text-blue-600"></i> Site Name
            </label>
            <input type="text" name="site_name"
                   value="{{ old('site_name', $settings->site_name) }}"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none"
                   placeholder="Your Site">
          </div>

          {{-- Site Description --}}
          <div class="sm:col-span-2">
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fa fa-align-left text-blue-600"></i> Site Description
            </label>
            <textarea name="site_description" rows="2"
                      class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none"
                      placeholder="Short description for SEO & header subtitle">{{ old('site_description', $settings->site_description) }}</textarea>
          </div>

          {{-- Background Color --}}
          <div>
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fa fa-square text-gray-700"></i> Background Color
            </label>
            <div class="flex items-center gap-2">
              <input id="pick_background_color" type="color" value="{{ $bg }}"
                     class="h-10 w-12 p-0 border border-gray-300 rounded">
              <input id="hex_background_color" type="text" name="background_color"
                     value="{{ $bg }}" placeholder="#ffffff"
                     class="flex-1 border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-400 focus:outline-none">
            </div>
          </div>

          {{-- Icon Color --}}
          <div>
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fa fa-icons" style="color: {{ $ico }}"></i> Icon Color
            </label>
            <div class="flex items-center gap-2">
              <input id="pick_icon_color" type="color" value="{{ $ico }}"
                     class="h-10 w-12 p-0 border border-gray-300 rounded">
              <input id="hex_icon_color" type="text" name="icon_color"
                     value="{{ $ico }}" placeholder="#0B5D1E"
                     class="flex-1 border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-400 focus:outline-none">
            </div>
          </div>

          {{-- Hover Color --}}
          <div>
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fa fa-mouse-pointer" style="color: {{ $hov }}"></i> Hover Color
            </label>
            <div class="flex items-center gap-2">
              <input id="pick_hover_color" type="color" value="{{ $hov }}"
                     class="h-10 w-12 p-0 border border-gray-300 rounded">
              <input id="hex_hover_color" type="text" name="hover_color"
                     value="{{ $hov }}" placeholder="#0F7A2E"
                     class="flex-1 border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-400 focus:outline-none">
            </div>
          </div>

          {{-- Text Color --}}
          <div>
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fa fa-text-height" style="color: {{ $txt }}"></i> Text Color
            </label>
            <div class="flex items-center gap-2">
              <input id="pick_text_color" type="color" value="{{ $txt }}"
                     class="h-10 w-12 p-0 border border-gray-300 rounded">
              <input id="hex_text_color" type="text" name="text_color"
                     value="{{ $txt }}" placeholder="#0f172a"
                     class="flex-1 border border-gray-300 rounded-lg p-2 focus:ring-2 focus:ring-blue-400 focus:outline-none">
            </div>
          </div>
        </div>
      </div>

      {{-- ================= Verify & API ================= --}}
      <div class="rounded-xl border border-gray-200">
        <div class="px-4 py-3 border-b bg-gray-50 rounded-t-xl">
          <h3 class="font-bold text-gray-800 flex items-center gap-2">
            <i class="fa fa-key text-purple-700"></i> Verify & API
          </h3>
        </div>

        <div class="p-4 grid grid-cols-1 sm:grid-cols-2 gap-6">
          {{-- Verify Fee --}}
          <div>
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fa fa-money-bill-wave text-green-600"></i> Verify Fee (BDT) <span class="text-red-600">*</span>
            </label>
            <input type="number" step="0.01" min="1" name="verify_fee"
                   value="{{ old('verify_fee',$settings->verify_fee) }}"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none"
                   required>
          </div>

          {{-- PayFastBD --}}
          <div class="sm:col-span-2">
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fa fa-key text-purple-600"></i> PayFastBD API Key <span class="text-red-600">*</span>
            </label>
            <input type="text" name="bondhonpay_api_key" value="{{ $payFastApiKey }}"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none"
                   required>

            <div class="mt-3 flex justify-end">
              <a href="{{ config('services.payfastbd.panel_url') }}" target="_blank"
                 class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-green-600 hover:bg-green-700 text-white text-sm shadow-md">
                <i class="fa fa-external-link-alt"></i> এপিআই প্যানেলে যান
              </a>
            </div>
          </div>
        </div>
      </div>

      <div id="seo-verification" class="rounded-xl border border-gray-200">
        <div class="px-4 py-3 border-b bg-gray-50 rounded-t-xl">
          <h3 class="font-bold text-gray-800 flex items-center gap-2">
            <i class="fa fa-magnifying-glass text-emerald-700"></i> SEO Verification
          </h3>
        </div>

        <div class="p-4 grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div class="rounded-lg border border-blue-100 bg-blue-50/40 p-4">
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fab fa-google text-blue-600"></i> Google Search Console Verification
            </label>
            <textarea id="google_site_verification_store"
                      name="google_site_verification"
                      rows="3"
                      form="google_seo_verification_form"
                      class="hidden">{{ old('google_site_verification', $settings->google_site_verification) }}</textarea>
            <div class="seo-token-editor mt-2 rounded-lg border border-gray-300 bg-white p-3 focus-within:ring-2 focus-within:ring-blue-400"
                 data-target="google_site_verification_store"
                 data-placeholder="Google token বা meta tag লিখে comma / Enter চাপুন">
              <div class="seo-token-list flex flex-wrap gap-2"></div>
              <input type="text"
                     class="seo-token-input mt-2 w-full border-0 bg-transparent p-0 text-sm text-gray-700 focus:outline-none focus:ring-0"
                     data-role="token-input"
                     placeholder="Google token বা meta tag লিখে comma / Enter চাপুন">
            </div>
            <p class="text-xs text-slate-500 mt-1">উদাহরণ: `abc123...`, `google-site-verification=abc123...`, পুরো `<meta ...>` tag। comma বা Enter দিলে tag bubble হয়ে যাবে।</p>
            <div class="mt-3 flex justify-end">
              <button type="submit" form="google_seo_verification_form"
                      class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-md transition hover:bg-blue-700">
                <i class="fa fa-save"></i> Google সেভ
              </button>
            </div>
          </div>

          <div class="rounded-lg border border-sky-100 bg-sky-50/40 p-4">
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fa-brands fa-microsoft text-sky-600"></i> Bing Webmaster Verification
            </label>
            <textarea id="bing_site_verification_store"
                      name="bing_site_verification"
                      rows="3"
                      form="bing_seo_verification_form"
                      class="hidden">{{ old('bing_site_verification', $settings->bing_site_verification) }}</textarea>
            <div class="seo-token-editor mt-2 rounded-lg border border-gray-300 bg-white p-3 focus-within:ring-2 focus-within:ring-sky-400"
                 data-target="bing_site_verification_store"
                 data-placeholder="Bing token বা meta tag লিখে comma / Enter চাপুন">
              <div class="seo-token-list flex flex-wrap gap-2"></div>
              <input type="text"
                     class="seo-token-input mt-2 w-full border-0 bg-transparent p-0 text-sm text-gray-700 focus:outline-none focus:ring-0"
                     data-role="token-input"
                     placeholder="Bing token বা meta tag লিখে comma / Enter চাপুন">
            </div>
            <p class="text-xs text-slate-500 mt-1">উদাহরণ: `123ABC...`, `msvalidate.01=123ABC...`, পুরো `<meta ...>` tag। comma বা Enter দিলে tag bubble হয়ে যাবে।</p>
            <div class="mt-3 flex justify-end">
              <button type="submit" form="bing_seo_verification_form"
                      class="inline-flex items-center gap-2 rounded-lg bg-sky-600 px-4 py-2 text-sm font-semibold text-white shadow-md transition hover:bg-sky-700">
                <i class="fa fa-save"></i> Bing সেভ
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="rounded-xl border border-gray-200">
        <div class="px-4 py-3 border-b bg-gray-50 rounded-t-xl">
          <h3 class="font-bold text-gray-800 flex items-center gap-2">
            <i class="fa-solid fa-chart-line text-rose-600"></i> Tracking & Indexing
          </h3>
        </div>

        <div class="p-4 grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fa-brands fa-google text-blue-600"></i> Google Analytics ID / Tag
            </label>
            <input type="text" name="google_analytics_id"
                   value="{{ old('google_analytics_id', $settings->google_analytics_id) }}"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none"
                   placeholder="G-XXXXXXXXXX বা পুরো gtag snippet">
            <p class="text-xs text-slate-500 mt-1">Plain `G-...` measurement ID দিলেও হবে। GTM ID থাকলে duplicate tracking এড়াতে direct GA script auto off থাকবে।</p>
          </div>

          <div>
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fa-solid fa-tags text-indigo-600"></i> Google Tag Manager ID / Snippet
            </label>
            <input type="text" name="google_tag_manager_id"
                   value="{{ old('google_tag_manager_id', $settings->google_tag_manager_id) }}"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none"
                   placeholder="GTM-XXXXXXX বা পুরো GTM snippet">
            <p class="text-xs text-slate-500 mt-1">Plain `GTM-...` দিলেও head + body noscript code auto বসবে।</p>
          </div>

          <div>
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fa-brands fa-facebook text-blue-700"></i> Facebook Pixel ID / Snippet
            </label>
            <input type="text" name="facebook_pixel_id"
                   value="{{ old('facebook_pixel_id', $settings->facebook_pixel_id) }}"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none"
                   placeholder="123456789012345 বা পুরো pixel snippet">
            <p class="text-xs text-slate-500 mt-1">Pixel ID দিলেই PageView tracking code auto render হবে।</p>
          </div>

          <div class="sm:col-span-2 rounded-lg border border-amber-100 bg-amber-50 px-3 py-3 text-sm text-amber-800">
            Search ranking code দিয়ে guarantee করা যায় না, কিন্তু এখানে brand identity, structured data, manifest, crawl files, analytics, tag manager আর custom tracking slot সব live করার setup রাখা হয়েছে।
          </div>

          <div class="sm:col-span-2">
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fa-solid fa-code text-slate-700"></i> Custom Head Tracking Code
            </label>
            <textarea name="custom_head_tracking_code" rows="5"
                      class="w-full border border-gray-300 rounded-lg p-3 font-mono text-sm focus:ring-2 focus:ring-blue-400 focus:outline-none"
                      placeholder="<script>...</script> বা additional meta / tracking tag">{{ old('custom_head_tracking_code', $settings->custom_head_tracking_code) }}</textarea>
            <p class="text-xs text-slate-500 mt-1">`&lt;head&gt;`-এর ভিতরে raw code হিসেবে render হবে। Google Ads, Microsoft Clarity, Pinterest tag ইত্যাদির জন্য ব্যবহার করতে পারবেন।</p>
          </div>

          <div class="sm:col-span-2">
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fa-solid fa-code-branch text-slate-700"></i> Custom Body Tracking Code
            </label>
            <textarea name="custom_body_tracking_code" rows="5"
                      class="w-full border border-gray-300 rounded-lg p-3 font-mono text-sm focus:ring-2 focus:ring-blue-400 focus:outline-none"
                      placeholder="<noscript>...</noscript> বা body-start tracking code">{{ old('custom_body_tracking_code', $settings->custom_body_tracking_code) }}</textarea>
            <p class="text-xs text-slate-500 mt-1">`&lt;body&gt;` open হওয়ার পর render হবে। noscript iframe, chat tag, fallback pixel এখানেও দিতে পারবেন।</p>
          </div>
        </div>
      </div>

      {{-- ================= Vendor Ship ================= --}}
      <div class="rounded-xl border border-gray-200">
        <div class="px-4 py-3 border-b bg-gray-50 rounded-t-xl">
          <h3 class="font-bold text-gray-800 flex items-center gap-2">
            <i class="fa-solid fa-store text-emerald-700"></i> Vendor Ship
          </h3>
        </div>

        <div class="p-4 grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fa fa-money-bill-wave text-green-600"></i> Vendor Service Charge (BDT)
            </label>
            <input type="number" step="0.01" min="0" name="vendor_service_charge"
                   value="{{ old('vendor_service_charge', $settings->vendor_service_charge ?? 0) }}"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none"
                   placeholder="0">
            <p class="text-xs text-slate-500 mt-1">ভেন্ডর এপ্লাই করার সময় ভাউচার ব্যালেন্স থেকে কাটা হবে। 0 দিলে চার্জ অফ থাকবে।</p>
          </div>

          <div>
            <label class="block font-semibold mb-1 text-gray-700">Charge Title Text</label>
            <input type="text" name="vendor_service_charge_title"
                   value="{{ old('vendor_service_charge_title', $vendorServiceChargeTitle ?? 'Vendor Service Charge:') }}"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none"
                   placeholder="Vendor Service Charge:">
            <p class="text-xs text-slate-500 mt-1">ইউজার apply page-এ amount-এর আগে এই title show হবে।</p>
          </div>

          <div class="sm:col-span-2">
            <label class="block font-semibold mb-1 text-gray-700">Charge Description Text</label>
            <textarea name="vendor_service_charge_note" rows="2"
                      class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none"
                      placeholder="এপ্লাই করার সময় ভাউচার ব্যালেন্স থেকে কাটা হবে।">{{ old('vendor_service_charge_note', $vendorServiceChargeNote ?? 'এপ্লাই করার সময় ভাউচার ব্যালেন্স থেকে কাটা হবে।') }}</textarea>
            <p class="text-xs text-slate-500 mt-1">ইউজার apply page-এ charge box-এর নিচে এই description show হবে।</p>
          </div>
        </div>
      </div>

      {{-- ================= Leadership Page Copy ================= --}}
      <div class="rounded-xl border border-gray-200">
        <div class="px-4 py-3 border-b bg-gray-50 rounded-t-xl">
          <h3 class="font-bold text-gray-800 flex items-center gap-2">
            <i class="fa fa-crown text-indigo-600"></i> Leadership Page
          </h3>
        </div>

        <div class="p-4 grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div class="sm:col-span-2">
            <label class="block font-semibold mb-1 text-gray-700">Leadership Title</label>
            <input type="text" name="leadership_tracks_title"
                   value="{{ old('leadership_tracks_title', $settings->leadership_tracks_title) }}"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none"
                   placeholder="Leadership Tracks">
          </div>

          <div class="sm:col-span-2">
            <label class="block font-semibold mb-1 text-gray-700">Leadership Subtitle</label>
            <textarea name="leadership_tracks_subtitle" rows="2"
                      class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none"
                      placeholder="ট্যাপ করে আপডেট নোটিশ দেখুন।">{{ old('leadership_tracks_subtitle', $settings->leadership_tracks_subtitle) }}</textarea>
          </div>
        </div>
      </div>

      {{-- ================= Social Links ================= --}}
      <div class="rounded-xl border border-gray-200">
        <div class="px-4 py-3 border-b bg-gray-50 rounded-t-xl">
          <h3 class="font-bold text-gray-800 flex items-center gap-2">
            <i class="fa fa-share-alt text-blue-700"></i> Social Links
          </h3>
        </div>

        <div class="p-4 grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label class="block font-semibold mb-1 text-gray-700"><i class="fab fa-facebook text-blue-600"></i> Facebook Link</label>
            <input type="text" name="facebook_link" value="{{ old('facebook_link',$settings->facebook_link) }}"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none">
          </div>
          <div>
            <label class="block font-semibold mb-1 text-gray-700"><i class="fab fa-youtube text-red-600"></i> YouTube Link</label>
            <input type="text" name="youtube_link" value="{{ old('youtube_link',$settings->youtube_link) }}"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none">
          </div>
          <div>
            <label class="block font-semibold mb-1 text-gray-700"><i class="fab fa-whatsapp text-green-600"></i> WhatsApp Link</label>
            <input type="text" name="whatsapp_link" value="{{ old('whatsapp_link',$settings->whatsapp_link) }}"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none">
          </div>
          <div>
            <label class="block font-semibold mb-1 text-gray-700"><i class="fab fa-telegram text-sky-600"></i> Telegram Link</label>
            <input type="text" name="telegram_link" value="{{ old('telegram_link',$settings->telegram_link) }}"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none">
          </div>
        </div>
      </div>

      <div class="rounded-xl border border-gray-200">
        <div class="px-4 py-3 border-b bg-gray-50 rounded-t-xl">
          <h3 class="font-bold text-gray-800 flex items-center gap-2">
            <i class="fa-solid fa-circle-play text-rose-600"></i> Page Tutorial Videos
          </h3>
        </div>

        <div class="p-4 grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div class="sm:col-span-2 rounded-lg border border-blue-100 bg-blue-50 px-3 py-3 text-sm text-blue-700">
            এখানে link দিলে selected page-এ video button show হবে। একই page-এর জন্য dashboard project video থাকলে এই page-specific link-টাই আগে ধরবে।
          </div>
          @foreach($pageTutorialDefinitions as $definition)
            @php
              $field = (string) ($definition['field'] ?? '');
              $videoValue = old($field, $pageTutorialValues[$field] ?? '');
            @endphp
            <div>
              <label class="block font-semibold mb-1 text-gray-700">
                <i class="fa-solid fa-link text-blue-600"></i> {{ $definition['label'] }}
              </label>
              <input type="text" name="{{ $field }}" value="{{ $videoValue }}"
                     class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none"
                     placeholder="YouTube / Vimeo / Google Drive / MP4 link">
              <p class="text-xs text-slate-500 mt-1">
                {{ $definition['description'] }} একই video format support করবে যেটা dashboard project video-তে কাজ করে।
              </p>
              @if(!empty($videoValue))
                <a href="{{ $videoValue }}" target="_blank" class="inline-flex items-center gap-2 mt-2 text-sm text-blue-600 hover:underline">
                  <i class="fa-solid fa-up-right-from-square"></i> Current Link
                </a>
              @endif
            </div>
          @endforeach
        </div>
      </div>

      {{-- ================= Files: Logo / Favicon / Banner ================= --}}
      <div class="rounded-xl border border-gray-200">
        <div class="px-4 py-3 border-b bg-gray-50 rounded-t-xl">
          <h3 class="font-bold text-gray-800 flex items-center gap-2">
            <i class="fa fa-image text-sky-700"></i> Logo • Favicon • Banner
          </h3>
        </div>

        <div class="p-4 grid grid-cols-1 sm:grid-cols-2 gap-6">
          {{-- Logo --}}
          <div>
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fa fa-image text-green-600"></i> Logo (png/jpg/webp/svg)
            </label>
            <input type="file" name="logo" accept=".png,.jpg,.jpeg,.webp,.svg"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none">
            @if(!empty($settings->logo))
              <div class="mt-2">
                <img src="{{ $settings->logo }}" alt="Logo" style="max-height:60px;">
              </div>
            @endif
          </div>

          {{-- Favicon --}}
          <div>
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fa fa-star text-yellow-500"></i> Favicon (png/ico) — ডোমেইন রুটে favicon.png
            </label>
            <input type="file" name="favicon" accept=".png,.ico"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none">
            <div class="mt-2 text-sm text-gray-600">
              Current: <a href="/favicon.png" target="_blank" class="text-blue-600 underline">/favicon.png</a>
            </div>
          </div>

          {{-- Banner --}}
          <div class="sm:col-span-2">
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fa fa-image text-sky-600"></i> Banner (png/jpg/webp/svg)
            </label>
            <input type="file" name="banner" accept=".png,.jpg,.jpeg,.webp,.svg"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none">
            @if(!empty($settings->banner))
              <div class="mt-2">
                <img src="{{ $settings->banner }}" alt="Banner" style="max-height:120px;">
              </div>
            @endif
            <p class="text-xs text-slate-600 mt-1">সংরক্ষণ হবে: /images/ … (Document Root/images)</p>
          </div>
        </div>
      </div>

      <div class="rounded-xl border border-gray-200">
        <div class="px-4 py-3 border-b bg-gray-50 rounded-t-xl">
          <h3 class="font-bold text-gray-800 flex items-center gap-2">
            <i class="fa fa-image text-indigo-700"></i> Reselling Banner
          </h3>
        </div>

        <div class="p-4 grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div class="sm:col-span-2">
            <label class="block font-semibold mb-1 text-gray-700">
              <i class="fa fa-image text-indigo-600"></i> Reselling Banner (png/jpg/webp/svg)
            </label>
            <input type="file" name="reselling_banner" accept=".png,.jpg,.jpeg,.webp,.svg"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none">
            @if(!empty($settings->reselling_banner))
              <div class="mt-2">
                <img src="{{ $settings->reselling_banner }}" alt="Reselling Banner" style="max-height:120px;">
              </div>
            @endif
            <p class="text-xs text-slate-600 mt-1">This banner is used on reseller pages.</p>
          </div>
        </div>
      </div>

      {{-- ================= Support Center ================= --}}
      <div class="rounded-xl border border-gray-200">
        <div class="px-4 py-3 border-b bg-gray-50 rounded-t-xl">
          <h3 class="font-bold text-gray-800 flex items-center gap-2">
            <i class="fa fa-headset text-green-700"></i> Support Center (WhatsApp Numbers)
          </h3>
        </div>

        <div class="p-4 grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label class="block font-semibold mb-1 text-gray-700">General Support</label>
            <input type="text" name="support_general" value="{{ old('support_general',$settings->support_general) }}"
                   placeholder="+8801XXXXXXXXX"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none">
          </div>
          <div>
            <label class="block font-semibold mb-1 text-gray-700">Verify Support</label>
            <input type="text" name="support_verify" value="{{ old('support_verify',$settings->support_verify) }}"
                   placeholder="+8801XXXXXXXXX"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none">
          </div>
          <div>
            <label class="block font-semibold mb-1 text-gray-700">Withdraw Support</label>
            <input type="text" name="support_withdraw" value="{{ old('support_withdraw',$settings->support_withdraw) }}"
                   placeholder="+8801XXXXXXXXX"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none">
          </div>
          <div>
            <label class="block font-semibold mb-1 text-gray-700">Technical Support</label>
            <input type="text" name="support_technical" value="{{ old('support_technical',$settings->support_technical) }}"
                   placeholder="+8801XXXXXXXXX"
                   class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-400 focus:outline-none">
          </div>
        </div>
      </div>

      {{-- ================= Submit ================= --}}
      <div class="flex justify-end">
        <button type="submit"
          class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-3 rounded-lg shadow-md flex items-center gap-2 transition">
          <i class="fa fa-save"></i> Save Settings
        </button>
      </div>
    </form>
  </div>
</div>

{{-- Font Awesome --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

<style>
  .seo-token-editor{
    min-height: 122px;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #d7dee8;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    cursor: text;
  }

  .seo-token-list{
    min-height: 48px;
    align-content: flex-start;
  }

  .seo-token-chip{
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    max-width: 100%;
    border-radius: 14px;
    border: 1px solid #dbe2ea;
    background: #e9edf3;
    box-shadow: 0 1px 0 rgba(15,23,42,.05);
    padding: .72rem .9rem;
    color: #1f2937;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
  }

  .seo-token-chip-text{
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .seo-token-chip-remove{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #64748b;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    transition: all .18s ease;
  }

  .seo-token-chip-remove:hover{
    background: #ffffff;
    color: #dc2626;
    transform: scale(1.06);
  }

  .seo-token-chip-remove:focus-visible{
    outline: 2px solid rgba(59,130,246,.35);
    outline-offset: 2px;
  }

  .seo-token-input{
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
  }

  .seo-token-input::placeholder{
    color: #94a3b8;
    font-weight: 500;
  }
</style>

{{-- Tiny JS: color picker <-> hex inputs sync --}}
<script>
  (function () {
    function bindColor(pickId, hexId) {
      const p = document.getElementById(pickId);
      const h = document.getElementById(hexId);
      if (!p || !h) return;

      // picker -> hex
      p.addEventListener('input', () => { h.value = p.value; });

      // hex -> picker (valid hex only)
      h.addEventListener('input', () => {
        const v = h.value.trim();
        const ok = /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/.test(v);
        if (ok) p.value = v;
      });
    }

    bindColor('pick_background_color', 'hex_background_color');
    bindColor('pick_icon_color',       'hex_icon_color');
    bindColor('pick_hover_color',      'hex_hover_color');
    bindColor('pick_text_color',       'hex_text_color');
  })();
</script>

<script>
  (function () {
    const splitTokens = (value) => {
      return String(value || '')
        .split(/[\r\n,]+/)
        .map(part => part.trim())
        .filter(Boolean);
    };

    document.querySelectorAll('.seo-token-editor').forEach((editor) => {
      const targetId = editor.dataset.target || '';
      const placeholder = editor.dataset.placeholder || 'Type and press comma or Enter';
      const store = document.getElementById(targetId);
      const list = editor.querySelector('.seo-token-list');
      const input = editor.querySelector('[data-role="token-input"]');

      if (!store || !list || !input) return;

      let tokens = [];

      const syncStore = () => {
        store.value = tokens.join('\n');
      };

      const render = () => {
        list.innerHTML = '';

        tokens.forEach((token, index) => {
          const chip = document.createElement('span');
          chip.className = 'seo-token-chip';
          chip.title = token;

          const text = document.createElement('span');
          text.className = 'seo-token-chip-text';
          text.textContent = token;
          text.title = token;

          const remove = document.createElement('button');
          remove.type = 'button';
          remove.className = 'seo-token-chip-remove';
          remove.setAttribute('aria-label', 'Remove token');
          remove.textContent = '×';
          remove.addEventListener('click', () => {
            tokens = tokens.filter((_, tokenIndex) => tokenIndex !== index);
            syncStore();
            render();
            input.focus();
          });

          chip.appendChild(text);
          chip.appendChild(remove);
          list.appendChild(chip);
        });

        input.placeholder = tokens.length > 0 ? '' : placeholder;
      };

      const addTokens = (rawValue) => {
        let changed = false;

        splitTokens(rawValue).forEach((token) => {
          if (!tokens.includes(token)) {
            tokens.push(token);
            changed = true;
          }
        });

        if (changed) {
          syncStore();
          render();
        }
      };

      const commitInput = () => {
        const value = input.value.trim();
        if (value === '') return;
        addTokens(value);
        input.value = '';
        render();
      };

      editor.__commitTokens = commitInput;

      tokens = splitTokens(store.value);
      syncStore();
      render();

      editor.addEventListener('click', () => input.focus());

      input.addEventListener('keydown', (event) => {
        if (event.key === 'Enter' || event.key === ',' || event.key === 'Tab') {
          if (input.value.trim() !== '') {
            event.preventDefault();
            commitInput();
          }
        } else if (event.key === 'Backspace' && input.value === '' && tokens.length > 0) {
          tokens.pop();
          syncStore();
          render();
        }
      });

      input.addEventListener('blur', commitInput);

      input.addEventListener('paste', (event) => {
        const pastedText = event.clipboardData?.getData('text') || '';
        if (!pastedText.includes(',') && !/[\r\n]/.test(pastedText)) {
          return;
        }

        event.preventDefault();
        addTokens(pastedText);
        input.value = '';
        render();
      });
    });

    document.querySelectorAll('form').forEach((form) => {
      form.addEventListener('submit', () => {
        document.querySelectorAll('.seo-token-editor').forEach((editor) => {
          if (typeof editor.__commitTokens === 'function') {
            editor.__commitTokens();
          }
        });
      });
    });
  })();
</script>
@endsection
