@extends('layouts.admin')

@section('title', 'Edit Card Template')

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <a href="{{ route('admin.card-templates') }}" class="btn-back">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 12L6 8l4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Back to Templates
        </a>
        <h1 class="page-title">Edit Template: {{ $cardTemplate->name }}</h1>
    </div>
</div>

<div class="grid-2">
    <div class="card">
        <div class="card-body">
            <form method="POST" action="{{ route('admin.card-templates.update', $cardTemplate) }}" onsubmit="onTemplateSubmit()">
                @csrf
                @method('PUT')
                @include('admin.card-templates._form', [
                    'template' => $cardTemplate,
                    'design' => [
                        'gradient_from' => $cardTemplate->gradient_from,
                        'gradient_to' => $cardTemplate->gradient_to,
                        'accent_color' => $cardTemplate->accent_color,
                        'text_color' => $cardTemplate->text_color,
                        'chip_color' => $cardTemplate->chip_color,
                    ],
                ])
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Live Preview</h3>
        </div>
        <div class="card-body">
            <div style="display:flex;justify-content:center;">
                <x-card-preview
                    id="templatePreview"
                    :design="$design ?? []"
                    :type="$cardTemplate->card_type ?? 'debit'"
                    :name="'Card Holder'"
                    :number="'**** **** **** 0000'"
                    :expiry="'00/00'"
                    :network="strtoupper($cardTemplate->card_network ?? 'visa')"
                    :show-network-logo="true"
                    size="md"
                />
            </div>
        </div>
    </div>
</div>
@endsection