@extends('layouts.member')
@section('title','طلب حذف لايفاتك')

@section('content')
@php
    use Carbon\Carbon;
@endphp

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

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

    {{-- تنبيهات --}}
    @if(session('success'))
        <div class="px-4 py-2.5 rounded-2xl bg-emerald-50 border border-emerald-200 text-sm text-emerald-800">
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="px-4 py-2.5 rounded-2xl bg-rose-50 border border-rose-200 text-sm text-rose-800">
            {{ session('error') }}
        </div>
    @endif

    {{-- هيدر --}}
    <div class="relative rounded-2xl bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                border border-cyan-500/40 text-white shadow-xl overflow-hidden">
        <div class="pointer-events-none absolute -top-24 -left-10 w-64 h-64 rounded-full bg-cyan-500/20 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-24 -right-10 w-64 h-64 rounded-full bg-emerald-500/20 blur-3xl"></div>

        <div class="relative px-4 sm:px-6 py-4 sm:py-5 space-y-2">
            <h1 class="text-lg sm:text-2xl font-extrabold">
                طلب حذف لايفاتك
            </h1>
            <p class="text-[11px] sm:text-xs text-cyan-50/90">
                من هنا يمكنك اختيار لايفاتك وإرسال طلب حذف للإدارة. الحذف لا يتم فوراً، بل بعد موافقة غرفة الصقر.
            </p>
            <p class="text-[11px] text-amber-200/90">
                طلباتك قيد المراجعة: <span class="font-bold">{{ $memberPendingDeleteCount }}</span>
            </p>
        </div>
    </div>

    {{-- اختيار اليوم --}}
    <form method="GET"
          class="bg-white dark:bg-slate-900 rounded-2xl shadow-md border border-slate-200 dark:border-slate-800
                 px-4 sm:px-6 py-3 sm:py-4 flex flex-wrap items-end gap-3">
        <div>
            <label class="block text-[11px] font-semibold text-slate-700 dark:text-slate-200 mb-1">
                اختر اليوم
            </label>
            <input type="date" name="date" value="{{ $date }}"
                   class="w-full rounded-xl bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700
                          px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-cyan-500">
        </div>
        <button class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold
                       bg-cyan-600 hover:bg-cyan-700 text-white shadow-sm shadow-cyan-500/40 transition">
            <i class="fa-solid fa-magnifying-glass text-xs"></i>
            عرض لايفات اليوم
        </button>
    </form>

    {{-- لايفات العضو --}}
    @if($streams->isEmpty())
        <div class="bg-white dark:bg-slate-900 rounded-2xl shadow border border-slate-200 dark:border-slate-700 p-6 text-center text-sm text-slate-500 dark:text-slate-400">
            لا يوجد لايفات لك في هذا اليوم.
        </div>
    @else
        <div class="space-y-3 sm:space-y-4">
            @foreach($streams as $live)
                @php
                    $timeText = $live->scheduled_time
                        ? Carbon::parse($live->scheduled_time)->format('H:i')
                        : '—';
                    $hours = round(($live->duration_hours ?? 0) + (($live->duration_minutes ?? 0)/60), 2);
                    $typeLabel = match($live->type) {
                        'guests' => 'قستات',
                        'tours'  => 'تحديات',
                        'both'   => 'كلاهما',
                        default  => $live->type,
                    };
                @endphp

                <div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700
                            shadow-sm hover:shadow-md transition px-4 sm:px-5 py-3 flex flex-col gap-2">
                    <div class="flex items-center justify-between gap-2">
                        <div class="flex flex-col">
                            <div class="text-sm font-semibold text-slate-900 dark:text-slate-50">
                                لايف الساعة {{ $timeText }}
                            </div>
                            <div class="text-[11px] text-slate-500 dark:text-slate-400">
                                النوع: {{ $typeLabel }} • المدة: {{ $hours }} س • الخانة: {{ $live->slot_label ?: '—' }}
                            </div>
                        </div>
                        <button type="button"
                                class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg text-[11px] font-semibold
                                       bg-rose-600 hover:bg-rose-700 text-white shadow-sm"
                                onclick="openMemberDeleteModal({{ $live->id }}, '{{ $timeText }}')">
                            <i class="fa-solid fa-trash-can text-xs"></i>
                            طلب حذف
                        </button>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>

{{-- Modal: طلب الحذف --}}
<div id="mDelBackdrop"
     class="fixed inset-0 bg-black/60 backdrop-blur-sm hidden z-40"
     onclick="closeMemberDeleteModal()"></div>

<div id="mDelModal"
     class="fixed inset-0 hidden overflow-auto z-50">
  <div class="min-h-full flex items-center justify-center p-4">
    <div class="w-full max-w-xl rounded-2xl bg-white dark:bg-slate-900
                border border-slate-200 dark:border-slate-700 shadow-2xl">
      <div class="px-4 sm:px-5 py-3 border-b border-slate-200 dark:border-slate-700 flex items-center justify-between">
        <div class="flex items-center gap-2">
          <div class="w-9 h-9 rounded-full bg-rose-100 dark:bg-rose-900/40 flex items-center justify-center">
            <i class="fa-solid fa-trash-can text-rose-600 dark:text-rose-300 text-sm"></i>
          </div>
          <h3 class="text-base sm:text-lg font-extrabold text-slate-900 dark:text-white">
            طلب حذف لايف
          </h3>
        </div>
        <button type="button"
                class="text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-100"
                onclick="closeMemberDeleteModal()">
          <i class="fa-solid fa-xmark text-lg"></i>
        </button>
      </div>

      <form id="mDelForm" method="POST">
        @csrf
        <div class="px-4 sm:px-5 py-4 space-y-3">
          <input type="hidden" id="mDelLiveId">
          <p class="text-sm text-slate-800 dark:text-slate-100">
            سيتم إرسال طلب حذف لهذا اللايف إلى الإدارة. لن يُحذف إلا بعد الموافقة.
          </p>
          <p id="mDelLiveInfo" class="text-[13px] text-slate-700 dark:text-slate-200 font-semibold"></p>

          <div>
            <label class="block text-sm font-semibold text-slate-800 dark:text-slate-100 mb-1">
              سبب الحذف (اختياري)
            </label>
            <textarea id="mDelReason" name="reason" rows="4"
                      class="w-full rounded-xl bg-slate-50 dark:bg-slate-900
                             border border-slate-300 dark:border-slate-700
                             px-3 py-2 text-sm text-slate-900 dark:text-slate-100
                             focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-rose-500"
                      placeholder="مثال: تم إدخال اللايف بالخطأ / لن أتمكن من عمله..."></textarea>
          </div>
        </div>

        <div class="px-4 sm:px-5 py-3 border-t border-slate-200 dark:border-slate-700 flex items-center justify-end gap-2">
          <button type="button"
                  class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-semibold
                         bg-slate-100 hover:bg-slate-200 text-slate-800
                         dark:bg-slate-900 dark:hover:bg-slate-800 dark:text-slate-100"
                  onclick="closeMemberDeleteModal()">
            إلغاء
          </button>
          <button type="submit"
                  class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-semibold
                         bg-rose-600 hover:bg-rose-700 text-white shadow-sm">
            <i class="fa-solid fa-paper-plane ml-1 text-xs"></i>
            إرسال الطلب
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
function openMemberDeleteModal(id, timeText){
    const info = `لايف الساعة ${timeText}`;
    document.getElementById('mDelLiveId').value = id;
    document.getElementById('mDelLiveInfo').textContent = info;
    document.getElementById('mDelReason').value = '';

    const form = document.getElementById('mDelForm');
    form.action = `{{ url('/member/lives-delete') }}/${id}/send`;

    document.getElementById('mDelBackdrop').classList.remove('hidden');
    document.getElementById('mDelModal').classList.remove('hidden');
}

function closeMemberDeleteModal(){
    document.getElementById('mDelBackdrop').classList.add('hidden');
    document.getElementById('mDelModal').classList.add('hidden');
}
</script>
@endsection