@extends('client.layouts.dashboard')

@section('title', 'Templates')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="mb-1">Message Templates
            <button type="button" class="info-hint" data-bs-toggle="popover" data-bs-content="These templates are assigned by SuperAdmin. You can customize the message content but cannot create new templates.">
                <i class="bi bi-info-circle"></i>
            </button>
        </h4>
        <p class="text-muted mb-0">Customize auto-reply templates for your organization</p>
    </div>
</div>

<!-- Filters -->
<div class="table-card mb-4">
    <div class="card-body p-3">
        <form method="GET" action="{{ route('client.templates') }}" class="row g-3">
            <div class="col-md-4">
                <input type="text" class="form-control" name="search" placeholder="Search templates..." value="{{ request('search') }}">
            </div>
            <div class="col-md-3">
                <select class="form-select" name="type">
                    <option value="">All Types</option>
                    <option value="sms" {{ request('type') === 'sms' ? 'selected' : '' }}>SMS</option>
                    <option value="call" {{ request('type') === 'call' ? 'selected' : '' }}>Call</option>
                    <option value="whatsapp" {{ request('type') === 'whatsapp' ? 'selected' : '' }}>WhatsApp</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-outline-primary w-100">
                    <i class="bi bi-funnel me-1"></i>Filter
                </button>
            </div>
            @if(request()->hasAny(['search', 'type']))
            <div class="col-md-2">
                <a href="{{ route('client.templates') }}" class="btn btn-outline-secondary w-100">
                    <i class="bi bi-x-circle me-1"></i>Clear
                </a>
            </div>
            @endif
        </form>
    </div>
</div>

<!-- Templates Grid -->
<div class="row g-4">
    @forelse($templates as $template)
    <div class="col-md-6 col-lg-4">
        <div class="template-card">
            <div class="template-type-ribbon type-{{ $template->type }}"></div>
            <div class="template-header">
                <div>
                    <div class="template-name">{{ $template->name }}</div>
                    <div class="template-meta">
                        @if($template->type === 'auto_reply')
                        <span class="badge" style="background: rgba(139,92,246,0.1); color: #7c3aed; font-size: 0.7rem;">
                            <i class="bi bi-reply me-1"></i>Auto Reply
                        </span>
                        @elseif($template->type === 'promotion')
                        <span class="badge" style="background: rgba(245,158,11,0.1); color: #d97706; font-size: 0.7rem;">
                            <i class="bi bi-megaphone me-1"></i>Promotion
                        </span>
                        @endif
                        @if($template->channel === 'sms')
                        <span class="badge" style="background: rgba(59,130,246,0.1); color: #2563eb; font-size: 0.7rem;">
                            <i class="bi bi-chat-dots me-1"></i>SMS
                        </span>
                        @elseif($template->channel === 'whatsapp')
                        <span class="badge" style="background: rgba(37,211,102,0.1); color: #128c7e; font-size: 0.7rem;">
                            <i class="bi bi-whatsapp me-1"></i>WhatsApp
                        </span>
                        @else
                        <span class="badge" style="background: rgba(107,114,128,0.1); color: #4b5563; font-size: 0.7rem;">
                            <i class="bi bi-layers me-1"></i>Both
                        </span>
                        @endif
                        @if($template->call_type && $template->call_type !== 'all')
                        <span class="badge" style="background: rgba(16,185,129,0.1); color: #059669; font-size: 0.7rem;">
                            <i class="bi bi-telephone me-1"></i>{{ ucfirst($template->call_type) }}
                        </span>
                        @endif
                    </div>
                </div>
                <form method="POST" action="{{ route('client.templates.toggle-status', $template->id) }}" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-sm p-0 border-0" style="background: none;" title="{{ $template->is_active ? 'Active - Click to deactivate' : 'Inactive - Click to activate' }}">
                        @if($template->is_active)
                        <span class="badge bg-success px-2 py-1"><i class="bi bi-check-circle me-1"></i>Active</span>
                        @else
                        <span class="badge bg-secondary px-2 py-1"><i class="bi bi-circle me-1"></i>Off</span>
                        @endif
                    </button>
                </form>
            </div>
            <div class="template-body">
                <div class="template-preview">
                    {{ $template->content }}
                </div>

                @if($template->trigger_keywords)
                <div class="mt-3">
                    <small class="text-muted d-block mb-1" style="font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px;">Keywords</small>
                    <div class="d-flex flex-wrap gap-1">
                        @foreach(array_slice(explode(',', $template->trigger_keywords), 0, 5) as $keyword)
                        <span class="badge" style="background: #f3f4f6; color: #374151; font-size: 0.7rem; font-weight: 500;">{{ trim($keyword) }}</span>
                        @endforeach
                        @if(count(explode(',', $template->trigger_keywords)) > 5)
                        <span class="badge" style="background: #f3f4f6; color: #9ca3af; font-size: 0.7rem;">+{{ count(explode(',', $template->trigger_keywords)) - 5 }}</span>
                        @endif
                    </div>
                </div>
                @endif
            </div>
            <div class="template-footer">
                <div class="d-flex align-items-center gap-2">
                    <span class="text-muted" style="font-size: 0.75rem;">
                        <i class="bi bi-sort-numeric-up me-1"></i>Priority {{ $template->priority }}
                    </span>
                    @if($template->isDerived())
                    <span class="badge" style="background: rgba(59,130,246,0.1); color: #2563eb; font-size: 0.65rem;">
                        <i class="bi bi-pencil-square me-1"></i>Customized
                    </span>
                    @endif
                </div>
                <a href="{{ route('client.templates.edit', $template->id) }}" class="btn btn-sm btn-outline-primary" style="font-size: 0.8rem;">
                    <i class="bi bi-pencil me-1"></i>Edit
                </a>
            </div>
        </div>
    </div>
    @empty
    <div class="col-12">
        <div class="template-card">
            <div class="template-type-ribbon type-sms"></div>
            <div class="text-center py-5 px-4">
                <div class="rounded-circle mx-auto mb-3 d-flex align-items-center justify-content-center" style="width: 64px; height: 64px; background: #f3f4f6;">
                    <i class="bi bi-file-text" style="font-size: 1.75rem; color: #9ca3af;"></i>
                </div>
                <p class="fw-medium mb-1">No templates assigned yet</p>
                <p class="text-muted small mb-0">Contact SuperAdmin to get templates assigned to your organization.</p>
            </div>
        </div>
    </div>
    @endforelse
</div>

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