@extends('admin.layouts.app')

@section('content')
    <div class="azp-page">
        <div class="azp-page-header">
            <div class="azp-page-title-wrap">
                <div class="azp-page-title">{{ $product->name }}</div>
                <div class="azp-page-subtitle">
                    Edição de stock e imagens para o clube {{ $club->name }}.
                </div>
            </div>

            <a href="{{ route('admin.clubs.show', $club) }}" class="btn outline xs">Voltar ao clube</a>
        </div>

        @if(session('status'))
            <div class="flash success">{{ session('status') }}</div>
        @endif

        @if($errors->any())
            <div class="flash error">
                <strong>Revê os campos:</strong>
                <ul style="margin:6px 0 0 18px">
                    @foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach
                </ul>
            </div>
        @endif

        <div class="azp-card azp-form-card">
            <form action="{{ route('admin.clubs.products.update', [$club, $product]) }}"
                  method="POST"
                  enctype="multipart/form-data"
                  autocomplete="off">
                @csrf
                @method('PUT')

                <div class="azp-form-grid">
                    <div class="field">
                        <label class="label">Ref. (SKU)</label>
                        <input type="text" value="{{ $product->sku ?? '—' }}" readonly>
                    </div>

                    <div class="field">
                        <label class="label">Preço (€)</label>
                        <input type="text" value="{{ number_format($product->price, 2, ',', ' ') }}" readonly>
                    </div>

                    <div class="field">
                        <label class="label">Stock neste clube</label>
                        <input type="number" name="stock" value="{{ old('stock', $currentStock) }}" min="0" step="1">
                    </div>
                </div>

                {{-- ✅ Categorias & Subcategorias (só exclusivo) --}}
                @if($isExclusive)
                    @php
                        $scats = old('categories', $selectedCategories ?? []);
                        if (!is_array($scats)) $scats = [];
                        $scats = array_map('strval', $scats);

                        $ssubs = old('subcategories', $selectedSubcategories ?? []);
                        if (!is_array($ssubs)) $ssubs = [];
                        $ssubs = array_map('strval', $ssubs);
                    @endphp

                    <div class="azp-card" style="margin-top:14px;padding:14px;">
                        <div class="azp-section-title">Categorias</div>

                        <div class="pill-grid" style="margin-top:6px;">
                            @foreach($categories as $cat)
                                <label class="pill-check">
                                    <input type="checkbox"
                                           name="categories[]"
                                           value="{{ $cat->id }}"
                                        {{ in_array((string) $cat->id, $scats) ? 'checked' : '' }}>
                                    <span>{{ $cat->name }}</span>
                                </label>
                            @endforeach
                        </div>

                        <div class="hint" style="margin-top:6px;">
                            Seleciona uma ou várias categorias para este produto exclusivo.
                        </div>

                        <div style="margin-top:14px;padding-top:12px;border-top:1px dashed #e3e3e3;">
                            <div class="azp-section-title">Subcategorias</div>

                            <input type="hidden"
                                   id="selected-subcategories-json"
                                   value='@json($ssubs)'>

                            <div id="subcategories-pill-grid"
                                 class="pill-grid"
                                 style="margin-top:6px;min-height:38px;"></div>

                            <div class="hint azp-subcategory-hint" style="margin-top:6px;">
                                Seleciona primeiro uma categoria.
                            </div>

                            @error('subcategories') <div class="error">{{ $message }}</div> @enderror
                            @error('subcategories.*') <div class="error">{{ $message }}</div> @enderror
                        </div>
                    </div>
                @else
                    <div class="hint" style="margin-top:14px;">
                        Este produto é geral da loja. Categorias e subcategorias só podem ser alteradas na área de produtos da loja.
                    </div>
                @endif

                {{-- Imagens --}}
                <div class="field" style="margin-top:14px;">
                    <label class="label">Imagens do produto</label>

                    @if($product->images->isEmpty())
                        <div class="hint">Ainda não existem imagens na galeria.</div>
                    @else
                        <div style="display:flex;flex-wrap:wrap;gap:10px;">
                            @foreach($product->images as $img)
                                <label style="font-size:11px;display:flex;flex-direction:column;gap:4px;">
                                    <img src="{{ asset('storage/'.$img->path) }}"
                                         alt=""
                                         style="width:90px;height:90px;object-fit:cover;border-radius:6px;border:1px solid #ddd;">

                                    @if($isExclusive)
                                        <span>
                                        <input type="checkbox" name="delete_images[]" value="{{ $img->id }}">
                                        Remover
                                    </span>
                                    @endif
                                </label>
                            @endforeach
                        </div>
                    @endif

                    @if($isExclusive)
                        <div class="field" style="margin-top:10px;">
                            <label class="label">Adicionar novas imagens</label>
                            <input type="file" name="images[]" accept="image/*" multiple>
                            <div class="hint">As novas imagens serão adicionadas ao fim da galeria.</div>
                        </div>
                    @else
                        <div class="hint" style="margin-top:8px;">
                            Este produto é geral da loja. As imagens só podem ser editadas na área de produtos da loja.
                        </div>
                    @endif
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn primary">Guardar alterações</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    @if($isExclusive)
        <script>
            document.addEventListener('DOMContentLoaded', function () {

                const categoryCheckboxes = document.querySelectorAll('input[name="categories[]"]');
                const subGrid = document.getElementById('subcategories-pill-grid');
                const hint = document.querySelector('.azp-subcategory-hint');

                const selectedJson = document.getElementById('selected-subcategories-json');
                let selectedSet = new Set();

                try {
                    const initial = JSON.parse(selectedJson ? selectedJson.value : '[]');
                    if (Array.isArray(initial)) initial.forEach(function (id) { selectedSet.add(String(id)); });
                } catch (e) {}

                let availableMap = new Map();

                function getSelectedCategoryIds() {
                    return Array.from(categoryCheckboxes)
                        .filter(function (cb) { return cb.checked; })
                        .map(function (cb) { return cb.value; });
                }

                function render() {
                    if (!subGrid) return;

                    subGrid.innerHTML = '';

                    const items = Array.from(availableMap.values()).sort(function (a, b) {
                        return String(a.name).localeCompare(String(b.name));
                    });

                    items.forEach(function (sc) {
                        const id = String(sc.id);

                        const label = document.createElement('label');
                        label.className = 'pill-check';

                        const input = document.createElement('input');
                        input.type = 'checkbox';
                        input.name = 'subcategories[]';
                        input.value = id;
                        input.checked = selectedSet.has(id);

                        input.addEventListener('change', function () {
                            if (input.checked) selectedSet.add(id);
                            else selectedSet.delete(id);
                        });

                        const span = document.createElement('span');
                        span.textContent = sc.name;

                        label.appendChild(input);
                        label.appendChild(span);
                        subGrid.appendChild(label);
                    });

                    if (hint) hint.style.display = items.length ? 'none' : 'block';
                }

                function fetchSubcategories(categoryId) {
                    // ✅ ROTA A (ajusta se o path for diferente)
                    const url = `/admin/category-subcategories/${categoryId}`;

                    return fetch(url, {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        credentials: 'same-origin'
                    }).then(function (r) {
                        if (!r.ok) throw new Error('HTTP ' + r.status);
                        return r.json();
                    });
                }

                function refresh() {
                    availableMap = new Map();

                    const cats = getSelectedCategoryIds();
                    if (!cats.length) {
                        selectedSet = new Set();
                        render();
                        return;
                    }

                    Promise.all(
                        cats.map(function (catId) {
                            return fetchSubcategories(catId)
                                .then(function (items) {
                                    if (!Array.isArray(items)) return;
                                    items.forEach(function (sc) {
                                        const key = String(sc.id);
                                        if (!availableMap.has(key)) availableMap.set(key, sc);
                                    });
                                })
                                .catch(function () {});
                        })
                    ).then(function () {
                        // remove seleções inválidas
                        const valid = new Set();
                        selectedSet.forEach(function (id) {
                            if (availableMap.has(String(id))) valid.add(String(id));
                        });
                        selectedSet = valid;

                        render();
                    });
                }

                categoryCheckboxes.forEach(function (cb) {
                    cb.addEventListener('change', refresh);
                });

                refresh();
            });
        </script>
    @endif
@endpush