@extends('layouts.admin')

@section('title', 'New 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">New Card Template</h1>
    </div>
</div>

<div class="grid-2">
    <div class="card">
        <div class="card-body">
            <form method="POST" action="{{ route('admin.card-templates.store') }}" onsubmit="onTemplateSubmit()">
                @csrf
                @include('admin.card-templates._form')
            </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="$preview ?? []"
                    :type="'debit'"
                    :name="'Card Holder'"
                    :number="'**** **** **** 0000'"
                    :expiry="'00/00'"
                    network="VISA"
                    :show-network-logo="true"
                    size="md"
                />
            </div>
        </div>
    </div>
</div>
@endsection