@php
    $row = $template ?? null;
    $val = fn ($key, $default = '') => old($key, $row ? $row->$key : $default);
@endphp

<div class="form-section">
    <h3 class="form-section-title">Template Details</h3>
    <div class="form-grid form-grid-2">
        <div class="form-group">
            <label for="name" class="form-label">Template Name</label>
            <input type="text" id="name" name="name" class="form-input @error('name') is-invalid @enderror" value="{{ $val('name') }}" placeholder="e.g. Midnight Black">
            @error('name')<span class="form-error">{{ $message }}</span>@enderror
        </div>
        <div class="form-group">
            <label for="sort_order" class="form-label">Sort Order</label>
            <input type="number" id="sort_order" name="sort_order" class="form-input" value="{{ $val('sort_order', 0) }}" min="0">
        </div>
        <div class="form-group" style="grid-column:span 2;">
            <label for="description" class="form-label">Description</label>
            <textarea id="description" name="description" class="form-input" rows="2" placeholder="Short description shown to admins">{{ $val('description') }}</textarea>
        </div>
    </div>
</div>

<div class="form-section" style="margin-top:1.5rem;">
    <h3 class="form-section-title">Type & Network</h3>
    <div class="form-grid form-grid-2">
        <div class="form-group">
            <label class="form-label">Card Type</label>
            <div class="form-radio-row">
                <label class="form-radio">
                    <input type="radio" name="card_type" value="debit" {{ $val('card_type', 'debit') === 'debit' ? 'checked' : '' }}> Debit
                </label>
                <label class="form-radio">
                    <input type="radio" name="card_type" value="virtual" {{ $val('card_type') === 'virtual' ? 'checked' : '' }}> Virtual
                </label>
            </div>
        </div>
        <div class="form-group">
            <label for="card_network" class="form-label">Card Network</label>
            <select id="card_network" name="card_network" class="form-select">
                <option value="visa" {{ $val('card_network', 'visa') === 'visa' ? 'selected' : '' }}>VISA</option>
                <option value="mastercard" {{ $val('card_network') === 'mastercard' ? 'selected' : '' }}>Mastercard</option>
                <option value="verve" {{ $val('card_network') === 'verve' ? 'selected' : '' }}>Verve</option>
            </select>
        </div>
    </div>
</div>

<div class="form-section" style="margin-top:1.5rem;">
    <h3 class="form-section-title">Design</h3>
    <div class="form-grid form-grid-2">
        @php($gradFrom = $val('gradient_from', '#0A5A49'))
        @php($gradTo = $val('gradient_to', '#0D6B58'))
        @php($accent = $val('accent_color', '#138A6E'))
        @php($text = $val('text_color', '#ffffff'))
        @php($chip = $val('chip_color', '#d4af37'))
        <div class="form-group">
            <label class="form-label">Gradient Start</label>
            <div class="color-input-row">
                <input type="color" name="gradient_from" class="color-picker" value="{{ $gradFrom }}" data-preview-var="cp-from">
                <input type="text" class="form-input" value="{{ $gradFrom }}" data-color-text="gradient_from_k">
            </div>
            <input type="hidden" name="gradient_from_k" value="{{ $gradFrom }}">
        </div>
        <div class="form-group">
            <label class="form-label">Gradient End</label>
            <div class="color-input-row">
                <input type="color" name="gradient_to" class="color-picker" value="{{ $gradTo }}" data-preview-var="cp-to">
                <input type="text" class="form-input" value="{{ $gradTo }}" data-color-text="gradient_to_k">
            </div>
            <input type="hidden" name="gradient_to_k" value="{{ $gradTo }}">
        </div>
        <div class="form-group">
            <label class="form-label">Accent Color</label>
            <div class="color-input-row">
                <input type="color" name="accent_color" class="color-picker" value="{{ $accent }}" data-preview-var="cp-accent">
                <input type="text" class="form-input" value="{{ $accent }}" data-color-text="accent_color_k">
            </div>
            <input type="hidden" name="accent_color_k" value="{{ $accent }}">
        </div>
        <div class="form-group">
            <label class="form-label">Text Color</label>
            <div class="color-input-row">
                <input type="color" name="text_color" class="color-picker" value="{{ $text }}" data-preview-var="cp-text">
                <input type="text" class="form-input" value="{{ $text }}" data-color-text="text_color_k">
            </div>
            <input type="hidden" name="text_color_k" value="{{ $text }}">
        </div>
        <div class="form-group">
            <label class="form-label">Chip Color</label>
            <div class="color-input-row">
                <input type="color" name="chip_color" class="color-picker" value="{{ $chip }}" data-preview-var="cp-chip">
                <input type="text" class="form-input" value="{{ $chip }}" data-color-text="chip_color_k">
            </div>
            <input type="hidden" name="chip_color_k" value="{{ $chip }}">
        </div>
    </div>
</div>

<div class="form-section" style="margin-top:1.5rem;">
    <h3 class="form-section-title">Visibility</h3>
    <div class="form-grid form-grid-2">
        <div class="form-group">
            <label class="form-check">
                <input type="checkbox" name="show_network_logo" value="1" {{ old('show_network_logo', $row?->show_network_logo ?? true) ? 'checked' : '' }}>
                <span>Show network logo</span>
            </label>
            <label class="form-check" style="margin-top:8px;">
                <input type="checkbox" name="is_active" value="1" {{ old('is_active', $row?->is_active ?? true) ? 'checked' : '' }}>
                <span>Active (available for issuance)</span>
            </label>
        </div>
    </div>
</div>

<div class="form-actions" style="margin-top:2rem;">
    <button type="submit" class="btn btn-primary" style="background-color:var(--cp-to, #0D6B58);">
        {{ $row ? 'Update Template' : 'Create Template' }}
    </button>
    <input type="hidden" id="finalGradientFrom" name="final_gradient_from" value="">
    <input type="hidden" id="finalGradientTo" name="final_gradient_to" value="">
    <input type="hidden" id="finalAccent" name="final_accent" value="">
    <input type="hidden" id="finalText" name="final_text" value="">
    <input type="hidden" id="finalChip" name="final_chip" value="">
</div>

@push('scripts')
<script>
function templatePreviewEl() {
    return document.getElementById('templatePreview');
}
function setTemplateVar(name, val) {
    var el = templatePreviewEl();
    if (el && val) el.style.setProperty('--' + name, val);
}
function setNetworkLabel() {
    var el = templatePreviewEl();
    if (!el) return;
    var net = document.getElementById('card_network');
    var label = el.querySelector('.card-preview-network');
    if (label && net) label.textContent = net.value.toUpperCase();
}
var pendingTemplate = {};
document.querySelectorAll('[data-preview-var]').forEach(function(input) {
    function apply() {
        setTemplateVar(input.dataset.previewVar, input.value);
        var text = document.querySelector('[data-color-text="' + input.name + '"]');
        if (text) text.value = input.value;
    }
    input.addEventListener('input', apply);
    input.addEventListener('change', apply);
    input.addEventListener('blur', function() {
        var text = document.querySelector('[data-color-text="' + input.name + '"]');
        if (text && /^#[0-9a-fA-F]{6}$/.test(text.value)) text.value = input.value;
    });
});
document.querySelectorAll('[data-color-text]').forEach(function(input) {
    input.addEventListener('input', function() {
        var picker = document.querySelector('[name="' + this.dataset.colorText + '"]');
        if (picker && /^#[0-9a-fA-F]{6}$/.test(this.value)) {
            picker.value = this.value;
            var v = picker.dataset.previewVar;
            setTemplateVar(v, this.value);
        }
    });
});
document.getElementById('card_network')?.addEventListener('change', setNetworkLabel);

function onTemplateSubmit() {
    var gradFrom = document.querySelector('[name="gradient_from"]').value;
    var gradTo = document.querySelector('[name="gradient_to"]').value;
    var accent = document.querySelector('[name="accent_color"]').value;
    var text = document.querySelector('[name="text_color"]').value;
    var chip = document.querySelector('[name="chip_color"]').value;
    document.getElementById('finalGradientFrom').value = gradFrom;
    document.getElementById('finalGradientTo').value = gradTo;
    document.getElementById('finalAccent').value = accent;
    document.getElementById('finalText').value = text;
    document.getElementById('finalChip').value = chip;
}
</script>
@endpush