@extends('layouts.superadmin')
@section('title', 'تفاصيل طلب الغياب - الإدارة العليا')

@push('styles')
<style>
  @keyframes pulse-scale { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
  .animate-pulse-scale { animation: pulse-scale 1.2s ease-in-out infinite; }
  .soft-glow{ box-shadow: 0 30px 80px rgba(2,6,23,.18); }
</style>
@endpush

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

{{-- ✅ لون أجمل من الأسود: خلفية فاتحة/زجاجية + تدرجات --}}
<div class="min-h-screen rtl" dir="rtl"
     style="background:
       radial-gradient(45vmax 45vmax at 110% -10%, rgba(56,189,248,.18) 0, transparent 60%),
       radial-gradient(40vmax 40vmax at -10% 120%, rgba(16,185,129,.14) 0, transparent 60%),
       linear-gradient(180deg, rgba(248,250,252,1) 0%, rgba(241,245,249,1) 45%, rgba(226,232,240,1) 100%);">

  <div class="max-w-6xl mx-auto px-3 sm:px-4 lg:px-6 py-6 sm:py-8 space-y-6">

    {{-- Breadcrumb --}}
    <nav class="flex" aria-label="Breadcrumb">
      <ol class="inline-flex items-center space-x-1 md:space-x-3 space-x-reverse text-[12px]">
        <li class="inline-flex items-center">
          <a href="{{ route('superadmin.absences.index') }}"
             class="inline-flex items-center font-extrabold text-slate-700 hover:text-slate-950">
            إدارة طلبات الغياب
          </a>
        </li>
        <li>
          <div class="flex items-center text-slate-500">
            <i class="fa-solid fa-angle-left mx-2 text-[11px] opacity-70"></i>
            <span class="font-bold">تفاصيل الطلب</span>
          </div>
        </li>
      </ol>
    </nav>

    {{-- HERO / Header --}}
    <section class="relative overflow-hidden rounded-3xl border border-slate-200/70
                    bg-white/75 backdrop-blur-xl soft-glow">
      <div class="pointer-events-none absolute -top-24 -right-16 w-80 h-80 rounded-full bg-cyan-400/18 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-24 -left-16 w-80 h-80 rounded-full bg-emerald-400/16 blur-3xl"></div>

      <div class="relative p-5 sm:p-7 lg:p-8">
        <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
          <div class="space-y-2">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-900/5 border border-slate-200/70 text-[11px] font-extrabold text-slate-700">
              <span class="inline-flex w-6 h-6 rounded-full bg-gradient-to-br from-cyan-500 to-emerald-500 text-white items-center justify-center">
                <i class="fa-solid fa-file-lines text-[11px]"></i>
              </span>
              تفاصيل طلب الغياب — الإدارة العليا
            </div>

            <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-950">
              تفاصيل طلب الغياب <span class="text-slate-500">#{{ $absence->id }}</span>
            </h1>

            <p class="text-[12px] sm:text-[14px] text-slate-600 max-w-3xl">
              عرض تفصيلي لطلب الغياب المقدم من المستخدم + مراجعة + إحصائيات.
            </p>
          </div>

          <div class="flex flex-col sm:flex-row gap-2">
            @if($absence->status == 'pending')
              <button onclick="openStatusModal('{{ $absence->id }}', '{{ $absence->user->name }}')"
                      class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-2xl
                             bg-gradient-to-r from-emerald-500 to-emerald-600 text-white font-extrabold
                             shadow-lg shadow-emerald-500/20 hover:scale-[1.01] active:scale-100 transition">
                <i class="fa-solid fa-pen-to-square text-[12px]"></i>
                تحديث حالة الطلب
              </button>
            @endif

            <a href="{{ route('superadmin.absences.member-attendance', $absence->user) }}"
               class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-2xl
                      bg-gradient-to-r from-violet-600 to-indigo-600 text-white font-extrabold
                      shadow-lg shadow-indigo-500/20 hover:scale-[1.01] active:scale-100 transition">
              <i class="fa-solid fa-chart-column text-[12px]"></i>
              سجل الحضور والغياب
            </a>

            <a href="{{ route('superadmin.absences.index') }}"
               class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-2xl
                      bg-slate-900/5 hover:bg-slate-900/10 border border-slate-200/70
                      text-slate-800 font-extrabold transition">
              <i class="fa-solid fa-arrow-right text-[12px]"></i>
              العودة للقائمة
            </a>
          </div>
        </div>

        {{-- Status row --}}
        <div class="mt-5 flex flex-wrap items-center gap-2 text-[11px]">
          @php
            $statusPill = match($absence->status) {
              'approved' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
              'pending'  => 'bg-amber-50 text-amber-800 border-amber-200',
              default    => 'bg-rose-50 text-rose-700 border-rose-200',
            };
            $statusLabel = match($absence->status) {
              'approved' => 'معتمد',
              'pending'  => 'قيد المراجعة',
              default    => 'مرفوض',
            };
            $dot = match($absence->status) {
              'approved' => 'bg-emerald-500',
              'pending'  => 'bg-amber-500',
              default    => 'bg-rose-500',
            };
          @endphp

          <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border font-extrabold {{ $statusPill }}">
            <span class="w-2 h-2 rounded-full {{ $dot }} animate-pulse"></span>
            {{ $statusLabel }}
          </span>

          <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/60 border border-slate-200/70 text-slate-700 font-bold">
            <i class="fa-regular fa-clock text-[11px] text-slate-500"></i>
            تم التقديم: {{ $absence->created_at->format('Y/m/d H:i') }}
          </span>
        </div>
      </div>
    </section>

    {{-- Main Card --}}
    <section class="rounded-3xl border border-slate-200/70 bg-white/80 backdrop-blur-xl soft-glow overflow-hidden">

      {{-- Top Grid (User / Period / Duration / Points) --}}
      <div class="p-5 sm:p-7 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {{-- user --}}
        <div class="rounded-3xl bg-white/70 border border-slate-200/70 p-4">
          <div class="flex items-start gap-3">
            <div class="w-11 h-11 rounded-2xl bg-gradient-to-br from-cyan-500 to-emerald-500 text-white grid place-items-center">
              <i class="fa-solid fa-user"></i>
            </div>
            <div class="min-w-0">
              <div class="text-[11px] text-slate-500 font-bold">اسم المستخدم</div>
              <div class="font-extrabold text-slate-950 truncate">{{ $absence->user->name }}</div>
              <div class="text-[12px] text-slate-600 truncate">{{ $absence->user->email }}</div>
              @php
                $userRole = $absence->user->roles->first();
                $roleNames = [
                  'moderator' => 'مشرف',
                  'official-member' => 'عضو رسمي',
                  'member' => 'عضو بيتا'
                ];
              @endphp
              @if($userRole)
                <div class="mt-2 inline-flex px-2.5 py-1 rounded-full bg-violet-50 border border-violet-200 text-violet-700 text-[11px] font-extrabold">
                  {{ $roleNames[$userRole->name] ?? $userRole->name }}
                </div>
              @endif
            </div>
          </div>
        </div>

        {{-- period --}}
        <div class="rounded-3xl bg-white/70 border border-slate-200/70 p-4">
          <div class="flex items-start gap-3">
            <div class="w-11 h-11 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-700 grid place-items-center">
              <i class="fa-solid fa-calendar-days"></i>
            </div>
            <div>
              <div class="text-[11px] text-slate-500 font-bold">فترة الغياب</div>
              <div class="font-extrabold text-slate-950">{{ $absence->from_date }}</div>
              <div class="text-[12px] text-slate-600">إلى {{ $absence->to_date }}</div>
            </div>
          </div>
        </div>

        {{-- duration --}}
        <div class="rounded-3xl bg-white/70 border border-slate-200/70 p-4">
          <div class="flex items-start gap-3">
            <div class="w-11 h-11 rounded-2xl bg-amber-50 border border-amber-200 text-amber-800 grid place-items-center">
              <i class="fa-regular fa-hourglass-half"></i>
            </div>
            <div>
              <div class="text-[11px] text-slate-500 font-bold">المدة</div>
              <div class="font-extrabold text-slate-950">
                {{ \Carbon\Carbon::parse($absence->from_date)->diffInDays(\Carbon\Carbon::parse($absence->to_date)) + 1 }} يوم
              </div>
            </div>
          </div>
        </div>

        {{-- points --}}
        <div class="rounded-3xl bg-white/70 border border-slate-200/70 p-4">
          <div class="flex items-start gap-3">
            <div class="w-11 h-11 rounded-2xl bg-indigo-50 border border-indigo-200 text-indigo-700 grid place-items-center">
              <i class="fa-solid fa-star"></i>
            </div>
            <div>
              <div class="text-[11px] text-slate-500 font-bold">إجمالي النقاط</div>
              <div class="font-extrabold text-slate-950">{{ number_format($userStats['total_points']) }}</div>
            </div>
          </div>
        </div>
      </div>

      {{-- Reason --}}
      <div class="px-5 sm:px-7 pb-6">
        <div class="rounded-3xl bg-slate-50 border border-slate-200/70 p-5">
          <div class="flex items-start gap-3">
            <div class="w-11 h-11 rounded-2xl bg-cyan-50 border border-cyan-200 text-cyan-700 grid place-items-center">
              <i class="fa-solid fa-note-sticky"></i>
            </div>
            <div class="flex-1 min-w-0">
              <div class="text-[11px] text-slate-500 font-bold mb-2">سبب الغياب</div>
              <p class="text-sm text-slate-900 leading-relaxed whitespace-pre-line">{{ $absence->excuse_reason }}</p>
            </div>
          </div>
        </div>
      </div>

      {{-- Review info --}}
      @if($absence->reviewed_at)
        <div class="px-5 sm:px-7 pb-6">
          <div class="rounded-3xl bg-white/70 border border-slate-200/70 p-5">
            <div class="flex items-center gap-3 mb-4">
              <div class="w-11 h-11 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-700 grid place-items-center">
                <i class="fa-solid fa-user-check"></i>
              </div>
              <div>
                <div class="text-[11px] text-slate-500 font-bold">معلومات المراجعة</div>
                <div class="text-base font-extrabold text-slate-950">تفاصيل المراجع والملاحظات</div>
              </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="rounded-2xl bg-slate-50 border border-slate-200/70 p-4">
                <div class="text-[11px] text-slate-500 font-bold">راجعه</div>
                @if($absence->reviewedBy)
                  <div class="mt-1 font-extrabold text-slate-950">{{ $absence->reviewedBy->name }}</div>
                @else
                  <div class="mt-1 font-extrabold text-slate-950">مراجع مجهول</div>
                @endif
                <div class="text-[12px] text-slate-600 mt-1">{{ $absence->reviewed_at->format('Y/m/d H:i') }}</div>
              </div>

              @if($absence->admin_notes)
                <div class="rounded-2xl bg-amber-50 border border-amber-200/70 p-4">
                  <div class="text-[11px] text-amber-800 font-bold">ملاحظات الإدارة</div>
                  <div class="text-sm text-slate-900 mt-2 leading-relaxed whitespace-pre-line">{{ $absence->admin_notes }}</div>
                </div>
              @endif
            </div>
          </div>
        </div>
      @endif

      {{-- User stats --}}
      <div class="px-5 sm:px-7 pb-7">
        <div class="flex items-center gap-3 mb-4">
          <div class="w-11 h-11 rounded-2xl bg-violet-50 border border-violet-200 text-violet-700 grid place-items-center">
            <i class="fa-solid fa-chart-simple"></i>
          </div>
          <div>
            <div class="text-[11px] text-slate-500 font-bold">إحصائيات المستخدم</div>
            <div class="text-base font-extrabold text-slate-950">ملخص سريع للأداء</div>
          </div>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-3">
          @php
            $mini = [
              ['v'=>$userStats['total_requests'], 'l'=>'إجمالي الطلبات', 'tone'=>'bg-cyan-50 border-cyan-200 text-cyan-700'],
              ['v'=>$userStats['pending_requests'], 'l'=>'قيد المراجعة', 'tone'=>'bg-amber-50 border-amber-200 text-amber-800'],
              ['v'=>$userStats['approved_requests'], 'l'=>'معتمدة', 'tone'=>'bg-emerald-50 border-emerald-200 text-emerald-700'],
              ['v'=>$userStats['rejected_requests'], 'l'=>'مرفوضة', 'tone'=>'bg-rose-50 border-rose-200 text-rose-700'],
              ['v'=>$userStats['present_days'], 'l'=>'أيام الحضور', 'tone'=>'bg-indigo-50 border-indigo-200 text-indigo-700'],
              ['v'=>$userStats['excused_absences'], 'l'=>'غياب بعذر', 'tone'=>'bg-teal-50 border-teal-200 text-teal-700'],
              ['v'=>$userStats['unexcused_absences'], 'l'=>'بدون عذر', 'tone'=>'bg-fuchsia-50 border-fuchsia-200 text-fuchsia-700'],
              ['v'=>$userStats['warnings'], 'l'=>'الإنذارات', 'tone'=>'bg-orange-50 border-orange-200 text-orange-700'],
            ];
          @endphp

          @foreach($mini as $m)
            <div class="rounded-2xl border {{ $m['tone'] }} p-3 text-center bg-white/60">
              <div class="text-lg font-extrabold">{{ $m['v'] }}</div>
              <div class="text-[11px] font-bold opacity-80 mt-1">{{ $m['l'] }}</div>
            </div>
          @endforeach
        </div>
      </div>
    </section>

  </div>
</div>

{{-- ===== Modal (تركته نفس منطقك، بس ستايل أجمل وفاتح) ===== --}}
@if($absence->status == 'pending')
<div id="statusModal" class="fixed inset-0 z-[9999] hidden">
  <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" onclick="closeStatusModal()"></div>

  <div class="relative max-w-lg mx-auto mt-16 sm:mt-24 px-4">
    <div class="rounded-3xl bg-white/90 backdrop-blur-xl border border-slate-200/70 shadow-2xl p-6 text-right">
      <div class="flex items-center justify-between gap-3 mb-4">
        <div class="flex items-center gap-3">
          <div class="w-11 h-11 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-700 grid place-items-center">
            <i class="fa-solid fa-pen-to-square"></i>
          </div>
          <div>
            <div class="text-[11px] text-slate-500 font-bold">تحديث</div>
            <div class="text-lg font-extrabold text-slate-950">حالة طلب الغياب</div>
          </div>
        </div>
        <button type="button" onclick="closeStatusModal()"
                class="w-10 h-10 rounded-2xl bg-slate-900/5 border border-slate-200/70 text-slate-700 hover:bg-slate-900/10 transition grid place-items-center">
          <i class="fa-solid fa-xmark"></i>
        </button>
      </div>

      <div class="rounded-2xl bg-slate-50 border border-slate-200/70 px-4 py-3 text-[12px] text-slate-700 mb-4" id="modalUserName">
        طلب الغياب المقدم من: {{ $absence->user->name }}
      </div>

      <form id="statusForm" class="space-y-4">
        @csrf
        <input type="hidden" id="absenceId" name="absence_id" value="{{ $absence->id }}">

        <div>
          <label class="block text-[11px] font-extrabold text-slate-700 mb-1">حالة الطلب</label>
          <select name="status" required
                  class="w-full rounded-2xl bg-white border border-slate-200/70 px-3 py-2.5 text-sm text-slate-900
                         focus:outline-none focus:ring-2 focus:ring-emerald-500/30">
            <option value="">اختر الحالة...</option>
            <option value="approved">قبول الطلب</option>
            <option value="rejected">رفض الطلب</option>
          </select>
        </div>

        <div>
          <label class="block text-[11px] font-extrabold text-slate-700 mb-1">ملاحظات الإدارة (اختياري)</label>
          <textarea name="admin_notes" rows="3" placeholder="أكتب ملاحظاتك هنا..."
                    class="w-full rounded-2xl bg-white border border-slate-200/70 px-3 py-2.5 text-sm text-slate-900
                           placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-cyan-500/30"></textarea>
        </div>

        <label class="flex items-center gap-2 text-[12px] text-slate-700">
          <input type="checkbox" name="show_identity" id="show_identity" value="1"
                 class="w-5 h-5 rounded border-slate-300 text-emerald-600 focus:ring-emerald-500/30">
          <span class="font-bold">إظهار هويتي كمراجع للطلب</span>
        </label>

        <div class="flex flex-col sm:flex-row-reverse gap-2 pt-2">
          <button type="submit"
                  class="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-2xl text-sm font-extrabold text-white
                         bg-gradient-to-r from-emerald-500 to-emerald-600 shadow-lg shadow-emerald-500/20 hover:scale-[1.01] active:scale-100 transition">
            <i class="fa-solid fa-floppy-disk text-[12px]"></i>
            حفظ التحديث
          </button>
          <button type="button" onclick="closeStatusModal()"
                  class="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-2xl
                         bg-slate-900/5 hover:bg-slate-900/10 border border-slate-200/70 text-slate-800 font-extrabold transition">
            إلغاء
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
@endif

{{-- Alerts (نفس منطقك) --}}
<div id="successAlert" class="fixed top-4 left-1/2 -translate-x-1/2 z-[99999] hidden w-[92vw] max-w-md">
  <div class="bg-emerald-50 border border-emerald-200 rounded-3xl p-4 shadow-2xl">
    <div class="flex items-start gap-3">
      <div class="w-10 h-10 rounded-2xl bg-emerald-100 border border-emerald-200 text-emerald-700 grid place-items-center">
        <i class="fa-solid fa-circle-check"></i>
      </div>
      <div class="flex-1">
        <div class="text-sm font-extrabold text-emerald-800">تم بنجاح!</div>
        <p class="mt-1 text-sm text-emerald-700" id="successMessage"></p>
      </div>
      <button onclick="hideSuccessAlert()" class="w-10 h-10 rounded-2xl bg-slate-900/5 border border-slate-200/70 text-slate-700 hover:bg-slate-900/10 transition grid place-items-center">
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>
  </div>
</div>

<div id="errorAlert" class="fixed top-4 left-1/2 -translate-x-1/2 z-[99999] hidden w-[92vw] max-w-md">
  <div class="bg-rose-50 border border-rose-200 rounded-3xl p-4 shadow-2xl">
    <div class="flex items-start gap-3">
      <div class="w-10 h-10 rounded-2xl bg-rose-100 border border-rose-200 text-rose-700 grid place-items-center">
        <i class="fa-solid fa-triangle-exclamation"></i>
      </div>
      <div class="flex-1">
        <div class="text-sm font-extrabold text-rose-800">حدث خطأ</div>
        <p class="mt-1 text-sm text-rose-700" id="errorMessage"></p>
      </div>
      <button onclick="hideErrorAlert()" class="w-10 h-10 rounded-2xl bg-slate-900/5 border border-slate-200/70 text-slate-700 hover:bg-slate-900/10 transition grid place-items-center">
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>
  </div>
</div>

@if($absence->status == 'pending')
<script>
function openStatusModal(absenceId, userName) {
  document.getElementById('statusModal').classList.remove('hidden');
}
function closeStatusModal() {
  document.getElementById('statusModal').classList.add('hidden');
}
function showSuccessAlert(message) {
  document.getElementById('successMessage').textContent = message;
  document.getElementById('successAlert').classList.remove('hidden');
  setTimeout(hideSuccessAlert, 5000);
}
function hideSuccessAlert() {
  document.getElementById('successAlert').classList.add('hidden');
}
function showErrorAlert(message) {
  document.getElementById('errorMessage').textContent = message;
  document.getElementById('errorAlert').classList.remove('hidden');
  setTimeout(hideErrorAlert, 5000);
}
function hideErrorAlert() {
  document.getElementById('errorAlert').classList.add('hidden');
}

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('statusForm').onsubmit = function(e) {
    e.preventDefault();

    const form = this;
    const submitButton = form.querySelector('button[type="submit"]');
    const originalText = submitButton.innerHTML;
    const absenceId = document.getElementById('absenceId').value;

    submitButton.disabled = true;
    submitButton.innerHTML = `<i class="fa-solid fa-spinner fa-spin"></i> جاري الحفظ...`;

    const formData = new FormData(form);

    fetch(`{{ route('superadmin.absences.update-status', $absence) }}`, {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': formData.get('_token'), 'Accept': 'application/json' },
      body: formData
    })
    .then(r => r.json())
    .then(data => {
      if (data.success) {
        closeStatusModal();
        showSuccessAlert(data.message);
        setTimeout(() => location.reload(), 1500);
      } else {
        showErrorAlert(data.message || 'حدث خطأ غير متوقع');
      }
    })
    .catch(err => {
      console.error('Error:', err);
      showErrorAlert('تعذر الاتصال بالخادم، يرجى المحاولة مرة أخرى');
    })
    .finally(() => {
      submitButton.disabled = false;
      submitButton.innerHTML = originalText;
    });
  };

  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeStatusModal();
  });
});
</script>
@endif
@endsection