@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<div class="max-w-md mx-auto space-y-5 px-2 pb-10 overflow-x-hidden">

    {{-- 1. ID CARD DISPLAY --}}
    <div class="relative flex justify-center items-center py-2 w-full">
        <div class="w-full" style="max-width: 400px;">
            <div id="id-card-display" class="relative overflow-hidden bg-slate-900 rounded-[28px] p-6 shadow-2xl border border-white/10 flex flex-col justify-between mx-auto" 
                 style="width: 100%; aspect-ratio: 400/250;">
                
                <button onclick="exportCard()" class="absolute top-4 right-4 z-30 p-2 bg-white/10 hover:bg-yellow-500/20 rounded-full border border-white/20 active:scale-90 transition-transform text-yellow-500">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                    </svg>
                </button>

                <svg class="absolute top-0 left-0 w-full h-full pointer-events-none z-0" viewBox="0 0 400 250" preserveAspectRatio="none">
                    <defs>
                        <linearGradient id="gradGoldDisplay" x1="0%" y1="0%" x2="100%" y2="100%">
                            <stop offset="0%" style="stop-color:#fbbf24;stop-opacity:0.2" />
                            <stop offset="100%" style="stop-color:#fbbf24;stop-opacity:0" />
                        </linearGradient>
                    </defs>
                    <path d="M220,0 C280,60 350,-20 400,80 L400,0 Z" fill="url(#gradGoldDisplay)" />
                    <path d="M0,140 C60,180 30,220 100,250 L0,250 Z" fill="url(#gradGoldDisplay)" />
                </svg>

                <div class="relative z-10 flex gap-4 items-center text-left">
                    <img src="{{ $user->profile && $user->profile->foto_path ? asset('storage/foto_user/'.$user->profile->foto_path) : asset('img/avatar.png') }}"
                         class="w-16 h-16 sm:w-20 sm:h-20 object-cover rounded-2xl border-2 border-white/20 shadow-xl" crossorigin="anonymous">
                    <div class="flex-1 min-w-0">
                        <h5 class="text-lg font-bold text-yellow-500 truncate leading-tight">{{ $user->profile->nama_lengkap ?? 'Nama User' }}</h5>
                        <p class="text-[10px] text-white/70 line-clamp-2 leading-tight mt-1">{{ $user->profile->alamat ?? 'Alamat belum diupdate' }}</p>
                        <div class="mt-2 inline-flex bg-white/10 border border-white/20 rounded px-2 py-0.5">
                            <span class="text-white text-[9px] font-bold uppercase tracking-wider">RT {{ optional($user->ksk)->rt ?? '00' }} / RW {{ optional($user->rw)->kode_rw ?? '00' }}</span>
                        </div>
                    </div>
                </div>

                <div class="relative z-10 flex justify-between items-end border-t border-white/10 pt-3">
                    <div class="bg-white p-1 rounded-lg">
                        <img src="data:image/png;base64,{{ $qrBase64 ?? '' }}" class="w-10 h-10 sm:w-12 sm:h-12" alt="QR">
                    </div>
                    <div class="text-right">
                        <p class="text-[8px] text-white/40 uppercase tracking-widest font-black">Member ID</p>
                        <div class="text-lg font-bold text-yellow-500 tracking-wider">{{ $user->nis ?? '000000' }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- 2. MENU UTAMA --}}
    <div class="grid grid-cols-4 gap-3 px-2">
        @php
    $menus = [
        [
            'route' => 'user.data-saya', 
            'icon' => 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z', // Ikon Orang 1
            'label' => 'Profil'
        ],
        [
            'route' => 'user.anggota', 
            // GANTI PAKE YANG INI (IKON GRUP)
            'icon' => 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z', 
            'label' => 'Anggota'
        ],
        [
            'route' => 'user.pembayaran', 
            'icon' => 'M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z', 
            'label' => 'Iuran'
        ],
    ];
@endphp
        @foreach($menus as $menu)
        <a href="{{ route($menu['route']) }}" class="flex flex-col items-center justify-center py-4 rounded-3xl bg-white/10 backdrop-blur-md border border-white/20 text-white text-center active:scale-95 transition-all">
            <div class="p-2 rounded-full bg-white/5 mb-1">
                <svg class="w-5 h-5 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $menu['icon'] }}" /></svg>
            </div>
            <span class="text-[8px] font-bold uppercase tracking-widest">{{ $menu['label'] }}</span>
        </a>
        @endforeach

        <button type="button" onclick="openModal()" class="flex flex-col items-center justify-center py-4 rounded-3xl bg-white/10 backdrop-blur-md border border-white/20 text-white text-center active:scale-95 transition-all focus:outline-none">
            <div class="p-2 rounded-full bg-white/5 mb-1">
                <svg class="w-5 h-5 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
            </div>
            <span class="text-[8px] font-bold uppercase tracking-widest">Setting</span>
        </button>
    </div>

    {{-- 3. BANNER SLIDER --}}
    <div class="mx-2 space-y-3">
        <div class="flex justify-between items-center px-1">
            <h6 class="text-xs font-black text-white uppercase tracking-widest flex items-center gap-2">
                <span class="w-1.5 h-1.5 bg-yellow-500 rounded-full animate-pulse"></span>
                Info Penting
            </h6>
            <span id="slideCounter" class="text-[10px] text-white/40 font-mono">1 / {{ count($infos) > 0 ? count($infos) : 1 }}</span>
        </div>
        <div class="relative overflow-hidden rounded-[28px] border border-white/10 shadow-lg">
            <div id="sliderContainer" class="flex overflow-x-auto snap-x snap-mandatory scrollbar-hide bg-slate-800/50 scroll-smooth">
                @forelse($infos as $info)
                    <div class="snap-center flex-shrink-0 w-full h-44 sm:h-52 relative">
                        <img src="{{ asset('storage/' . $info->gambar) }}" class="w-full h-full object-cover" onerror="this.src='https://placehold.co/600x400/1e293b/fbbf24?text=Banner+Kosong'">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent p-5 flex flex-col justify-end text-left">
                            <span class="bg-yellow-500 text-black text-[8px] font-black px-2 py-0.5 rounded-full uppercase mb-2 w-fit">INFO</span>
                            <h3 class="text-white font-bold text-sm truncate">{{ $info->judul }}</h3>
                            <p class="text-white/60 text-[10px] line-clamp-2 leading-tight mt-1">{{ $info->isi }}</p>
                        </div>
                    </div>
                @empty
                    <div class="snap-center flex-shrink-0 w-full h-44 sm:h-52 relative flex flex-col items-center justify-center text-white/20 text-center px-10">
                        <svg class="w-12 h-12 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        <span class="text-[10px] uppercase tracking-widest">Belum ada informasi terbaru</span>
                    </div>
                @endforelse
            </div>
            <div class="absolute bottom-4 right-5 flex gap-1 items-center">
                @foreach($infos as $index => $i)
                    <div class="slider-dot h-1 rounded-full bg-white/20 transition-all duration-300" style="width: {{ $index === 0 ? '16px' : '4px' }}; background: {{ $index === 0 ? '#fbbf24' : '' }}"></div>
                @endforeach
            </div>
        </div>
    </div>
</div>

{{-- MODAL OVERLAY --}}
<div id="passwordOverlay" class="fixed inset-0 z-[100] hidden items-center justify-center p-6 bg-black/80 backdrop-blur-sm">
    <div class="bg-white w-full max-w-[320px] rounded-[32px] overflow-hidden shadow-2xl transform scale-95 opacity-0 transition-all duration-300" id="modalBox">
        <div class="bg-slate-900 p-5 flex justify-between items-center">
            <h6 class="text-white font-bold text-[10px] m-0 uppercase tracking-widest flex items-center gap-2">
                <i class="bi bi-shield-lock text-yellow-500 text-sm"></i> Pengaturan Akun
            </h6>
            <button onclick="closeModal()" class="text-white/50 hover:text-white transition-colors focus:outline-none">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M6 18L18 6M6 6l12 12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
        </div>
        
        <form action="{{ route('user.password.update') }}" method="POST">
            @csrf @method('PUT')
            <div class="p-6 space-y-4 text-left">
                {{-- Password Lama --}}
                <div class="space-y-1">
                    <label class="text-[10px] font-black text-slate-400 uppercase tracking-tight">Password Saat Ini</label>
                    <div class="relative">
                        <input type="password" name="current_password" id="oldPassInput" 
                               class="w-full bg-slate-100 border-0 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-yellow-500 pr-10 outline-none text-slate-900 font-semibold" 
                               placeholder="Password lama" required>
                        <button type="button" onclick="toggleField('oldPassInput', 'eyeIconOld')" class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400">
                            <i class="bi bi-eye" id="eyeIconOld"></i>
                        </button>
                    </div>
                </div>

                {{-- Password Baru --}}
                <div class="space-y-1">
                    <label class="text-[10px] font-black text-slate-400 uppercase tracking-tight">Password Baru</label>
                    <div class="relative">
                        <input type="password" name="new_password" id="passInput" 
                               class="w-full bg-slate-100 border-0 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-yellow-500 pr-10 outline-none text-slate-900 font-semibold" 
                               placeholder="Minimal 8 karakter" required>
                        <button type="button" onclick="toggleField('passInput', 'eyeIconNew')" class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400">
                            <i class="bi bi-eye" id="eyeIconNew"></i>
                        </button>
                    </div>
                </div>

                {{-- Konfirmasi Password --}}
                <div class="space-y-1">
                    <label class="text-[10px] font-black text-slate-400 uppercase tracking-tight">Ulangi Password Baru</label>
                    <div class="relative">
                        <input type="password" name="new_password_confirmation" id="confirmPassInput" 
                               class="w-full bg-slate-100 border-0 rounded-xl px-4 py-3 text-sm focus:ring-2 focus:ring-yellow-500 pr-10 outline-none text-slate-900 font-semibold" 
                               placeholder="Konfirmasi password" required>
                        <button type="button" onclick="toggleField('confirmPassInput', 'eyeIconConfirm')" class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400">
                            <i class="bi bi-eye" id="eyeIconConfirm"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="px-6 pb-6">
                <button type="submit" class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-black uppercase tracking-widest py-4 rounded-2xl shadow-lg shadow-yellow-500/20 active:scale-95 transition-all text-[10px]">
                    UPDATE PASSWORD
                </button>
            </div>
        </form>
    </div>
</div>

{{-- AREA CAPTURE HIDDEN --}}
<div style="position: fixed; left: -9999px; top: -9999px;">
    <div id="capture-area" style="width: 800px; height: 500px; position: relative; background: #0f172a; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;">
        <svg class="absolute top-0 left-0 w-full h-full" viewBox="0 0 400 250" preserveAspectRatio="none">
            <path d="M220,0 C280,60 350,-20 400,80 L400,0 Z" fill="rgba(251, 191, 36, 0.2)" />
            <path d="M0,140 C60,180 30,220 100,250 L0,250 Z" fill="rgba(251, 191, 36, 0.2)" />
        </svg>
        <div style="position: relative; z-index: 10; display: flex; align-items: center; gap: 40px; text-align: left;">
            <div style="width: 170px; height: 170px; border-radius: 36px; border: 4px solid rgba(255,255,255,0.2); background-image: url('{{ $user->profile && $user->profile->foto_path ? asset('storage/foto_user/'.$user->profile->foto_path) : asset('img/avatar.png') }}'); background-size: cover; background-position: center;"></div>
            <div style="flex: 1; text-align: left;">
                <h5 style="color: #fbbf24; font-size: 42px; font-weight: bold; margin: 0;">{{ $user->profile->nama_lengkap ?? 'Nama User' }}</h5>
                <p style="color: rgba(255,255,255,0.7); font-size: 22px; margin-top: 10px;">{{ $user->profile->alamat ?? 'Alamat belum diupdate' }}</p>
                <div style="background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.2); border-radius: 8px; padding: 4px 16px; display: inline-block; margin-top: 15px;">
                    <span style="color: white; font-size: 20px; font-weight: bold;">RT {{ optional($user->ksk)->rt ?? '00' }} / RW {{ optional($user->rw)->kode_rw ?? '00' }}</span>
                </div>
            </div>
        </div>
        <div style="position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: flex-end; border-top: 2px solid rgba(255,255,255,0.1); padding-top: 30px;">
            <div style="background: white; padding: 10px; border-radius: 20px;"><img src="data:image/png;base64,{{ $qrBase64 ?? '' }}" style="width: 110px; height: 110px;"></div>
            <div style="text-align: right;">
                <p style="color: rgba(255,255,255,0.4); font-size: 16px; letter-spacing: 4px; font-weight: 900; margin: 0;">MEMBER ID</p>
                <div style="color: #fbbf24; font-size: 45px; font-weight: 800;">{{ $user->nis ?? '000000' }}</div>
            </div>
        </div>
    </div>
</div>

@section('scripts')
<script>
    function openModal() {
        const overlay = document.getElementById('passwordOverlay');
        const box = document.getElementById('modalBox');
        overlay.classList.remove('hidden');
        overlay.classList.add('flex');
        setTimeout(() => {
            box.classList.remove('scale-95', 'opacity-0');
            box.classList.add('scale-100', 'opacity-100');
        }, 10);
    }

    function closeModal() {
        const overlay = document.getElementById('passwordOverlay');
        const box = document.getElementById('modalBox');
        box.classList.remove('scale-100', 'opacity-100');
        box.classList.add('scale-95', 'opacity-0');
        setTimeout(() => {
            overlay.classList.add('hidden');
            overlay.classList.remove('flex');
        }, 200);
    }

    // Fungsi Show/Hide buat masing-masing field
    function toggleField(inputId, iconId) {
        const input = document.getElementById(inputId);
        const icon = document.getElementById(iconId);
        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.replace('bi-eye', 'bi-eye-slash');
        } else {
            input.type = 'password';
            icon.classList.replace('bi-eye-slash', 'bi-eye');
        }
    }

    window.onclick = function(event) {
        const overlay = document.getElementById('passwordOverlay');
        if (event.target == overlay) { closeModal(); }
    }

    // Slider Logic
    const slider = document.getElementById('sliderContainer');
    const dots = document.querySelectorAll('.slider-dot');
    const counter = document.getElementById('slideCounter');
    const totalSlides = {{ count($infos) }};
    let currentIdx = 0;

    function updateSliderUI() {
        if (!slider || totalSlides <= 0) return;
        currentIdx = Math.round(slider.scrollLeft / slider.clientWidth);
        dots.forEach((dot, i) => {
            dot.style.width = (i === currentIdx) ? '16px' : '4px';
            dot.style.background = (i === currentIdx) ? '#fbbf24' : 'rgba(255,255,255,0.2)';
        });
        if(counter) counter.innerText = `${currentIdx + 1} / ${totalSlides}`;
    }

    if(slider && totalSlides > 1) {
        setInterval(() => {
            currentIdx = (currentIdx + 1) % totalSlides;
            slider.scrollTo({ left: currentIdx * slider.clientWidth, behavior: 'smooth' });
        }, 4000);
        slider.addEventListener('scroll', updateSliderUI);
    }

    async function exportCard() {
        const area = document.getElementById('capture-area');
        const btn = event.currentTarget;
        const orig = btn.innerHTML;
        btn.innerHTML = '...';
        try {
            const canvas = await html2canvas(area, { scale: 2, useCORS: true, windowWidth: 800, windowHeight: 500 });
            const link = document.createElement('a');
            link.download = 'ID-{{ $user->nis }}.png';
            link.href = canvas.toDataURL('image/png');
            link.click();
        } catch (err) { 
            Swal.fire({ icon: 'error', title: 'Gagal!', text: 'Gagal mengunduh kartu.' });
        } finally { btn.innerHTML = orig; }
    }

    window.addEventListener('load', () => {
        @if(session('success'))
            Swal.fire({ icon: 'success', title: 'Berhasil!', text: "{{ session('success') }}", showConfirmButton: false, timer: 2500 });
        @endif
        @if($errors->any())
            Swal.fire({ icon: 'error', title: 'Gagal Update!', text: "{{ $errors->first() }}", confirmButtonColor: '#fbbf24' });
        @endif
    });
</script>
@endsection
@endsection