<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                    Invoice Templates
                </h2>
                <p class="text-xs text-gray-400 mt-0.5">Select a default template or customize each layout independently
                </p>
            </div>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">

            @if(session('success'))
                <div
                    class="mb-6 p-4 bg-emerald-50 border border-emerald-200 text-emerald-800 rounded-xl flex items-center gap-3 shadow-sm">
                    <svg class="w-5 h-5 text-emerald-600 flex-shrink-0" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <span class="text-sm font-medium">{{ session('success') }}</span>
                </div>
            @endif

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

                @php
                    $templates = [
                        ['key' => 'classic', 'title' => 'Classic Layout', 'accent' => 'indigo'],
                        ['key' => 'elegant', 'title' => 'Elegant Layout', 'accent' => 'slate'],
                        ['key' => 'slim', 'title' => 'FBR Standard', 'accent' => 'blue'],
                    ];
                @endphp

                @foreach($templates as $tpl)
                    <div
                        class="group bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden flex flex-col justify-between hover:shadow-lg hover:border-{{ $tpl['accent'] }}-200 transition-all duration-300">

                        <div class="p-5 pb-0">
                            <div class="flex items-center justify-between mb-4">
                                <h3 class="text-base font-bold text-gray-800">{{ $tpl['title'] }}</h3>
                                @if($defaultTemplate === $tpl['key'])
                                    <span
                                        class="px-2 py-0.5 bg-emerald-50 border border-emerald-200 text-emerald-700 text-[10px] font-bold uppercase rounded-full">
                                        Active Default
                                    </span>
                                @endif
                            </div>
                        </div>

                        <!-- WhatsApp-style PDF thumbnail card -->
                        <a
                            href="{{ route('settings.templates.preview', $tpl['key']) }}"
                            target="_blank"
                            class="mx-5 mb-3 block relative rounded-xl overflow-hidden border border-slate-200 bg-slate-100 hover:shadow-md transition-shadow duration-200"
                            style="height: 220px;"
                        >
                        <!-- Real screenshot of invoice content -->
                        <img src="{{ route('settings.templates.previewThumbnail', $tpl['key']) }}"
                            alt="{{ $tpl['title'] }} preview" class="w-full h-full object-cover object-top" loading="lazy"
                            onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">

                        <!-- Fallback if no sample invoice exists yet -->
                        <div
                            class="w-full h-full hidden items-center justify-center flex-col gap-2 text-slate-400 bg-slate-50">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                            </svg>
                            <span class="text-[11px] font-medium">No sample invoice yet</span>
                        </div>

                        <!-- Dark gradient at bottom for badge readability -->
                        <div class="absolute bottom-0 inset-x-0 h-14 bg-gradient-to-t from-black/60 to-transparent"></div>

                        <!-- WhatsApp-style PDF badge -->
                        <div class="absolute bottom-2 left-2 flex items-center gap-2 max-w-[85%]">
                            <div
                                class="bg-red-600 text-white text-[9px] font-bold px-1.5 py-0.5 rounded shadow-sm flex-shrink-0">
                                PDF</div>
                            <span
                                class="text-white text-[11px] font-medium drop-shadow truncate">{{ $tpl['title'] }}.pdf</span>
                        </div>

                        <!-- Open icon top-right -->
                        <div class="absolute top-2 right-2 bg-white/90 rounded-full p-1.5 shadow-sm">
                            <svg class="w-3.5 h-3.5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                            </svg>
                        </div>
                        </a>

                        <p class="mx-5 mb-3 text-[11px] text-slate-400">Tap to view live sample invoice</p>

                        <div class="px-5 py-4 flex items-center gap-3 border-t border-gray-50 bg-gray-50/50">
                            <a href="{{ route('settings.templates.edit', $tpl['key']) }}"
                                class="flex-1 text-center py-2 rounded-lg border border-gray-200 hover:bg-white hover:border-{{ $tpl['accent'] }}-200 text-gray-700 text-xs font-semibold transition">
                                Customize
                            </a>
                            @if($defaultTemplate !== $tpl['key'])
                                <form action="{{ route('settings.templates.setDefault', $tpl['key']) }}" method="POST"
                                    class="flex-1">
                                    @csrf
                                    <button type="submit"
                                        class="w-full text-center py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold transition shadow-sm">
                                        Set Default
                                    </button>
                                </form>
                            @endif
                        </div>
                    </div>
                @endforeach

            </div>
        </div>
    </div>
</x-app-layout>