@extends('layouts.superadmin')
@section('title','كشف التعارضات')

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

    $from = $from ?? now()->subDays(30)->toDateString();
    $to   = $to   ?? now()->toDateString();
    $conflicts = $conflicts ?? [];

    $total = count($conflicts);
@endphp

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

    {{-- HERO --}}
    <div class="relative overflow-hidden rounded-2xl sm:rounded-3xl shadow-xl
                bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
                border border-amber-500/30 text-white">

        <div class="pointer-events-none absolute -top-24 -left-16 w-72 h-72 rounded-full bg-amber-500/18 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-28 -right-20 w-80 h-80 rounded-full bg-rose-500/18 blur-3xl"></div>

        <div class="relative px-4 sm:px-6 py-4 sm:py-6 space-y-4">
            <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
                <div class="space-y-2 min-w-0">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/20 text-[11px] font-semibold">
                        <i class="fa-solid fa-triangle-exclamation text-amber-200"></i>
                        <span>نظام الغيابات — كشف التعارضات</span>
                    </div>

                    <h1 class="text-lg sm:text-2xl font-extrabold tracking-tight">
                        كشف التعارضات / التكرار
                    </h1>

                    <p class="text-[12px] sm:text-sm text-white/80 leading-relaxed max-w-3xl">
                        هذه الصفحة تكشف حالات وجود <span class="font-bold text-white">غيابين متداخلين</span> لنفس العضو داخل نفس الفترة.
                        الهدف: تنظيف البيانات، منع تكرار الغياب، وضبط التقارير والاحتساب.
                    </p>
                </div>

                <div class="flex flex-col sm:flex-row gap-2">
                    <a href="{{ route('superadmin.absences.index') }}"
                       class="inline-flex items-center justify-center gap-2 px-3.5 py-2 rounded-xl
                              bg-white/10 hover:bg-white/15 border border-white/20 text-[12px] font-bold transition">
                        <i class="fa-solid fa-list-check text-[11px]"></i>
                        <span>طلبات الغياب</span>
                    </a>
                    <a href="{{ route('superadmin.absences.stats') }}"
                       class="inline-flex items-center justify-center gap-2 px-3.5 py-2 rounded-xl
                              bg-white/10 hover:bg-white/15 border border-white/20 text-[12px] font-bold transition">
                        <i class="fa-solid fa-chart-simple text-[11px]"></i>
                        <span>إحصائيات</span>
                    </a>
                </div>
            </div>

            {{-- AERO / Filters + Toggle --}}
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
                {{-- Filters --}}
                <div class="lg:col-span-2 rounded-2xl bg-white/5 border border-white/15 p-3 sm:p-4">
                    <form method="GET" action="{{ route('superadmin.absences.conflicts') }}" class="grid grid-cols-1 sm:grid-cols-3 gap-2 items-end">
                        <div>
                            <label class="block text-[11px] font-semibold text-white/80 mb-1">من</label>
                            <input type="date" name="from" value="{{ $from }}"
                                   class="w-full rounded-xl bg-slate-950/60 border border-white/20 px-3 py-2 text-sm text-white
                                          focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
                        </div>
                        <div>
                            <label class="block text-[11px] font-semibold text-white/80 mb-1">إلى</label>
                            <input type="date" name="to" value="{{ $to }}"
                                   class="w-full rounded-xl bg-slate-950/60 border border-white/20 px-3 py-2 text-sm text-white
                                          focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
                        </div>
                        <div class="flex gap-2">
                            <button type="submit"
                                    class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl
                                           bg-amber-600 hover:bg-amber-500 text-white font-extrabold text-sm
                                           shadow-lg shadow-amber-500/25 transition">
                                <i class="fa-solid fa-magnifying-glass text-[12px]"></i>
                                فحص
                            </button>
                            <button type="button" onclick="window.print()"
                                    class="inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl
                                           bg-white/10 hover:bg-white/15 border border-white/20 text-white font-bold text-sm transition">
                                <i class="fa-solid fa-print text-[12px]"></i>
                            </button>
                        </div>
                    </form>

                    {{-- Guide / Key --}}
                    <div class="mt-3 rounded-2xl bg-white/5 border border-white/10 p-3 text-[12px] text-white/80">
                        <div class="font-extrabold text-sm flex items-center gap-2 mb-2">
                            <i class="fa-solid fa-compass text-amber-200"></i>
                            <span>مفتاح الإرشاد</span>
                        </div>
                        <ul class="list-disc pr-5 space-y-1">
                            <li><span class="font-bold text-white">تعارض</span>: فترتان غياب لنفس العضو تتداخلان (from/to).</li>
                            <li>الهدف: دمج/حذف الزائد أو تعديل الفترات لتكون دقيقة.</li>
                            <li>التبديل بين <span class="font-bold text-white">كروت</span> و <span class="font-bold text-white">جدول</span> بدون إعادة تحميل.</li>
                        </ul>
                    </div>
                </div>

                {{-- Toggle --}}
                <div class="rounded-2xl bg-white/5 border border-white/15 p-4">
                    <div class="font-extrabold text-sm flex items-center gap-2">
                        <i class="fa-solid fa-layer-group text-rose-200"></i>
                        <span>طريقة العرض</span>
                    </div>
                    <div class="mt-3 grid grid-cols-2 gap-2">
                        <button type="button" id="btnCards"
                                class="px-3 py-2 rounded-xl bg-white/10 hover:bg-white/15 border border-white/20
                                       text-[12px] font-bold transition">
                            <i class="fa-solid fa-id-card ml-1"></i>
                            كروت
                        </button>
                        <button type="button" id="btnTable"
                                class="px-3 py-2 rounded-xl bg-white/10 hover:bg-white/15 border border-white/20
                                       text-[12px] font-bold transition">
                            <i class="fa-solid fa-table ml-1"></i>
                            جدول
                        </button>
                    </div>

                    <div class="mt-3 rounded-xl bg-white/5 border border-white/10 px-3 py-2 text-[11px] text-white/70">
                        عدد التعارضات: <span class="font-extrabold text-white">{{ $total }}</span>
                    </div>
                </div>
            </div>

        </div>
    </div>

    {{-- Result Summary Cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div class="rounded-2xl border border-slate-200/80 dark:border-slate-800/80 bg-white/95 dark:bg-slate-900/95 p-4 shadow">
            <div class="text-[11px] font-bold text-slate-500 dark:text-slate-400">الفترة</div>
            <div class="mt-1 text-sm font-extrabold text-slate-900 dark:text-white">{{ $from }} → {{ $to }}</div>
        </div>
        <div class="rounded-2xl border border-amber-200/70 dark:border-amber-800/60 bg-amber-50/80 dark:bg-amber-900/20 p-4 shadow">
            <div class="text-[11px] font-bold text-amber-700/80 dark:text-amber-200/80">عدد التعارضات</div>
            <div class="mt-1 text-2xl font-extrabold text-amber-900 dark:text-amber-100">{{ $total }}</div>
        </div>
        <div class="rounded-2xl border border-rose-200/70 dark:border-rose-800/60 bg-rose-50/80 dark:bg-rose-900/20 p-4 shadow">
            <div class="text-[11px] font-bold text-rose-700/80 dark:text-rose-200/80">تنبيه</div>
            <div class="mt-1 text-[12px] font-bold text-rose-900 dark:text-rose-100">
                راجع التعارضات قبل اعتماد أي تقارير أسبوعية.
            </div>
        </div>
    </div>

    {{-- Cards View --}}
    <div id="cardsView" class="space-y-4">
        @if($total === 0)
            <div class="rounded-2xl border border-slate-200/80 dark:border-slate-800/80 bg-white/95 dark:bg-slate-900/95 shadow p-8 text-center">
                <div class="text-lg font-extrabold text-slate-900 dark:text-white">✅ لا يوجد تعارضات</div>
                <div class="text-sm text-slate-500 dark:text-slate-400 mt-2">الفترة الحالية نظيفة، ممتاز.</div>
            </div>
        @else
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                @foreach($conflicts as $c)
                    @php
                        $u = $c['user'];
                        $a = $c['a'];
                        $b = $c['b'];
                    @endphp
                    <div class="rounded-2xl border border-amber-200/70 dark:border-amber-800/60 bg-white/95 dark:bg-slate-900/95 shadow p-4">
                        <div class="flex items-center justify-between gap-3">
                            <div class="flex items-center gap-3 min-w-0">
                                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-amber-500 to-rose-600 text-white
                                            flex items-center justify-center font-extrabold">
                                    {{ mb_substr($u->name ?? $u->username ?? '؟',0,1) }}
                                </div>
                                <div class="min-w-0">
                                    <div class="font-extrabold text-slate-900 dark:text-white truncate">
                                        {{ $u->name ?? $u->username }}
                                    </div>
                                    <div class="text-[11px] text-slate-500 dark:text-slate-400 truncate">
                                        تعارض غيابين متداخلين
                                    </div>
                                </div>
                            </div>
                            <span class="text-[11px] px-3 py-1.5 rounded-xl bg-amber-500/10 text-amber-700 dark:text-amber-200 border border-amber-500/20">
                                Conflict
                            </span>
                        </div>

                        <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-950/40 p-3">
                                <div class="text-[11px] font-bold text-slate-500 dark:text-slate-400">الغياب A</div>
                                <div class="mt-1 text-sm font-extrabold text-slate-900 dark:text-white">
                                    {{ \Carbon\Carbon::parse($a->from_date)->toDateString() }} → {{ \Carbon\Carbon::parse($a->to_date)->toDateString() }}
                                </div>
                                <div class="mt-2 text-[12px] text-slate-700 dark:text-slate-200 leading-relaxed">
                                    {{ $a->excuse_reason }}
                                </div>
                                <div class="mt-2 text-[11px] text-slate-500 dark:text-slate-400">
                                    ID: {{ $a->id }}
                                </div>
                            </div>

                            <div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-950/40 p-3">
                                <div class="text-[11px] font-bold text-slate-500 dark:text-slate-400">الغياب B</div>
                                <div class="mt-1 text-sm font-extrabold text-slate-900 dark:text-white">
                                    {{ \Carbon\Carbon::parse($b->from_date)->toDateString() }} → {{ \Carbon\Carbon::parse($b->to_date)->toDateString() }}
                                </div>
                                <div class="mt-2 text-[12px] text-slate-700 dark:text-slate-200 leading-relaxed">
                                    {{ $b->excuse_reason }}
                                </div>
                                <div class="mt-2 text-[11px] text-slate-500 dark:text-slate-400">
                                    ID: {{ $b->id }}
                                </div>
                            </div>
                        </div>

                        <div class="mt-4 flex flex-wrap gap-2">
                            <a href="{{ route('superadmin.absences.show', $a->id) }}"
                               class="px-3 py-2 rounded-xl bg-white hover:bg-slate-50 border border-slate-200
                                      dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-slate-700
                                      text-[12px] font-bold text-slate-800 dark:text-slate-100">
                                عرض A
                            </a>
                            <a href="{{ route('superadmin.absences.show', $b->id) }}"
                               class="px-3 py-2 rounded-xl bg-white hover:bg-slate-50 border border-slate-200
                                      dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-slate-700
                                      text-[12px] font-bold text-slate-800 dark:text-slate-100">
                                عرض B
                            </a>
                            <a href="{{ route('superadmin.absences.member', $u->id) }}"
                               class="px-3 py-2 rounded-xl bg-amber-600 hover:bg-amber-500 text-white
                                      text-[12px] font-extrabold shadow shadow-amber-500/20">
                                ملف العضو
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    {{-- Table View --}}
    <div id="tableView" class="hidden rounded-2xl border border-slate-200/80 dark:border-slate-800/80 bg-white/95 dark:bg-slate-900/95 shadow overflow-hidden">
        <div class="px-4 sm:px-6 py-4 border-b border-slate-200 dark:border-slate-800">
            <div class="text-sm font-extrabold text-slate-900 dark:text-white">جدول التعارضات</div>
            <div class="text-[11px] text-slate-500 dark:text-slate-400">عرض سريع للتعارضات مع روابط مباشرة.</div>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-slate-50 dark:bg-slate-950/40 text-slate-600 dark:text-slate-300">
                    <tr>
                        <th class="text-right px-4 py-3 font-bold">العضو</th>
                        <th class="text-right px-4 py-3 font-bold">A (من→إلى)</th>
                        <th class="text-right px-4 py-3 font-bold">B (من→إلى)</th>
                        <th class="text-right px-4 py-3 font-bold">روابط</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
                    @forelse($conflicts as $c)
                        @php $u=$c['user']; $a=$c['a']; $b=$c['b']; @endphp
                        <tr class="hover:bg-slate-50/70 dark:hover:bg-slate-950/30 transition">
                            <td class="px-4 py-3 font-bold text-slate-900 dark:text-white">
                                {{ $u->name ?? $u->username }}
                            </td>
                            <td class="px-4 py-3 text-slate-700 dark:text-slate-200">
                                {{ \Carbon\Carbon::parse($a->from_date)->toDateString() }} → {{ \Carbon\Carbon::parse($a->to_date)->toDateString() }}
                            </td>
                            <td class="px-4 py-3 text-slate-700 dark:text-slate-200">
                                {{ \Carbon\Carbon::parse($b->from_date)->toDateString() }} → {{ \Carbon\Carbon::parse($b->to_date)->toDateString() }}
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex flex-wrap gap-2">
                                    <a href="{{ route('superadmin.absences.show', $a->id) }}"
                                       class="px-3 py-1.5 rounded-xl bg-white hover:bg-slate-50 border border-slate-200
                                              dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-slate-700
                                              text-[12px] font-bold">
                                        A
                                    </a>
                                    <a href="{{ route('superadmin.absences.show', $b->id) }}"
                                       class="px-3 py-1.5 rounded-xl bg-white hover:bg-slate-50 border border-slate-200
                                              dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-slate-700
                                              text-[12px] font-bold">
                                        B
                                    </a>
                                    <a href="{{ route('superadmin.absences.member', $u->id) }}"
                                       class="px-3 py-1.5 rounded-xl bg-amber-600 hover:bg-amber-500 text-white text-[12px] font-extrabold">
                                        ملف
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="px-4 py-10 text-center text-slate-500 dark:text-slate-400">
                                لا يوجد تعارضات ضمن الفترة.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Footer --}}
    <div class="text-center text-[11px] text-slate-500 dark:text-slate-400 pt-2">
        Golden Loyalty Army · Falcon Room · Absences Conflicts Monitor
    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const btnCards = document.getElementById('btnCards');
    const btnTable = document.getElementById('btnTable');

    const cards = document.getElementById('cardsView');
    const table = document.getElementById('tableView');

    function setMode(mode){
        const isCards = mode === 'cards';
        if (cards) cards.classList.toggle('hidden', !isCards);
        if (table) table.classList.toggle('hidden', isCards);

        if (btnCards) btnCards.classList.toggle('bg-white/20', isCards);
        if (btnTable) btnTable.classList.toggle('bg-white/20', !isCards);

        localStorage.setItem('abs_conf_view', mode);
    }

    if (btnCards) btnCards.addEventListener('click', () => setMode('cards'));
    if (btnTable) btnTable.addEventListener('click', () => setMode('table'));

    setMode(localStorage.getItem('abs_conf_view') || 'cards');
});
</script>
@endsection