@extends('profile.layout')
@section('title', __('Bio-link'))

@section('content')
<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-2xl font-bold text-ink">{{ __('Bio-link') }}</h1>
        <p class="text-sm text-muted mt-1">{{ count($items) }} {{ __('səhifə') }} · {{ __('Instagram bio üçün') }}</p>
    </div>
    <a href="/profile/{{ $profileUser->id }}/create?type=default" class="btn btn-primary no-underline">＋ {{ __('Yeni səhifə') }}</a>
</div>

<!-- Create form -->
<div id="addForm" style="display:none;" class="card mb-6 border-2 border-primarysoft">
    <h3 class="font-semibold text-ink mb-4">{{ __('Yeni Bio-link yarat') }}</h3>

    @if(count($templates ?? []))
    <p class="text-sm text-muted mb-2">{{ __('Şablon seçin (istəyə bağlı):') }}</p>
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 mb-4" id="templateGrid">
        <button type="button" onclick="selectTpl(null)" class="text-left p-2 rounded-xl border-2 border-primary bg-primarysoft" id="tpl-empty">
            <div class="aspect-[16/10] rounded-lg bg-surface2 flex items-center justify-center text-xs text-muted mb-1">{{ __('Boş') }}</div>
            <div class="text-xs text-muted">{{ __('Şablonsuz') }}</div>
        </button>
        @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"
                data-id="{{ $tpl->id }}">
            <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="default">
        <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="toggleAdd()" class="btn btn-secondary">{{ __('Ləğv et') }}</button>
        </div>
    </form>
</div>

<!-- Pages list -->
@if(count($items) === 0)
    <div class="card text-center py-16 text-muted">
        <div class="mb-4"><x-icon name="link" class="w-12 h-12" /></div>
        <p>{{ __('Səhifəniz yoxdur') }}. {{ __('İlk Bio-link səhifənizi yaradın.') }}</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">
                    <span class="text-lg"><x-icon name="link" class="w-5 h-5" /></span>
                    <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ış') }} · {{ $page->orders_count }} {{ __('sifariş') }}</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

<!-- Delete modal -->
<div id="deleteModal" class="modal-overlay" style="display:none;" onclick="cancelDelete()">
    <div class="modal-box" onclick="event.stopPropagation()">
        <h3 class="text-lg font-bold text-ink mb-2">{{ __('Səhifəni silmək?') }}</h3>
        <p class="text-sm text-muted mb-4"><strong id="delName"></strong> silinəcək. {{ __('Bütün məlumatlar silinəcək') }}.</p>
        <div class="flex gap-2">
            <button onclick="doDelete()" class="btn btn-danger flex-1"><x-icon name="trash-2" class="w-5 h-5" /> {{ __('Sil') }}</button>
            <button onclick="cancelDelete()" class="btn btn-secondary flex-1">{{ __('Ləğv et') }}</button>
        </div>
    </div>
</div>

@include('profile._qr_modal')
@endsection

@push('scripts')
<script>
let delId = null;
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'));
    if (id) {
        document.querySelector(`[data-id="${id}"]`).className += ' border-primary bg-primarysoft shadow-sm ring-2 ring-primarysoft';
    }
}
function confirmDelete(id, title) {
    delId = id;
    document.getElementById('delName').textContent = title;
    document.getElementById('deleteModal').style.display = 'flex';
}
function cancelDelete() { delId = null; document.getElementById('deleteModal').style.display = 'none'; }
async function doDelete() {
    if (!delId) return;
    await fetch(`/profile/{{ $profileUser->id }}/pages/${delId}`, { method: 'DELETE', headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' } });
    window.location.reload();
}
</script>
@endpush