@extends('profile.layout')
@section('title', __('Mağazalar'))
@section('content')

<div class="flex items-center justify-between mb-6">
    <div><h1 class="text-2xl font-bold text-ink">{{ __('Mağaza') }}</h1><p class="text-sm text-muted mt-1">{{ count($items) }} {{ __('mağaza') }}</p></div>
    @if($profileUser->canCreatePageType('shop'))
    <a href="/profile/{{ $profileUser->id }}/create?type=shop" class="btn btn-primary no-underline">＋ {{ __('Yeni mağaza') }}</a>
    @else
    <button type="button" disabled class="btn btn-secondary opacity-50 cursor-not-allowed" title="{{ $profileUser->pageTypePlanName('shop') ?? 'Premium' }} {{ __('tarifində') }}"><x-icon name="lock" class="w-5 h-5" /> {{ __('Yeni mağaza') }}</button>
    @endif
</div>

<div id="addForm" style="display:none;" class="card mb-6 border-2 border-primarysoft">
    <h3 class="font-semibold text-ink mb-4">{{ __('Yeni Mağaza yarat') }}</h3>
    @if(count($templates ?? []))
    <p class="text-sm text-muted mb-2">{{ __('Şablon seçin:') }}</p>
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 mb-4">
        <button onclick="selectTpl(0)" class="tpl-btn text-left p-2 rounded-xl border-2 border-primary bg-primarysoft"><div class="text-xs text-muted">{{ __('Şablonsuz') }}</div></button>
        @foreach($templates as $tpl)
        <button onclick="selectTpl({{ $tpl->id }})" class="tpl-btn text-left p-2 rounded-xl border-2 border-line hover:border-muted"><div class="text-xs text-ink truncate">{{ $tpl->name }}</div></button>
        @endforeach
    </div>
    @endif
    <form method="POST" action="{{ route('shops.store', $profileUser) }}" class="flex flex-col gap-2">
        @csrf <input type="hidden" name="template_id" id="templateId" value="">
        <div class="flex flex-col sm:flex-row gap-2">
            <input type="text" name="name" class="input flex-1" placeholder="{{ __('Mağaza adı') }}" required>
            <div class="flex items-center flex-1"><span class="px-3 py-2.5 bg-surface2 border border-line rounded-l-lg text-sm text-muted hidden sm:block">libro.az/</span><input type="text" name="slug" class="input sm:rounded-l-none flex-1" placeholder="ad" pattern="[a-z0-9-]+"></div>
        </div>
        <div class="flex gap-2"><button type="submit" class="btn btn-primary">{{ __('Yarat') }}</button><button type="button" onclick="window.location.href='/profile/{{ $profileUser->id }}/create?type=shop'" class="btn btn-secondary">{{ __('Ləğv et') }}</button></div>
    </form>
</div>

@if(count($items)===0)
<div class="card text-center py-16 text-muted"><div class="mb-4"><x-icon name="shopping-bag" class="w-12 h-12" /></div><p>{{ __('Mağaza yoxdur') }}.</p></div>
@else
<div class="space-y-3">
    @foreach($items as $s)
    <div class="card flex items-center justify-between gap-4">
        <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2"><span class="text-lg"><x-icon name="shopping-bag" class="w-5 h-5" /></span><h3 class="font-semibold text-ink truncate">{{ $s->name }}</h3>@if(!$s->is_active)<span class="badge badge-yellow">{{ __('Deaktiv') }}</span>@endif</div>
            <p class="text-sm text-muted">{{ $s->categories_count }} {{ __('kateqoriya') }} · {{ $s->products_count }} {{ __('məhsul') }} @if($s->page) · libro.az/{{ $s->page->slug }}@endif</p>
        </div>
        <div class="flex gap-1 flex-shrink-0 flex-wrap justify-end">
            @if($s->page)
            <a href="https://libro.az/{{ $s->page->slug }}" onclick="window.open(this.href,'_blank','noopener');return false;" class="btn btn-secondary btn-icon no-underline" title="{{ __('Baxış') }}"><x-icon name="eye" class="w-5 h-5" /></a>
            <a href="{{ route('pages.htmleditor', [$profileUser, $s->page]) }}" class="btn btn-primary btn-icon no-underline" title="{{ __('Redaktə et') }}"><x-icon name="pencil" class="w-5 h-5" /></a>
            <a href="{{ route('pages.settings', [$profileUser, $s->page]) }}" class="btn btn-secondary btn-icon no-underline" title="{{ __('Parametrlər') }}"><x-icon name="settings" class="w-5 h-5" /></a>
            @endif
            <a href="{{ route('shops.show', [$profileUser, $s]) }}" class="btn btn-secondary btn-icon no-underline" title="{{ __('Məhsullar') }}"><x-icon name="folder" class="w-5 h-5" /></a>
            <button onclick="showQr('https://libro.az/{{ $s->page->slug ?? '' }}','{{ $s->name }}')" class="btn btn-secondary btn-icon" title="{{ __('QR') }}"><x-icon name="qr-code" class="w-5 h-5" /></button>
            <button onclick="confirmDelete({{ $s->id }},'{{ $s->name }}')" class="btn btn-ghost btn-icon text-danger" title="{{ __('Sil') }}"><x-icon name="trash-2" class="w-5 h-5" /></button>
        </div>
    </div>
    @endforeach
</div>
@endif

@include('profile._qr_modal')
@include('profile._delete_modal', ['route' => "profile/{$profileUser->id}/shops"])
@endsection

@push('scripts')
<script>function toggleAdd(){document.getElementById('addForm').style.display=document.getElementById('addForm').style.display==='none'?'block':'none';}function selectTpl(id){document.getElementById('templateId').value=id||'';}</script>
@endpush