@extends('layouts.superadmin')
@section('title','وضع غياب مباشر')

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

@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; }
    .sc-scrollbar::-webkit-scrollbar{ width:10px; }
    .sc-scrollbar::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius: 999px; }
    .sc-scrollbar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; }
    .sc-scrollbar::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.28); }
</style>
@endpush

<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-6 sm:py-8 rtl text-white" dir="rtl">
<div class="max-w-5xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

    {{-- HERO + PROGRESS --}}
    <section class="relative overflow-hidden rounded-3xl
                    bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98
                    border border-rose-400/20 shadow-2xl shadow-rose-500/10">
        <div class="pointer-events-none absolute -top-24 -left-16 w-72 h-72 rounded-full bg-rose-500/18 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-24 -right-16 w-72 h-72 rounded-full bg-orange-500/12 blur-3xl"></div>

        <div class="relative p-5 sm:p-7 lg:p-8 space-y-4">
            <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
                <div class="space-y-2 max-w-3xl">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-rose-300/25 text-[11px] text-rose-100">
                        <span class="inline-flex h-6 w-6 rounded-full bg-rose-500/25 items-center justify-center">
                            <i class="fa-solid fa-user-clock text-rose-100 text-sm"></i>
                        </span>
                        <span>نظام الغيابات — وضع غياب رسمي مباشر</span>
                    </div>

                    <h1 class="text-xl sm:text-2xl font-extrabold">وضع غياب مباشر للمستخدم</h1>

                    <p class="text-[12px] sm:text-[14px] text-white/75 leading-relaxed">
                        سلايدات احترافية + بروجريس. سيتم إنشاء الغياب مباشرة بحالة
                        <span class="inline-flex items-center gap-2 px-2 py-0.5 rounded-full bg-emerald-500/10 border border-emerald-400/20 text-emerald-200 font-extrabold">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                            Approved
                        </span>
                    </p>
                </div>

                <div class="w-full lg:w-auto">
                    <a href="{{ route('superadmin.absences.index') }}"
                       class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-2xl
                              bg-white/10 hover:bg-white/15 border border-white/15
                              text-white/90 text-sm font-extrabold transition">
                        <i class="fa-solid fa-list-check text-[12px]"></i>
                        رجوع لطلبات الغياب
                    </a>
                </div>
            </div>

            {{-- Progress --}}
            <div class="pt-2">
                <div class="flex items-center justify-between text-[11px] text-white/55 mb-2">
                    <span id="stepLabel">الخطوة 1/3 — اختيار العضو</span>
                    <span id="percentLabel">0%</span>
                </div>

                <div class="h-2 rounded-full bg-white/10 border border-white/10 overflow-hidden">
                    <div id="progressBar" class="h-full w-[0%] bg-gradient-to-r from-rose-400 via-orange-300 to-emerald-200 transition-all duration-300"></div>
                </div>

                <div class="mt-3 grid grid-cols-3 gap-2 text-[11px]">
                    <button type="button" data-step-jump="1"
                            class="stepDot px-2 py-1 rounded-2xl bg-white/5 border border-white/10 text-white/70 font-extrabold">
                        1
                    </button>
                    <button type="button" data-step-jump="2"
                            class="stepDot px-2 py-1 rounded-2xl bg-white/5 border border-white/10 text-white/70 font-extrabold">
                        2
                    </button>
                    <button type="button" data-step-jump="3"
                            class="stepDot px-2 py-1 rounded-2xl bg-white/5 border border-white/10 text-white/70 font-extrabold">
                        3
                    </button>
                </div>
            </div>
        </div>
    </section>

    {{-- Alerts --}}
    @if(session('success'))
        <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 text-emerald-200 px-4 py-3 text-sm">
            <i class="fa-solid fa-circle-check ms-2"></i>
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="rounded-2xl border border-rose-400/20 bg-rose-500/10 text-rose-200 px-4 py-3 text-sm">
            <i class="fa-solid fa-triangle-exclamation ms-2"></i>
            {{ session('error') }}
        </div>
    @endif

    @if($errors->any())
        <div class="rounded-2xl border border-rose-400/25 bg-rose-500/10 text-rose-200 px-4 py-3 text-sm">
            <div class="flex items-start gap-2">
                <i class="fa-solid fa-circle-exclamation mt-0.5"></i>
                <div>
                    <div class="font-extrabold mb-1">يوجد أخطاء، تأكد من المدخلات:</div>
                    <ul class="list-disc pr-5 space-y-1 text-[12px]">
                        @foreach($errors->all() as $e)
                            <li>{{ $e }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif

    {{-- FORM (Slides) --}}
    <form id="directAbsenceForm" method="POST" action="{{ route('superadmin.absences.direct.store') }}"
          class="relative overflow-hidden rounded-3xl border border-white/10
                 bg-gradient-to-br from-slate-900/85 via-slate-950/85 to-black/90 shadow-2xl">
        @csrf

        <div class="pointer-events-none absolute -top-16 -left-16 w-64 h-64 rounded-full bg-white/7 blur-3xl"></div>

        {{-- Head --}}
        <div class="relative px-4 sm:px-6 py-4 border-b border-white/10">
            <div class="flex items-center justify-between gap-3">
                <div class="flex items-center gap-3 min-w-0">
                    <div class="w-11 h-11 rounded-2xl bg-rose-500/12 border border-rose-400/20 text-rose-200 grid place-items-center">
                        <i class="fa-solid fa-file-signature text-lg"></i>
                    </div>
                    <div class="min-w-0">
                        <div class="text-[11px] text-white/60">نموذج</div>
                        <div class="text-base sm:text-lg font-extrabold text-white truncate">إضافة غياب مباشر</div>
                    </div>
                </div>

                <span class="hidden sm:inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/70">
                    <i class="fa-solid fa-shield text-[11px] text-emerald-300"></i>
                    سيتم الحفظ كـ Approved
                </span>
            </div>
        </div>

        {{-- Slides body --}}
        <div class="relative p-4 sm:p-6 space-y-6">

            {{-- Slide 1: User --}}
            <div class="slide" data-step="1">
                <div class="flex items-center gap-3 mb-3">
                    <div class="w-11 h-11 rounded-2xl bg-cyan-500/12 border border-cyan-400/20 text-cyan-200 grid place-items-center">
                        <i class="fa-solid fa-user-check text-lg"></i>
                    </div>
                    <div>
                        <div class="text-[11px] text-white/60">الخطوة 1</div>
                        <div class="text-base sm:text-lg font-extrabold text-white">اختيار العضو</div>
                    </div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                    <div class="space-y-2">
                        <label class="text-[12px] font-extrabold text-white/80">بحث سريع</label>
                        <div class="relative">
                            <i class="fa-solid fa-magnifying-glass absolute right-3 top-1/2 -translate-y-1/2 text-white/40"></i>
                            <input id="userSearch" type="text" placeholder="ابحث بالاسم..."
                                   class="w-full rounded-2xl bg-black/40 border border-white/15 pr-10 pl-3 py-2.5 text-sm text-white
                                          placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-cyan-500/35">
                        </div>
                        <p class="text-[11px] text-white/45">اكتب جزء من الاسم لتصفية القائمة.</p>
                    </div>

                    <div class="space-y-2">
                        <label class="text-[12px] font-extrabold text-white/80">اختر العضو <span class="text-rose-300">*</span></label>
                        <select name="user_id" id="userSelect" required
                                class="w-full rounded-2xl bg-black/40 border border-white/15 px-3 py-2.5 text-sm text-white
                                       focus:outline-none focus:ring-2 focus:ring-cyan-500/35">
                            <option value="">— اختر عضو —</option>
                            @foreach($users as $u)
                                <option value="{{ $u->id }}" data-name="{{ strtolower($u->name ?: $u->username) }}">
                                    {{ $u->name ?: $u->username }}
                                </option>
                            @endforeach
                        </select>
                        <div id="user_id-error" class="hidden text-rose-200 text-[12px]">اختر عضوًا أولاً.</div>
                    </div>
                </div>

                <div class="mt-4 rounded-3xl bg-black/35 border border-white/10 p-4 text-[12px] text-white/70">
                    <i class="fa-solid fa-circle-info ms-2 text-cyan-300"></i>
                    بعد اختيار العضو، اضغط “التالي” لإدخال السبب والتواريخ.
                </div>
            </div>

            {{-- Slide 2: Reason + Dates --}}
            <div class="slide hidden" data-step="2">
                <div class="flex items-center gap-3 mb-3">
                    <div class="w-11 h-11 rounded-2xl bg-rose-500/12 border border-rose-400/20 text-rose-200 grid place-items-center">
                        <i class="fa-solid fa-clipboard-list text-lg"></i>
                    </div>
                    <div>
                        <div class="text-[11px] text-white/60">الخطوة 2</div>
                        <div class="text-base sm:text-lg font-extrabold text-white">السبب + التواريخ</div>
                    </div>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                    <div class="space-y-2">
                        <label class="text-[12px] font-extrabold text-white/80">سبب الغياب <span class="text-rose-300">*</span></label>
                        <textarea name="excuse_reason" id="excuse_reason" rows="5" required maxlength="1000"
                                  class="w-full rounded-2xl bg-black/40 border border-white/15 px-3 py-3 text-sm text-white
                                         placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-rose-500/40"
                                  placeholder="اكتب سبب الغياب الرسمي...">{{ old('excuse_reason') }}</textarea>
                        <div id="excuse_reason-error" class="hidden text-rose-200 text-[12px]">اكتب سبب الغياب.</div>
                        <p class="text-[11px] text-white/45">حتى 1000 حرف.</p>
                    </div>

                    <div class="space-y-4">
                        <div class="space-y-2">
                            <label class="text-[12px] font-extrabold text-white/80">من تاريخ <span class="text-rose-300">*</span></label>
                            <input type="date" name="from_date" id="from_date" required value="{{ old('from_date', now()->toDateString()) }}"
                                   class="w-full rounded-2xl bg-black/40 border border-white/15 px-3 py-2.5 text-sm text-white
                                          focus:outline-none focus:ring-2 focus:ring-rose-500/40">
                            <div id="from_date-error" class="hidden text-rose-200 text-[12px]">اختر تاريخ البداية.</div>
                        </div>

                        <div class="space-y-2">
                            <label class="text-[12px] font-extrabold text-white/80">إلى تاريخ <span class="text-rose-300">*</span></label>
                            <input type="date" name="to_date" id="to_date" required value="{{ old('to_date', now()->toDateString()) }}"
                                   class="w-full rounded-2xl bg-black/40 border border-white/15 px-3 py-2.5 text-sm text-white
                                          focus:outline-none focus:ring-2 focus:ring-rose-500/40">
                            <div id="to_date-error" class="hidden text-rose-200 text-[12px]">اختر تاريخ النهاية.</div>
                            <div id="date_range-error" class="hidden text-rose-200 text-[12px]">تاريخ النهاية يجب أن يكون بعد/يساوي البداية.</div>
                        </div>
                    </div>
                </div>

                <div class="mt-2 rounded-3xl bg-amber-500/10 border border-amber-400/20 p-4 text-[12px] text-amber-100">
                    <i class="fa-solid fa-triangle-exclamation ms-2"></i>
                    تأكد أن “إلى تاريخ” لا يسبق “من تاريخ”.
                </div>
            </div>

            {{-- Slide 3: Admin note + Confirm --}}
            <div class="slide hidden" data-step="3">
                <div class="flex items-center gap-3 mb-3">
                    <div class="w-11 h-11 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 text-emerald-200 grid place-items-center">
                        <i class="fa-solid fa-check-double text-lg"></i>
                    </div>
                    <div>
                        <div class="text-[11px] text-white/60">الخطوة 3</div>
                        <div class="text-base sm:text-lg font-extrabold text-white">ملاحظة إدارية + تأكيد</div>
                    </div>
                </div>

                <div class="space-y-2">
                    <label class="text-[12px] font-extrabold text-white/80">ملاحظة إدارية (اختياري)</label>
                    <textarea name="review_note" id="review_note" rows="4" maxlength="2000"
                              class="w-full rounded-2xl bg-black/40 border border-white/15 px-3 py-3 text-sm text-white
                                     placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-emerald-500/40"
                              placeholder="مثال: تم اعتماد الغياب مباشرة من الإدارة...">{{ old('review_note') }}</textarea>
                    <p class="text-[11px] text-white/45">حتى 2000 حرف.</p>
                </div>

                <div class="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <div class="rounded-3xl bg-black/35 border border-white/10 p-4">
                        <div class="text-[11px] text-white/55">الحالة</div>
                        <div class="mt-1 inline-flex items-center gap-2 px-2.5 py-1 rounded-full bg-emerald-500/10 border border-emerald-400/20 text-emerald-200 font-extrabold text-[12px]">
                            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                            Approved
                        </div>
                    </div>
                    <div class="rounded-3xl bg-black/35 border border-white/10 p-4">
                        <div class="text-[11px] text-white/55">تلميح</div>
                        <div class="mt-1 text-[12px] text-white/75 font-extrabold">سيتم تسجيل اسم الإداري وتاريخ المراجعة</div>
                    </div>
                    <div class="rounded-3xl bg-black/35 border border-white/10 p-4">
                        <div class="text-[11px] text-white/55">تنبيه</div>
                        <div class="mt-1 text-[12px] text-white/75 font-extrabold">تأكد من العضو والتواريخ قبل الحفظ</div>
                    </div>
                </div>
            </div>

        </div>

        {{-- Footer nav --}}
        <div class="relative px-4 sm:px-6 py-4 border-t border-white/10 bg-black/35 backdrop-blur-xl">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                <button type="button" id="prevBtn"
                        class="px-5 py-2.5 rounded-2xl bg-white/10 hover:bg-white/15 border border-white/15
                               text-white/90 text-sm font-extrabold transition disabled:opacity-40 disabled:cursor-not-allowed">
                    <i class="fa-solid fa-arrow-right ms-2 text-[12px]"></i>
                    السابق
                </button>

                <div class="flex flex-col sm:flex-row-reverse gap-2 w-full sm:w-auto">
                    <button type="button" id="nextBtn"
                            class="px-5 py-2.5 rounded-2xl bg-rose-500/12 hover:bg-rose-500/16 border border-rose-400/20
                                   text-rose-100 text-sm font-extrabold transition">
                        التالي
                        <i class="fa-solid fa-arrow-left ms-2 text-[12px]"></i>
                    </button>

                    <button type="submit" id="submitBtn"
                            class="hidden px-6 py-2.5 rounded-2xl text-sm font-extrabold text-slate-950
                                   bg-gradient-to-r from-rose-400 via-rose-300 to-orange-200
                                   shadow-lg shadow-rose-500/20 hover:scale-[1.01] active:scale-100 transition">
                        <i class="fa-solid fa-check ms-2"></i>
                        تثبيت الغياب مباشرة
                    </button>
                </div>
            </div>
        </div>
    </form>

</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    // ===== Search filter for select =====
    const search = document.getElementById('userSearch');
    const select = document.getElementById('userSelect');

    if (search && select) {
        search.addEventListener('input', () => {
            const q = (search.value || '').trim().toLowerCase();
            const opts = Array.from(select.options);
            opts.forEach((opt, idx) => {
                if (idx === 0) return;
                const name = (opt.dataset.name || '').toLowerCase();
                opt.hidden = q !== '' && !name.includes(q);
            });
        });
    }

    // ===== Slides + Progress =====
    const slides = Array.from(document.querySelectorAll('.slide'));
    const totalSteps = slides.length;
    let currentStep = 1;

    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const submitBtn = document.getElementById('submitBtn');

    const progressBar = document.getElementById('progressBar');
    const stepLabel = document.getElementById('stepLabel');
    const percentLabel = document.getElementById('percentLabel');
    const stepDots = Array.from(document.querySelectorAll('.stepDot'));

    const titles = {
        1: 'اختيار العضو',
        2: 'السبب + التواريخ',
        3: 'ملاحظة + تأكيد',
    };

    function markDots() {
        stepDots.forEach((b, idx) => {
            const n = idx + 1;
            const active = n <= currentStep;

            b.classList.toggle('bg-rose-500/15', active);
            b.classList.toggle('border-rose-400/25', active);
            b.classList.toggle('text-rose-100', active);

            b.classList.toggle('bg-white/5', !active);
            b.classList.toggle('border-white/10', !active);
            b.classList.toggle('text-white/70', !active);
        });
    }

    function showStep(step) {
        currentStep = Math.min(Math.max(step, 1), totalSteps);
        slides.forEach(s => s.classList.toggle('hidden', Number(s.dataset.step) !== currentStep));

        const pct = Math.round(((currentStep - 1) / (totalSteps - 1)) * 100);
        progressBar.style.width = pct + '%';
        percentLabel.textContent = pct + '%';
        stepLabel.textContent = `الخطوة ${currentStep}/${totalSteps} — ${titles[currentStep] || ''}`;

        prevBtn.disabled = currentStep === 1;

        const isLast = currentStep === totalSteps;
        nextBtn.classList.toggle('hidden', isLast);
        submitBtn.classList.toggle('hidden', !isLast);

        markDots();
    }

    // ===== Simple validation per step =====
    function hideErr(id){ const el=document.getElementById(id); if(el) el.classList.add('hidden'); }
    function showErr(id){ const el=document.getElementById(id); if(el) el.classList.remove('hidden'); }

    function validateStep(step){
        let ok = true;

        // clear
        ['user_id-error','excuse_reason-error','from_date-error','to_date-error','date_range-error'].forEach(hideErr);

        if(step === 1){
            if(!select || !select.value){
                showErr('user_id-error');
                ok = false;
            }
        }

        if(step === 2){
            const reason = document.getElementById('excuse_reason');
            const from   = document.getElementById('from_date');
            const to     = document.getElementById('to_date');

            if(!reason || !(reason.value || '').trim()){
                showErr('excuse_reason-error'); ok = false;
            }
            if(!from || !from.value){
                showErr('from_date-error'); ok = false;
            }
            if(!to || !to.value){
                showErr('to_date-error'); ok = false;
            }
            if(from?.value && to?.value){
                const a = new Date(from.value + 'T00:00:00');
                const b = new Date(to.value + 'T00:00:00');
                if(b < a){
                    showErr('date_range-error'); ok = false;
                }
            }
        }

        return ok;
    }

    prevBtn.addEventListener('click', () => showStep(currentStep - 1));

    nextBtn.addEventListener('click', () => {
        if(validateStep(currentStep)){
            showStep(currentStep + 1);
        }
    });

    stepDots.forEach(btn => {
        btn.addEventListener('click', () => {
            const target = Number(btn.dataset.stepJump || 1);
            // ما نسمح يقفز للأمام إلا إذا الخطوات قبلها صحيحة
            if(target > currentStep){
                for(let s=currentStep; s<target; s++){
                    if(!validateStep(s)) return;
                }
            }
            showStep(target);
        });
    });

    // init
    showStep(1);
});
</script>
@endsection