@extends('profile.layout')
@section('title', __('Bildirişlər'))
@section('content')
<h1 class="text-2xl font-bold text-ink mb-6">{{ __('Bildirişlər') }}</h1>

{{-- Tabs --}}
<div class="flex gap-1 mb-6 border-b border-line">
    <button onclick="switchTab('orders')" id="tab-orders" class="px-4 py-2.5 text-sm font-medium border-b-2 border-primary text-primary flex gap-1" style="background:none;cursor:pointer;">
        <x-icon name="briefcase" class="w-5 h-5" /> {{ __('Müraciətlər') }}
        @php $newOrders = \App\Models\Order::whereIn('page_id', $profileUser->pages()->pluck('id'))->where('status','new')->count(); @endphp
        @if($newOrders > 0)<span class="ml-1 bg-red-500 text-white text-[11px] px-1.5 py-0.5 rounded-full w-5 h-5 flex items-center justify-center">{{ $newOrders }}</span>@endif
    </button>
    <button onclick="switchTab('system')" id="tab-system" class="px-4 py-2.5 text-sm font-medium border-b-2 border-transparent text-muted flex gap-1 hover:text-ink" style="background:none;cursor:pointer;">
        <x-icon name="bell" class="w-5 h-5" /> {{ __('Sistem') }}
        @php $unreadSys = \App\Models\Notification::unreadCount($profileUser->id); @endphp
        @if($unreadSys > 0)<span class="ml-1 bg-red-500 text-white text-[11px] px-1.5 py-0.5 rounded-full w-5 h-5 flex items-center justify-center">{{ $unreadSys }}</span>@endif
    </button>
</div>

{{-- Orders tab --}}
<div id="tab-orders-content">
    @if($orders->isEmpty())
        <div class="card text-center py-12 text-muted"><div class="mb-3"><x-icon name="briefcase" class="w-10 h-10" /></div><p>{{ __('Müraciət yoxdur') }}</p></div>
    @else
    <div class="space-y-3">
        @foreach($orders as $o)
            @php
                // total_amount == 0 → это простая контакт-форма (обращение),
                // а не заказ с товарами.
                $isOrder = (float) $o->total_amount > 0;
                $initial = mb_strtoupper(mb_substr(trim($o->customer_name ?: '?'), 0, 1));
            @endphp
            <article class="card libro-notif-card border-l-4 {{ $isOrder ? 'border-l-primary libro-notif-card--order' : 'border-l-success libro-notif-card--feedback' }}">
                {{-- Header --}}
                <div class="flex items-start justify-between gap-3">
                    <div class="flex items-center gap-3 min-w-0">
                        <span class="w-10 h-10 rounded-full def-gradient text-white flex items-center justify-center font-semibold shrink-0">{{ $initial }}</span>
                        <div class="min-w-0">
                            <div class="flex items-center gap-2 flex-wrap">
                                <span class="font-semibold text-ink leading-tight truncate">{{ $o->customer_name }}</span>
                                @if($isOrder)
                                    <span class="badge badge-purple"><x-icon name="shopping-bag" class="w-3.5 h-3.5" /> {{ __('Sifariş') }}</span>
                                @else
                                    <span class="badge badge-green"><x-icon name="message-square" class="w-3.5 h-3.5" /> {{ __('Müraciət') }}</span>
                                @endif
                            </div>
                            <div class="text-xs text-muted mt-1 truncate"><x-icon name="link" class="w-3.5 h-3.5 inline" /> {{ $o->page->title ?? '—' }}</div>
                        </div>
                    </div>
                    <div class="text-right shrink-0">
                        @if($isOrder)
                            <div class="text-lg font-bold text-ink leading-none">{{ number_format((float) $o->total_amount, 2) }} <span class="text-sm text-muted">₼</span></div>
                        @endif
                        <span class="badge {{ \App\Models\Order::statusColor($o->status) }} mt-1.5">{{ \App\Models\Order::statusLabel($o->status) }}</span>
                    </div>
                </div>

                {{-- Contacts: телефон → email → адрес --}}
                <div class="flex flex-wrap gap-2" style="margin:4px 0;">
                    <a href="tel:{{ preg_replace('/[^\d+]/', '', $o->customer_phone) }}" class="libro-notif-contact inline-flex items-center gap-1.5 no-underline px-3 py-1.5 rounded-lg bg-surface2 text-sm text-ink hover:bg-primarysoft transition-colors">
                        <x-icon name="phone" class="w-4 h-4 text-muted" /> {{ $o->customer_phone }}
                    </a>
                    @if($o->customer_email)
                    <a href="mailto:{{ $o->customer_email }}" class="libro-notif-contact inline-flex items-center gap-1.5 no-underline px-3 py-1.5 rounded-lg bg-surface2 text-sm text-ink hover:bg-primarysoft transition-colors">
                        <x-icon name="mail" class="w-4 h-4 text-muted" /> {{ $o->customer_email }}
                    </a>
                    @endif
                    @if($o->customer_address)
                    <span class="libro-notif-contact inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-surface2 text-sm text-ink">
                        <x-icon name="map-pin" class="w-4 h-4 text-muted" /> {{ $o->customer_address }}
                    </span>
                    @endif
                </div>

                {{-- Items (только для заказов) --}}
                @if($isOrder && !empty($o->items))
                <div class="border-t border-line pt-1">
                    @foreach($o->items as $item)
                        @php $lineTotal = ((float) ($item['price'] ?? 0)) * ((int) ($item['quantity'] ?? 1)); @endphp
                        <div class="flex items-center justify-between gap-3 py-1.5">
                            <span class="text-sm text-ink min-w-0 truncate">
                                <span class="inline-block min-w-[2ch] text-center rounded bg-surface2 text-muted text-xs px-1 mr-2">{{ $item['quantity'] ?? 1 }}</span>
                                {{ $item['name'] ?? '' }}
                            </span>
                            <span class="text-sm font-medium text-ink shrink-0">{{ number_format($lineTotal, 2) }} ₼</span>
                        </div>
                    @endforeach
                </div>
                @endif

                {{-- Notes: для заказа — комментарий, для обращения — само сообщение --}}
                @if($o->notes)
                <div class="rounded-xl bg-surface2 px-3 py-2.5 text-sm text-ink flex gap-2">
                    <x-icon name="{{ $isOrder ? 'file-pen' : 'message-square' }}" class="w-4 h-4 text-muted mt-0.5 shrink-0" />
                    <span class="whitespace-pre-wrap break-words">{{ $o->notes }}</span>
                </div>
                @endif

                {{-- Footer --}}
                <div class="flex items-center justify-between gap-3 text-xs text-muted">
                    <span>№ {{ $o->id }}</span>
                    <span class="flex items-center gap-1.5 shrink-0"><x-icon name="clock" class="w-3.5 h-3.5" /> {{ $o->created_at->format('d.m.Y, H:i') }}</span>
                </div>
            </article>
        @endforeach
    </div>
    <div class="mt-4">{{ $orders->links() }}</div>
    @endif
</div>

{{-- System tab --}}
<div id="tab-system-content" style="display:none;">
    @if($notifications->isEmpty())
        <div class="card text-center py-12 text-muted"><div class="mb-3"><x-icon name="bell" class="w-10 h-10" /></div><p>{{ __('Bildiriş yoxdur') }}</p></div>
    @else
    <div class="space-y-3">
        @foreach($notifications as $n)
            @php
                $typeMeta = match($n->type) {
                    'info'    => ['badge-blue',    'info',         'bg-infosoft text-info'],
                    'success' => ['badge-green',   'circle-check', 'bg-successsoft text-success'],
                    'warning' => ['badge-yellow',  'alert-triangle','bg-warningsoft text-warning'],
                    default   => ['badge-purple',  'bell',         'bg-purplesoft text-purple'],
                };
            @endphp
            <article class="card libro-notif-sys">
                <div class="flex items-start justify-between gap-3 my-1">
                    <div class="flex items-start gap-3 min-w-0">
                        <span class="w-9 h-9 rounded-full {{ $typeMeta[2] }} flex items-center justify-center shrink-0">
                            <x-icon :name="$typeMeta[1]" class="w-4 h-4" />
                        </span>
                        <div class="min-w-0">
                            <div class="font-semibold text-sm text-ink">{{ $n->title }}</div>
                            <div class="text-sm text-muted mt-1 break-words">{!! nl2br(e($n->message)) !!}</div>
                        </div>
                    </div>
                    <span class="badge {{ $typeMeta[0] }} shrink-0">{{ $n->type }}</span>
                </div>
                <div class="flex items-center gap-1.5 text-xs text-muted mt-3 pt-3 border-t border-line">
                    <x-icon name="clock" class="w-3.5 h-3.5" /> {{ $n->created_at->format('d.m.Y, H:i') }}
                </div>
            </article>
        @endforeach
    </div>
    <div class="mt-4">{{ $notifications->links() }}</div>
    @endif
</div>
@endsection

@push('scripts')
<script>
function switchTab(tab) {
    document.getElementById('tab-orders-content').style.display = tab === 'orders' ? 'block' : 'none';
    document.getElementById('tab-system-content').style.display = tab === 'system' ? 'block' : 'none';
    document.getElementById('tab-orders').className = tab === 'orders' ? 'px-4 py-2.5 text-sm font-medium border-b-2 border-primary text-primary flex gap-1' : 'px-4 py-2.5 text-sm font-medium border-b-2 border-transparent flex gap-1 text-muted hover:text-ink';
    document.getElementById('tab-system').className = tab === 'system' ? 'px-4 py-2.5 text-sm font-medium border-b-2 border-primary text-primary flex gap-1' : 'px-4 py-2.5 text-sm font-medium border-b-2 border-transparent flex gap-1 text-muted hover:text-ink';
    // Mark system notifications as read
    if (tab === 'system') {
        fetch('/profile/{{ $profileUser->id }}/notifications/read', { method: 'POST', headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' } });
    }
}
</script>
@endpush