@extends('layouts.admin')
@section('content')
@php use App\Support\Ui; @endphp

<div class="grid g-kpi" style="margin-bottom:20px;">
  @foreach($kpis as $k)@include('admin.partials.kpi', ['k' => $k])@endforeach
</div>

@php
  $hero = ($blocks['hero']->content ?? null) ?: $defaults['hero'];
  $sections = ($blocks['sections']->content ?? null) ?: $defaults['sections'];
  $features = ($blocks['features']->content ?? null) ?: $defaults['features'];
  $testimonials = ($blocks['testimonials']->content ?? null) ?: $defaults['testimonials'];
  $faqs = ($blocks['faqs']->content ?? null) ?: $defaults['faqs'];
  $iconOptions = ['shield','mapPin','card','book','vote','bag','bolt','check','globe','star'];
@endphp

<div class="settings-shell">
  <div class="settings-nav" id="cmsNav">
    @foreach(['home' => ['Home page', 'documents'], 'articles' => ['Articles', 'book'], 'mode' => ['Site mode', 'globe']] as $id => $meta)
      <button type="button" class="settings-nav-item {{ $tab === $id ? 'active' : '' }}" data-panel="{{ $id }}">{!! Ui::icon($meta[1]) !!}<span>{{ $meta[0] }}</span></button>
    @endforeach
  </div>

  <div class="settings-panels">

    {{-- =============================== HOME PAGE =============================== --}}
    <div class="settings-panel {{ $tab === 'home' ? 'active' : '' }}" data-panel="home">

      <div class="settings-card">
        <div class="settings-card-head"><div><h3>Hero</h3><p>The first thing visitors see. Edit the eyebrow, headline and lead paragraph.</p></div>
          <a class="btn btn-ghost btn-sm" href="{{ route('home') }}" target="_blank">{!! Ui::icon('globe') !!} View site</a></div>
        <form method="post" action="{{ route('admin.cms.hero') }}">@csrf
          <div class="field-row"><div><div class="field-label">Eyebrow</div><div class="field-desc">Small label above the headline.</div></div><div class="field-control"><input class="field-input editable" name="eyebrow" value="{{ $hero['eyebrow'] ?? '' }}"></div></div>
          <div class="field-row"><div><div class="field-label">Headline</div></div><div class="field-control"><input class="field-input editable" name="title" value="{{ $hero['title'] ?? '' }}" required></div></div>
          <div class="field-row"><div><div class="field-label">Lead paragraph</div></div><div class="field-control"><textarea class="field-input editable" name="lead" rows="3">{{ $hero['lead'] ?? '' }}</textarea></div></div>
          <div style="display:flex;justify-content:flex-end;padding:4px 0 8px;"><button class="btn btn-primary btn-sm" type="submit">{!! Ui::icon('check') !!} Save hero</button></div>
        </form>
      </div>

      <div class="settings-card">
        <div class="settings-card-head"><div><h3>Section headings</h3><p>The heading shown above each block on the home page.</p></div></div>
        <form method="post" action="{{ route('admin.cms.sections') }}">@csrf
          @foreach(['how_title' => 'How it works', 'features_title' => 'Features', 'pricing_title' => 'Pricing', 'testimonials_title' => 'Testimonials', 'faq_title' => 'FAQ', 'cta_title' => 'Call to action'] as $key => $label)
            <div class="field-row"><div><div class="field-label">{{ $label }}</div></div><div class="field-control"><input class="field-input editable" name="{{ $key }}" value="{{ $sections[$key] ?? '' }}" required></div></div>
          @endforeach
          <div style="display:flex;justify-content:flex-end;padding:4px 0 8px;"><button class="btn btn-primary btn-sm" type="submit">{!! Ui::icon('check') !!} Save headings</button></div>
        </form>
      </div>

      <div class="settings-card">
        <div class="settings-card-head"><div><h3>Feature cards</h3><p>The six-up grid describing the platform. Leave a title blank to remove that card.</p></div>
          <form method="post" action="{{ route('admin.cms.block.toggle', 'features') }}">@csrf<button class="btn btn-ghost btn-sm">{{ ($blocks['features']->visible ?? true) ? 'Hide section' : 'Show section' }}</button></form></div>
        <form method="post" action="{{ route('admin.cms.features') }}">@csrf
          @foreach($features as $i => $f)
            <div class="cms-repeat-row">
              <div class="cms-repeat-idx">{{ $i + 1 }}</div>
              <div class="cms-repeat-fields">
                <div class="cms-inline">
                  <input class="field-input editable" name="title[{{ $i }}]" value="{{ $f['title'] ?? '' }}" placeholder="Card title">
                  <select class="field-input editable" name="icon[{{ $i }}]" style="max-width:130px;">@foreach($iconOptions as $ic)<option value="{{ $ic }}" {{ ($f['icon'] ?? '')===$ic?'selected':'' }}>{{ $ic }}</option>@endforeach</select>
                  <input class="field-input editable" type="color" name="fg[{{ $i }}]" value="{{ $f['fg'] ?? '#0073CF' }}" style="max-width:52px;padding:2px;" title="Icon colour">
                  <input class="field-input editable" type="color" name="bg[{{ $i }}]" value="{{ $f['bg'] ?? '#EAF4FE' }}" style="max-width:52px;padding:2px;" title="Icon background">
                </div>
                <textarea class="field-input editable" name="desc[{{ $i }}]" rows="2" placeholder="Description">{{ $f['desc'] ?? '' }}</textarea>
              </div>
            </div>
          @endforeach
          {{-- one spare empty row to add a card --}}
          <div class="cms-repeat-row">
            <div class="cms-repeat-idx">+</div>
            <div class="cms-repeat-fields">
              <div class="cms-inline">
                <input class="field-input editable" name="title[{{ count($features) }}]" placeholder="New card title (optional)">
                <select class="field-input editable" name="icon[{{ count($features) }}]" style="max-width:130px;">@foreach($iconOptions as $ic)<option value="{{ $ic }}">{{ $ic }}</option>@endforeach</select>
                <input class="field-input editable" type="color" name="fg[{{ count($features) }}]" value="#0073CF" style="max-width:52px;padding:2px;">
                <input class="field-input editable" type="color" name="bg[{{ count($features) }}]" value="#EAF4FE" style="max-width:52px;padding:2px;">
              </div>
              <textarea class="field-input editable" name="desc[{{ count($features) }}]" rows="2" placeholder="New card description"></textarea>
            </div>
          </div>
          <div style="display:flex;justify-content:flex-end;padding:4px 0 8px;"><button class="btn btn-primary btn-sm" type="submit">{!! Ui::icon('check') !!} Save feature cards</button></div>
        </form>
      </div>

      <div class="settings-card">
        <div class="settings-card-head"><div><h3>Testimonials</h3><p>Short quotes shown near the bottom of the page. Leave a quote blank to remove it.</p></div>
          <form method="post" action="{{ route('admin.cms.block.toggle', 'testimonials') }}">@csrf<button class="btn btn-ghost btn-sm">{{ ($blocks['testimonials']->visible ?? true) ? 'Hide section' : 'Show section' }}</button></form></div>
        <form method="post" action="{{ route('admin.cms.testimonials') }}">@csrf
          @foreach(array_merge($testimonials, [['quote'=>'','name'=>'','role'=>'']]) as $i => $t)
            <div class="cms-repeat-row">
              <div class="cms-repeat-idx">{{ $i < count($testimonials) ? $i + 1 : '+' }}</div>
              <div class="cms-repeat-fields">
                <textarea class="field-input editable" name="quote[{{ $i }}]" rows="2" placeholder="Quote">{{ $t['quote'] ?? '' }}</textarea>
                <div class="cms-inline">
                  <input class="field-input editable" name="name[{{ $i }}]" value="{{ $t['name'] ?? '' }}" placeholder="Name">
                  <input class="field-input editable" name="role[{{ $i }}]" value="{{ $t['role'] ?? '' }}" placeholder="Role / company">
                </div>
              </div>
            </div>
          @endforeach
          <div style="display:flex;justify-content:flex-end;padding:4px 0 8px;"><button class="btn btn-primary btn-sm" type="submit">{!! Ui::icon('check') !!} Save testimonials</button></div>
        </form>
      </div>

      <div class="settings-card">
        <div class="settings-card-head"><div><h3>FAQ</h3><p>Questions and answers in the accordion. Leave a question blank to remove it.</p></div>
          <form method="post" action="{{ route('admin.cms.block.toggle', 'faqs') }}">@csrf<button class="btn btn-ghost btn-sm">{{ ($blocks['faqs']->visible ?? true) ? 'Hide section' : 'Show section' }}</button></form></div>
        <form method="post" action="{{ route('admin.cms.faqs') }}">@csrf
          @foreach(array_merge($faqs, [['q'=>'','a'=>'']]) as $i => $f)
            <div class="cms-repeat-row">
              <div class="cms-repeat-idx">{{ $i < count($faqs) ? $i + 1 : '+' }}</div>
              <div class="cms-repeat-fields">
                <input class="field-input editable" name="q[{{ $i }}]" value="{{ $f['q'] ?? '' }}" placeholder="Question">
                <textarea class="field-input editable" name="a[{{ $i }}]" rows="2" placeholder="Answer">{{ $f['a'] ?? '' }}</textarea>
              </div>
            </div>
          @endforeach
          <div style="display:flex;justify-content:flex-end;padding:4px 0 8px;"><button class="btn btn-primary btn-sm" type="submit">{!! Ui::icon('check') !!} Save FAQ</button></div>
        </form>
      </div>
    </div>

    {{-- =============================== ARTICLES =============================== --}}
    <div class="settings-panel {{ $tab === 'articles' ? 'active' : '' }}" data-panel="articles">
      <div class="settings-card">
        <div class="settings-card-head"><div><h3>New article</h3><p>Publish resource posts and announcements to the public site.</p></div></div>
        <form method="post" action="{{ route('admin.cms.articles.store') }}">@csrf
          <div class="field-row"><div><div class="field-label">Title</div></div><div class="field-control"><input class="field-input editable" name="title" required></div></div>
          <div class="field-row"><div><div class="field-label">Category</div></div><div class="field-control"><input class="field-input editable" name="category" placeholder="Guides, News, Safety…"></div></div>
          <div class="field-row"><div><div class="field-label">Excerpt</div></div><div class="field-control"><textarea class="field-input editable" name="excerpt" rows="2"></textarea></div></div>
          <div class="field-row"><div><div class="field-label">Body</div><div class="field-desc">HTML is allowed.</div></div><div class="field-control"><textarea class="field-input editable" name="body" rows="8"></textarea></div></div>
          <div class="field-row"><div><div class="field-label">Tags</div><div class="field-desc">Comma-separated.</div></div><div class="field-control"><input class="field-input editable" name="tags"></div></div>
          <div class="field-row"><div><div class="field-label">Status</div></div><div class="field-control"><select class="field-input editable" name="status"><option value="draft">Draft</option><option value="published">Published</option></select></div></div>
          <div style="display:flex;justify-content:flex-end;padding:4px 0 8px;"><button class="btn btn-primary btn-sm" type="submit">{!! Ui::icon('plus') !!} Create article</button></div>
        </form>
      </div>

      <div class="settings-card">
        <div class="settings-card-head"><div><h3>All articles</h3><p>{{ $articles->total() }} total</p></div></div>
        @if($articles->count())
        <table class="data-table"><thead><tr><th>Title</th><th>Category</th><th>Status</th><th>Updated</th><th></th></tr></thead><tbody>
          @foreach($articles as $a)
          <tr>
            <td><strong>{{ $a->title }}</strong><div style="font-size:12px;color:var(--text-3);">{{ \Illuminate\Support\Str::limit($a->excerpt, 60) }}</div></td>
            <td>{{ $a->category ?: '—' }}</td>
            <td><span class="pill {{ $a->status === 'published' ? 'g' : '' }}">{{ ucfirst($a->status) }}</span></td>
            <td>{{ $a->updated_at?->diffForHumans() }}</td>
            <td style="text-align:right;white-space:nowrap;">
              <details class="cms-edit"><summary class="btn btn-ghost btn-sm">Edit</summary>
                <form method="post" action="{{ route('admin.cms.articles.update', $a->id) }}" style="padding:12px 0;">@csrf @method('PUT')
                  <input class="field-input editable" name="title" value="{{ $a->title }}" required style="margin-bottom:8px;">
                  <input class="field-input editable" name="category" value="{{ $a->category }}" placeholder="Category" style="margin-bottom:8px;">
                  <textarea class="field-input editable" name="excerpt" rows="2" placeholder="Excerpt" style="margin-bottom:8px;">{{ $a->excerpt }}</textarea>
                  <textarea class="field-input editable" name="body" rows="6" placeholder="Body" style="margin-bottom:8px;">{{ $a->body }}</textarea>
                  <input class="field-input editable" name="tags" value="{{ implode(', ', (array) $a->tags) }}" placeholder="Tags" style="margin-bottom:8px;">
                  <select class="field-input editable" name="status" style="margin-bottom:8px;"><option value="draft" {{ $a->status==='draft'?'selected':'' }}>Draft</option><option value="published" {{ $a->status==='published'?'selected':'' }}>Published</option></select>
                  <div style="display:flex;gap:8px;justify-content:flex-end;"><button class="btn btn-primary btn-sm">Save</button></div>
                </form>
                <form method="post" action="{{ route('admin.cms.articles.destroy', $a->id) }}" data-confirm="Delete this article permanently?">@csrf @method('DELETE')<button class="btn btn-ghost btn-sm" style="color:#C0392B;">Delete</button></form>
              </details>
            </td>
          </tr>
          @endforeach
        </tbody></table>
        <div style="margin-top:14px;">{{ $articles->links() }}</div>
        @else<p style="color:var(--text-3);">No articles yet.</p>@endif
      </div>
    </div>

    {{-- =============================== SITE MODE =============================== --}}
    <div class="settings-panel {{ $tab === 'mode' ? 'active' : '' }}" data-panel="mode">
      <div class="settings-card">
        <div class="settings-card-head"><div><h3>Site mode</h3><p>Control what the public sees. The admin console and mobile API stay online in every mode.</p></div>
          <span class="pill {{ $siteMode === 'live' ? 'g' : 'a' }}">{{ \Illuminate\Support\Str::headline($siteMode) }}</span></div>
        <form method="post" action="{{ route('admin.cms.site-mode') }}">@csrf
          <div class="cms-mode-grid">
            @foreach(['live' => ['Live', 'The full public website is available.'], 'coming_soon' => ['Coming soon', 'A launch teaser (still indexable) — use before go-live.'], 'under_construction' => ['Under construction', 'A friendly "we\'re improving things" holding page.'], 'maintenance' => ['Maintenance', 'A 503 maintenance page for short planned downtime.']] as $val => $meta)
              <label class="cms-mode-option {{ $siteMode === $val ? 'selected' : '' }}">
                <input type="radio" name="site_mode" value="{{ $val }}" {{ $siteMode === $val ? 'checked' : '' }}>
                <div><div class="cms-mode-title">{{ $meta[0] }}</div><div class="cms-mode-desc">{{ $meta[1] }}</div></div>
              </label>
            @endforeach
          </div>
          <div class="field-row"><div><div class="field-label">Custom message</div><div class="field-desc">Shown on the holding page (optional).</div></div><div class="field-control"><textarea class="field-input editable" name="site_mode_message" rows="2">{{ $siteModeMessage }}</textarea></div></div>
          <div class="field-row"><div><div class="field-label">Expected back / launch date</div><div class="field-desc">e.g. "Monday 9am" or "March 2026" (optional).</div></div><div class="field-control"><input class="field-input editable" name="site_mode_eta" value="{{ $siteModeEta }}"></div></div>
          <div style="display:flex;justify-content:flex-end;padding:4px 0 8px;"><button class="btn btn-primary btn-sm" type="submit">{!! Ui::icon('check') !!} Apply site mode</button></div>
        </form>
      </div>
    </div>

  </div>
</div>

<style>
  .cms-repeat-row{ display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft, #EEF2F7); }
  .cms-repeat-idx{ flex:0 0 26px; height:26px; border-radius:8px; background:#EAF4FE; color:#0073CF; font-weight:600; font-size:12px; display:flex; align-items:center; justify-content:center; }
  .cms-repeat-fields{ flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
  .cms-inline{ display:flex; gap:8px; flex-wrap:wrap; }
  .cms-inline .field-input{ flex:1; min-width:120px; }
  .cms-mode-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; padding:8px 0 16px; }
  .cms-mode-option{ display:flex; gap:10px; align-items:flex-start; padding:14px; border:1.5px solid var(--line, #DCEBFA); border-radius:12px; cursor:pointer; transition:.15s; }
  .cms-mode-option.selected, .cms-mode-option:hover{ border-color:#0073CF; background:#F5FAFF; }
  .cms-mode-title{ font-weight:600; font-size:14px; }
  .cms-mode-desc{ font-size:12.5px; color:var(--text-3, #6b7a90); margin-top:2px; }
  .cms-edit summary{ list-style:none; cursor:pointer; } .cms-edit summary::-webkit-details-marker{ display:none; }
</style>
<script>
  (function(){
    document.querySelectorAll('#cmsNav .settings-nav-item').forEach(function(btn){
      btn.addEventListener('click', function(){
        var panel = btn.getAttribute('data-panel');
        document.querySelectorAll('#cmsNav .settings-nav-item').forEach(function(b){ b.classList.toggle('active', b === btn); });
        document.querySelectorAll('.settings-panel').forEach(function(p){ p.classList.toggle('active', p.getAttribute('data-panel') === panel); });
        history.replaceState(null, '', '?tab=' + panel);
      });
    });
    document.querySelectorAll('.cms-mode-option input').forEach(function(r){
      r.addEventListener('change', function(){
        document.querySelectorAll('.cms-mode-option').forEach(function(o){ o.classList.toggle('selected', o.contains(r) && r.checked); });
      });
    });
  })();
</script>
@endsection