@extends('layouts.admin')

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

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Card Templates <span class="page-title-count">({{ $templates->count() }})</span></h1>
        <p class="page-subtitle">Design templates used when issuing cards to customers</p>
    </div>
    <div class="page-header-actions">
        <a href="{{ route('admin.card-templates.create') }}" class="btn btn-primary btn-sm">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
            New Template
        </a>
    </div>
</div>

@if($templates->count())
<div class="templates-grid">
    @foreach($templates as $template)
    <div class="card template-card">
        <div class="template-card-preview">
            <x-card-preview
                :design="[
                    'gradient_from' => $template->gradient_from,
                    'gradient_to' => $template->gradient_to,
                    'accent_color' => $template->accent_color,
                    'text_color' => $template->text_color,
                    'chip_color' => $template->chip_color,
                ]"
                :type="$template->card_type"
                :name="'Card Holder'"
                :number="'**** **** **** 0000'"
                :expiry="'00/00'"
                :network="$template->networkLabel()"
                :show-network-logo="$template->show_network_logo"
                size="sm"
            />
        </div>
        <div class="template-card-body">
            <div class="template-card-title-row">
                <div>
                    <h3 class="template-card-name">{{ $template->name }}</h3>
                    <span class="template-card-meta">
                        {{ ucfirst($template->card_type) }} &middot; {{ $template->networkLabel() }}
                    </span>
                </div>
                <span class="badge badge-{{ $template->is_active ? 'green' : 'gray' }}">{{ $template->is_active ? 'Active' : 'Hidden' }}</span>
            </div>
            @if($template->description)
            <p class="template-card-desc">{{ $template->description }}</p>
            @endif
            <div class="form-group" style="margin:14px 0 4px;">
                <label class="form-label">Colors</label>
                <div class="template-colors">
                    <span class="color-dot" style="background: {{ $template->gradient_from }};" title="Gradient start"></span>
                    <span class="color-dot" style="background: {{ $template->gradient_to }};" title="Gradient end"></span>
                    <span class="color-dot" style="background: {{ $template->accent_color }};" title="Accent"></span>
                    <span class="color-dot" style="background: {{ $template->chip_color }};" title="Chip"></span>
                </div>
            </div>
            <div class="table-actions" style="margin-top: 12px;">
                <a href="{{ route('admin.card-templates.edit', $template) }}" class="btn btn-sm btn-outline">Edit</a>
                <form method="POST" action="{{ route('admin.card-templates.toggle', $template) }}" class="inline">
                    @csrf
                    <button type="submit" class="btn btn-sm btn-outline btn-{{ $template->is_active ? 'orange' : 'green' }}">
                        {{ $template->is_active ? 'Deactivate' : 'Activate' }}
                    </button>
                </form>
                <form method="POST" action="{{ route('admin.card-templates.destroy', $template) }}" class="inline" onsubmit="return confirm('Delete this template? Cards already issued with it will keep their design.')">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-sm btn-outline btn-red">Delete</button>
                </form>
            </div>
        </div>
    </div>
    @endforeach
</div>
@else
<div class="card">
    <div class="card-body" style="text-align:center;padding:3rem;">
        <p style="color:#6b7280;margin-bottom:1rem;">No card templates yet. Create your first design.</p>
        <a href="{{ route('admin.card-templates.create') }}" class="btn btn-primary">Create Template</a>
    </div>
</div>
@endif
@endsection