@extends('layouts.portal')

@section('title', 'Document Templates')
@section('page_title', 'Document Templates')
@section('page_subtitle', 'Manage the Will and Trust document layouts used across every portal')

@section('sidebar')
    @include('admin.partials.sidebar', ['active' => 'templates'])
@endsection

@section('content')
    @if(session('success'))
        <div class="mb-6 p-4 bg-green-50 border border-green-200 text-green-800 rounded-lg">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="mb-6 p-4 bg-red-50 border border-red-200 text-red-800 rounded-lg">{{ session('error') }}</div>
    @endif

    <div class="bg-gradient-to-r from-[#772B10] to-[#8B3D15] rounded-2xl p-8 mb-8 text-white">
        <div class="flex items-center justify-between flex-wrap gap-4">
            <div>
                <h1 class="text-3xl font-bold mb-2">Document Templates</h1>
                <p class="text-white/80">Edit these like a Word document — headings, paragraphs, fonts, spacing and placeholders. Whatever is saved here is what Admin, Staff, Lawyer, Agent and Client all see on every generated document.</p>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        @foreach($types as $typeKey => $typeLabel)
            @php $group = $templates->get($typeKey, collect()); @endphp
            @php $default = $group->firstWhere('is_default', true); @endphp
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
                <h3 class="text-lg font-bold text-gray-800 mb-1">{{ $typeLabel }}</h3>
                <p class="text-sm text-gray-500 mb-4">{{ $group->count() }} template{{ $group->count() === 1 ? '' : 's' }}</p>

                @if($default)
                    <div class="mb-4">
                        <span class="inline-block px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 mb-2">Live / Default</span>
                        <p class="font-semibold text-gray-800">{{ $default->name }}</p>
                        <p class="text-xs text-gray-500">v{{ $default->version }} &middot; {{ $default->is_active ? 'Active' : 'Inactive' }}</p>
                    </div>
                    <div class="flex gap-2">
                        <a href="{{ route('admin.templates.edit', $default) }}" class="flex-1 py-2 bg-[#772B10] text-white rounded-lg hover:bg-[#8B3D15] text-sm text-center font-medium">
                            <i class="fas fa-edit mr-1"></i>Edit
                        </a>
                        <a href="{{ route('admin.templates.preview', $default) }}" target="_blank" class="flex-1 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 text-sm text-center">
                            <i class="fas fa-eye mr-1"></i>Preview
                        </a>
                    </div>
                @else
                    <p class="text-sm text-gray-500 mb-4">No template configured yet — documents of this type will show a placeholder message until one is created.</p>
                    <a href="{{ route('admin.templates.create') }}?type={{ $typeKey }}" class="block w-full py-2 bg-[#772B10] text-white rounded-lg hover:bg-[#8B3D15] text-sm text-center font-medium">
                        <i class="fas fa-plus mr-1"></i>Create Template
                    </a>
                @endif

                @if($group->count() > 1)
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <p class="text-xs font-semibold text-gray-500 mb-2">OTHER VERSIONS</p>
                        <ul class="space-y-1">
                            @foreach($group->where('id', '!=', $default->id ?? null) as $tpl)
                                <li class="flex items-center justify-between text-sm">
                                    <span class="text-gray-600">{{ $tpl->name }} (v{{ $tpl->version }})</span>
                                    <a href="{{ route('admin.templates.edit', $tpl) }}" class="text-[#772B10] hover:underline">Edit</a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
        @endforeach
    </div>
@endsection