@extends('layouts.dashboard')

@section('content')

@php
    $itemsCount = $catalog->items->count();
    $withImages = $catalog->items->whereNotNull('image')->where('image', '!=', '')->count();
    $withoutImages = $itemsCount - $withImages;
    $totalQty = $catalog->items->sum('qty');

    $customerUrl = $catalog->status === 'active' && in_array($catalog->permanent_key, ['main', 'clearance'], true)
        ? route($catalog->permanent_key === 'main' ? 'catalogs.permanent.main' : 'catalogs.permanent.clearance')
        : route('catalogs.customer', $catalog);
    $permanentUrl = null;

    if (isset($catalog->user) && $catalog->user?->public_catalog_token) {
        $permanentUrl = url('/salesman/'.$catalog->user->public_catalog_token.'/catalog');
    }
@endphp

<div class="max-w-7xl mx-auto p-6 space-y-6">

    @if(session('success'))
        <div class="rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-800 px-5 py-4 shadow-sm">
            {{ session('success') }}
        </div>
    @endif

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">

        <div class="xl:col-span-1">
            <div class="rounded-3xl bg-white border border-gray-200 shadow-sm overflow-hidden">

                <div class="h-64 bg-slate-100 border-b border-gray-200">
                    @if($catalog->thumbnail_file)
                        <img src="{{ asset('storage/' . $catalog->thumbnail_file) }}"
                             class="w-full h-full object-cover"
                             alt="Catalog thumbnail">
                    @else
                        <div class="w-full h-full flex items-center justify-center">
                            <div class="text-center">
                                <div class="text-6xl mb-3">📄</div>
                                <div class="font-bold opacity-60">No Preview</div>
                            </div>
                        </div>
                    @endif
                </div>

                <div class="p-5 space-y-5">

                    <div>
                        <h1 class="text-2xl font-black leading-tight">
                            {{ $catalog->title }}
                        </h1>

                        <p class="text-sm opacity-60 mt-1">
                            #{{ $catalog->id }} • {{ $catalog->created_at->format('d M Y h:i A') }}
                        </p>
                    </div>

                    <div class="flex flex-wrap gap-2">
                        <span class="rounded-full px-3 py-1 text-xs font-bold
                            {{ $catalog->status === 'pdf_generated'
                                ? 'bg-emerald-100 text-emerald-700'
                                : 'bg-indigo-100 text-indigo-700' }}">
                            {{ str_replace('_', ' ', $catalog->status) }}
                        </span>

                        <span class="rounded-full px-3 py-1 text-xs font-bold bg-slate-100 text-slate-700">
                            {{ $catalog->supplier }}
                        </span>

                        <span class="rounded-full px-3 py-1 text-xs font-bold bg-blue-100 text-blue-700">
                            @if(in_array($catalog->source_type, ['latest_regular', 'regular']))
                                Regular Price List
                            @elseif(in_array($catalog->source_type, ['latest_clearance', 'clearance']))
                                Clearance List
                            @elseif($catalog->source_type === 'van_stock')
                                Van Stock
                            @else
                                {{ $catalog->source_type ?: 'Manual' }}
                            @endif
                        </span>
                    </div>

                    @if($catalog->notes)
                        <div class="rounded-2xl bg-slate-50 border border-slate-100 p-4 text-sm opacity-80">
                            {{ $catalog->notes }}
                        </div>
                    @endif

                    <div class="grid grid-cols-2 gap-3">
                        <div class="rounded-2xl bg-indigo-50 border border-indigo-100 p-4">
                            <div class="text-xs opacity-60">Products</div>
                            <div class="text-2xl font-black text-indigo-600">{{ number_format($itemsCount) }}</div>
                        </div>

                        <div class="rounded-2xl bg-blue-50 border border-blue-100 p-4">
                            <div class="text-xs opacity-60">Total Qty</div>
                            <div class="text-2xl font-black text-blue-600">{{ number_format($totalQty) }}</div>
                        </div>

                        <div class="rounded-2xl bg-emerald-50 border border-emerald-100 p-4">
                            <div class="text-xs opacity-60">With Images</div>
                            <div class="text-2xl font-black text-emerald-600">{{ number_format($withImages) }}</div>
                        </div>

                        <div class="rounded-2xl bg-orange-50 border border-orange-100 p-4">
                            <div class="text-xs opacity-60">Missing Images</div>
                            <div class="text-2xl font-black text-orange-600">{{ number_format($withoutImages) }}</div>
                        </div>
                    </div>

                    <div class="rounded-3xl bg-slate-50 border border-slate-200 p-4 space-y-3">
                        <div class="text-sm font-black text-slate-700">Customer Links</div>

                        <div class="grid grid-cols-1 gap-2">
                            <a href="{{ $customerUrl }}"
                               target="_blank"
                               class="w-full inline-flex items-center justify-center gap-2 rounded-xl bg-cyan-600 px-5 py-3 text-sm font-bold text-white shadow hover:bg-cyan-700 transition">
                                👁 Open Customer Page
                            </a>

                            <button type="button"
                                    onclick="copyLink('{{ $customerUrl }}', 'Customer link copied!')"
                                    class="w-full inline-flex items-center justify-center gap-2 rounded-xl bg-slate-900 px-5 py-3 text-sm font-bold text-white shadow hover:bg-slate-800 transition">
                                🔗 Copy Customer Link
                            </button>

                            @if($permanentUrl)
                                <button type="button"
                                        onclick="copyLink('{{ $permanentUrl }}', 'Permanent catalog link copied!')"
                                        class="w-full inline-flex items-center justify-center gap-2 rounded-xl bg-fuchsia-600 px-5 py-3 text-sm font-bold text-white shadow hover:bg-fuchsia-700 transition">
                                    🚚 Copy Permanent Catalog
                                </button>
                            @endif
                        </div>
                    </div>

                    <div class="space-y-2">

                        @if($catalog->canBeModifiedBy(auth()->user()))
                            <form method="POST" action="{{ route('catalogs.generate-pdf', $catalog) }}">@csrf
                              <button type="submit" class="w-full inline-flex items-center justify-center gap-2 rounded-xl bg-indigo-600 px-5 py-3 text-sm font-bold text-white shadow hover:bg-indigo-700 transition">⚙️ Generate Updated PDF</button>
                            </form>
                        @endif

                        @if($catalog->pdf_file)
                            <a href="{{ asset('storage/' . $catalog->pdf_file) . '?v=' . (file_exists(public_path('storage/'.$catalog->pdf_file)) ? filemtime(public_path('storage/'.$catalog->pdf_file)) : time()) }}"
                               target="_blank"
                               class="w-full inline-flex items-center justify-center gap-2 rounded-xl bg-emerald-600 px-5 py-3 text-sm font-bold text-white shadow hover:bg-emerald-700 transition">
                                📄 Download PDF
                            </a>
                        @endif

                        @if($catalog->pdf_file && auth()->user()->isAdmin())
                            <form method="POST" action="{{ route('catalogs.delete-pdf', $catalog) }}"
                                  onsubmit="return confirm('Delete only the generated PDF? The catalog and all products will remain available.');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="w-full inline-flex items-center justify-center gap-2 rounded-xl border border-amber-200 bg-amber-50 px-5 py-3 text-sm font-bold text-amber-800 hover:bg-amber-100 transition">
                                    🗑 Delete PDF Only
                                </button>
                            </form>
                        @endif

                        @if(auth()->user()->isAdmin())
                            <form method="POST"
                                  action="{{ route('catalogs.destroy', $catalog) }}"
                                  onsubmit="return confirm('Delete this catalog?');">
                                @csrf
                                @method('DELETE')

                                <button class="w-full inline-flex items-center justify-center gap-2 rounded-xl border border-red-200 bg-red-50 px-5 py-3 text-sm font-bold text-red-700 hover:bg-red-100 transition">
                                    🗑 Delete Catalog
                                </button>
                            </form>
                        @endif

                        <a href="{{ route('catalogs.index') }}"
                           class="w-full inline-flex items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white px-5 py-3 text-sm font-bold hover:bg-gray-50 transition">
                            ← Back to Catalogs
                        </a>
                    </div>

                </div>
            </div>
        </div>

        <div class="xl:col-span-2 space-y-6">

            <div class="rounded-3xl bg-white border border-gray-200 shadow-sm p-5">

                <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-5">
                    <div>
                        <h2 class="text-xl font-black">Product Preview</h2>
                        <p class="text-sm opacity-60">
                            First products shown like the generated catalog.
                        </p>
                    </div>

                    <div class="rounded-full bg-slate-100 px-4 py-2 text-sm font-bold">
                        {{ number_format($itemsCount) }} items
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

                    @foreach($catalog->items->take(12) as $item)
                        <div class="rounded-2xl border border-gray-200 bg-white shadow-sm hover:shadow-md transition overflow-hidden">

                            @if($item->product?->is_new_arrival)<span class="inline-flex m-2 rounded-full bg-cyan-600 text-white px-3 py-1 text-xs font-black">NEW ARRIVAL</span>@endif
                            <div class="h-36 bg-slate-50 border-b border-gray-100 flex items-center justify-center">
                                @if($item->image)
                                    <img src="{{ asset('storage/' . $item->image) }}"
                                         class="max-h-32 max-w-full object-contain p-2">
                                @else
                                    <div class="text-center opacity-50">
                                        <div class="text-3xl">🖼</div>
                                        <div class="text-xs mt-1">No Image</div>
                                    </div>
                                @endif
                            </div>

                            <div class="p-4 space-y-3">

                                <div class="inline-flex rounded-xl {{ ($item->price ?? 0) > 0 ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700' }} px-3 py-1 text-sm font-black">
                                    {{ ($item->price ?? 0) > 0 ? 'AED ' . number_format($item->price, 2) : 'Ask Price' }}
                                </div>

                                <div class="font-black text-sm leading-tight min-h-10">
                                    {{ $item->name }}
                                </div>

                                <div class="text-xs space-y-1 opacity-80">
                                    <div><b>Part No:</b> {{ $item->sku ?: '-' }}</div>
                                    <div><b>Barcode:</b> {{ $item->barcode ?: '-' }}</div>
                                    <div><b>Qty:</b> {{ number_format($item->qty ?? 0) }}</div>
                                </div>

                            </div>

                        </div>
                    @endforeach

                </div>

                @if($itemsCount > 12)
                    <div class="mt-5 text-center">
                        <span class="rounded-full bg-slate-100 px-4 py-2 text-sm font-bold opacity-70">
                            Showing 12 of {{ number_format($itemsCount) }} products
                        </span>
                    </div>
                @endif

            </div>
        </div>

    </div>
</div>

<script>
function copyLink(url, message) {
    navigator.clipboard.writeText(url).then(() => {
        alert(message);
    }).catch(() => {
        prompt('Copy this link:', url);
    });
}
</script>

@endsection