@extends('profile.layout')
@section('title', $shop->name)
@section('content')
<a href="{{ route('shops.index', $profileUser) }}" class="text-sm text-muted hover:text-ink mb-4 inline-flex items-center gap-1.5"><x-icon name="arrow-left" class="w-4 h-4" /> {{ __('Mağazalara qayıt') }}</a>
<h1 class="text-2xl font-bold text-ink mb-2">{{ $shop->name }}</h1>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
    <div class="card">
        <div class="flex justify-between items-center mb-4"><h3 class="font-semibold">{{ __('Kateqoriyalar') }}</h3>
            <form method="POST" action="{{ route('shops.categories.store', [$profileUser, $shop]) }}" class="flex gap-1">@csrf<input type="text" name="name" class="input text-sm" placeholder="{{ __('Yeni kateqoriya') }}" required><button type="submit" class="btn btn-primary" style="padding:6px 12px;font-size:12px;">+</button></form>
        </div>
        @foreach($shop->categories as $cat)
        <div class="flex justify-between items-center py-2 border-b text-sm" id="cat-row-{{ $cat->id }}">
            <span id="cat-display-{{ $cat->id }}">{{ $cat->name }}</span>
            <form method="POST" action="{{ route('shops.categories.update', [$profileUser, $shop, $cat]) }}" id="cat-edit-{{ $cat->id }}" style="display:none;" class="flex gap-1 flex-1 mr-2">
                @csrf @method('PUT')<input type="text" name="name" value="{{ $cat->name }}" class="input text-sm flex-1" style="padding:4px 8px;"><button type="submit" class="btn btn-primary" style="padding:4px 8px;font-size:11px;"><x-icon name="check" class="w-4 h-4" /></button><button type="button" onclick="toggleCatEdit({{ $cat->id }})" class="btn btn-secondary" style="padding:4px 8px;font-size:11px;"><x-icon name="x" class="w-4 h-4" /></button>
            </form>
            <div class="flex gap-1" id="cat-actions-{{ $cat->id }}">
                <button onclick="toggleCatEdit({{ $cat->id }})" class="text-xs text-muted hover:text-primary" style="background:none;border:none;cursor:pointer;"><x-icon name="pencil" class="w-4 h-4" /></button>
                <form method="POST" action="{{ route('shops.categories.toggle', [$profileUser, $shop, $cat]) }}" class="inline">@csrf @method('PUT')<button class="badge {{ $cat->is_active?'badge-green':'badge-yellow' }}" style="cursor:pointer;border:none;">{{ $cat->is_active?__('Aktiv') : __('Deaktiv') }}</button></form>
                <form method="POST" action="{{ route('shops.categories.destroy', [$profileUser, $shop, $cat]) }}" onsubmit="return confirm('{{ __('Silinsin?') }}')" class="inline">@csrf @method('DELETE')<button style="color:var(--danger);background:none;border:none;cursor:pointer;font-size:12px;"><x-icon name="trash-2" class="w-4 h-4" /></button></form>
            </div>
        </div>
        @endforeach
    </div>

    <div class="card">
        <div class="flex justify-between items-center mb-4"><h3 class="font-semibold">{{ __('Məhsullar') }}</h3>
            <button onclick="toggleProductForm()" class="btn btn-primary" style="padding:6px 12px;font-size:12px;">+ {{ __('Yeni məhsul') }}</button>
        </div>
        <div id="productForm" style="display:none;" class="mb-4 p-4 bg-surface2 rounded-xl border border-line">
            <h4 class="text-sm font-semibold mb-3">{{ __('Yeni məhsul əlavə et') }}</h4>
            @if($errors->any())<div class="mb-3 p-2 bg-dangersoft border border-line rounded-lg text-xs text-danger">@foreach($errors->all() as $e)<p>{{ $e }}</p>@endforeach</div>@endif
            <form method="POST" action="{{ route('shops.products.store', [$profileUser, $shop]) }}" enctype="multipart/form-data" class="space-y-3">
                @csrf
                <input type="text" name="name" class="input" placeholder="{{ __('Məhsul adı') }}" value="{{ old('name') }}" required>
                <div class="grid grid-cols-2 gap-2"><input type="number" name="price" class="input" placeholder="{{ __('Qiymət (AZN)') }}" step="0.01" min="0" value="{{ old('price') }}" required>
                    <select name="category_id" class="input"><option value="">{{ __('Kateqoriya seçin') }}</option>@foreach($shop->categories as $cat)<option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>@endforeach</select>
                </div>
                <textarea name="description" class="input" rows="2" placeholder="{{ __('Təsvir') }}">{{ old('description') }}</textarea>
                <input type="file" name="image" class="input" accept="image/*">
                <button type="submit" class="btn btn-primary w-full">{{ __('Əlavə et') }}</button>
            </form>
        </div>
        @foreach($shop->products as $p)
        <div class="flex justify-between items-center py-2 border-b text-sm" id="prod-row-{{ $p->id }}">
            <div class="flex items-center gap-2" id="prod-display-{{ $p->id }}">
                @if($p->image_url)<img src="{{ $p->image_url }}" class="w-8 h-8 rounded object-cover">@endif
                <div><span class="font-medium">{{ $p->name }}</span><span class="text-muted ml-2">{{ number_format($p->price,2) }} ₼</span>@if($p->category)<span class="text-xs text-muted ml-1">({{ $p->category->name }})</span>@endif @if($p->description)<div class="text-xs text-muted">{{ $p->description }}</div>@endif</div>
            </div>
            <form method="POST" action="{{ route('shops.products.update', [$profileUser, $shop, $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"><input type="number" name="price" value="{{ $p->price }}" class="input text-sm" style="padding:4px 8px;width:90px;" step="0.01" required><select name="category_id" class="input text-sm" style="padding:4px 8px;"><option value="">—</option>@foreach($shop->categories as $cat)<option value="{{ $cat->id }}" {{ $p->category_id == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>@endforeach</select></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>
            <div class="flex gap-1" 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;"><x-icon name="pencil" class="w-4 h-4" /></button>
                <form method="POST" action="{{ route('shops.products.toggle', [$profileUser, $shop, $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('shops.products.destroy', [$profileUser, $shop, $p]) }}" onsubmit="return confirm('{{ __('Silinsin?') }}')" class="inline">@csrf @method('DELETE')<button style="color:var(--danger);background:none;border:none;cursor:pointer;font-size:12px;"><x-icon name="trash-2" class="w-4 h-4" /></button></form>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endsection

@push('scripts')
<script>
function toggleProductForm(){document.getElementById('productForm').style.display=document.getElementById('productForm').style.display==='none'?'block':'none';}
function toggleCatEdit(id){document.getElementById('cat-display-'+id).style.display=document.getElementById('cat-display-'+id).style.display==='none'?'inline':'none';document.getElementById('cat-edit-'+id).style.display=document.getElementById('cat-edit-'+id).style.display==='none'?'flex':'none';document.getElementById('cat-actions-'+id).style.display=document.getElementById('cat-actions-'+id).style.display==='none'?'flex':'none';}
function toggleProdEdit(id){document.getElementById('prod-display-'+id).style.display=document.getElementById('prod-display-'+id).style.display==='none'?'flex':'none';document.getElementById('prod-edit-'+id).style.display=document.getElementById('prod-edit-'+id).style.display==='none'?'block':'none';document.getElementById('prod-actions-'+id).style.display=document.getElementById('prod-actions-'+id).style.display==='none'?'flex':'none';}
@if($errors->any())document.addEventListener('DOMContentLoaded',function(){document.getElementById('productForm').style.display='block';});@endif
</script>
@endpush