@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">Content Studio</a>
        <a href="{{ route('admin.settings') }}" class="is-active">Administrator</a>
        <a href="{{ route('admin.dashboard') }}#workflow">Workflow</a>
      </nav>

      <div class="admin-sidebar-panel">
        <span>Administrator</span>
        <strong>Secure control center</strong>
        <p>Secure access for content planning, blog updates, and future dashboard tools.</p>
      </div>
    </aside>

    <div class="admin-main">
      <header class="admin-topbar">
        <div>
          <span class="admin-topbar-kicker">Administrator</span>
          <h1>Administrator Settings</h1>
          <p>Central settings for secure access, content planning, and future dashboard growth.</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>{{ auth()->user()->name }}</strong>
            <span>{{ auth()->user()->email }}</span>
          </div>

          <a href="{{ route('admin.dashboard') }}" class="admin-link-btn admin-link-btn-outline">Back To Dashboard</a>
        </div>
      </header>

      <main class="admin-body">
        @if (session('status'))
          <div class="admin-status-banner" role="status">
            {{ session('status') }}
          </div>
        @endif

        <section class="admin-settings-hero">
          <article class="admin-panel admin-panel-idea">
            <span class="admin-panel-kicker">Access</span>
            <h2>Secure access for content planning, blog updates, and future dashboard tools.</h2>
            <p>
              This administrator area is the foundation for managing the dashboard with confidence. It gives one protected place
              to review the role, organize content responsibilities, and prepare the next layer of admin features.
            </p>
            <div class="admin-editor-actions">
              <a href="{{ route('admin.dashboard') }}#content-studio" class="admin-link-btn">Manage Site Sections</a>
              <a href="{{ route('admin.content.edit', 'blog') }}" class="admin-link-btn admin-link-btn-outline">Edit Blog Content</a>
            </div>
          </article>
        </section>

        <section class="admin-settings-grid">
          <article class="admin-panel">
            <span class="admin-panel-kicker">Administrator Profile</span>
            <h2>Identity and password</h2>
            <p>Update the administrator name, login email, and password used to secure the admin workspace.</p>

            <form method="POST" action="{{ route('admin.settings.profile.update') }}" class="admin-settings-form">
              @csrf

              <div class="admin-field-group">
                <label for="admin-name">Administrator name</label>
                <input id="admin-name" type="text" name="name" value="{{ old('name', auth()->user()->name) }}" required>
              </div>

              <div class="admin-field-group">
                <label for="admin-email">Administrator email</label>
                <input id="admin-email" type="email" name="email" value="{{ old('email', auth()->user()->email) }}" required>
              </div>

              <div class="admin-field-group">
                <label for="admin-password">New password</label>
                <input id="admin-password" type="password" name="password" placeholder="Leave blank to keep current password">
              </div>

              <div class="admin-field-group">
                <label for="admin-password-confirmation">Confirm new password</label>
                <input id="admin-password-confirmation" type="password" name="password_confirmation" placeholder="Repeat the new password">
              </div>

              <div class="admin-settings-actions">
                <button type="submit" class="admin-auth-btn">Save Profile</button>
              </div>
            </form>
          </article>

          <article class="admin-panel">
            <span class="admin-panel-kicker">Site Settings</span>
            <h2>Core brand details</h2>
            <p>Control site-wide identity details like the site name, contact email, footer message, and social links.</p>

            <form method="POST" action="{{ route('admin.settings.site.update') }}" class="admin-settings-form">
              @csrf

              <div class="admin-field-group">
                <label for="site-name">Site name</label>
                <input id="site-name" type="text" name="site_name" value="{{ old('site_name', $siteSettings['site_name']) }}" required>
              </div>

              <div class="admin-field-group">
                <label for="site-contact-email">Contact email</label>
                <input id="site-contact-email" type="email" name="contact_email" value="{{ old('contact_email', $siteSettings['contact_email']) }}" required>
              </div>

              <div class="admin-field-group">
                <label for="site-footer-text">Footer text</label>
                <textarea id="site-footer-text" name="footer_text" rows="4">{{ old('footer_text', $siteSettings['footer_text']) }}</textarea>
              </div>

              <div class="admin-field-group">
                <label for="social-instagram">Instagram URL</label>
                <input id="social-instagram" type="text" name="social_instagram" value="{{ old('social_instagram', $siteSettings['social_instagram']) }}" placeholder="https://instagram.com/your-account">
              </div>

              <div class="admin-field-group">
                <label for="social-facebook">Facebook URL</label>
                <input id="social-facebook" type="text" name="social_facebook" value="{{ old('social_facebook', $siteSettings['social_facebook']) }}" placeholder="https://facebook.com/your-page">
              </div>

              <div class="admin-settings-actions">
                <button type="submit" class="admin-auth-btn">Save Site Settings</button>
              </div>
            </form>
          </article>

          <article class="admin-panel">
            <span class="admin-panel-kicker">Content Preferences</span>
            <h2>Publishing defaults</h2>
            <p>Set the preferred featured blog post, experiment layout style, and general content presentation choices.</p>

            <form method="POST" action="{{ route('admin.settings.content.update') }}" class="admin-settings-form">
              @csrf

              <label class="admin-switch-field" for="show-greeting">
                <input
                  id="show-greeting"
                  type="checkbox"
                  name="show_greeting"
                  value="1"
                  @checked(old('show_greeting', $contentSettings['show_greeting']) === '1')
                >
                <span>Show the greeting message on the home page</span>
              </label>

              <div class="admin-field-group">
                <label for="featured-blog-post">Featured blog post</label>
                <select id="featured-blog-post" name="featured_blog_post">
                  @foreach (['1', '2', '3', '4'] as $option)
                    <option value="{{ $option }}" @selected(old('featured_blog_post', $contentSettings['featured_blog_post']) === $option)>Post {{ $option }}</option>
                  @endforeach
                </select>
              </div>

              <div class="admin-field-group">
                <label for="experiments-layout">Experiments layout</label>
                <select id="experiments-layout" name="experiments_layout">
                  @foreach (['grid' => 'Grid', 'spotlight' => 'Spotlight', 'compact' => 'Compact'] as $value => $label)
                    <option value="{{ $value }}" @selected(old('experiments_layout', $contentSettings['experiments_layout']) === $value)>{{ $label }}</option>
                  @endforeach
                </select>
              </div>

              <div class="admin-field-group">
                <label for="about-cta-label">About page CTA label</label>
                <input id="about-cta-label" type="text" name="about_cta_label" value="{{ old('about_cta_label', $contentSettings['about_cta_label']) }}" required>
              </div>

              <div class="admin-settings-actions">
                <button type="submit" class="admin-auth-btn">Save Content Preferences</button>
              </div>
            </form>
          </article>

          <article class="admin-panel">
            <span class="admin-panel-kicker">Media Settings</span>
            <h2>Default upload rules</h2>
            <p>Define the default image rules and fallback asset paths for future media and upload tools.</p>

            <form method="POST" action="{{ route('admin.settings.media.update') }}" class="admin-settings-form">
              @csrf

              <div class="admin-field-group">
                <label for="max-upload-size">Max upload size (KB)</label>
                <input id="max-upload-size" type="number" name="max_upload_size" value="{{ old('max_upload_size', $mediaSettings['max_upload_size']) }}" min="256" max="10240" required>
              </div>

              <div class="admin-field-group">
                <label for="allowed-image-types">Allowed image types</label>
                <input id="allowed-image-types" type="text" name="allowed_image_types" value="{{ old('allowed_image_types', $mediaSettings['allowed_image_types']) }}" required>
              </div>

              <div class="admin-field-group">
                <label for="default-hero-image">Default hero image path</label>
                <input id="default-hero-image" type="text" name="default_hero_image" value="{{ old('default_hero_image', $mediaSettings['default_hero_image']) }}" required>
              </div>

              <div class="admin-field-group">
                <label for="default-blog-image">Default blog image path</label>
                <input id="default-blog-image" type="text" name="default_blog_image" value="{{ old('default_blog_image', $mediaSettings['default_blog_image']) }}" required>
              </div>

              <div class="admin-settings-actions">
                <button type="submit" class="admin-auth-btn">Save Media Settings</button>
              </div>
            </form>
          </article>
        </section>
      </main>
    </div>
  </div>
@endsection