@extends('layouts.app')

@section('title', 'Letter Templates')

@section('breadcrumbs')
<div class="breadcrumb">
    <a href="{{ auth()->user()->role === 'super_admin' ? route('admin.dashboard') : route('dashboard') }}">Home</a>
    <span class="separator">/</span>
    <span class="current">Letter Templates</span>
</div>
@endsection

@section('content')
<div x-data="{ tab: '{{ $tab }}' }">
    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">Letter Templates</h1>
            <p class="text-sm text-gray-500 mt-1">Manage letter templates for document generation</p>
        </div>
        <a href="{{ auth()->user()->role === 'super_admin' ? route('admin.letter-templates.create') : route('letters.templates.create') }}"
           class="btn-primary">
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            New Template
        </a>
    </div>

    @if(auth()->user()->role !== 'super_admin')
    {{-- Tabs: All / Global / Company --}}
    <div class="flex gap-1 mb-5 border-b border-gray-200">
        @foreach(['all' => 'All Templates', 'global' => 'Global', 'company' => 'Company-Specific'] as $key => $label)
        <button @click="tab = '{{ $key }}'"
                :class="tab === '{{ $key }}' ? 'border-primary-600 text-primary-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
                class="px-4 py-2.5 text-sm font-medium border-b-2 transition-colors"
                onclick="window.location.href='?tab={{ $key }}'">
            {{ $label }}
        </button>
        @endforeach
    </div>
    @endif

    {{-- Category Filter --}}
    <div class="flex flex-wrap gap-2 mb-5">
        <a href="{{ request()->fullUrlWithQuery(['category' => null]) }}"
           class="badge {{ !$category ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
            All Categories
        </a>
        @foreach($categories as $key => $label)
        <a href="{{ request()->fullUrlWithQuery(['category' => $key]) }}"
           class="badge {{ $category === $key ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
            {{ $label }}
        </a>
        @endforeach
    </div>

    {{-- Templates Grid --}}
    @if($templates->isEmpty())
    <div class="empty-state">
        <div class="empty-state-icon">
            <svg class="w-16 h-16 mx-auto" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
        </div>
        <p class="empty-state-title">No templates found</p>
        <p class="empty-state-text">Create your first letter template to start generating documents.</p>
    </div>
    @else
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        @foreach($templates as $template)
        <div class="card">
            <div class="card-body">
                <div class="flex items-start justify-between mb-3">
                    <div>
                        <span class="badge {{ $template->is_global ? 'badge-info' : 'badge-active' }}">
                            {{ $template->is_global ? 'Global' : 'Company' }}
                        </span>
                        <span class="badge badge-draft ml-1">{{ $template->category_label }}</span>
                    </div>
                    @if(!$template->is_active)
                    <span class="badge badge-inactive">Inactive</span>
                    @endif
                </div>

                <h3 class="font-display text-lg font-semibold text-gray-800 mb-1">{{ $template->name }}</h3>
                <p class="text-xs text-gray-500 mb-3">
                    Created by {{ $template->creator?->name ?? 'System' }} · {{ $template->created_at->format('d M Y') }}
                </p>

                @if($template->variables_used && count($template->variables_used) > 0)
                <p class="text-xs text-gray-400 mb-3">
                    {{ count($template->variables_used) }} variable(s) used
                </p>
                @endif

                <div class="flex items-center gap-2 pt-3 border-t border-gray-100">
                    @php
                        $editRoute = auth()->user()->role === 'super_admin'
                            ? route('admin.letter-templates.edit', $template->id)
                            : route('letters.templates.edit', $template->id);
                        $deleteRoute = auth()->user()->role === 'super_admin'
                            ? route('admin.letter-templates.destroy', $template->id)
                            : route('letters.templates.destroy', $template->id);
                    @endphp
                    <a href="{{ $editRoute }}" class="btn-ghost">Edit</a>
                    @if(!$template->is_global || auth()->user()->role === 'super_admin')
                    <form action="{{ $deleteRoute }}" method="POST"
                          onsubmit="return confirm('Are you sure you want to delete this template?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="text-danger-500 text-xs font-medium hover:text-danger-700">Delete</button>
                    </form>
                    @endif
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <div class="mt-6">
        {{ $templates->withQueryString()->links() }}
    </div>
    @endif
</div>
@endsection