@extends('layouts.user_sidebar')

@section('content')
<main class="min-h-screen bg-slate-50 pt-16 sm:pt-20 pb-20 md:pb-10">
    <div class="px-3.5 sm:px-6 lg:px-8 max-w-7xl mx-auto">
        
        
        <div class="mb-6 sm:mb-8">
            <h1 class="text-xl sm:text-2xl lg:text-3xl font-extrabold text-slate-900 tracking-tight mb-1 sm:mb-2">Selamat Datang, {{ auth()->user()->name }}</h1>
            <p class="text-xs sm:text-sm text-slate-500 font-medium">Pesan gas elpiji dengan mudah dan cepat langsung dari genggaman Anda.</p>
        </div>

        {{-- ===== CARD PENGUMUMAN DARI ADMIN ===== --}}
        @if($pengumumanAktif->count() > 0)
        <div class="mb-6 sm:mb-8" id="card-pengumuman-wrapper">

            {{-- ── Section Header ───────────────────────────────────────── --}}
            <div class="flex items-center gap-3 mb-3 sm:mb-4">
                <div class="relative">
                    <div class="w-9 h-9 sm:w-11 sm:h-11 rounded-xl sm:rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-700 flex items-center justify-center shadow-md sm:shadow-lg shadow-blue-500/30">
                        <i data-lucide="megaphone" class="w-4 h-4 sm:w-5 sm:h-5 text-white"></i>
                    </div>
                    <span class="absolute -top-1 -right-1 w-3.5 h-3.5 sm:w-4 sm:h-4 bg-red-500 rounded-full flex items-center justify-center">
                        <span class="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-white rounded-full animate-ping absolute"></span>
                        <span class="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-white rounded-full relative"></span>
                    </span>
                </div>
                <div>
                    <h2 class="text-base sm:text-lg font-extrabold text-slate-900 leading-tight tracking-tight">Informasi & Pengumuman</h2>
                    <p class="text-xs sm:text-sm text-slate-500 font-medium">{{ $pengumumanAktif->count() }} pemberitahuan aktif dari pengelola</p>
                </div>
            </div>

            {{-- ── List Pengumuman ───────────────────────────────────────── --}}
            <div class="space-y-3" id="pengumuman-list">
                @foreach($pengumumanAktif as $index => $p)
                @php
                    $tipeCfg = match($p->tipe) {
                        'success' => [
                            'gradient'  => 'from-emerald-500 to-green-600',
                            'bg'        => 'bg-emerald-50 border-emerald-200',
                            'headerBg'  => 'bg-gradient-to-r from-emerald-500 to-green-600',
                            'icon'      => 'check-circle-2',
                            'iconBg'    => 'bg-white/20',
                            'badge'     => 'bg-emerald-100 text-emerald-700 border border-emerald-200',
                            'kontenBg'  => 'bg-emerald-50/60',
                            'kontenText'=> 'text-emerald-900',
                            'chevron'   => 'text-white/80 hover:bg-white/20',
                            'time'      => 'text-emerald-100',
                            'lbl'       => '✅ Kabar Baik',
                        ],
                        'warning' => [
                            'gradient'  => 'from-amber-500 to-yellow-500',
                            'bg'        => 'bg-amber-50 border-amber-200',
                            'headerBg'  => 'bg-gradient-to-r from-amber-500 to-yellow-500',
                            'icon'      => 'triangle-alert',
                            'iconBg'    => 'bg-white/20',
                            'badge'     => 'bg-amber-100 text-amber-800 border border-amber-200',
                            'kontenBg'  => 'bg-amber-50/60',
                            'kontenText'=> 'text-amber-900',
                            'chevron'   => 'text-white/80 hover:bg-white/20',
                            'time'      => 'text-amber-100',
                            'lbl'       => '⚠️ Peringatan',
                        ],
                        'danger'  => [
                            'gradient'  => 'from-red-500 to-rose-600',
                            'bg'        => 'bg-red-50 border-red-200',
                            'headerBg'  => 'bg-gradient-to-r from-red-500 to-rose-600',
                            'icon'      => 'alert-octagon',
                            'iconBg'    => 'bg-white/20',
                            'badge'     => 'bg-red-100 text-red-700 border border-red-200',
                            'kontenBg'  => 'bg-red-50/60',
                            'kontenText'=> 'text-red-900',
                            'chevron'   => 'text-white/80 hover:bg-white/20',
                            'time'      => 'text-red-100',
                            'lbl'       => '🚫 Penting',
                        ],
                        default   => [
                            'gradient'  => 'from-blue-600 to-indigo-700',
                            'bg'        => 'bg-blue-50 border-blue-200',
                            'headerBg'  => 'bg-gradient-to-r from-blue-600 to-indigo-700',
                            'icon'      => 'info',
                            'iconBg'    => 'bg-white/20',
                            'badge'     => 'bg-blue-100 text-blue-700 border border-blue-200',
                            'kontenBg'  => 'bg-blue-50/60',
                            'kontenText'=> 'text-blue-900',
                            'chevron'   => 'text-white/80 hover:bg-white/20',
                            'time'      => 'text-blue-100',
                            'lbl'       => '💬 Informasi',
                        ],
                    };
                @endphp
                <div class="rounded-2xl border {{ $tipeCfg['bg'] }} overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300"
                     id="pengumuman-item-{{ $p->id }}">

                    {{-- ── Card Header (gradient) ── --}}
                    <div class="{{ $tipeCfg['headerBg'] }} px-4 sm:px-5 py-3.5 sm:py-4 flex items-center justify-between gap-2.5 sm:gap-3">
                        <div class="flex items-center gap-2.5 sm:gap-3 flex-1 min-w-0">
                            {{-- Icon --}}
                            <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl {{ $tipeCfg['iconBg'] }} flex items-center justify-center shrink-0">
                                <i data-lucide="{{ $tipeCfg['icon'] }}" class="w-4 h-4 sm:w-5 sm:h-5 text-white" stroke-width="2.5"></i>
                            </div>
                            {{-- Judul & Badge --}}
                            <div class="min-w-0 flex-1">
                                <div class="flex items-center gap-1.5 sm:gap-2 flex-wrap mb-0.5">
                                    <span class="text-[10px] sm:text-xs font-black px-2 py-0.5 rounded-full bg-white/25 text-white backdrop-blur-sm">
                                        {{ $tipeCfg['lbl'] }}
                                    </span>
                                    <span class="text-[10px] sm:text-xs {{ $tipeCfg['time'] }} font-medium">
                                        {{ $p->created_at->translatedFormat('d M Y') }}
                                    </span>
                                </div>
                                <h3 class="text-sm sm:text-base font-extrabold text-white leading-snug tracking-tight line-clamp-2 sm:line-clamp-1">
                                    {{ $p->judul }}
                                </h3>
                            </div>
                        </div>
                        {{-- Toggle Button --}}
                        <button onclick="togglePengumuman({{ $p->id }})"
                            class="p-1.5 sm:p-2 rounded-xl {{ $tipeCfg['chevron'] }} transition-all duration-200 shrink-0"
                            title="Buka/tutup isi">
                            <i data-lucide="chevron-down" class="w-4 h-4 sm:w-5 sm:h-5 text-white transition-transform duration-300" id="chevron-{{ $p->id }}"></i>
                        </button>
                    </div>

                    {{-- ── Konten (expandable) ── --}}
                    <div id="konten-{{ $p->id }}"
                        class="overflow-hidden transition-all duration-300 ease-in-out {{ $index === 0 ? 'max-h-[800px]' : 'max-h-0' }}">
                        <div class="px-4 sm:px-5 lg:px-7 py-4 sm:py-5 {{ $tipeCfg['kontenBg'] }}">
                            <div class="flex flex-col md:flex-row gap-4 sm:gap-6 items-start justify-between">
                                <div class="flex-1 space-y-3 sm:space-y-4 w-full">
                                    <p class="text-xs sm:text-sm font-semibold {{ $tipeCfg['kontenText'] }} leading-relaxed whitespace-pre-line text-left">{{ $p->konten }}</p>
                                    <div class="pt-3 border-t border-black/5 flex items-center gap-1.5">
                                        <i data-lucide="clock" class="w-3.5 h-3.5 text-slate-400"></i>
                                        <span class="text-[11px] sm:text-xs text-slate-400 font-medium">{{ $p->created_at->diffForHumans() }}</span>
                                    </div>
                                </div>
                                @if($p->foto)
                                    <div class="shrink-0 w-full md:w-auto self-center md:self-start">
                                        <img src="{{ asset('images/pengumuman/' . $p->foto) }}" alt="Pengumuman" class="w-full md:w-[300px] max-h-44 sm:max-h-56 object-cover rounded-xl sm:rounded-2xl border border-slate-200/80 shadow-sm bg-white hover:scale-[1.02] transition-transform duration-300">
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif



        <div class="grid grid-cols-1 lg:grid-cols-3 gap-5 sm:gap-6">
            
            <div class="lg:col-span-2 space-y-5 sm:space-y-6">
                
                <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden transform transition-all duration-300 hover:shadow-md">
                    <div class="p-4 sm:p-6 border-b border-slate-100 flex items-center justify-between">
                        <div class="flex items-center gap-2.5 sm:gap-3">
                            <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-blue-50 flex items-center justify-center text-blue-600 shrink-0">
                                <i data-lucide="map-pin" class="w-4 h-4 sm:w-5 sm:h-5"></i>
                            </div>
                            <h2 class="text-base sm:text-lg font-bold text-slate-900">Alamat Pengiriman</h2>
                        </div>
                        <span class="px-2.5 py-0.5 sm:px-3 sm:py-1 bg-green-50 text-green-600 rounded-full text-[11px] sm:text-xs font-semibold border border-green-100">Utama</span>
                    </div>
                    <div class="p-4 sm:p-6 bg-slate-50 relative overflow-hidden">
                        <div class="absolute right-0 top-0 w-32 h-32 bg-blue-50 rounded-full blur-3xl opacity-50 -mr-10 -mt-10 pointer-events-none"></div>
                        <h3 class="font-bold text-slate-800 text-sm sm:text-base">{{ $pelanggan->name ?? auth()->user()->name }}</h3>
                        <p class="text-xs sm:text-sm text-slate-600 mt-1 flex items-center gap-2"><i data-lucide="phone" class="w-3.5 h-3.5 sm:w-4 sm:h-4 text-slate-400 shrink-0"></i> {{ $pelanggan->phone ?? auth()->user()->phone }}</p>
                        <p class="text-xs sm:text-sm text-slate-600 mt-1.5 flex items-start gap-2"><i data-lucide="map" class="w-3.5 h-3.5 sm:w-4 sm:h-4 mt-0.5 text-slate-400 shrink-0"></i> {{ $pelanggan->address ?? auth()->user()->address }}</p>
                        
                        <div class="mt-3.5 pt-3.5 border-t border-slate-200/60 flex flex-wrap gap-2 sm:gap-3">
                            <div class="flex items-center gap-1.5 text-[11px] sm:text-xs font-semibold text-slate-500 bg-white border border-slate-200/60 rounded-xl px-2.5 py-1 sm:px-3 sm:py-1.5 shadow-sm">
                                <i data-lucide="navigation" class="w-3.5 h-3.5 text-blue-500"></i>
                                Jarak: <span class="text-slate-800 font-extrabold">@if($distance !== null){{ $distance }} km @else - @endif</span>
                            </div>
                            <div class="flex items-center gap-1.5 text-[11px] sm:text-xs font-semibold text-slate-500 bg-white border border-slate-200/60 rounded-xl px-2.5 py-1 sm:px-3 sm:py-1.5 shadow-sm">
                                <i data-lucide="map-pin" class="w-3.5 h-3.5 text-indigo-500"></i>
                                Zona: <span class="text-slate-800 font-extrabold">@if($distance === null) - @elseif($distance < 2) Zona 1 (Lokal) @elseif($distance <= 5) Zona 2 (Sedang) @else Zona 3 (Jauh) @endif</span>
                            </div>

                            {{-- Info Keterangan Ongkir Tiap Produk --}}
                            <div class="w-full mt-1 bg-white border border-slate-200/60 rounded-xl sm:rounded-2xl p-3 sm:p-4 shadow-sm flex flex-col gap-2">
                                <div class="flex items-center gap-2 text-xs font-bold text-slate-700">
                                    <i data-lucide="info" class="w-4 h-4 text-emerald-500 shrink-0"></i>
                                    <span>Rincian Ongkos Kirim (Per Tabung):</span>
                                </div>
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3 text-xs font-bold">
                                    @if($distance === null)
                                        <p class="text-slate-400 text-xs">Atur koordinat / alamat untuk melihat ongkir.</p>
                                    @elseif($distance < 2)
                                        <div class="flex items-center justify-between sm:justify-start sm:gap-4 text-slate-600 bg-slate-50/50 p-2 rounded-xl border border-slate-100 text-[11px] sm:text-xs">
                                            <span class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-emerald-500"></span> Tabung 3kg:</span>
                                            <span class="text-slate-900 font-extrabold">Rp {{ number_format($zone1_3kg, 0, ',', '.') }}</span>
                                        </div>
                                        <div class="flex items-center justify-between sm:justify-start sm:gap-4 text-slate-600 bg-slate-50/50 p-2 rounded-xl border border-slate-100 text-[11px] sm:text-xs">
                                            <span class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-pink-500"></span> Tabung 5.5 & 12kg:</span>
                                            <span class="text-slate-900 font-extrabold">Rp {{ number_format($zone1_big, 0, ',', '.') }}</span>
                                        </div>
                                    @elseif($distance <= 5)
                                        <div class="flex items-center justify-between sm:justify-start sm:gap-4 text-slate-600 bg-slate-50/50 p-2 rounded-xl border border-slate-100 text-[11px] sm:text-xs">
                                            <span class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-emerald-500"></span> Tabung 3kg:</span>
                                            <span class="text-slate-900 font-extrabold">Rp {{ number_format($zone2_3kg, 0, ',', '.') }}</span>
                                        </div>
                                        <div class="flex items-center justify-between sm:justify-start sm:gap-4 text-slate-600 bg-slate-50/50 p-2 rounded-xl border border-slate-100 text-[11px] sm:text-xs">
                                            <span class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-pink-500"></span> Tabung 5.5 & 12kg:</span>
                                            <span class="text-slate-900 font-extrabold">Rp {{ number_format($zone2_big, 0, ',', '.') }}</span>
                                        </div>
                                    @else
                                        <div class="flex items-center justify-between sm:justify-start sm:gap-4 text-slate-600 bg-slate-50/50 p-2 rounded-xl border border-slate-100 text-[11px] sm:text-xs">
                                            <span class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-emerald-500"></span> Tabung 3kg:</span>
                                            <span class="text-slate-900 font-extrabold">Rp {{ number_format($zone3_3kg, 0, ',', '.') }}</span>
                                        </div>
                                        <div class="flex items-center justify-between sm:justify-start sm:gap-4 text-slate-600 bg-slate-50/50 p-2 rounded-xl border border-slate-100 text-[11px] sm:text-xs">
                                            <span class="flex items-center gap-1.5"><span class="w-2 h-2 rounded-full bg-pink-500"></span> Tabung 5.5 & 12kg:</span>
                                            <span class="text-slate-900 font-extrabold">Rp {{ number_format($zone3_big, 0, ',', '.') }}</span>
                                        </div>
                                    @endif
                                </div>
                                @if($distance !== null)
                                    <div class="mt-1 border-t border-slate-100 pt-2 text-[10px] text-slate-400 font-medium">
                                        * Ongkos kirim otomatis dihitung & dikalikan dengan jumlah tabung saat Anda memasukkan produk ke keranjang belanja.
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                
                @livewire('user.order-form')
            </div>

            
            <livewire:user.active-orders />
        </div>
    </div>
</main>
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    
    const openItems = new Set([{{ $pengumumanAktif->isNotEmpty() ? $pengumumanAktif->first()->id : '' }}]);

    function togglePengumuman(id) {
        const konten  = document.getElementById('konten-' + id);
        const chevron = document.getElementById('chevron-' + id);
        if (!konten) return;

        if (openItems.has(id)) {
            konten.classList.remove('max-h-[800px]', 'mt-3');
            konten.classList.add('max-h-0');
            chevron.classList.remove('rotate-180');
            openItems.delete(id);
        } else {
            konten.classList.add('max-h-[800px]', 'mt-3');
            konten.classList.remove('max-h-0');
            chevron.classList.add('rotate-180');
            openItems.add(id);
        }
    }

    
    document.addEventListener('DOMContentLoaded', function() {
        openItems.forEach(id => {
            const chevron = document.getElementById('chevron-' + id);
            if (chevron) chevron.classList.add('rotate-180');
        });

        
        @php
            $importantAnnouncements = $pengumumanAktif->where('tipe', 'danger')->values();
        @endphp
        const importantAnnouncements = @json($importantAnnouncements);
        
        if (importantAnnouncements.length > 0) {
            let p = importantAnnouncements[0]; 
            let imageUrl = p.foto ? "{{ asset('images/pengumuman') }}/" + p.foto : null;
            let htmlContent = `<div class="text-sm text-slate-600 mb-4 text-left whitespace-pre-line">${p.konten}</div>`;
            if (imageUrl) {
                htmlContent += `<div class="flex justify-center mt-3"><img src="${imageUrl}" class="max-w-xs max-h-48 object-contain rounded-xl border border-slate-200 shadow-sm mb-1"></div>`;
            }
            
            Swal.fire({
                title: '⚠️ ' + p.judul,
                html: htmlContent,
                icon: 'warning',
                confirmButtonText: 'Paham',
                confirmButtonColor: '#ef4444',
                customClass: {
                    title: 'text-xl font-bold text-slate-800',
                    htmlContainer: 'text-left'
                }
            });
        }
    });

    
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });
</script>
@endpush

<style>
    
    .product-radio-input:checked ~ .product-card-bg-3kg {
        border-color: #10b981 !important;
        background-color: #f0fdf4 !important;
        box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.1), 0 4px 6px -2px rgba(16, 185, 129, 0.05) !important;
    }
    .product-radio-input:checked ~ .product-card-bg-other {
        border-color: #2563eb !important;
        background-color: #eff6ff !important;
        box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.1), 0 4px 6px -2px rgba(37, 99, 235, 0.05) !important;
    }
    
    
    .product-radio-input:checked ~ .relative .circle-check-3kg {
        border-color: #10b981 !important;
        background-color: #10b981 !important;
    }
    .product-radio-input:checked ~ .relative .circle-check-3kg i {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
    
    .product-radio-input:checked ~ .relative .circle-check-other {
        border-color: #2563eb !important;
        background-color: #2563eb !important;
    }
    .product-radio-input:checked ~ .relative .circle-check-other i {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
</style>
@endsection