@extends('layouts.dashboard')

@section('content')
@php
    $totalProducts = \App\Models\Product::count();
    $missingImages = \App\Models\Product::where(function($q){
        $q->whereNull('main_image')->orWhere('main_image', '');
    })->count();
    $withPrices = \App\Models\Product::where(function($q){ $q->where('van_sales_price','>',0)->orWhere('default_van_sales_price','>',0); })->count();
    $activeProducts = \App\Models\Product::where('status', 'active')->count();
    $discontinuedProducts = \App\Models\Product::where('status', 'discontinued')->count();
@endphp

<div class="max-w-7xl mx-auto p-6 space-y-6">

    @if(session('success'))
        <div class="rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 px-5 py-4">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="rounded-2xl bg-red-50 border border-red-200 text-red-800 px-5 py-4">
            {{ session('error') }}
        </div>
    @endif

    <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-4">
        <div>
            <h1 class="text-3xl font-black">Products</h1>
            <p class="text-sm opacity-60 mt-1">Product library with prices, images, SKU and barcode.</p>
        </div>

        <div class="flex flex-wrap gap-2">
            <div class="px-4 py-2 rounded-xl bg-indigo-600 text-white font-black">{{ $totalProducts }} Products</div>
            <div class="px-4 py-2 rounded-xl bg-green-600 text-white font-black">{{ $activeProducts }} Active</div>
            <div class="px-4 py-2 rounded-xl bg-slate-600 text-white font-black">{{ $discontinuedProducts }} Stop Production</div>
            <div class="px-4 py-2 rounded-xl bg-emerald-600 text-white font-black">{{ $withPrices }} With Prices</div>
            <div class="px-4 py-2 rounded-xl bg-rose-500 text-white font-black">{{ $missingImages }} Missing Images</div>
        </div>
    </div>

    <form method="GET" action="{{ route('products.index') }}" class="bg-white rounded-2xl border border-gray-200 shadow-sm p-4">
        <div class="grid grid-cols-1 md:grid-cols-12 gap-3 items-center">
            <div class="md:col-span-5">
                <input type="text"
                       name="search"
                       value="{{ request('search') }}"
                       placeholder="Search by name, SKU, barcode..."
                       class="input input-bordered w-full">
            </div>

            <div class="md:col-span-2">
                <select name="status" class="select select-bordered w-full">
                    <option value="">All Products</option>
                    <option value="active" @selected(request('status') === 'active')>Active Only</option>
                    <option value="discontinued" @selected(request('status') === 'discontinued')>Stop Production Only</option>
                </select>
            </div>

            <label class="md:col-span-3 flex items-center gap-2 rounded-xl border border-gray-200 px-4 py-3">
                <input type="checkbox" name="missing" value="1" class="checkbox checkbox-sm" @checked(request('missing'))>
                <span class="font-bold text-sm">Missing Images Only</span>
            </label>

            <button class="btn btn-primary md:col-span-1">🔍 Search</button>
            <a href="{{ route('products.index') }}" class="btn btn-ghost md:col-span-1">Reset</a>
        </div>
    </form>

    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-5">
        @foreach($products as $product)
            @php
                $effectiveImage = $product->effective_image ?? $product->main_image;
                $familyKey = $product->family_key;

                $suggestions = collect();

                if ($familyKey) {
                    $suggestions = \App\Models\Product::query()
                        ->where('id', '!=', $product->id)
                        ->whereNotNull('main_image')
                        ->where('main_image', '!=', '')
                        ->where('family_key', $familyKey)
                        ->limit(12)
                        ->get();
                }

                if ($suggestions->isEmpty()) {
                    $suggestions = \App\Models\Product::query()
                        ->where('id', '!=', $product->id)
                        ->whereNotNull('main_image')
                        ->where('main_image', '!=', '')
                        ->when($product->category, fn($q) => $q->where('category', $product->category))
                        ->limit(12)
                        ->get();
                }
            @endphp

            <div class="bg-white rounded-3xl border border-gray-200 shadow-sm overflow-hidden">

                <div class="h-64 bg-slate-50 flex items-center justify-center border-b border-gray-100 relative">
                    @if($product->is_test_data)<div class="absolute top-3 left-3 z-10 rounded-full bg-purple-600 px-3 py-1 text-xs font-black text-white">QA · TEST DATA</div>@endif
                    @if($effectiveImage)
                        <img src="{{ asset('storage/' . $effectiveImage) }}" class="max-h-60 max-w-full object-contain p-4">
                    @else
                        <div class="text-center text-slate-400">
                            <div class="text-5xl">🖼</div>
                            <div class="font-black text-sm mt-2">Missing Image</div>
                        </div>
                    @endif

                    @if($product->image_source_product_id)
                        <div class="absolute top-3 left-3 text-xs font-black px-3 py-1 rounded-full bg-purple-100 text-purple-700">
                            Linked
                        </div>
                    @endif

                    @if($product->status === 'discontinued')
                        <div class="absolute bottom-3 left-3 text-xs font-black px-3 py-1 rounded-full bg-red-100 text-red-700">
                            🔴 Stop Production
                        </div>
                    @else
                        <div class="absolute bottom-3 left-3 text-xs font-black px-3 py-1 rounded-full bg-green-100 text-green-700">
                            🟢 Active
                        </div>
                    @endif

                    @if(($product->van_sales_price ?? $product->default_van_sales_price) > 0)
                        <div class="absolute top-3 right-3 text-xs font-black px-3 py-1 rounded-full bg-emerald-100 text-emerald-700">
                            AED {{ number_format($product->van_sales_price ?? $product->default_van_sales_price, 2) }}
                        </div>
                    @else
                        <div class="absolute top-3 right-3 text-xs font-black px-3 py-1 rounded-full bg-slate-200 text-slate-600">
                            Ask Price
                        </div>
                    @endif
                </div>

                <div class="p-4 space-y-4">

                    <div>
                        <form method="POST" action="{{ route('products.new-arrival', $product) }}" class="mb-3 flex items-center gap-2">
                            @csrf
                            <input type="hidden" name="is_new_arrival" value="{{ $product->is_new_arrival ? 0 : 1 }}">
                            <button type="submit" class="btn btn-xs {{ $product->is_new_arrival ? 'btn-success' : 'btn-outline' }}">{{ $product->is_new_arrival ? 'NEW ARRIVAL ✓ — Remove' : '+ Mark New Arrival' }}</button>
                        </form>
                        <h2 class="font-black text-base leading-tight min-h-[42px]">
                            {{ $product->name }}
                        </h2>

                        <div class="text-xs text-slate-600 mt-3 space-y-1">
                            <div><b>SKU:</b> {{ $product->sku ?: '-' }}</div>
                            <div><b>Family:</b> {{ $product->family_key ?: '-' }}</div>
                            <div><b>Barcode:</b> {{ $product->barcode ?: '-' }}</div>
                            <div><b>Category:</b> {{ $product->category ?: '-' }}</div>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-2">
                        <button type="button" class="btn btn-sm btn-outline" onclick="document.getElementById('gallery-modal-{{ $product->id }}').showModal()">
                            🖼 Gallery ({{ $product->images->count() }})
                        </button>

                        <button type="button" class="btn btn-sm btn-outline btn-primary" onclick="document.getElementById('family-modal-{{ $product->id }}').showModal()">
                            🧬 Family ({{ $suggestions->count() }})
                        </button>

                        @if($effectiveImage && $product->family_key)
                            <form method="POST" action="{{ route('products.apply-image-family', $product) }}" class="col-span-2">
                                @csrf
                                <button class="btn btn-sm btn-success w-full"
                                        onclick="return confirm('Apply this image to all missing-image products in same family?')">
                                    🧬 Apply Image To Family
                                </button>
                            </form>
                        @endif
                    </div>

                    <form method="POST" action="{{ route('products.update-price', $product) }}" class="rounded-2xl bg-slate-50 p-3">
                        @csrf
                        <label class="text-xs font-black text-slate-500">Van Sales Price</label>
                        <div class="flex gap-2 mt-2">
                            <input type="number"
                                   step="0.01"
                                   name="van_sales_price"
                                   value="{{ $product->van_sales_price ?? $product->default_van_sales_price }}"
                                   placeholder="AED"
                                   class="input input-bordered input-sm w-full">
                            <button class="btn btn-sm btn-primary">Save</button>
                        </div>
                    </form>

                    <form method="POST"
                          action="{{ route('products.update-image', $product) }}"
                          enctype="multipart/form-data"
                          class="rounded-2xl bg-slate-50 p-3">
                        @csrf
                        <label class="text-xs font-black text-slate-500">Upload New Main Image</label>
                        <input type="file"
                               name="image"
                               accept="image/*"
                               class="file-input file-input-bordered file-input-sm w-full mt-2">
                        <button class="btn btn-sm btn-neutral w-full mt-2">
                            Upload Image
                        </button>
                    </form>
                </div>
            </div>

            <dialog id="gallery-modal-{{ $product->id }}" class="modal">
                <div class="modal-box max-w-4xl rounded-3xl">
                    <div class="flex items-start justify-between gap-4 mb-4">
                        <div>
                            <h3 class="font-black text-2xl">🖼 Product Gallery</h3>
                            <p class="text-sm text-slate-500 mt-1">{{ $product->sku }} — {{ $product->name }}</p>
                        </div>

                        <form method="dialog">
                            <button class="btn btn-sm btn-circle">✕</button>
                        </form>
                    </div>

                    @if($product->images->count())
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-5">
                            @foreach($product->images as $galleryImage)
                                <div class="rounded-2xl border border-gray-200 bg-slate-50 overflow-hidden">
                                    <div class="h-36 flex items-center justify-center bg-white relative">
                                        <img src="{{ asset('storage/' . $galleryImage->path) }}" class="max-h-32 max-w-full object-contain p-2">

                                        @if($galleryImage->is_primary)
                                            <div class="absolute top-2 left-2 text-[10px] bg-emerald-600 text-white px-2 py-1 rounded-full font-black">
                                                Main
                                            </div>
                                        @endif
                                    </div>

                                    <div class="grid grid-cols-2 gap-2 p-2">
                                        <form method="POST" action="{{ route('products.gallery-primary', [$product, $galleryImage]) }}">
                                            @csrf
                                            <button class="btn btn-xs btn-success w-full">★ Main</button>
                                        </form>

                                        <form method="POST"
                                              action="{{ route('products.gallery-delete', [$product, $galleryImage]) }}"
                                              onsubmit="return confirm('Delete this image?')">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-xs btn-error w-full">Delete</button>
                                        </form>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="rounded-2xl bg-slate-50 border border-gray-200 p-8 text-center text-slate-400 mb-5">
                            No gallery images yet.
                        </div>
                    @endif

                    <form method="POST"
                          action="{{ route('products.gallery-upload', $product) }}"
                          enctype="multipart/form-data"
                          class="gallery-upload-form rounded-2xl border-2 border-dashed border-cyan-300 bg-cyan-50 p-4">
                        @csrf

                        <label class="gallery-drop-zone flex cursor-pointer flex-col items-center justify-center rounded-2xl bg-white p-6 text-center transition hover:bg-cyan-50">
                            <div class="text-4xl">📸</div>
                            <div class="mt-2 text-sm font-black text-slate-700">
                                Drag & Drop Multiple Photos Here
                            </div>
                            <div class="text-xs text-slate-400">
                                or click to choose images
                            </div>

                            <input type="file"
                                   name="images[]"
                                   accept="image/*"
                                   multiple
                                   class="gallery-file-input hidden">
                        </label>

                        <div class="gallery-file-list mt-3 text-xs font-bold text-slate-600"></div>

                        <button class="btn btn-primary w-full mt-3">
                            + Upload Gallery Photos
                        </button>
                    </form>
                </div>
            </dialog>

            <dialog id="family-modal-{{ $product->id }}" class="modal">
                <div class="modal-box max-w-4xl rounded-3xl">
                    <div class="flex items-start justify-between gap-4 mb-4">
                        <div>
                            <h3 class="font-black text-2xl">🧬 Family Images</h3>
                            <p class="text-sm text-slate-500 mt-1">
                                Family: <b>{{ $product->family_key ?: '-' }}</b> — click any image to use it.
                            </p>
                        </div>

                        <form method="dialog">
                            <button class="btn btn-sm btn-circle">✕</button>
                        </form>
                    </div>

                    @if($suggestions->count())
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                            @foreach($suggestions as $source)
                                <form method="POST" action="{{ route('products.use-existing-image', $product) }}">
                                    @csrf
                                    <input type="hidden" name="source_product_id" value="{{ $source->id }}">

                                    <button type="submit"
                                            class="w-full rounded-2xl bg-white border border-gray-200 hover:border-indigo-500 hover:shadow-md p-3 text-left transition"
                                            title="Use image from {{ $source->sku }}">
                                        <div class="h-32 flex items-center justify-center bg-slate-50 rounded-xl overflow-hidden">
                                            <img src="{{ asset('storage/' . ($source->effective_image ?? $source->main_image)) }}"
                                                 class="max-h-28 max-w-full object-contain">
                                        </div>

                                        <div class="mt-3 text-sm font-black truncate">{{ $source->sku }}</div>
                                        <div class="text-xs text-slate-500 truncate">{{ $source->name }}</div>
                                    </button>
                                </form>
                            @endforeach
                        </div>
                    @else
                        <div class="rounded-2xl bg-slate-50 border border-gray-200 p-8 text-center text-slate-400">
                            No similar images found.
                        </div>
                    @endif
                </div>
            </dialog>
        @endforeach
    </div>

    <div class="pt-4">
        {{ $products->links() }}
    </div>
</div>

<script>
document.querySelectorAll('.gallery-upload-form').forEach(form => {
    const zone = form.querySelector('.gallery-drop-zone');
    const input = form.querySelector('.gallery-file-input');
    const list = form.querySelector('.gallery-file-list');

    function showFiles(files) {
        if (!files.length) {
            list.innerHTML = '';
            return;
        }

        list.innerHTML = Array.from(files)
            .map(file => '✅ ' + file.name)
            .join('<br>');
    }

    zone.addEventListener('dragover', e => {
        e.preventDefault();
        zone.classList.add('ring', 'ring-cyan-400', 'bg-cyan-100');
    });

    zone.addEventListener('dragleave', () => {
        zone.classList.remove('ring', 'ring-cyan-400', 'bg-cyan-100');
    });

    zone.addEventListener('drop', e => {
        e.preventDefault();
        zone.classList.remove('ring', 'ring-cyan-400', 'bg-cyan-100');

        input.files = e.dataTransfer.files;
        showFiles(input.files);
    });

    input.addEventListener('change', () => {
        showFiles(input.files);
    });
});
</script>

@endsection