@extends('layouts.app')

@section('content')
    <style>
        .ai-shell {
            background:
                radial-gradient(900px 340px at 10% 0%, rgba(99, 102, 241, .10), transparent 60%),
                radial-gradient(800px 320px at 90% 10%, rgba(16, 185, 129, .08), transparent 60%),
                radial-gradient(700px 260px at 50% 100%, rgba(59, 130, 246, .06), transparent 60%);
        }

        .ai-glass {
            background: rgba(255, 255, 255, .86);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(17, 24, 39, .07);
            box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
        }

        .dark .ai-glass {
            background: rgba(15, 23, 42, .72);
            border: 1px solid rgba(255, 255, 255, .07);
            box-shadow: none;
        }

        .ai-card {
            background: #fff;
            border: 1px solid rgba(17, 24, 39, .08);
            border-radius: 24px;
        }

        .dark .ai-card {
            background: rgba(255, 255, 255, .03);
            border-color: rgba(255, 255, 255, .06);
        }

        .ai-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border-radius: 999px;
            padding: 8px 12px;
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
            background: rgba(99, 102, 241, .08);
            color: #4f46e5;
            border: 1px solid rgba(99, 102, 241, .12);
        }

        .dark .ai-pill {
            background: rgba(99, 102, 241, .14);
            color: #a5b4fc;
            border-color: rgba(99, 102, 241, .20);
        }

        .ai-mini {
            background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(249,250,251,1) 100%);
            border: 1px solid rgba(17, 24, 39, .06);
            border-radius: 20px;
        }

        .dark .ai-mini {
            background: rgba(255, 255, 255, .04);
            border-color: rgba(255, 255, 255, .06);
        }

        .ai-table thead th {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .08em;
            font-weight: 700;
            color: #64748b;
        }

        .dark .ai-table thead th {
            color: #94a3b8;
        }

        .ai-table tbody tr:hover {
            background: rgba(99, 102, 241, .04);
        }

        .dark .ai-table tbody tr:hover {
            background: rgba(255, 255, 255, .03);
        }

        .ai-price-umum {
            color: #0f172a;
        }

        .dark .ai-price-umum {
            color: #f8fafc;
        }

        .ai-price-print {
            color: #4f46e5;
        }

        .dark .ai-price-print {
            color: #a5b4fc;
        }
    </style>

    @php
        $totalMaterials = collect($materials ?? [])->count();

        $totalRows = collect($materials ?? [])->sum(function ($material) {
            return collect($material->prices ?? [])
                ->groupBy(function ($item) {
                    return ($item->sisi ?? 1) . '|' . ($item->min_qty ?? 1) . '|' . ($item->max_qty ?? 'null');
                })
                ->count();
        });

        $activeCount = collect($materials ?? [])->where('is_active', true)->count();
        $inactiveCount = max($totalMaterials - $activeCount, 0);
    @endphp

    <div class="ai-shell rounded-[28px] p-4 md:p-5">
        {{-- Header --}}
        <div class="mb-6 rounded-[28px] ai-glass p-5 md:p-6">
            <div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
                <div>
                    <div class="flex flex-wrap items-center gap-2">
                        <span class="ai-pill">AI Style Pricelist</span>
                        <span class="ai-pill">Kasir Percetakan</span>
                    </div>

                    <h2 class="mt-4 text-2xl font-bold tracking-tight text-gray-900 dark:text-white md:text-3xl">
                        {{ $title ?? 'Pricelist Kasir' }}
                    </h2>

                    <p class="mt-2 max-w-2xl text-sm leading-6 text-gray-600 dark:text-gray-400">
                        Daftar harga umum dan percetakan dengan tampilan yang lebih modern, rapi, dan mudah dibaca untuk kebutuhan kasir.
                    </p>
                </div>

                <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
                    <div class="ai-mini p-4">
                        <div class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Bahan</div>
                        <div class="mt-2 text-xl font-extrabold text-gray-900 dark:text-white">
                            {{ number_format($totalMaterials, 0, ',', '.') }}
                        </div>
                    </div>

                    <div class="ai-mini p-4">
                        <div class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Baris Harga</div>
                        <div class="mt-2 text-xl font-extrabold text-gray-900 dark:text-white">
                            {{ number_format($totalRows, 0, ',', '.') }}
                        </div>
                    </div>

                    <div class="ai-mini p-4">
                        <div class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Aktif</div>
                        <div class="mt-2 text-xl font-extrabold text-emerald-600 dark:text-emerald-400">
                            {{ number_format($activeCount, 0, ',', '.') }}
                        </div>
                    </div>

                    <div class="ai-mini p-4">
                        <div class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Nonaktif</div>
                        <div class="mt-2 text-xl font-extrabold text-amber-600 dark:text-amber-400">
                            {{ number_format($inactiveCount, 0, ',', '.') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Filter --}}
        <div class="mb-6 rounded-[28px] ai-glass p-5 md:p-6">
            <div class="mb-4">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Filter Pricelist</h3>
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    Cari bahan, pilih kategori, dan lihat status pricelist dengan cepat.
                </p>
            </div>

            <form method="GET" class="grid grid-cols-1 gap-3 md:grid-cols-4">
                <div class="md:col-span-2">
                    <label for="search" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Cari
                    </label>
                    <input
                        type="text"
                        name="search"
                        id="search"
                        value="{{ request('search') }}"
                        placeholder="Cari nama bahan atau kategori..."
                        class="h-11 block w-full rounded-xl border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-500 focus:ring-brand-500 dark:border-gray-600 dark:text-white/90">
                </div>

                <div>
                    <label for="category" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Kategori
                    </label>
                    <select
                        name="category"
                        id="category"
                        class="h-11 block w-full rounded-xl border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-500 focus:ring-brand-500 dark:border-gray-600 dark:bg-transparent dark:text-white/90">
                        <option value="">Semua Kategori</option>
                        @foreach ($categories as $cat)
                            <option value="{{ $cat->id }}" {{ (string) request('category') === (string) $cat->id ? 'selected' : '' }}>
                                {{ $cat->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="status" class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Status
                    </label>
                    <select
                        name="status"
                        id="status"
                        class="h-11 block w-full rounded-xl border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:border-brand-500 focus:ring-brand-500 dark:border-gray-600 dark:bg-transparent dark:text-white/90">
                        <option value="">Semua Status</option>
                        <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Aktif</option>
                        <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Nonaktif</option>
                    </select>
                </div>

                <div class="md:col-span-4 flex flex-wrap gap-2">
                    <button
                        type="submit"
                        class="inline-flex items-center rounded-xl bg-brand-500 px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                        Filter
                    </button>

                    <a
                        href="{{ route('kasir.pricelist.index') }}"
                        class="inline-flex items-center rounded-xl border border-gray-300 px-4 py-2.5 text-sm font-semibold text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800">
                        Reset
                    </a>
                </div>
            </form>
        </div>

        {{-- Table --}}
        <div class="rounded-[28px] ai-glass overflow-hidden">
            <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
                <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Daftar Pricelist</h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            Harga umum dan harga percetakan per bahan, sisi, dan range qty.
                        </p>
                    </div>
                    <span class="ai-pill">{{ number_format($totalRows, 0, ',', '.') }} baris harga</span>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="ai-table min-w-full divide-y divide-gray-200 dark:divide-gray-800">
                    <thead class="bg-gray-50/80 dark:bg-gray-800/40">
                        <tr>
                            <th class="px-5 py-3 text-left">Nama</th>
                            <th class="px-5 py-3 text-left">Kategori</th>
                            <th class="px-5 py-3 text-center">Sisi</th>
                            <th class="px-5 py-3 text-center">Qty</th>
                            <th class="px-5 py-3 text-right">Harga Umum</th>
                            <th class="px-5 py-3 text-right">Harga Percetakan</th>
                            <th class="px-5 py-3 text-center">Status</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-800 dark:bg-white/[0.03]">
                        @php $hasRows = false; @endphp

                        @foreach ($materials as $material)
                            @php
                                $groupedPrices = collect($material->prices ?? [])->groupBy(function ($item) {
                                    return ($item->sisi ?? 1) . '|' . ($item->min_qty ?? 1) . '|' . ($item->max_qty ?? 'null');
                                });
                            @endphp

                            @foreach ($groupedPrices as $group)
                                @php
                                    $umum = $group->firstWhere('member_type', 'umum');
                                    $studio = $group->firstWhere('member_type', 'studio');
                                @endphp

                                @if ($umum || $studio)
                                    @php $hasRows = true; @endphp
                                    <tr>
                                        <td class="px-5 py-4 text-sm">
                                            <div class="font-semibold text-gray-900 dark:text-white">
                                                {{ $material->name }}
                                            </div>
                                        </td>

                                        <td class="px-5 py-4 text-sm text-gray-500 dark:text-gray-400">
                                            {{ $material->category->name ?? '-' }}
                                        </td>

                                        <td class="whitespace-nowrap px-5 py-4 text-center text-sm text-gray-600 dark:text-gray-400">
                                            <span class="inline-flex rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-700 dark:bg-gray-800 dark:text-gray-300">
                                                {{ (int) ($umum->sisi ?? $studio->sisi ?? 1) }} Sisi
                                            </span>
                                        </td>

                                        <td class="whitespace-nowrap px-5 py-4 text-center text-sm text-gray-600 dark:text-gray-400">
                                            {{ number_format((float) ($umum->min_qty ?? $studio->min_qty ?? 1), 0, ',', '.') }}
                                            -
                                            {{ ($umum->max_qty ?? $studio->max_qty ?? null) !== null ? number_format((float) ($umum->max_qty ?? $studio->max_qty), 0, ',', '.') : '∞' }}
                                        </td>

                                        <td class="whitespace-nowrap px-5 py-4 text-right text-sm">
                                            <span class="font-bold ai-price-umum">
                                                Rp {{ number_format((float) ($umum->price ?? 0), 0, ',', '.') }}
                                            </span>
                                        </td>

                                        <td class="whitespace-nowrap px-5 py-4 text-right text-sm">
                                            <span class="font-bold ai-price-print">
                                                Rp {{ number_format((float) ($studio->price ?? 0), 0, ',', '.') }}
                                            </span>
                                        </td>

                                        <td class="whitespace-nowrap px-5 py-4 text-center">
                                            <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold {{ $material->is_active ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400' : 'bg-gray-100 text-gray-700 dark:bg-gray-500/15 dark:text-gray-400' }}">
                                                {{ $material->is_active ? 'Aktif' : 'Nonaktif' }}
                                            </span>
                                        </td>
                                    </tr>
                                @endif
                            @endforeach
                        @endforeach

                        @if (!$hasRows)
                            <tr>
                                <td colspan="7" class="px-5 py-12 text-center text-sm text-gray-500 dark:text-gray-400">
                                    Belum ada data pricelist
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection