@extends('layouts.app')
@section('title', __('dashboard.Catalog Settings'))
@section('page_heading', __('dashboard.Catalog Settings'))

@section('content')
@php $catalogUrl = route('public.catalog.index'); @endphp

{{-- KPIs --}}
<div class="kpi-grid-4">
    @foreach([
        ['fa-solid fa-eye',       '#eff6ff','#2563eb', number_format($stats['total_visits']),   __('dashboard.total_visits')],
        ['fa-solid fa-users',    '#f0fdf4','#16a34a', number_format($stats['unique_visitors']),__('dashboard.unique_visitors')],
        ['fa-solid fa-bag-shopping', '#fffbeb','#d97706', number_format($stats['product_views']),  __('dashboard.product_views_stat')],
        ['fa-solid fa-clock',     '#f8fafc','#64748b', $stats['last_visit_at'] ? \Carbon\Carbon::parse($stats['last_visit_at'])->format('m-d H:i') : '—', 'آخر زيارة'],
    ] as [$icon,$bg,$color,$val,$lbl])
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1.1rem 1.25rem;display:flex;align-items:center;gap:.875rem;box-shadow:var(--shadow-card)">
        <div style="width:42px;height:42px;border-radius:12px;flex-shrink:0;background:{{ $bg }};color:{{ $color }};display:flex;align-items:center;justify-content:center;font-size:1.05rem">
            <i class="{{ $icon }}"></i>
        </div>
        <div>
            <div style="font-size:1.35rem;font-weight:900;color:var(--text-primary);line-height:1">{{ $val }}</div>
            <div style="font-size:.7rem;font-weight:700;color:var(--text-muted);margin-top:.2rem">{{ $lbl }}</div>
        </div>
    </div>
    @endforeach
</div>

<div style="display:grid;grid-template-columns:1fr 320px;gap:1.25rem;align-items:start">

    {{-- Settings form --}}
    <form action="{{ route('dashboard.catalog.settings.update') }}" method="POST" enctype="multipart/form-data">
        @csrf

        {{-- Identity --}}
        <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden;margin-bottom:1.25rem">
            <div style="display:flex;align-items:center;gap:.5rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle);font-size:.875rem;font-weight:800;color:var(--text-primary)">
                <i class="fa-solid fa-store" style="color:var(--text-muted)"></i>{{ __('dashboard.Public Catalog Configuration') }}
            </div>
            <div style="padding:1.25rem">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem">
                    <div>
                        <label class="app-label font-bold">{{ __('dashboard.Catalog Title') }} <span class="text-red-600 dark:text-red-400">*</span></label>
                        <input type="text" name="catalog_title" class="app-input" value="{{ $settings['title'] }}" required>
                    </div>
                    <div>
                        <label class="app-label font-bold">{{ __('dashboard.catalog_public_link') }}</label>
                        <input type="text" class="app-input" value="{{ $catalogUrl }}" readonly>
                    </div>
                </div>
                <div style="margin-bottom:1rem">
                    <label class="app-label font-bold">{{ __('dashboard.Catalog Description') }}</label>
                    <textarea name="catalog_description" class="app-input" rows="3">{{ $settings['description'] }}</textarea>
                </div>
                <div>
                    <label class="app-label font-bold">لوجو المعرض</label>
                    @if(!empty($settings['catalog_logo_path']))
                    <div style="margin-bottom:.5rem">
                        <img src="{{ $settings['catalog_logo_path'] }}" style="max-height:60px;border-radius:8px;border:1px solid var(--border)">
                    </div>
                    @endif
                    <input type="file" name="catalog_logo" class="app-input" accept="image/*">
                    <div style="font-size:.72rem;color:var(--text-muted);margin-top:.25rem">سيظهر في صفحة المعرض العام</div>
                </div>
            </div>
        </div>

        {{-- Contact --}}
        <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden;margin-bottom:1.25rem">
            <div style="display:flex;align-items:center;gap:.5rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle);font-size:.875rem;font-weight:800;color:var(--text-primary)">
                <i class="fa-solid fa-phone" style="color:var(--text-muted)"></i>{{ __('dashboard.catalog_contact_section') }}
            </div>
            <div style="padding:1.25rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem">
                <div>
                    <label class="app-label font-bold">{{ __('dashboard.Contact Phone') }}</label>
                    <input type="text" name="catalog_phone" class="app-input" value="{{ $settings['phone'] }}">
                </div>
                <div>
                    <label class="app-label font-bold">{{ __('dashboard.WhatsApp Number') }}</label>
                    <input type="text" name="catalog_whatsapp" class="app-input" value="{{ $settings['whatsapp'] }}" placeholder="201000000000">
                </div>
            </div>
        </div>

        {{-- Visibility --}}
        <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden">
            <div style="display:flex;align-items:center;gap:.5rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle);font-size:.875rem;font-weight:800;color:var(--text-primary)">
                <i class="fa-solid fa-toggle-on" style="color:var(--text-muted)"></i>{{ __('dashboard.catalog_visibility_section') }}
            </div>
            <div style="padding:1.25rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem">
                @foreach([
                    ['catalog_show_price',        $settings['show_price'],        __('dashboard.Show Prices to Customers'),    __('dashboard.catalog_show_price_help')],
                    ['catalog_show_availability', $settings['show_availability'], __('dashboard.Show Stock Availability'),     __('dashboard.catalog_show_availability_help')],
                ] as [$name,$checked,$label,$hint])
                <div style="display:flex;align-items:center;justify-content:space-between;padding:.875rem 1rem;border-radius:12px;border:1px solid var(--border)">
                    <div>
                        <div style="font-size:.83rem;font-weight:800;color:var(--text-primary)">{{ $label }}</div>
                        <div style="font-size:.72rem;color:var(--text-muted);margin-top:.15rem">{{ $hint }}</div>
                    </div>
                    <div class="app-check app-check--switch ms-3 mb-0">
                        <input class="app-check__input" type="checkbox" name="{{ $name }}" value="1" @checked($checked)>
                    </div>
                </div>
                @endforeach
            </div>
            <div style="padding:.875rem 1.25rem;border-top:1px solid var(--border-subtle);display:flex;justify-content:flex-end">
                <button type="submit" class="app-btn app-btn--primary">{{ __('dashboard.Save Changes') }}</button>
            </div>
        </div>
    </form>

    {{-- Share sidebar --}}
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden">
        <div style="display:flex;align-items:center;gap:.5rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle);font-size:.875rem;font-weight:800;color:var(--text-primary)">
            <i class="fa-solid fa-share" style="color:var(--text-muted)"></i>{{ __('dashboard.Share Catalog') }}
        </div>
        <div style="padding:1.25rem">
            <p style="font-size:.82rem;color:var(--text-muted);margin-bottom:1rem">{{ __('dashboard.Copy this link to send it to your customers via WhatsApp or Social Media.') }}</p>
            <input type="text" class="app-input mb-3" id="catalog_url" value="{{ $catalogUrl }}" readonly>
            <div style="display:grid;gap:.5rem">
                <button class="app-btn app-btn--primary-soft" id="copy_link_btn" type="button">
                    <i class="fa-solid fa-copy me-2"></i>{{ __('dashboard.Copy Link') }}
                </button>
                <a href="{{ $catalogUrl }}" target="_blank" class="app-btn app-btn--secondary">
                    <i class="fa-solid fa-eye me-2"></i>{{ __('dashboard.Preview Catalog') }}
                </a>
                <a href="{{ route('dashboard.catalog.analytics') }}" class="app-btn app-btn--secondary">
                    <i class="fa-solid fa-chart-bar me-2"></i>{{ __('dashboard.sidebar_catalog_analytics') }}
                </a>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
document.getElementById('copy_link_btn').addEventListener('click', async function() {
    try { await navigator.clipboard.writeText(document.getElementById('catalog_url').value); }
    catch { document.getElementById('catalog_url').select(); document.execCommand('copy'); }
    this.innerHTML = '<i class="fa-solid fa-check me-2"></i>تم النسخ!';
    setTimeout(() => this.innerHTML = '<i class="fa-solid fa-copy me-2"></i>{{ __("dashboard.Copy Link") }}', 2000);
});
</script>
@endsection