@extends('profile.layout')
@section('title', __('Məhsullar'))
@section('content')

@php
    $typeLabels = [
        'default'   => __('Bio-link'),
        'mini_site' => __('Mini-səhifə'),
        'menu'      => __('Menyu'),
        'shop'      => __('Mağaza'),
    ];
    $typeBadges = [
        'default'   => 'badge-blue',
        'mini_site' => 'badge-purple',
        'menu'      => 'badge-green',
        'shop'      => 'badge-yellow',
    ];
    // Карта page_id (магазина) → категории для динамического селектора.
    $shopCats = [];
    foreach ($shops as $s) {
        $shopCats[$s->page_id] = $s->categories->map(fn($c) => ['id' => $c->id, 'name' => $c->name])->values()->toArray();
    }
@endphp

<h1 class="text-2xl font-bold text-ink mb-1">{{ __('Məhsullar') }}</h1>
<p class="text-sm text-muted mb-6">{{ __('Bütün məhsullarınız bir yerdə — hansı səhifəyə aid olduğuna görə qruplaşdırılıb.') }}</p>

@if(!$hasAccess)
<div class="card text-center py-16">
    <x-icon name="lock" class="w-8 h-8 mx-auto mb-3 text-muted" />
    <p class="text-lg font-semibold text-ink mb-1">{{ __('Bu səhifə tarifinizdə mövcud deyil.') }}</p>
    <p class="text-sm text-muted mb-4">
        {{ __('Mağaza səhifələri və məhsullar hazırkı tarifinizdə mövcud deyil.') }}
        @if($unlockPlan){{ __('Bu funksiya') }} «{{ $unlockPlan }}» {{ __('tarifində mövcuddur.') }}@endif
    </p>
    <a href="{{ route('profile.plans', $profileUser) }}" class="btn btn-primary">{{ __('Tarifi dəyiş') }}</a>
</div>
@else

{{-- ============ Добавить товар ============ --}}
@if($shopPages->isNotEmpty())
<div class="card mb-8">
    <div class="flex justify-between items-center mb-4">
        <h3 class="font-semibold flex items-center gap-1.5"><x-icon name="package" class="w-4 h-4" /> {{ __('Yeni məhsul əlavə et') }}</h3>
        <button onclick="toggleProductForm()" type="button" class="btn btn-secondary" style="padding:6px 12px;font-size:12px;">{{ __('Məhsul əlavə et') }}</button>
    </div>

    @if($errors->any())
        <div class="mb-3 p-3 bg-dangersoft border border-line rounded-lg text-xs text-danger">
            @foreach($errors->all() as $e)<p>{{ $e }}</p>@endforeach
        </div>
    @endif

    <form id="productForm" method="POST" action="{{ route('profile.products.store', $profileUser) }}" enctype="multipart/form-data" class="space-y-3" style="@if(!$errors->any()) display:none; @endif">
        @csrf
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
                <label class="label">{{ __('Mağaza') }}</label>
                <select name="page_id" class="input" required onchange="updateShopCats(this.value, 'productCategory')">
                    <option value="">{{ __('Mağaza seçin') }}</option>
                    @foreach($shopPages as $page)
                        <option value="{{ $page->id }}" {{ old('page_id') == $page->id ? 'selected' : '' }}>{{ $page->title }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="label">{{ __('Kateqoriya') }}</label>
                <select name="category_id" id="productCategory" class="input">
                    <option value="">{{ __('Kateqoriya seçin') }}</option>
                </select>
            </div>
            <div>
                <label class="label">{{ __('Məhsul adı') }}</label>
                <input type="text" name="name" class="input" placeholder="{{ __('Məhsul adı') }}" value="{{ old('name') }}" required>
            </div>
            <div>
                <label class="label">{{ __('Qiymət (AZN)') }}</label>
                <input type="number" name="price" class="input" placeholder="0.00" step="0.01" min="0" value="{{ old('price') }}" required>
            </div>
            <div>
                <label class="label">{{ __('Şəkil') }}</label>
                <input type="file" name="image" class="input" accept="image/*">
            </div>
        </div>
        <div>
            <label class="label">{{ __('Təsvir') }}</label>
            <textarea name="description" class="input" rows="2" placeholder="{{ __('Təsvir') }}">{{ old('description') }}</textarea>
        </div>
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <label class="flex items-center gap-2 cursor-pointer text-sm">
                <input type="checkbox" name="is_available" value="1" class="rounded" {{ old('is_available', 1) ? 'checked' : '' }}>
                <span>{{ __('Mövcuddur') }}</span>
            </label>
            <button type="submit" class="btn btn-primary w-full sm:w-auto"><x-icon name="plus" class="w-4 h-4" /> {{ __('Əlavə et') }}</button>
        </div>
    </form>
</div>
@else
<div class="card mb-8 text-center py-10 text-muted">
    <x-icon name="shopping-bag" class="w-8 h-8 mx-auto mb-2 text-muted" />
    <p class="mb-1">{{ __('Məhsul əlavə etmək üçün əvvəlcə mağaza səhifəsi yaratmalısınız.') }}</p>
    <p class="text-xs mb-4">{{ __('Tovarlar yalnız mağaza səhifələrinə əlavə oluna bilər.') }}</p>
    <a href="{{ route('shops.index', $profileUser) }}" class="btn btn-primary">{{ __('Mağaza yarat') }}</a>
</div>
@endif

{{-- ============ Категории магазинов ============ --}}
@if($shops->isNotEmpty())
<div class="card mb-8">
    <div class="flex justify-between items-center mb-4">
        <h3 class="font-semibold flex items-center gap-1.5"><x-icon name="package" class="w-4 h-4" /> {{ __('Kateqoriyalar') }}</h3>
        <button onclick="toggleCatAddForm()" type="button" class="btn btn-secondary" style="padding:6px 12px;font-size:12px;">{{ __('Kateqoriya əlavə et') }}</button>
    </div>
    <label class="label">{{ __('Mağaza') }}</label>
    <select id="catShopSelect" class="input mb-3" onchange="switchCatShop(this.value)">
        @foreach($shops as $shop)
            <option value="{{ $shop->id }}">{{ $shop->name }}</option>
        @endforeach
    </select>
    @foreach($shops as $shop)
        <div class="cat-panel" data-shop="{{ $shop->id }}" @if(!$loop->first) style="display:none;" @endif>
            @include('profile._category_panel', ['owner' => $shop, 'type' => 'shop'])
        </div>
    @endforeach
</div>
@endif

{{-- ============ Товары по страницам ============ --}}
@if($totalProducts === 0)
    <div class="card text-center py-16 text-muted"><p>{{ __('Məhsul yoxdur') }}.</p>@if($shopPages->isNotEmpty())<p class="text-xs mt-1">{{ __('Yuxarıdakı formadan ilk məhsulu əlavə edin.') }}</p>@endif</div>
@else
    {{-- ============ Фильтр и поиск ============ --}}
    <div class="card mb-6">
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
            <div class="relative">
                <x-icon name="search" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
                <input type="text" id="prodSearch" class="input" style="padding-left:2rem;" placeholder="{{ __('Axtarış...') }}" oninput="applyProdFilter()">
            </div>
            <select id="prodPageFilter" class="input" onchange="applyProdFilter()">
                <option value="">{{ __('Bütün səhifələr') }}</option>
                @foreach($shopPages as $page)
                    <option value="{{ $page->id }}">{{ $page->title }}</option>
                @endforeach
            </select>
            <select id="prodStatusFilter" class="input" onchange="applyProdFilter()">
                <option value="">{{ __('Bütün statuslar') }}</option>
                <option value="active">{{ __('Aktiv') }}</option>
                <option value="inactive">{{ __('Deaktiv') }}</option>
            </select>
        </div>
    </div>

    <div id="prodEmpty" class="card text-center py-16 text-muted" style="display:none;"><p>{{ __('Axtarışa uyğun nəticə tapılmadı') }}.</p></div>

    @foreach($pages as $page)
        @php $prods = $grouped[$page->id] ?? []; @endphp
        @if(count($prods))
        <div class="card !p-0 overflow-hidden mb-6" data-prod-group>
            <div class="flex items-center justify-between px-4 py-3 border-b border-line bg-surface2">
                <div class="flex items-center gap-2">
                    <a href="{{ route('pages.htmleditor', [$profileUser, $page]) }}" class="font-semibold text-ink hover:text-primary no-underline">{{ $page->title }}</a>
                    <span class="badge {{ $typeBadges[$page->type] ?? 'badge' }}">{{ $typeLabels[$page->type] ?? $page->type }}</span>
                    <span class="text-xs text-muted">{{ count($prods) }} {{ __('məhsul') }}</span>
                </div>
            </div>

            @foreach($prods as $p)
            <div class="flex items-center justify-between px-4 py-2.5 border-b border-line last:border-0 text-sm" id="prod-row-{{ $p->id }}" data-prod-row data-search="{{ mb_strtolower($p->name . ' ' . $p->description) }}" data-group="{{ $page->id }}" data-status="{{ $p->is_available ? 'active' : 'inactive' }}">
                {{-- Display --}}
                <div class="flex items-center gap-3 flex-1" id="prod-display-{{ $p->id }}">
                    @if($p->image_url)
                        <img src="{{ $p->image_url }}" class="w-10 h-10 rounded-lg object-cover border border-line flex-shrink-0">
                    @else
                        <div class="w-10 h-10 rounded-lg bg-surface2 border border-line flex items-center justify-center text-muted flex-shrink-0"><x-icon name="package" class="w-5 h-5" /></div>
                    @endif
                    <div class="min-w-0">
                        <div class="font-medium text-ink truncate">{{ $p->name }}</div>
                        <div class="text-xs text-muted">{{ number_format($p->price, 2) }} ₼{{ $p->category ? ' · ' . $p->category->name : '' }}{{ $p->description ? ' · ' . mb_substr($p->description, 0, 60) : '' }}</div>
                    </div>
                </div>

                {{-- Edit form --}}
                <form method="POST" action="{{ route('profile.products.update', [$profileUser, $p]) }}" enctype="multipart/form-data" id="prod-edit-{{ $p->id }}" style="display:none;" class="flex-1 mr-2 space-y-2">
                    @csrf @method('PUT')
                    <div class="flex gap-3">
                        <div class="flex-shrink-0" style="width:60px;">
                            @if($p->image_url)
                                <img src="{{ $p->image_url }}" class="w-full h-14 object-cover rounded-lg border mb-1">
                            @else
                                <div class="w-full h-14 bg-surface2 rounded-lg border flex items-center justify-center text-xs text-muted">{{ __('yoxdur') }}</div>
                            @endif
                            <input type="file" name="image" class="input text-xs" accept="image/*" style="padding:2px;font-size:10px;width:60px;">
                        </div>
                        <div class="flex-1 space-y-2">
                            <input type="text" name="name" value="{{ $p->name }}" class="input text-sm" style="padding:4px 8px;" required>
                            <div class="flex gap-2 items-center">
                                <input type="number" name="price" value="{{ $p->price }}" class="input text-sm" style="padding:4px 8px;width:100px;" step="0.01" min="0" required>
                                @if($p->shop)
                                <select name="category_id" class="input text-sm" style="padding:4px 8px;">
                                    <option value="">—</option>
                                    @foreach($p->shop->categories as $cat)<option value="{{ $cat->id }}" {{ $p->category_id == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>@endforeach
                                </select>
                                @endif
                                <label class="flex items-center gap-1.5 text-xs text-muted cursor-pointer">
                                    <input type="checkbox" name="is_available" value="1" class="rounded" {{ $p->is_available ? 'checked' : '' }}> {{ __('Mövcud') }}
                                </label>
                            </div>
                            <textarea name="description" class="input text-sm" rows="1" style="padding:4px 8px;">{{ $p->description }}</textarea>
                        </div>
                    </div>
                    <div class="flex gap-1">
                        <button type="submit" class="btn btn-primary" style="padding:4px 10px;font-size:11px;"><x-icon name="check" class="w-4 h-4" /> {{ __('Saxla') }}</button>
                        <button type="button" onclick="toggleProdEdit({{ $p->id }})" class="btn btn-secondary" style="padding:4px 10px;font-size:11px;"><x-icon name="x" class="w-4 h-4" /></button>
                    </div>
                </form>

                {{-- Actions --}}
                <div class="flex items-center gap-1 flex-shrink-0" id="prod-actions-{{ $p->id }}">
                    <button onclick="toggleProdEdit({{ $p->id }})" class="text-xs text-muted hover:text-primary" style="background:none;border:none;cursor:pointer;" title="{{ __('Redaktə et') }}"><x-icon name="pencil" class="w-4 h-4" /></button>
                    <form method="POST" action="{{ route('profile.products.toggle', [$profileUser, $p]) }}" class="inline">@csrf @method('PUT')<button class="badge {{ $p->is_available?'badge-green':'badge-yellow' }}" style="cursor:pointer;border:none;">{{ $p->is_available?__('Aktiv') : __('Deaktiv') }}</button></form>
                    <form method="POST" action="{{ route('profile.products.destroy', [$profileUser, $p]) }}" onsubmit="return confirm('{{ __('Silinsin?') }}')" class="inline">@csrf @method('DELETE')<button style="color:var(--danger);background:none;border:none;cursor:pointer;font-size:12px;" title="{{ __('Sil') }}"><x-icon name="trash-2" class="w-4 h-4" /></button></form>
                </div>
            </div>
            @endforeach
        </div>
        @endif
    @endforeach

    {{-- Сироты: товар без привязки к странице (на случай удалённой страницы) --}}
    @if(!empty($grouped[0]))
        <div class="card !p-0 overflow-hidden mb-6" data-prod-group>
            <div class="flex items-center gap-2 px-4 py-3 border-b border-line bg-surface2">
                <span class="font-semibold text-muted">{{ __('Səhifəsiz') }}</span>
                <span class="text-xs text-muted">{{ count($grouped[0]) }} {{ __('məhsul') }}</span>
            </div>
            @foreach($grouped[0] as $p)
            <div class="flex items-center justify-between px-4 py-2.5 border-b border-line last:border-0 text-sm" data-prod-row data-search="{{ mb_strtolower($p->name . ' ' . $p->description) }}" data-group="0" data-status="{{ $p->is_available ? 'active' : 'inactive' }}">
                <div class="flex items-center gap-3">
                    @if($p->image_url)<img src="{{ $p->image_url }}" class="w-10 h-10 rounded-lg object-cover border border-line flex-shrink-0">@endif
                    <div><div class="font-medium text-ink">{{ $p->name }}</div><div class="text-xs text-muted">{{ number_format($p->price, 2) }} ₼</div></div>
                </div>
                <form method="POST" action="{{ route('profile.products.destroy', [$profileUser, $p]) }}" onsubmit="return confirm('{{ __('Silinsin?') }}')" class="inline">@csrf @method('DELETE')<button style="color:var(--danger);background:none;border:none;cursor:pointer;"><x-icon name="trash-2" class="w-4 h-4" /></button></form>
            </div>
            @endforeach
        </div>
    @endif
@endif
@endif
@endsection

@push('scripts')
<script>
var SHOP_CATS = @json($shopCats);

function updateShopCats(pageId, targetId){
    var sel = document.getElementById(targetId);
    if (!sel) return;
    var cats = SHOP_CATS[pageId] || [];
    sel.innerHTML = '<option value="">{{ __('Kateqoriya seçin') }}</option>';
    cats.forEach(function(c){
        var o = document.createElement('option');
        o.value = c.id;
        o.textContent = c.name;
        sel.appendChild(o);
    });
}
function switchCatShop(id){
    document.querySelectorAll('.cat-panel').forEach(function(p){
        p.style.display = p.getAttribute('data-shop') === id ? '' : 'none';
    });
}
function toggleCatAddForm(){
    document.querySelectorAll('.cat-add-form').forEach(function(f){
        f.style.display = (f.style.display === 'none') ? 'flex' : 'none';
    });
}
function toggleCatEdit(id){
    var disp = document.getElementById('cat-display-'+id);
    var edit = document.getElementById('cat-edit-'+id);
    var act  = document.getElementById('cat-actions-'+id);
    var opening = edit && edit.style.display === 'none';
    if (disp) disp.style.display = opening ? 'none' : 'inline';
    if (edit) edit.style.display = opening ? 'flex' : 'none';
    if (act)  act.style.display  = opening ? 'none' : 'flex';
}
// При ошибке валидации — восстановить категории и выбор.
document.addEventListener('DOMContentLoaded', function(){
    var pageSel = document.querySelector('[name="page_id"]');
    if (pageSel && pageSel.value) {
        updateShopCats(pageSel.value, 'productCategory');
        var catSel = document.getElementById('productCategory');
        var oldCat = "{{ old('category_id') }}";
        if (oldCat && catSel) catSel.value = oldCat;
    }
});
function toggleProductForm(){
    var f = document.getElementById('productForm');
    f.style.display = f.style.display === 'none' ? 'block' : 'none';
}
function toggleProdEdit(id){
    var disp = document.getElementById('prod-display-'+id);
    var edit = document.getElementById('prod-edit-'+id);
    var act  = document.getElementById('prod-actions-'+id);
    var opening = edit && edit.style.display === 'none';
    if (disp) disp.style.display = opening ? 'none' : 'flex';
    if (edit) edit.style.display = opening ? 'block' : 'none';
    if (act)  act.style.display  = opening ? 'none' : 'flex';
}
function applyProdFilter(){
    var q = (document.getElementById('prodSearch').value || '').toLowerCase().trim();
    var page = document.getElementById('prodPageFilter').value;
    var status = document.getElementById('prodStatusFilter').value;
    var total = 0;
    document.querySelectorAll('[data-prod-row]').forEach(function(row){
        var name = (row.getAttribute('data-search') || '').toLowerCase();
        var okSearch = !q || name.indexOf(q) !== -1;
        var okPage = !page || row.getAttribute('data-group') === page;
        var okStatus = !status || row.getAttribute('data-status') === status;
        var show = okSearch && okPage && okStatus;
        row.style.display = show ? '' : 'none';
        if (show) total++;
    });
    document.querySelectorAll('[data-prod-group]').forEach(function(card){
        var rows = card.querySelectorAll('[data-prod-row]');
        var anyVisible = rows.length > 0 && Array.prototype.some.call(rows, function(r){ return r.style.display !== 'none'; });
        card.style.display = anyVisible ? '' : 'none';
    });
    var empty = document.getElementById('prodEmpty');
    if (empty) empty.style.display = total === 0 ? 'block' : 'none';
}
</script>
@endpush