@extends('admin.layouts.app')

@section('content')
  <div class="admin-dashboard">
    <aside class="admin-sidebar">
      <a href="{{ route('admin.dashboard') }}" class="admin-brand">PHEARUM Admin</a>

      <nav class="admin-sidebar-nav" aria-label="Admin navigation">
        <a href="{{ route('admin.dashboard') }}">Overview</a>
        <a href="{{ route('admin.dashboard') }}#content-studio" class="is-active">Content Studio</a>
        <a href="{{ route('admin.settings') }}">Administrator</a>
        <a href="{{ route('admin.dashboard') }}#workflow">Workflow</a>
        <a href="{{ route('admin.dashboard') }}#actions">Quick Actions</a>
      </nav>

      <div class="admin-sidebar-panel">
        <span>Editing section</span>
        <strong>{{ $sectionData['label'] }}</strong>
        <p>{{ $sectionData['description'] }}</p>
      </div>
    </aside>

    <div class="admin-main">
      <header class="admin-topbar">
        <div>
          <span class="admin-topbar-kicker">{{ ucfirst($mode) }} Mode</span>
          <h1>{{ $sectionData[$mode]['title'] }}</h1>
          <p>{{ $sectionData[$mode]['description'] }}</p>
        </div>

        <div class="admin-topbar-actions">
          <button type="button" class="admin-theme-toggle" data-admin-theme-toggle aria-pressed="false">
            <span class="admin-theme-toggle-icon" data-theme-icon>🌙</span>
            <span class="admin-theme-toggle-label" data-theme-label>Dark Mode</span>
          </button>

          <div class="admin-user-chip">
            <strong>{{ $sectionData['label'] }}</strong>
            <span>{{ $sectionData['kind'] }}</span>
          </div>

          <a href="{{ route($sectionData['public_route']) }}" class="admin-link-btn">View Live Page</a>
        </div>
      </header>

      <main class="admin-body">
        <section class="admin-content-grid admin-editor-grid">
          <article class="admin-panel">
            <span class="admin-panel-kicker">Editor</span>
            <h2>{{ $sectionData['label'] }} form</h2>
            <p>Use this structured workspace to prepare new copy and refine the existing section design.</p>

            <form class="admin-editor-form" enctype="multipart/form-data">
              @if (isset($sectionData['media']))
                <div class="admin-field-group">
                  <span class="admin-field-label">{{ $sectionData['media']['label'] }}</span>

                  <input
                    id="{{ $sectionData['key'] }}-media"
                    class="admin-upload-input"
                    type="file"
                    name="image"
                    accept="image/png,image/jpeg,image/webp,image/gif"
                  >

                  <label for="{{ $sectionData['key'] }}-media" class="admin-upload-dropzone">
                    <span class="admin-upload-icon">+</span>
                    <strong>Upload picture</strong>
                    <p>{{ $sectionData['media']['help'] }}</p>
                    <small>Accepted formats: JPG, PNG, WEBP, GIF</small>
                  </label>
                </div>
              @endif

              @foreach ($sectionData[$mode]['fields'] as $field)
                <div class="admin-field-group">
                  <label for="{{ $sectionData['key'] }}-{{ $field['name'] }}">{{ $field['label'] }}</label>

                  @if ($field['type'] === 'textarea')
                    <textarea
                      id="{{ $sectionData['key'] }}-{{ $field['name'] }}"
                      name="{{ $field['name'] }}"
                      rows="{{ $field['rows'] ?? 4 }}"
                      placeholder="{{ $field['placeholder'] }}"
                    >{{ $field['value'] }}</textarea>
                  @else
                    <input
                      id="{{ $sectionData['key'] }}-{{ $field['name'] }}"
                      type="{{ $field['type'] }}"
                      name="{{ $field['name'] }}"
                      value="{{ $field['value'] }}"
                      placeholder="{{ $field['placeholder'] }}"
                    >
                  @endif
                </div>
              @endforeach
            </form>

            <div class="admin-editor-actions">
              <a href="{{ route('admin.dashboard') }}#content-studio" class="admin-link-btn admin-link-btn-outline">Back To Dashboard</a>
              <a href="{{ route($sectionData['public_route']) }}" class="admin-link-btn admin-link-btn-muted">Open Public Page</a>
            </div>
          </article>

          <article class="admin-panel admin-panel-accent">
            <span class="admin-panel-kicker">Current Entries</span>
            <h2>{{ $sectionData['label'] }} records</h2>
            <div class="admin-record-list">
              @foreach ($sectionData['records'] as $record)
                <div class="admin-record-card">
                  <strong>{{ $record['title'] }}</strong>
                  <p>{{ $record['meta'] }}</p>
                </div>
              @endforeach
            </div>

            <ul class="admin-route-list">
              @foreach ($sectionData['highlights'] as $highlight)
                <li>{{ $highlight }}</li>
              @endforeach
            </ul>
          </article>
        </section>
      </main>
    </div>
  </div>
@endsection