{{-- resources/views/superadmin/iman-room/section.blade.php --}}
@extends('layouts.superadmin')

@section('title','غرفة إيمان — '.$payload['title'])

@section('content')
@php
  $tone = $payload['tone'] ?? 'cyan';
  $isGirls = $isGirls ?? false;
@endphp

<div class="min-h-screen py-6 sm:py-8
  bg-gradient-to-b
  {{ $isGirls ? 'from-slate-950 via-pink-950/40 to-slate-950' : 'from-slate-950 via-slate-900 to-black' }}">
  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6 rtl">

    {{-- TOP BAR --}}
    <div class="flex items-center justify-between gap-3">
      <a href="{{ route('superadmin.iman.index') }}"
         class="inline-flex items-center gap-2 px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
        <i class="fa-solid fa-arrow-right-long"></i>
        رجوع للغرفة
      </a>

      <div class="text-[11px] text-white/60 bg-black/30 border border-white/10 rounded-2xl px-3 py-2">
        الفترة: <span class="text-white font-bold">{{ $payload['from'] }}</span> → <span class="text-white font-bold">{{ $payload['to'] }}</span>
      </div>
    </div>

    {{-- HERO --}}
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/90 via-black/40 to-black/50 border border-{{ $tone }}-400/20 shadow-2xl p-6">
      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-{{ $tone }}-400/15 blur-3xl"></div>

      <div class="flex items-start gap-4">
        <div class="w-14 h-14 rounded-3xl bg-{{ $tone }}-500/15 border border-{{ $tone }}-400/25 grid place-items-center text-{{ $tone }}-200">
          <i class="{{ $payload['icon'] }} text-xl"></i>
        </div>

        <div class="min-w-0">
          <div class="text-[11px] text-white/60">Socratic Room</div>
          <h1 class="text-2xl sm:text-3xl font-extrabold text-white">{{ $payload['title'] }}</h1>
          <p class="mt-2 text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
            {{ $payload['desc'] }}
          </p>

          @if($isGirls)
            <div class="mt-3 inline-flex items-center gap-2 px-3 py-1 rounded-full bg-pink-500/15 border border-pink-400/25 text-[11px] text-pink-100">
              <span class="w-1.5 h-1.5 rounded-full bg-pink-300 animate-pulse"></span>
              ثيم الصبايا — لون مميز + مراقبة خاصة
            </div>
          @endif
        </div>
      </div>

      {{-- HR ملحمي --}}
      <div class="mt-6 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>

      {{-- Cards --}}
      <div class="mt-5 grid gap-4 md:grid-cols-3">
        @foreach($payload['cards'] as $c)
          <div class="rounded-3xl border border-white/10 bg-black/25 p-5">
            <div class="text-[11px] text-white/60">Widget</div>
            <div class="text-sm font-extrabold text-white">{{ $c['t'] }}</div>
            <div class="mt-2 text-[12px] text-slate-200/80">{{ $c['v'] }}</div>
            <div class="mt-4 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
          </div>
        @endforeach
      </div>
    </div>

    {{-- NOTIFY CENTER --}}
    @if($showNotify ?? false)
      <div class="relative overflow-hidden rounded-3xl border border-cyan-400/20 bg-slate-950/60 shadow-2xl p-6">
        <div class="pointer-events-none absolute -bottom-24 -left-16 w-80 h-80 rounded-full bg-cyan-400/10 blur-3xl"></div>

        <div class="flex items-center gap-3 mb-4">
          <div class="w-10 h-10 rounded-2xl bg-cyan-500/15 border border-cyan-400/25 grid place-items-center text-cyan-200">
            <i class="fa-solid fa-bell"></i>
          </div>
          <div>
            <div class="text-[11px] text-white/60">إشعار للجميع</div>
            <div class="text-base font-extrabold text-white">إرسال إشعار عام</div>
          </div>
        </div>

        <form method="post" action="{{ route('superadmin.iman.notify') }}" class="grid gap-3">
          @csrf

          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
              <label class="text-[12px] text-slate-200/80">العنوان</label>
              <input name="title" required maxlength="80"
                     class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/30"
                     placeholder="مثال: تنبيه إداري مهم">
            </div>
            <div>
              <label class="text-[12px] text-slate-200/80">نص الإشعار</label>
              <input name="body" required maxlength="240"
                     class="w-full mt-1 rounded-2xl bg-black/40 border border-white/15 text-sm text-white px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/30"
                     placeholder="مثال: تذكير بتسليم التقرير قبل الساعة 9">
            </div>
          </div>

          <button class="inline-flex items-center justify-center px-5 py-3 rounded-2xl text-sm font-extrabold text-slate-950
            bg-gradient-to-r from-cyan-200 via-fuchsia-200 to-emerald-200 shadow-lg shadow-cyan-500/15 hover:scale-[1.01] active:scale-100 transition">
            <i class="fa-solid fa-paper-plane ms-2"></i>
            إرسال للجميع
          </button>

          <div class="text-[11px] text-white/50">
            ملاحظة: الإرسال الفعلي يعتمد على ربط Firebase/FCM عندك.
          </div>
        </form>

        <div class="mt-6 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
      </div>
    @endif

  </div>
</div>
@endsection