@extends('layouts.dashboard')

@section('content')

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

    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="text-3xl font-black">Catalog Builder</h1>
            <p class="text-sm opacity-60">
                Select products, filter by category, then generate a catalog.
            </p>
        </div>

        <a href="{{ route('catalogs.index') }}" class="btn btn-ghost">
            Back
        </a>
    </div>

    <form method="GET" action="{{ route('catalogs.create') }}" class="card bg-base-100 shadow">
        <div class="card-body">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">

                <input
                    type="text"
                    name="search"
                    value="{{ request('search') }}"
                    placeholder="Search name, SKU, barcode..."
                    class="input input-bordered w-full"
                />

                <select name="category" class="select select-bordered w-full">
                    <option value="">All Categories</option>

                    @foreach($categories as $cat)
                        <option value="{{ $cat }}" @selected(request('category') == $cat)>
                            {{ $cat }}
                        </option>
                    @endforeach
                </select>

                <button class="btn btn-primary">
                    Search
                </button>

                <a href="{{ route('catalogs.create') }}" class="btn btn-outline">
                    Reset
                </a>

            </div>
        </div>
    </form>

    <form method="POST" action="{{ route('catalogs.store') }}" id="catalogForm">
        @csrf

        <div class="card bg-base-100 shadow sticky top-4 z-20 border border-base-300">
            <div class="card-body py-4">

                <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-center">

                    <div>
                        <label class="label">
                            <span class="label-text">Catalog Title</span>
                        </label>

                        <input
                            type="text"
                            name="title"
                            value="WiWU Products Catalog"
                            class="input input-bordered w-full"
                            required
                        />
                    </div>

                    <div>
                        <label class="label">
                            <span class="label-text">Catalog Source</span>
                        </label>

                        <select name="source_type" class="select select-bordered w-full" id="sourceType">
                            <option value="manual">Manual Selection</option>

                            <option value="latest_regular" @disabled(!$latestRegular)>
                                Latest Regular Price List
                                @if($latestRegular)
                                    (#{{ $latestRegular->id }})
                                @else
                                    - Not Available
                                @endif
                            </option>

                            <option value="latest_clearance" @disabled(!$latestClearance)>
                                Latest Clearance List
                                @if($latestClearance)
                                    (#{{ $latestClearance->id }})
                                @else
                                    - Not Available
                                @endif
                            </option>
                        </select>
                    </div>

                    <div class="stat p-0">
                        <div class="stat-title">Selected Products</div>
                        <div class="stat-value text-primary text-3xl" id="selectedCount">0</div>
                    </div>

                    <div class="flex gap-2 justify-end">
                        <button type="button" class="btn btn-outline" id="selectAllBtn">
                            Select All
                        </button>

                        <button class="btn btn-success">
                            Create Catalog
                        </button>
                    </div>

                </div>

            </div>
        </div>

        <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">

            @foreach($products as $product)

                <label class="card bg-base-100 shadow hover:shadow-xl border border-base-300 cursor-pointer product-card transition">

                    <div class="card-body p-4">

                        <div class="flex justify-between items-start">
                            <input
                                type="checkbox"
                                name="product_ids[]"
                                value="{{ $product->id }}"
                                class="checkbox checkbox-primary product-checkbox"
                            />

                            @if(!$product->main_image)
                                <span class="badge badge-warning badge-sm">
                                    No Image
                                </span>
                            @endif
                        </div>

                        <div class="h-40 bg-base-200 rounded-xl flex items-center justify-center overflow-hidden my-3">
                            @if($product->main_image)
                                <img
                                    src="{{ asset('storage/'.$product->main_image) }}"
                                    class="h-full w-full object-contain p-2"
                                />
                            @else
                                <div class="text-xs opacity-50">No Image</div>
                            @endif
                        </div>

                        <div class="space-y-1">
                            <div class="font-bold text-sm line-clamp-2">
                                {{ $product->name }}
                            </div>

                            <div class="text-xs opacity-70">
                                SKU: {{ $product->sku ?: '-' }}
                            </div>

                            <div class="text-xs opacity-70">
                                Barcode: {{ $product->barcode ?: '-' }}
                            </div>

                            @if(isset($product->van_sales_price) && $product->van_sales_price)
                                <div class="mt-1 text-success font-bold">
                                    AED {{ number_format($product->van_sales_price, 2) }}
                                </div>
                            @endif

                            <div class="text-xs mt-1 opacity-70">
                                Qty: {{ $product->stock_qty ?? $product->qty ?? 0 }}
                            </div>

                            @if($product->category)
                                <div class="badge badge-outline badge-sm mt-2">
                                    {{ $product->category }}
                                </div>
                            @endif
                        </div>

                    </div>

                </label>

            @endforeach

        </div>

        <div class="mt-6">
            {{ $products->links() }}
        </div>

    </form>

</div>


<style>
    .product-selected {
        border: 2px solid #4f46e5 !important;
        box-shadow: 0 0 0 3px rgba(79,70,229,.15);
    }
</style>

<script>
    const checkboxes = document.querySelectorAll('.product-checkbox');
    const selectedCount = document.getElementById('selectedCount');
    const selectAllBtn = document.getElementById('selectAllBtn');

    function updateCount() {
        selectedCount.innerText = document.querySelectorAll('.product-checkbox:checked').length;
    }

    checkboxes.forEach((checkbox) => {
        checkbox.addEventListener('change', function () {
            const card = this.closest('.product-card');

            if (this.checked) {
                card.classList.add('product-selected');
            } else {
                card.classList.remove('product-selected');
            }

            updateCount();
        });
    });

    selectAllBtn.addEventListener('click', () => {
        const allChecked = [...checkboxes].every(cb => cb.checked);

        checkboxes.forEach(cb => {
            cb.checked = !allChecked;

            const card = cb.closest('.product-card');

            if (cb.checked) {
                card.classList.add('product-selected');
            } else {
                card.classList.remove('product-selected');
            }
        });

        updateCount();
    });

    updateCount();
</script>

@endsection