@extends('layouts.app')

@section('title', 'Manage Important Notice - Admin')

@push('style')
<style>
  .preview-modal-shell {
    background: #fdfbf7;
    border: 1px solid #ebd9c5;
    border-radius: 26px;
    padding: 2rem 2.2rem;
    position: relative;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }

  .preview-modal-shell::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 152, 0, 0.2) 0%, rgba(255, 152, 0, 0) 70%);
    pointer-events: none;
  }

  .preview-inner-card {
    background: #ffffff;
    border: 1px solid #f2ede4;
    border-radius: 18px;
    padding: 1.4rem 1.6rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
    max-height: 320px;
    overflow-y: auto;
  }

  .preview-btn {
    background: #ff9800;
    border-color: #ff9800;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border-radius: 12px;
    padding: 12px 28px;
    width: 100%;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(255, 152, 0, 0.3);
  }

  .preview-btn:hover {
    background: #e68900;
    border-color: #e68900;
    color: #fff;
  }

  .megaphone-graphic {
    position: absolute;
    top: 18px;
    right: 32px;
    width: 90px;
    height: 90px;
    pointer-events: none;
  }
</style>
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <div>
      <h4 class="fw-bold py-1 mb-1">
        <span class="text-muted fw-light">Admin /</span> Important Notice Popup
      </h4>
      <p class="text-muted mb-0">Manage the announcement popup that displays to logged-in users when they visit the home/marketplace page.</p>
    </div>

    <div class="d-flex gap-2 align-items-center">
      @if($notice && ($notice['is_active'] ?? true))
        <span class="badge bg-success rounded-pill px-3 py-2">
          <i class="ti tabler-circle-check me-1"></i> Notice Currently Active
        </span>
      @else
        <span class="badge bg-secondary rounded-pill px-3 py-2">
          <i class="ti tabler-circle-x me-1"></i> Notice Inactive / Hidden
        </span>
      @endif
    </div>
  </div>

  @if(session('status'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      <i class="ti tabler-check me-2"></i> {{ session('status') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  @endif

  @if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      <ul class="mb-0 ps-3">
        @foreach($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  @endif

  <div class="row g-4">
    <!-- Edit Form (7 cols) -->
    <div class="col-lg-7 col-12">
      <div class="card shadow-sm border-0">
        <div class="card-header border-bottom py-3 bg-light d-flex justify-content-between align-items-center">
          <h5 class="card-title mb-0 d-flex align-items-center gap-2">
            <i class="ti tabler-edit fs-4 text-warning"></i> Notice Details &amp; Configuration
          </h5>

          @if($notice)
            <form method="POST" action="{{ route('admin.important-notices.toggle') }}">
              @csrf
              <button type="submit" class="btn btn-xs {{ ($notice['is_active'] ?? true) ? 'btn-outline-secondary' : 'btn-outline-success' }} rounded-pill px-3">
                {{ ($notice['is_active'] ?? true) ? 'Deactivate' : 'Activate' }}
              </button>
            </form>
          @endif
        </div>

        <div class="card-body py-4">
          <form method="POST" action="{{ route('admin.important-notices.update') }}">
            @csrf

            <!-- Modal Header Title -->
            <div class="mb-3">
              <label for="title" class="form-label fw-semibold">Modal Header Title</label>
              <input
                type="text"
                class="form-control"
                id="title"
                name="title"
                placeholder="e.g. Important Update, Platform Notice"
                value="{{ old('title', $notice['title'] ?? 'Important Update') }}"
                required
              >
              <div class="form-text">Top headline displayed above the card.</div>
            </div>

            <!-- Inner Headline -->
            <div class="mb-3">
              <label for="headline" class="form-label fw-semibold">Inner Content Headline</label>
              <input
                type="text"
                class="form-control"
                id="headline"
                name="headline"
                placeholder="e.g. Platform Fee Adjustment Notice for Co-subscribers"
                value="{{ old('headline', $notice['headline'] ?? '') }}"
                required
              >
              <div class="form-text">Main topic/subject of the announcement.</div>
            </div>

            <!-- Content -->
            <div class="mb-3">
              <label for="content" class="form-label fw-semibold">Notice Message / Body</label>
              <textarea
                class="form-control"
                id="content"
                name="content"
                rows="9"
                placeholder="Write your notice message here..."
                required
              >{{ old('content', $notice['content'] ?? '') }}</textarea>
              <div class="form-text">
                Explain package price changes, fee percentages, or maintenance updates. Line breaks will be preserved.
              </div>
            </div>

            <!-- Button Text & Active Switch -->
            <div class="row g-3 mb-4">
              <div class="col-md-6 col-12">
                <label for="button_text" class="form-label fw-semibold">Confirmation Button Label</label>
                <input
                  type="text"
                  class="form-control"
                  id="button_text"
                  name="button_text"
                  placeholder="e.g. I Know, Got It, Understood"
                  value="{{ old('button_text', $notice['button_text'] ?? 'I Know') }}"
                >
              </div>

              <div class="col-md-6 col-12 d-flex flex-column justify-content-end">
                <div class="form-check form-switch mb-2">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    id="is_active"
                    name="is_active"
                    value="1"
                    {{ old('is_active', $notice['is_active'] ?? true) ? 'checked' : '' }}
                  >
                  <label class="form-check-label fw-semibold" for="is_active">
                    Active (Show to logged-in users)
                  </label>
                </div>
              </div>
            </div>

            <!-- Action Buttons -->
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
              <button type="submit" class="btn btn-warning text-white fw-bold px-4">
                <i class="ti tabler-device-floppy me-1"></i> Save &amp; Publish Notice
              </button>

              @if($notice)
                <button
                  type="button"
                  class="btn btn-outline-danger"
                  onclick="if(confirm('Are you sure you want to delete this notice? No popup will be shown.')) { document.getElementById('delete-notice-form').submit(); }"
                >
                  <i class="ti tabler-trash me-1"></i> Delete Notice
                </button>
              @endif
            </div>
          </form>

          @if($notice)
            <form id="delete-notice-form" method="POST" action="{{ route('admin.important-notices.destroy') }}" class="d-none">
              @csrf
              @method('DELETE')
            </form>
          @endif
        </div>
      </div>

      <div class="alert alert-info mt-4 d-flex align-items-start" role="alert">
        <i class="ti tabler-info-circle fs-4 me-3 text-info mt-1"></i>
        <div class="small">
          <strong>Behavior Rules:</strong>
          <ul class="mb-0 ps-3 mt-1">
            <li>Whenever a user logs in and lands on the home/marketplace page, this notice appears automatically.</li>
            <li>When the user clicks "I Know" or closes the popup, it will <strong>not</strong> show again during their login session until they log in again.</li>
            <li>If you update or edit the notice, the new version will immediately show to users.</li>
            <li>If you delete or deactivate this notice, nothing will be shown to users.</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Live Preview (5 cols) -->
    <div class="col-lg-5 col-12">
      <div class="card shadow-sm border-0 sticky-top" style="top: 90px;">
        <div class="card-header border-bottom py-3 bg-light">
          <h5 class="card-title mb-0 d-flex align-items-center gap-2">
            <i class="ti tabler-eye fs-4 text-primary"></i> Live User Popup Preview
          </h5>
        </div>
        <div class="card-body p-4">
          <div class="preview-modal-shell">
            <!-- Close icon -->
            <div class="position-absolute" style="top: 18px; right: 18px; z-index: 5;">
              <span class="btn btn-icon btn-sm btn-text-secondary rounded-circle" style="background: rgba(0,0,0,0.05); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;">
                <i class="fa-solid fa-xmark text-muted" style="font-size: 13px;"></i>
              </span>
            </div>

            <!-- Megaphone illustration -->
            <div class="megaphone-graphic">
              <svg viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; filter: drop-shadow(0 8px 16px rgba(255, 140, 0, 0.25));">
                <!-- Spark / Lightning 1 -->
                <path d="M78 12L85 24L77 26L86 38L70 30L78 22L70 20Z" fill="#FFB703" />
                <!-- Spark / Lightning 2 -->
                <path d="M60 4L70 16L63 18L72 28L58 22L64 16L56 14Z" fill="#FF4D6D" />
                <!-- Horn Body -->
                <path d="M42 62L82 42C86 40 92 44 92 50V78C92 84 86 88 82 86L42 66V62Z" fill="url(#horn_grad)" />
                <!-- Speaker Cone Rim -->
                <ellipse cx="88" cy="64" rx="10" ry="22" fill="#FFAA00" />
                <ellipse cx="88" cy="64" rx="7" ry="17" fill="#E67300" />
                <circle cx="88" cy="64" r="5" fill="#FFE5A3" />
                <!-- Handle / Base -->
                <path d="M44 64L38 78C37 80 39 82 41 82H47C49 82 51 80 51 78L48 64H44Z" fill="#00D2D3" />
                <path d="M30 58C30 54 34 50 38 50H44V76H38C34 76 30 72 30 68V58Z" fill="#FF9F1C" />
                <defs>
                  <linearGradient id="horn_grad" x1="42" y1="52" x2="88" y2="84" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#FF9F1C" />
                    <stop offset="1" stop-color="#FF5400" />
                  </linearGradient>
                </defs>
              </svg>
            </div>

            <!-- Title -->
            <h4 class="fw-bold mb-3 pe-5" style="color: #1a1a1a; font-size: 1.35rem;">
              {{ $notice['title'] ?? 'Important Update' }}
            </h4>

            <!-- Inner card -->
            <div class="preview-inner-card mb-4">
              <h6 class="fw-bold mb-2" style="color: #222; font-size: 0.96rem; line-height: 1.35;">
                {{ $notice['headline'] ?? 'Platform Fee Adjustment Notice for Co-subscribers' }}
              </h6>
              <div class="text-muted small" style="line-height: 1.6; white-space: pre-line; font-size: 12.5px;">
                {{ $notice['content'] ?? 'No content specified yet.' }}
              </div>
            </div>

            <!-- Bottom Button -->
            <div>
              <button type="button" class="btn preview-btn">
                {{ $notice['button_text'] ?? 'I Know' }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection