@extends('profile.layout')
@section('title', __('Mini-səhifə'))
@section('content')

<div class="flex items-center justify-between mb-6">
    <div><h1 class="text-2xl font-bold text-ink">{{ __('Mini-səhifə') }}</h1><p class="text-sm text-muted mt-1">{{ count($items) }} {{ __('səhifə') }}</p></div>
    <a href="/profile/{{ $profileUser->id }}/create?type=mini_site" class="btn btn-primary no-underline">＋ {{ __('Yeni mini-səhifə') }}</a>
</div>

<div id="addForm" style="display:none;" class="card mb-6 border-2 border-primarysoft">
    <h3 class="font-semibold text-ink mb-4">{{ __('Yeni mini-səhifə 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">
        @foreach($templates as $tpl)
        <button type="button" onclick="selectTpl({{ $tpl->id }},'{{ $tpl->name }}')" class="tpl-btn text-left p-2 rounded-xl border-2 border-line hover:border-muted">
            <div class="aspect-[16/10] rounded-lg overflow-hidden bg-surface2 mb-1">@if($tpl->thumbnail)<img src="{{ $tpl->thumbnail }}" class="w-full h-full object-cover">@endif</div>
            <div class="text-xs text-ink truncate">{{ $tpl->name }}</div>
        </button>
        @endforeach
    </div>
    @endif
    <form method="POST" action="{{ route('pages.store', $profileUser) }}" class="flex flex-col gap-2">
        @csrf
        <input type="hidden" name="type" value="mini_site"><input type="hidden" name="template_id" id="templateId" value="">
        <div class="flex flex-col sm:flex-row gap-2">
            <input type="text" name="title" class="input flex-1" placeholder="{{ __('Səhifə başlığı') }}" 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="username" 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=mini_site'" 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="smartphone" class="w-12 h-12" /></div><p>{{ __('Mini-səhifəniz yoxdur') }}.</p></div>
@else
<div class="space-y-3">
    @foreach($items as $page)
    <div class="card flex items-center justify-between gap-4">
        <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2"><x-icon name="smartphone" class="w-5 h-5" /><h3 class="font-semibold text-ink truncate">{{ $page->title }}</h3>@if(!$page->is_active)<span class="badge badge-yellow">{{ __('Deaktiv') }}</span>@endif</div>
            <p class="text-sm text-muted">libro.az/{{ $page->slug }} · {{ $page->views_count }} {{ __('baxış') }}</p>
        </div>
        <div class="flex gap-1 flex-shrink-0 flex-wrap justify-end">
            <a href="https://libro.az/{{ $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, $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, $page]) }}" class="btn btn-secondary btn-icon no-underline" title="{{ __('Parametrlər') }}"><x-icon name="settings" class="w-5 h-5" /></a>
            <button onclick="showQr('https://libro.az/{{ $page->slug }}','{{ $page->title }}')" class="btn btn-secondary btn-icon" title="{{ __('QR') }}"><x-icon name="qr-code" class="w-5 h-5" /></button>
            <button onclick="confirmDelete({{ $page->id }},'{{ $page->title }}')" 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}/pages"])
@endsection

@push('scripts')
<script>
function toggleAdd(){document.getElementById('addForm').style.display=document.getElementById('addForm').style.display==='none'?'block':'none';}
function selectTpl(id,name){document.getElementById('templateId').value=id;document.querySelectorAll('.tpl-btn').forEach(b=>b.className=b.className.replace(/border-primary bg-primarysoft ring-2/g,'border-line hover:border-muted'));}
</script>
@endpush