@extends('layouts.authenticated')

@section('title', 'Pricelist Menu')
@section('page-title', 'Pricelist Menu')

@section('page-content')
@php
    $printParams = $selectedBranchId ? ['branch_id' => $selectedBranchId, 'date' => $date] : ['date' => $date];
@endphp
<div class="space-y-6 animate-fade-in" x-data="{ loading: false }">
    <!-- Header Section -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 bg-white dark:bg-slate-800 p-6 rounded-2xl border border-slate-200/80 dark:border-slate-700/80 shadow-sm">
        <div>
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center font-bold"
                     style="background-color: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary);">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 022 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
                    </svg>
                </div>
                <div>
                    <h1 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight">Pricelist Menu</h1>
                    <p class="text-sm text-slate-500 dark:text-slate-400">Daftar menu harian yang tersedia stoknya per kategori</p>
                </div>
            </div>
        </div>

        <div class="flex items-center gap-2 sm:gap-3 flex-wrap">
            <button type="button"
                    onclick="sharePricelistPdf()"
                    class="bg-emerald-600 hover:bg-emerald-700 text-white font-semibold text-sm px-4 py-2.5 rounded-xl shadow-md hover:shadow-lg transition-all inline-flex items-center gap-2 cursor-pointer">
                <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 12v6a2 2 0 002 2h12a2 2 0 002-2v-6"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v10m0 0l-4-4m4 4l4-4"></path>
                </svg>
                <span>Bagikan ke WA (PDF)</span>
            </button>

            <a href="{{ route('pricelist.print', $printParams) }}"
               target="_blank"
               class="theme-primary-gradient inline-flex items-center gap-2 px-5 py-2.5 text-white font-semibold text-sm rounded-xl shadow-lg hover:opacity-90 transition-all duration-200">
                <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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path>
                </svg>
                <span>Cetak Pricelist (A4)</span>
            </a>
        </div>
    </div>

    <!-- Filter Bar & Summary Cards -->
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <!-- Filter Box -->
        <div class="lg:col-span-3 bg-white dark:bg-slate-800 p-5 rounded-2xl border border-slate-200/80 dark:border-slate-700/80 shadow-sm">
            <form method="GET" action="{{ route('pricelist.index') }}" id="pricelistFilterForm" class="grid grid-cols-1 sm:grid-cols-2 gap-4 items-end">
                @if($canSelectBranch)
                <div>
                    <label class="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">Cabang</label>
                    <select name="branch_id" @change="loading = true; $el.form.submit()" class="w-full px-4 py-2.5 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white text-sm font-medium focus:ring-2 focus:ring-slate-400 transition-all cursor-pointer">
                        <option value="">Semua Cabang</option>
                        @foreach($branches as $b)
                        <option value="{{ $b->id }}" {{ $selectedBranchId == $b->id ? 'selected' : '' }}>
                            {{ $b->name }}
                        </option>
                        @endforeach
                    </select>
                </div>
                @endif

                <div>
                    <label class="block text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-2">Tanggal Stok</label>
                    <input type="date" name="date" value="{{ $date }}" @change="loading = true; $el.form.submit()" class="w-full px-4 py-2.5 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white text-sm font-medium focus:ring-2 focus:ring-slate-400 transition-all cursor-pointer">
                </div>
            </form>
        </div>

        <!-- Quick Summary Badge with Dynamic Theme Gradient -->
        <div class="theme-primary-gradient p-5 rounded-2xl text-white shadow-lg flex flex-col justify-between">
            <div class="flex items-center justify-between">
                <span class="text-xs uppercase font-semibold text-white/80 tracking-wider">Status Menu Hari Ini</span>
                <span class="px-2.5 py-1 rounded-full bg-white/20 text-xs font-bold text-white backdrop-blur-sm">
                    {{ \Carbon\Carbon::parse($date)->translatedFormat('d M Y') }}
                </span>
            </div>
            <div class="mt-4 flex items-baseline gap-2">
                <span class="text-3xl font-extrabold">{{ $totalItems }}</span>
                <span class="text-white/90 text-sm font-medium">Menu Tersedia</span>
            </div>
            <div class="mt-2 text-xs text-white/80 flex items-center justify-between border-t border-white/20 pt-2">
                <span>{{ $groupedProducts->count() }} Kategori</span>
                <span>Cabang: {{ $selectedBranch->name ?? 'Semua Cabang' }}</span>
            </div>
        </div>
    </div>

    <!-- Pricelist Content Container with Realtime Loader -->
    <div class="relative min-h-[250px]">
        <!-- Realtime Loader Overlay -->
        <div x-show="loading"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             class="absolute inset-0 bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm z-30 flex flex-col items-center justify-center rounded-2xl border border-slate-200/50 dark:border-slate-700/50"
             style="display: none;"
             x-cloak>
            <div class="relative flex items-center justify-center">
                <div class="w-12 h-12 border-4 border-slate-200 dark:border-slate-700 rounded-full animate-spin" style="border-top-color: var(--primary);"></div>
                <div class="w-6 h-6 rounded-full absolute animate-ping opacity-25" style="background-color: var(--primary);"></div>
            </div>
            <span class="mt-4 text-sm font-semibold text-slate-700 dark:text-slate-200 tracking-wide">Memuat Data Pricelist...</span>
        </div>

        @if($groupedProducts->isEmpty())
        <!-- Empty products state -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200/80 dark:border-slate-700/80 p-12 text-center shadow-sm">
            <div class="w-16 h-16 bg-amber-500/10 text-amber-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                </svg>
            </div>
            <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1">Tidak Ada Menu Tersedia</h3>
            <p class="text-sm text-slate-500 dark:text-slate-400 max-w-md mx-auto">
                Belum ada produk yang tersedia stoknya untuk tanggal <span class="font-semibold">{{ \Carbon\Carbon::parse($date)->format('d/m/Y') }}</span> pada {{ $selectedBranch->name ?? 'Semua Cabang' }}.
            </p>
        </div>
        @else
        <!-- Products Grid -->
        <div class="columns-1 md:columns-2 gap-6 space-y-6">
            @foreach($groupedProducts as $categoryName => $products)
            <div class="break-inside-avoid inline-block w-full bg-white dark:bg-slate-800 rounded-2xl border border-slate-200/80 dark:border-slate-700/80 shadow-sm overflow-hidden">
                <!-- Category Header -->
                <div class="px-5 py-4 bg-slate-50 dark:bg-slate-700/50 border-b border-slate-200/80 dark:border-slate-700 flex items-center justify-between">
                    <div class="flex items-center gap-2.5">
                        <span class="w-3 h-3 rounded-full inline-block" style="background-color: var(--primary);"></span>
                        <h2 class="font-bold text-slate-900 dark:text-white text-base tracking-wide">{{ $categoryName }}</h2>
                    </div>
                    <span class="px-2.5 py-0.5 rounded-full text-xs font-semibold"
                          style="background-color: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary);">
                        {{ $products->count() }} Item
                    </span>
                </div>

                <!-- Products Table -->
                <div class="divide-y divide-slate-100 dark:divide-slate-700/50">
                    @foreach($products as $product)
                    <div class="px-5 py-3.5 flex items-center justify-between hover:bg-slate-50/80 dark:hover:bg-slate-700/30 transition-colors">
                        <div class="flex-1 pr-4">
                            <div class="flex items-center gap-2">
                                <span class="font-semibold text-slate-800 dark:text-slate-100 text-sm">{{ $product->name }}</span>
                            </div>
                            <div class="flex items-center gap-3 text-xs text-slate-500 dark:text-slate-400 mt-0.5">
                                @if($product->sku)
                                <span>SKU: {{ $product->sku }}</span>
                                @endif
                                <span>Stok: <strong class="font-semibold theme-text">{{ number_format($product->current_stock, 0, ',', '.') }}</strong></span>
                            </div>
                        </div>
                        <div class="text-right">
                            <span class="text-base font-bold theme-text">
                                Rp {{ number_format($product->price, 0, ',', '.') }}
                            </span>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</div>

<script>
    const pricelistPdfUrl = @json(route('pricelist.pdf', $printParams));
    const pricelistFileName = @json('pricelist_menu_' . \Illuminate\Support\Str::slug($selectedBranch->name ?? 'semua_cabang') . '_' . $date . '.pdf');

    async function sharePricelistPdf() {
        const fallbackMessage = 'Browser tidak mendukung berbagi file PDF. PDF akan dibuka untuk diunduh.';

        try {
            const response = await fetch(pricelistPdfUrl, { credentials: 'same-origin' });
            if (!response.ok) {
                throw new Error('Gagal mengambil PDF');
            }

            const blob = await response.blob();
            const file = new File([blob], pricelistFileName, { type: 'application/pdf' });
            const shareData = {
                title: 'Pricelist Menu',
                text: 'Pricelist menu PDF tanggal ' + @json(\Carbon\Carbon::parse($date)->translatedFormat('d F Y')),
                files: [file],
            };

            if (navigator.share && navigator.canShare && navigator.canShare(shareData)) {
                await navigator.share(shareData);
                return;
            }
        } catch (error) {
            console.error(error);
        }

        if (typeof showToast === 'function') {
            showToast('info', fallbackMessage);
        } else {
            alert(fallbackMessage);
        }

        window.open(pricelistPdfUrl, '_blank', 'noopener,noreferrer');
    }
</script>
@endsection