<x-app-layout>
<x-module-hero title="SMS Templates" description="Manage reusable SMS message templates" icon="fa-file-lines">
    <x-slot name="tabs">
        @can('view sms')
        <a href="{{ route('sms.index') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('sms.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-tachometer-alt text-sm"></i> Dashboard
        </a>
        @endcan
        @can('create sms')
        <a href="{{ route('sms.compose') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('sms.compose') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-pen text-sm"></i> Compose
        </a>
        @endcan
        @can('view sms')
        <a href="{{ route('sms.history') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('sms.history') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-history text-sm"></i> History
        </a>
        @endcan
        @can('manage sms templates')
        <a href="{{ route('sms.templates') }}"
           class="module-hero-tab inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0
                  {{ request()->routeIs('sms.templates') || request()->routeIs('sms.*template*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}">
            <i class="fas fa-file-lines text-sm"></i> Templates
        </a>
        @endcan
    </x-slot>
    @can('manage sms templates')
    <x-slot name="actions">
        <a href="{{ route('sms.create-template') }}"
           class="inline-flex items-center gap-2 px-4 py-2 bg-[#1e293b] text-white text-sm font-semibold rounded-lg hover:bg-[#334155] transition">
            <i class="fas fa-plus"></i> New Template
        </a>
    </x-slot>
    @endcan
</x-module-hero>

<div class="w-full">
    {{-- Search bar --}}
    <div class="p-4 bg-white border-b">
        <form method="GET" class="flex gap-3">
            <input type="text" name="search" value="{{ request('search') }}"
                placeholder="Search templates..."
                class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-green-500">
            <button type="submit" class="px-4 py-2 bg-[#1a4731] text-white text-sm rounded-lg hover:bg-[#276749] transition">
                <i class="fas fa-search mr-1"></i> Search
            </button>
            @if(request('search'))
                <a href="{{ route('sms.templates') }}" class="px-4 py-2 border border-gray-300 text-gray-600 text-sm rounded-lg hover:bg-gray-50 transition">
                    Clear
                </a>
            @endif
        </form>
    </div>

    @if(session('success'))
        <div class="mx-4 mt-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
    @endif

    <div class="p-6">
        @if($templates->isEmpty())
            <div class="text-center py-16">
                <i class="fas fa-file-lines text-6xl text-gray-300 mb-4 block"></i>
                <h3 class="text-xl font-semibold text-gray-700 mb-2">No templates yet</h3>
                <p class="text-gray-500 mb-6">Create reusable SMS templates to speed up your messaging.</p>
                @can('manage sms templates')
                    <a href="{{ route('sms.create-template') }}"
                       class="inline-flex items-center gap-2 px-5 py-2.5 bg-[#1a4731] text-white font-semibold rounded-lg hover:bg-[#276749] transition">
                        <i class="fas fa-plus"></i> Create Template
                    </a>
                @endcan
            </div>
        @else
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($templates as $template)
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden flex flex-col">
                        <div class="px-5 py-4 border-b border-gray-100 flex items-start justify-between gap-2">
                            <div>
                                <h3 class="font-semibold text-gray-800">{{ $template->name }}</h3>
                                @if($template->description)
                                    <p class="text-xs text-gray-500 mt-0.5">{{ $template->description }}</p>
                                @endif
                            </div>
                            <span class="flex-shrink-0 px-2 py-0.5 text-xs rounded-full {{ $template->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600' }}">
                                {{ $template->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                        <div class="p-5 flex-1">
                            <p class="text-sm text-gray-600 leading-relaxed">{{ Str::limit($template->content, 120) }}</p>
                            <div class="mt-3 flex items-center gap-3 text-xs text-gray-400">
                                <span><i class="fas fa-text-width mr-1"></i>{{ strlen($template->content) }} chars</span>
                                <span><i class="fas fa-layer-group mr-1"></i>{{ ceil(strlen($template->content) / 160) }} segment(s)</span>
                                <span><i class="fas fa-clock mr-1"></i>{{ $template->created_at->diffForHumans() }}</span>
                            </div>
                            @if($template->hasPlaceholders())
                                <div class="mt-2 flex flex-wrap gap-1">
                                    @foreach($template->extractPlaceholders() as $placeholder)
                                        <span class="px-1.5 py-0.5 text-xs bg-blue-50 text-blue-600 rounded font-mono">{{'{'}}{{ $placeholder }}{{'}'}}</span>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                        <div class="px-5 py-3 border-t border-gray-100 flex items-center justify-between gap-2">
                            <a href="{{ route('sms.compose') }}?template={{ $template->id }}"
                               class="inline-flex items-center gap-1 px-3 py-1.5 bg-green-100 text-green-700 text-xs font-medium rounded-lg hover:bg-green-200 transition">
                                <i class="fas fa-paper-plane"></i> Use
                            </a>
                            @can('manage sms templates')
                                <div class="flex gap-2">
                                    <a href="{{ route('sms.edit-template', $template) }}"
                                       class="inline-flex items-center gap-1 px-3 py-1.5 bg-amber-100 text-amber-700 text-xs font-medium rounded-lg hover:bg-amber-200 transition">
                                        <i class="fas fa-edit"></i> Edit
                                    </a>
                                    <form action="{{ route('sms.destroy-template', $template) }}" method="POST" class="inline">
                                        @csrf @method('DELETE')
                                        <button type="submit"
                                            class="inline-flex items-center gap-1 px-3 py-1.5 bg-red-100 text-red-700 text-xs font-medium rounded-lg hover:bg-red-200 transition"
                                            onclick="return confirm('Delete this template?')">
                                            <i class="fas fa-trash"></i> Delete
                                        </button>
                                    </form>
                                </div>
                            @endcan
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Pagination --}}
            @if($templates->hasPages())
                <div class="mt-6">{{ $templates->links() }}</div>
            @endif
        @endif
    </div>
</div>
</x-app-layout>
