{{-- resources/views/superadmin/falcon-diary/index.blade.php --}}
@extends('layouts.superadmin')

@section('title','مذكّرات وملاحظات الصقر')
@section('page-title','📓 مذكّرات وملاحظات الصقر')

@section('content')
<div class="space-y-6">

  {{-- HERO — توضيح الهدف بشكل ملحمي --}}
  <div class="relative overflow-hidden rounded-3xl p-5 sm:p-6
              bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
              border border-cyan-500/40 shadow-xl shadow-cyan-500/20 text-cyan-50">
    <div class="pointer-events-none absolute -top-24 -left-8 w-64 h-64 bg-cyan-500/25 blur-3xl rounded-full"></div>
    <div class="pointer-events-none absolute -bottom-28 -right-10 w-72 h-72 bg-emerald-500/20 blur-3xl rounded-full"></div>

    <div class="relative flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
      <div class="flex items-start gap-3">
        <div class="grid place-items-center w-11 h-11 rounded-2xl bg-cyan-500/15 ring-2 ring-cyan-400/50 text-cyan-300 shadow-lg">
          <i class="fa-solid fa-feather-pointed text-lg"></i>
        </div>
        <div class="leading-relaxed text-sm sm:text-[15px] space-y-1">
          <h2 class="text-xl sm:text-2xl font-extrabold tracking-tight">
            مذكّرات وملاحظات الصقر
          </h2>
          <p class="text-slate-100/80">
            السجلّ القيادي الرسمي داخل منظومة
            <span class="font-semibold text-emerald-300">جيش الوفاء الذهبي</span>؛
            لتوثيق الملاحظات اليومية، قرارات القيادة، ومتابعة الحالات الحسّاسة.
          </p>
          <p class="text-[12px] sm:text-[13px] text-slate-300/80">
            يمكنك الآن إضافة <span class="font-semibold text-cyan-300">صورة تعبيرية أو لقطة شاشة</span>
            لكل ملاحظة، لتبقى التفاصيل البصرية محفوظة مع الكلام.
          </p>
        </div>
      </div>

      <div class="flex flex-col items-start lg:items-end gap-2 text-[11px] text-slate-200/80">
        @if(session('success'))
          <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/15 border border-emerald-400/40 text-emerald-100">
            <i class="fa-solid fa-circle-check text-xs"></i>
            {{ session('success') }}
          </span>
        @endif
        @if(session('error'))
          <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-rose-500/15 border border-rose-400/40 text-rose-100">
            <i class="fa-solid fa-circle-exclamation text-xs"></i>
            {{ session('error') }}
          </span>
        @endif
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-white/10">
          <i class="fa-solid fa-shield-halved text-[11px] text-emerald-300"></i>
          <span>المعلومات هنا داخلية وسرّية، متاحة للإدارة العليا فقط.</span>
        </div>
      </div>
    </div>
  </div>

  {{-- بطاقة إضافة ملاحظة جديدة (مع رفع صورة) --}}
  <div class="rounded-3xl bg-white dark:bg-slate-900 border border-slate-200/70 dark:border-slate-700 shadow-lg shadow-slate-900/40">
    <div class="px-4 sm:px-6 pt-5 pb-3 flex items-center justify-between">
      <h3 class="text-lg sm:text-xl font-extrabold text-slate-900 dark:text-white">
        ✍️ أضف ملاحظة جديدة
      </h3>
    </div>

    <form method="POST"
          action="{{ route('superadmin.falcon-diary.store') }}"
          class="px-4 sm:px-6 pb-5 space-y-4"
          enctype="multipart/form-data"
          novalidate>
      @csrf

      <div class="grid grid-cols-1 lg:grid-cols-6 gap-3">
        {{-- العنوان --}}
        <div class="lg:col-span-4">
          <input name="title" maxlength="120" placeholder="عنوان الملاحظة…"
                 value="{{ old('title') }}"
                 class="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50
                        dark:bg-slate-800/70 text-slate-900 dark:text-white px-3.5 py-3 text-sm
                        focus:ring-2 focus:ring-cyan-400/50 focus:border-cyan-400 outline-none"/>
          @error('title') <div class="text-rose-500 text-xs mt-1">{{ $message }}</div> @enderror
        </div>

        {{-- الحالة/المود --}}
        <div class="lg:col-span-2">
          <select name="mood"
                  class="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50
                         dark:bg-slate-800/70 text-slate-900 dark:text-white px-3.5 py-3 text-sm
                         focus:ring-2 focus:ring-cyan-400/50 focus:border-cyan-400">
            <option value="">حالة اليوم (اختياري)</option>
            <option value="focus"     @selected(old('mood')==='focus')>🎯 تركيز</option>
            <option value="motivated" @selected(old('mood')==='motivated')>🔥 حماس</option>
            <option value="tired"     @selected(old('mood')==='tired')>😮‍💨 تعب</option>
            <option value="pressure"  @selected(old('mood')==='pressure')>⏱️ ضغط</option>
            <option value="good"      @selected(old('mood')==='good')>🌿 هدوء</option>
          </select>
        </div>

        {{-- المحتوى --}}
        <div class="lg:col-span-6">
          <textarea id="memo-content" name="content" rows="4" placeholder="المحتوى أو تفاصيل الملاحظة…"
                    class="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50
                           dark:bg-slate-800/70 text-slate-900 dark:text-white px-3.5 py-3 text-sm
                           focus:ring-2 focus:ring-cyan-400/50 focus:border-cyan-400 outline-none resize-y">{{ old('content') }}</textarea>
          @error('content') <div class="text-rose-500 text-xs mt-1">{{ $message }}</div> @enderror
        </div>

        {{-- سطر الإعدادات + الصورة --}}
        <div class="lg:col-span-6 flex flex-col gap-3">

          <div class="flex flex-col xl:flex-row gap-3 items-stretch xl:items-center justify-between">

            <div class="flex flex-wrap items-center gap-2.5">
              {{-- مستوى --}}
              <select name="level"
                      class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/70
                             text-slate-900 dark:text-white px-3.5 py-2.5 text-sm focus:ring-2 focus:ring-cyan-400/50">
                <option value="note"   @selected(old('level')==='note' || !old('level'))>ملاحظة عادية</option>
                <option value="follow" @selected(old('level')==='follow')>متابعة مطلوبة</option>
                <option value="alert"  @selected(old('level')==='alert')>تنبيه مهم</option>
              </select>

              {{-- وسم سريع --}}
              <input type="text" name="tag" maxlength="24" placeholder="وسم سريع (اختياري)"
                     value="{{ old('tag') }}"
                     class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/70
                            text-slate-900 dark:text-white px-3.5 py-2.5 text-sm focus:ring-2 focus:ring-cyan-400/50"/>

              {{-- مشاركة مع الإدارة العليا --}}
              <label class="inline-flex items-center gap-2 text-xs sm:text-sm text-slate-700 dark:text-slate-200">
                <input type="checkbox" name="share_with_hq" value="1"
                       @checked(old('share_with_hq'))
                       class="rounded border-slate-300 dark:border-slate-600 text-cyan-600 focus:ring-0">
                <span>مشاركة مع الإدارة العليا</span>
              </label>
            </div>

            {{-- خانة الصورة الملحمية --}}
            <div class="w-full xl:w-auto">
              <label class="block text-xs font-semibold text-slate-600 dark:text-slate-300 mb-1">
                صورة مرافقة للملاحظة (اختياري)
              </label>
              <div id="image-picker"
                   class="relative flex items-center gap-3 rounded-2xl border border-dashed
                          border-cyan-400/60 bg-cyan-500/5 hover:bg-cyan-500/10 px-3.5 py-2.5
                          cursor-pointer transition group">
                <div class="w-10 h-10 rounded-2xl bg-gradient-to-br from-cyan-500 via-sky-500 to-emerald-400
                            grid place-items-center text-white shadow-lg shadow-cyan-500/40 overflow-hidden">
                  <img id="image-preview" src="" alt="" class="hidden w-full h-full object-cover">
                  <i id="image-icon" class="fa-solid fa-image text-lg"></i>
                </div>
                <div class="flex-1 min-w-0">
                  <div class="text-xs sm:text-[13px] text-slate-900 dark:text-slate-50 font-semibold">
                    اختر صورة تعبيرية أو لقطة شاشة
                  </div>
                  <div id="image-filename"
                       class="text-[11px] text-slate-500 dark:text-slate-300 truncate">
                    الحد الأقصى 4MB — تنسيقات: JPG, PNG, WEBP
                  </div>
                </div>
                <div class="text-[11px] text-cyan-400/90 hidden sm:inline-flex items-center gap-1">
                  <i class="fa-solid fa-upload text-[10px]"></i>
                  <span>رفع</span>
                </div>
                <input id="image-input" type="file" name="image" accept="image/*" class="absolute inset-0 opacity-0 cursor-pointer">
              </div>
              @error('image') <div class="text-rose-500 text-xs mt-1">{{ $message }}</div> @enderror
            </div>
          </div>

          <div class="flex items-center justify-end gap-2">
            <button type="submit"
                    class="inline-flex items-center gap-2 px-4 sm:px-5 py-2.5 rounded-2xl
                           bg-gradient-to-r from-cyan-600 via-sky-500 to-emerald-500
                           text-white text-sm font-semibold shadow-lg shadow-cyan-500/40
                           hover:scale-[1.01] active:scale-100 transition">
              <i class="fa-solid fa-floppy-disk text-xs"></i>
              <span>حفظ الملاحظة</span>
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>

  {{-- شريط أدوات السجل (بحث + ترتيب) --}}
  <div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/70 dark:border-slate-700 shadow-md p-4 sm:p-5">
    <form method="GET" class="grid grid-cols-1 md:grid-cols-6 gap-3">
      <div class="md:col-span-3">
        <input type="text" name="q" value="{{ request('q') }}" placeholder="ابحث في العناوين/المحتوى…"
               class="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/70
                      text-slate-900 dark:text-white px-3.5 py-3 text-sm focus:ring-2 focus:ring-cyan-400/50 outline-none"/>
      </div>
      <div>
        <select name="m" class="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/70
                               text-slate-900 dark:text-white px-3.5 py-3 text-sm">
          <option value="">جميع الحالات</option>
          <option value="focus"       @selected(request('m')==='focus')>🎯 تركيز</option>
          <option value="motivated"   @selected(request('m')==='motivated')>🔥 حماس</option>
          <option value="tired"       @selected(request('m')==='tired')>😮‍💨 تعب</option>
          <option value="pressure"    @selected(request('m')==='pressure')>⏱️ ضغط</option>
          <option value="good"        @selected(request('m')==='good')>🌿 هدوء</option>
        </select>
      </div>
      <div>
        <select name="order" class="w-full rounded-2xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/70
                                   text-slate-900 dark:text-white px-3.5 py-3 text-sm">
          <option value="new"   @selected(request('order')==='new')>الأحدث أولاً</option>
          <option value="old"   @selected(request('order')==='old')>الأقدم أولاً</option>
          <option value="pin"   @selected(request('order')==='pin')>المثبّت أولاً</option>
        </select>
      </div>
      <div class="flex items-center">
        <button class="w-full px-4 py-2.5 rounded-2xl bg-slate-900 text-white text-sm font-semibold hover:bg-slate-800">
          بحث
        </button>
      </div>
    </form>
  </div>

  {{-- السجلّ — بطاقات مريحة للموبايل مع صورة إن وجدت --}}
  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-5">
    @forelse($notes as $n)
      <div class="rounded-3xl border border-slate-200/70 dark:border-slate-700 bg-white dark:bg-slate-900
                  shadow-md shadow-slate-900/30 overflow-hidden flex flex-col">

        @if($n->image_path)
          {{-- صورة الملاحظة مع زر تكبير --}}
          <button type="button"
                  class="relative h-40 w-full overflow-hidden group"
                  onclick="openFalconDiaryImage('{{ asset('storage/'.$n->image_path) }}')">
            <img src="{{ asset('storage/'.$n->image_path) }}"
                 alt="صورة الملاحظة"
                 class="w-full h-full object-cover transform group-hover:scale-105 transition duration-500 ease-out">
            <div class="absolute inset-0 bg-gradient-to-t from-slate-950/70 via-slate-900/0 to-transparent"></div>
            <div class="absolute bottom-2 left-2 px-2 py-1 rounded-full text-[11px]
                        bg-black/50 text-slate-100 inline-flex items-center gap-1">
              <i class="fa-solid fa-maximize text-[10px]"></i>
              <span>عرض الصورة</span>
            </div>
          </button>
        @endif

        <div class="p-4 sm:p-4.5 flex flex-col gap-2">
          <div class="flex items-start justify-between gap-2">
            <div class="min-w-0">
              <div class="flex items-center gap-2">
                @php
                  $mood = $n->mood ?? '';
                  $badges = [
                    'focus'     => ['🎯','bg-cyan-500/15 text-cyan-600'],
                    'motivated' => ['🔥','bg-amber-500/15 text-amber-600'],
                    'tired'     => ['😮‍💨','bg-slate-500/15 text-slate-600'],
                    'pressure'  => ['⏱️','bg-rose-500/15 text-rose-600'],
                    'good'      => ['🌿','bg-emerald-500/15 text-emerald-600'],
                  ];
                  [$emoji,$cls] = $badges[$mood] ?? ['📝','bg-blue-500/15 text-blue-600'];
                @endphp
                <span class="px-2 py-0.5 text-[11px] rounded-full {{ $cls }}">{{ $emoji }}</span>
                <h4 class="font-bold text-slate-900 dark:text-white truncate">{{ $n->title }}</h4>
                @if($n->tag)
                  <span class="px-2 py-0.5 text-[10px] rounded-full bg-violet-500/15 text-violet-600 dark:text-violet-300">
                    {{ $n->tag }}
                  </span>
                @endif
              </div>
              <div class="text-[11px] text-slate-500 dark:text-slate-400 mt-1 space-x-1 space-x-reverse">
                <span>{{ $n->created_at->timezone(config('app.timezone'))->diffForHumans() }}</span>
                @if($n->is_pinned)
                  • <span class="text-amber-600 dark:text-amber-400">مثبّت</span>
                @endif
                @if($n->share_with_hq)
                  • <span class="text-cyan-600 dark:text-cyan-400">مُشارك مع الإدارة العليا</span>
                @endif
              </div>
            </div>

            {{-- أزرار سريعة --}}
            <div class="flex items-center gap-1 shrink-0">
              <form method="POST" action="{{ route('superadmin.falcon-diary.toggle-pin',$n->id) }}">
                @csrf
                <button class="p-2 rounded-xl hover:bg-slate-800/10 text-amber-500" title="تثبيت/إلغاء">
                  <i class="fa-solid fa-thumbtack text-xs"></i>
                </button>
              </form>
              <form method="POST" action="{{ route('superadmin.falcon-diary.destroy',$n->id) }}"
                    onsubmit="return confirm('حذف الملاحظة؟')">
                @csrf @method('DELETE')
                <button class="p-2 rounded-xl hover:bg-slate-800/10 text-rose-500" title="حذف">
                  <i class="fa-solid fa-trash-can text-xs"></i>
                </button>
              </form>
            </div>
          </div>

          <div class="text-sm text-slate-700 dark:text-slate-100 leading-7 whitespace-pre-line">
            {{ $n->content }}
          </div>
        </div>
      </div>
    @empty
      <div class="col-span-full">
        <div class="rounded-3xl border border-dashed border-slate-300 dark:border-slate-700
                    bg-slate-50/60 dark:bg-slate-900/40 p-8 text-center text-slate-500 dark:text-slate-300 text-sm">
          لا توجد ملاحظات بعد.
        </div>
      </div>
    @endforelse
  </div>

  @if(method_exists($notes,'links'))
    <div class="pt-2">{{ $notes->withQueryString()->links() }}</div>
  @endif

  {{-- تلميح أخير --}}
  <div class="text-[12px] text-slate-500 dark:text-slate-400">
    💡 استخدم الوسوم والحالات لفرز أسرع. تفعيل “مشاركة مع الإدارة العليا” يرسل الملاحظة لقيادة رولا/سيف (اختياري)،
    والصورة تساعدك تتذكر “جو” اللحظة وقت اتخاذ القرار.
  </div>
</div>

{{-- مودال معاينة صورة الملاحظة --}}
<div id="falcon-diary-image-modal"
     class="fixed inset-0 z-[9999] hidden items-center justify-center bg-black/80 backdrop-blur-sm">
  <button type="button"
          class="absolute top-4 left-4 text-white/80 hover:text-rose-300 text-2xl"
          onclick="closeFalconDiaryImage()"
          aria-label="إغلاق">
    &times;
  </button>
  <div class="max-w-5xl max-h-[90vh] px-3">
    <img id="falcon-diary-image-modal-img"
         src=""
         alt="صورة الملاحظة"
         class="w-full h-full object-contain rounded-3xl shadow-2xl shadow-black/70 border border-white/10">
  </div>
</div>
@endsection

@push('scripts')
<script>
  // autosize بسيط
  const ta = document.getElementById('memo-content');
  if (ta) {
    const fit = () => {
      ta.style.height = 'auto';
      ta.style.height = ta.scrollHeight + 'px';
    };
    ta.addEventListener('input', fit);
    fit();
  }

  // معاينة الصورة في الفورم
  const imgInput   = document.getElementById('image-input');
  const imgPreview = document.getElementById('image-preview');
  const imgIcon    = document.getElementById('image-icon');
  const imgName    = document.getElementById('image-filename');

  if (imgInput) {
    imgInput.addEventListener('change', function () {
      const file = this.files && this.files[0] ? this.files[0] : null;
      if (!file) {
        imgPreview.classList.add('hidden');
        imgIcon.classList.remove('hidden');
        imgName.textContent = 'الحد الأقصى 4MB — تنسيقات: JPG, PNG, WEBP';
        return;
      }

      imgName.textContent = file.name;

      const reader = new FileReader();
      reader.onload = (e) => {
        imgPreview.src = e.target.result;
        imgPreview.classList.remove('hidden');
        imgIcon.classList.add('hidden');
      };
      reader.readAsDataURL(file);
    });
  }

  // 🖼️ مودال تكبير صورة الملاحظة
  function openFalconDiaryImage(url) {
    const modal = document.getElementById('falcon-diary-image-modal');
    const img   = document.getElementById('falcon-diary-image-modal-img');
    if (!modal || !img) return;

    img.src = url;
    modal.classList.remove('hidden');
    modal.classList.add('flex');
  }

  function closeFalconDiaryImage() {
    const modal = document.getElementById('falcon-diary-image-modal');
    const img   = document.getElementById('falcon-diary-image-modal-img');
    if (!modal || !img) return;

    modal.classList.add('hidden');
    modal.classList.remove('flex');
    img.src = '';
  }

  // إغلاق بالمفتاح Escape
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') {
      closeFalconDiaryImage();
    }
  });

  // إغلاق عند الضغط على الخلفية
  (function () {
    const modal = document.getElementById('falcon-diary-image-modal');
    if (!modal) return;
    modal.addEventListener('click', function (e) {
      if (e.target === modal) {
        closeFalconDiaryImage();
      }
    });
  })();
</script>
@endpush