@extends('layouts.superadmin')
@section('title','ProActive — تسجيل تقرير')
@section('page-title','📝 تسجيل تقرير فعالية ProActive')

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

  {{-- Alerts --}}
  @if(session('success'))
    <div class="rounded-xl border border-emerald-300/60 bg-emerald-50 text-emerald-900 p-3 text-sm">
      {{ session('success') }}
    </div>
  @endif
  @if($errors->any())
    <div class="rounded-xl border border-rose-300/60 bg-rose-50 text-rose-900 p-3 text-sm">
      <ul class="list-disc list-inside">
        @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
      </ul>
    </div>
  @endif

  {{-- Header / Hero --}}
  <div class="relative overflow-hidden rounded-2xl p-5 md:p-6
              bg-gradient-to-br from-indigo-800 via-violet-700 to-fuchsia-700 text-white">
    <div class="absolute -inset-24 opacity-30 blur-3xl
                bg-[radial-gradient(80%_60%_at_80%_20%,rgba(255,255,255,.25),transparent_70%)]"></div>
    <div class="relative flex items-center justify-between gap-4">
      <div>
        <div class="text-xs/5 opacity-80">نظام فريق الوفاء الذهبي</div>
        <h1 class="text-xl md:text-2xl font-extrabold">تسجيل تقرير فعالية ProActive</h1>
        <p class="text-white/90 text-sm mt-1">
          سجّل ملخص الفعالية، التقييم، الملاحظات، ومشاركة الأعضاء. الحقول الذكية تظهر فقط عند الحاجة.
        </p>
      </div>
      <div class="hidden md:block">
        <span class="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm">
          <i class="fa-solid fa-bolt"></i><span>ملف اليوم: {{ $today }}</span>
        </span>
      </div>
    </div>
  </div>

  {{-- Form --}}
  <form method="post" action="{{ route('superadmin.proactive.report.store') }}"
        class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200/60 dark:border-white/10 shadow p-4 md:p-6 space-y-6"
        id="reportForm">
    @csrf

    {{-- Section: الأساسيات --}}
    <div class="space-y-4">
      <div class="flex items-center gap-3">
        <span class="h-px flex-1 bg-gradient-to-l from-transparent via-indigo-300/60 to-transparent"></span>
        <span class="text-sm font-extrabold text-indigo-700 dark:text-indigo-300">البيانات الأساسية</span>
        <span class="h-px flex-1 bg-gradient-to-r from-transparent via-indigo-300/60 to-transparent"></span>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        {{-- التاريخ --}}
        <div>
          <label class="block text-sm text-gray-600 dark:text-gray-200 mb-1">تاريخ الفعالية</label>
          <input type="date" name="activity_date" value="{{ old('activity_date', $today) }}"
                 class="w-full rounded-lg border-gray-300 dark:border-white/10 dark:bg-gray-800 dark:text-white">
        </div>

        {{-- النوع --}}
        <div>
          <label class="block text-sm text-gray-600 dark:text-gray-200 mb-2">نوع الفعالية</label>
          <div class="grid grid-cols-2 gap-2">
            <label class="flex items-center gap-2 rounded-lg border border-gray-200 dark:border-white/10 p-2 cursor-pointer">
              <input type="radio" name="activity_type" value="regular"
                     {{ old('activity_type','regular')==='regular'?'checked':'' }}>
              <span class="text-sm">
                عادية
                <span class="block text-[11px] text-gray-500">
                  جولة على لايفات الآخرين لجلب أصدقاء/مهتمين للتيم.
                </span>
              </span>
            </label>
            <label class="flex items-center gap-2 rounded-lg border border-gray-200 dark:border-white/10 p-2 cursor-pointer">
              <input type="radio" name="activity_type" value="plus"
                     {{ old('activity_type')==='plus'?'checked':'' }}>
              <span class="text-sm">
                +Plus
                <span class="block text-[11px] text-gray-500">
                  مخصّصة لأصحاب التيم فقط وبتركيز أعلى.
                </span>
              </span>
            </label>
          </div>
        </div>

        {{-- المنصّة --}}
        <div>
          <label class="block text-sm text-gray-600 dark:text-gray-200 mb-1">المنصّة</label>
          <select name="platform" class="w-full rounded-lg border-gray-300 dark:border-white/10 dark:bg-gray-800 dark:text-white">
            @foreach($platforms as $k=>$v)
              <option value="{{ $k }}" @selected(old('platform','tiktok')===$k)>{{ $v }}</option>
            @endforeach
          </select>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        {{-- لايف مين --}}
        <div>
          <label class="block text-sm text-gray-600 dark:text-gray-200 mb-1">لايف مين؟ (المُضيف)</label>
          <input type="text" name="live_host" value="{{ old('live_host') }}"
                 class="w-full rounded-lg border-gray-300 dark:border-white/10 dark:bg-gray-800 dark:text-white" maxlength="150">
        </div>
        {{-- صاحب اللايف --}}
        <div>
          <label class="block text-sm text-gray-600 dark:text-gray-200 mb-1">اسم صاحب اللايف</label>
          <input type="text" name="live_owner_name" value="{{ old('live_owner_name') }}"
                 class="w-full rounded-lg border-gray-300 dark:border-white/10 dark:bg-gray-800 dark:text-white" maxlength="150">
        </div>
        {{-- رابط اختياري --}}
        <div>
          <label class="block text-sm text-gray-600 dark:text-gray-200 mb-1">رابط اللايف (اختياري)</label>
          <input type="url" name="live_link" value="{{ old('live_link') }}"
                 class="w-full rounded-lg border-gray-300 dark:border-white/10 dark:bg-gray-800 dark:text-white" maxlength="255"
                 placeholder="https://...">
        </div>
      </div>
    </div>

    {{-- Section: الملخص والتقييم --}}
    <div class="space-y-4">
      <div class="flex items-center gap-3">
        <span class="h-px flex-1 bg-gradient-to-l from-transparent via-violet-300/60 to-transparent"></span>
        <span class="text-sm font-extrabold text-violet-700 dark:text-violet-300">الملخص والتقييم</span>
        <span class="h-px flex-1 bg-gradient-to-r from-transparent via-violet-300/60 to-transparent"></span>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="md:col-span-2">
          <label class="block text-sm text-gray-600 dark:text-gray-200 mb-1">
            ملخص قصير
            <span class="text-[11px] text-gray-500">(حتى 300 حرف)</span>
          </label>
          <textarea name="short_summary" maxlength="300" id="short_summary"
                    class="w-full rounded-lg border-gray-300 dark:border-white/10 dark:bg-gray-800 dark:text-white min-h-[90px]"
                    oninput="counter('short_summary','sumCount')">{{ old('short_summary') }}</textarea>
          <div class="text-[11px] text-gray-500 mt-1"><span id="sumCount">0</span>/300</div>
        </div>
        <div>
          <label class="block text-sm text-gray-600 dark:text-gray-200 mb-1">درجة اللايف</label>
          <select name="live_grade"
                  class="w-full rounded-lg border-gray-300 dark:border-white/10 dark:bg-gray-800 dark:text-white">
            <option value="good"       @selected(old('live_grade')==='good')>جيد</option>
            <option value="very_good"  @selected(old('live_grade','very_good')==='very_good')>جيد جدًا</option>
            <option value="excellent"  @selected(old('live_grade')==='excellent')>ممتاز</option>
          </select>
        </div>
      </div>
    </div>

    {{-- Section: المشاكل والتقدم --}}
    <div class="space-y-4">
      <div class="flex items-center gap-3">
        <span class="h-px flex-1 bg-gradient-to-l from-transparent via-fuchsia-300/60 to-transparent"></span>
        <span class="text-sm font-extrabold text-fuchsia-700 dark:text-fuchsia-300">المشاكل والتقدّم</span>
        <span class="h-px flex-1 bg-gradient-to-r from-transparent via-fuchsia-300/60 to-transparent"></span>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="space-y-2">
          <label class="inline-flex items-center gap-2">
            <input type="checkbox" name="had_issues" id="had_issues" {{ old('had_issues')?'checked':'' }}>
            <span class="text-sm text-gray-700 dark:text-gray-200">هل كانت هناك مشاكل؟</span>
          </label>
          <textarea name="issues_text" id="issues_text"
                    class="w-full rounded-lg border-gray-300 dark:border-white/10 dark:bg-gray-800 dark:text-white min-h-[80px] {{ old('had_issues')?'':'hidden' }}"
                    placeholder="اذكر طبيعة المشكلة وكيف تم التعامل معها">{{ old('issues_text') }}</textarea>
        </div>

        <div class="space-y-2">
          <label class="inline-flex items-center gap-2">
            <input type="checkbox" name="had_progress" id="had_progress" {{ old('had_progress')?'checked':'' }}>
            <span class="text-sm text-gray-700 dark:text-gray-200">هل كان هناك تقدم عام؟</span>
          </label>
          <textarea name="progress_text" id="progress_text"
                    class="w-full rounded-lg border-gray-300 dark:border-white/10 dark:bg-gray-800 dark:text-white min-h-[80px] {{ old('had_progress')?'':'hidden' }}"
                    placeholder="ما الذي تحسّن؟ أمثلة على التفاعل/الانضمامات">{{ old('progress_text') }}</textarea>
        </div>
      </div>
    </div>

    {{-- Section: الملاحظات --}}
    <div class="space-y-4">
      <div class="flex items-center gap-3">
        <span class="h-px flex-1 bg-gradient-to-l from-transparent via-cyan-300/60 to-transparent"></span>
        <span class="text-sm font-extrabold text-cyan-700 dark:text-cyan-300">الملاحظات</span>
        <span class="h-px flex-1 bg-gradient-to-r from-transparent via-cyan-300/60 to-transparent"></span>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label class="block text-sm text-gray-600 dark:text-gray-200 mb-1">ملاحظات إيجابية (إجباري)</label>
          <textarea name="positive_notes" class="w-full rounded-lg border-gray-300 dark:border-white/10 dark:bg-gray-800 dark:text-white min-h-[80px]">{{ old('positive_notes') }}</textarea>
        </div>
        <div>
          <label class="block text-sm text-gray-600 dark:text-gray-200 mb-1">ملاحظات سلبية (اختياري)</label>
          <textarea name="negative_notes" class="w-full rounded-lg border-gray-300 dark:border-white/10 dark:bg-gray-800 dark:text-white min-h-[80px]">{{ old('negative_notes') }}</textarea>
        </div>
      </div>
    </div>

    {{-- Section: مشاركة عضو من فريقنا --}}
    <div class="space-y-4">
      <div class="flex items-center gap-3">
        <span class="h-px flex-1 bg-gradient-to-l from-transparent via-emerald-300/60 to-transparent"></span>
        <span class="text-sm font-extrabold text-emerald-700 dark:text-emerald-300">مشاركة عضو من فريقنا</span>
        <span class="h-px flex-1 bg-gradient-to-r from-transparent via-emerald-300/60 to-transparent"></span>
      </div>

      <label class="inline-flex items-center gap-2 mb-2">
        <input type="checkbox" name="had_team_member" id="had_team_member" {{ old('had_team_member')?'checked':'' }}>
        <span class="text-sm text-gray-700 dark:text-gray-200">هل شارك عضو من أعضائنا؟</span>
      </label>

      <div id="member_wrap" class="{{ old('had_team_member')?'':'hidden' }}">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label class="block text-sm text-gray-600 dark:text-gray-200 mb-1">اسم العضو</label>
            <input type="text" name="member_name" value="{{ old('member_name') }}"
                   class="w-full rounded-lg border-gray-300 dark:border-white/10 dark:bg-gray-800 dark:text-white" maxlength="150">
          </div>
          <div>
            <label class="block text-sm text-gray-600 dark:text-gray-200 mb-1">الأداء</label>
            <select name="member_performance"
                    class="w-full rounded-lg border-gray-300 dark:border-white/10 dark:bg-gray-800 dark:text-white">
              <option value="" @selected(old('member_performance')==='')>— اختر —</option>
              <option value="weak"        @selected(old('member_performance')==='weak')>ضعيف</option>
              <option value="normal"      @selected(old('member_performance')==='normal')>عادي</option>
              <option value="good"        @selected(old('member_performance')==='good')>جيد</option>
              <option value="very_good"   @selected(old('member_performance')==='very_good')>جيد جدًا</option>
              <option value="excellent"   @selected(old('member_performance')==='excellent')>ممتاز</option>
            </select>
          </div>
          <div>
            <label class="block text-sm text-gray-600 dark:text-gray-200 mb-1">الوقت بالدقائق</label>
            <input type="number" min="0" name="member_minutes" value="{{ old('member_minutes') }}"
                   class="w-full rounded-lg border-gray-300 dark:border-white/10 dark:bg-gray-800 dark:text-white">
          </div>
        </div>
      </div>
    </div>

    {{-- Section: أمور عامّة وإحصاءات سريعة --}}
    <div class="space-y-4">
      <div class="flex items-center gap-3">
        <span class="h-px flex-1 bg-gradient-to-l from-transparent via-amber-300/60 to-transparent"></span>
        <span class="text-sm font-extrabold text-amber-700 dark:text-amber-300">عام / إحصاءات سريعة</span>
        <span class="h-px flex-1 bg-gradient-to-r from-transparent via-amber-300/60 to-transparent"></span>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label class="block text-sm text-gray-600 dark:text-gray-200 mb-1">مشاكل عامة</label>
          <textarea name="general_issues" class="w-full rounded-lg border-gray-300 dark:border-white/10 dark:bg-gray-800 dark:text-white min-h-[80px]"
                    placeholder="هل واجهتم مشاكل تنظيمية/تواصل/حظر...؟">{{ old('general_issues') }}</textarea>
        </div>
        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="block text-sm text-gray-600 dark:text-gray-200 mb-1">أصدقاء/مهتمون جدد</label>
            <input type="number" min="0" name="new_friends" value="{{ old('new_friends',0) }}"
                   class="w-full rounded-lg border-gray-300 dark:border-white/10 dark:bg-gray-800 dark:text-white">
          </div>
          <div>
            <label class="block text-sm text-gray-600 dark:text-gray-200 mb-1">دعوات مرسلة</label>
            <input type="number" min="0" name="invitations_sent" value="{{ old('invitations_sent',0) }}"
                   class="w-full rounded-lg border-gray-300 dark:border-white/10 dark:bg-gray-800 dark:text-white">
          </div>
        </div>
      </div>
    </div>

    {{-- Actions --}}
    <div class="flex flex-col md:flex-row items-stretch md:items-center gap-3 pt-2">
      <button type="submit"
              class="w-full md:w-auto inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5
                     bg-gradient-to-r from-indigo-600 to-fuchsia-600 text-white font-bold shadow-lg">
        <i class="fa-solid fa-floppy-disk"></i><span>حفظ التقرير</span>
      </button>
      <button type="reset"
              class="w-full md:w-auto inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5
                     border border-gray-300 dark:border-white/10 text-gray-700 dark:text-gray-200">
        <i class="fa-solid fa-rotate-left"></i><span>تفريغ الحقول</span>
      </button>
      <div class="md:ml-auto text-xs text-gray-500">
        سيتم حفظ اسم المُدخل تلقائيًا (created_by).
      </div>
    </div>
  </form>
</div>

{{-- Small JS --}}
<script>
  function showIf(boxId, targetId){
    const box = document.getElementById(boxId);
    const el  = document.getElementById(targetId);
    const toggle = ()=> el.classList.toggle('hidden', !box.checked);
    box.addEventListener('change', toggle); toggle();
  }
  function counter(srcId, outId){
    const el = document.getElementById(srcId);
    const out= document.getElementById(outId);
    if(el && out){ out.textContent = el.value.length; }
  }
  document.addEventListener('DOMContentLoaded', ()=>{
    showIf('had_issues','issues_text');
    showIf('had_progress','progress_text');
    const memberChk = document.getElementById('had_team_member');
    const wrap = document.getElementById('member_wrap');
    const sync = ()=> wrap.classList.toggle('hidden', !memberChk.checked);
    memberChk.addEventListener('change', sync); sync();
    counter('short_summary','sumCount');
  });
</script>
@endsection