@extends('layouts.app')
@section('title', 'Template Desain Siap Pakai')

@php $isImgUrl = fn($v) => $v && \Illuminate\Support\Str::startsWith($v, ['http','/','data:']); @endphp

@section('content')
<section class="bg-gradient-to-br from-brand-600 to-brand-800 text-white">
    <div class="max-w-6xl mx-auto px-4 py-14">
        <h1 class="text-3xl lg:text-4xl font-extrabold">Template Desain Siap Pakai</h1>
        <p class="text-brand-100 mt-2 max-w-2xl">Pilih template, ganti warna produk, sesuaikan di editor, lalu pesan. Cocok untuk yang ingin cepat tanpa mendesain dari nol.</p>
    </div>
</section>
<div class="max-w-6xl mx-auto px-4 py-10">
    @if ($designs->count())
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            @foreach ($designs as $design)
                @php
                    $colors = collect($design->product?->colors ?: [['name' => 'Default', 'hex' => '#e5e7eb']])->values();
                    $basePrice = ($design->product?->priceForScale(100) ?? 0) + (int) ($design->sale_price ?? 0);
                    $editorUrl = $design->product
                        ? route('editor.show', ['product' => $design->product, 'template' => $design->id])
                        : null;
                    $mockups = $colors->mapWithKeys(fn ($c) => [$c['name'] => $design->product?->mockupSvg($c['hex'] ?? '#e5e7eb')])->all();
                @endphp
                <div class="bg-white border border-slate-100 rounded-2xl overflow-hidden flex flex-col"
                     x-data="{ color: @js($colors[0]['name'] ?? 'Default'), mockups: @js($mockups) }">
                    <div class="aspect-square bg-gradient-to-b from-slate-50 to-slate-100 grid place-items-center overflow-hidden relative p-3">
                        <div class="absolute inset-3" x-html="mockups[color] || Object.values(mockups)[0] || ''"></div>
                        @if ($isImgUrl($design->preview_data))
                            <img src="{{ $design->preview_data }}" class="relative z-10 w-[42%] h-[42%] object-contain drop-shadow-md pointer-events-none" alt="">
                        @endif
                    </div>
                    <div class="p-3 flex-1 flex flex-col">
                        <p class="font-semibold text-sm truncate">{{ $design->name }}</p>
                        <p class="text-xs text-slate-400">{{ $design->product->name ?? '' }}</p>
                        <p class="text-sm font-bold mt-1">@rupiah($basePrice)</p>

                        <p class="text-[11px] text-slate-400 mt-2 mb-1">Warna · <span class="font-semibold text-slate-700" x-text="color"></span></p>
                        <div class="flex flex-wrap gap-1.5 mb-3">
                            @foreach ($colors as $c)
                                <button type="button" @click="color = @js($c['name'])" title="{{ $c['name'] }}"
                                    :class="color === @js($c['name']) ? 'ring-2 ring-brand-500 ring-offset-1 scale-110' : 'ring-1 ring-slate-200'"
                                    class="w-6 h-6 rounded-full transition"
                                    style="background: {{ $c['hex'] ?? '#ccc' }}"></button>
                            @endforeach
                        </div>

                        <div class="mt-auto space-y-1.5">
                            @if ($editorUrl)
                                <a href="{{ $editorUrl }}" class="block w-full text-center text-xs font-semibold text-white bg-brand-600 hover:bg-brand-700 px-3 py-2 rounded-full">Sesuaikan di editor</a>
                            @endif
                            <form method="POST" action="{{ route('cart.add-design', $design) }}">
                                @csrf
                                <input type="hidden" name="qty" value="1">
                                <input type="hidden" name="color" :value="color">
                                <button class="w-full text-xs font-semibold text-brand-700 bg-brand-50 hover:bg-brand-100 px-3 py-2 rounded-full">Pesan warna ini</button>
                            </form>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="mt-8">{{ $designs->links() }}</div>
    @else
        <div class="bg-white border border-slate-100 rounded-2xl p-16 text-center">
            <x-icon name="palette" class="w-12 h-12 mx-auto text-slate-300 mb-3"/>
            <p class="font-bold">Template segera hadir</p>
            <p class="text-slate-500 text-sm mt-1">Kreator sedang menyiapkan template terbaik untuk Anda.</p>
        </div>
    @endif
</div>
@endsection