@extends('store.layout.main')

@section('title', 'Add Invoice Layout')

@section('page-header')
<x-store.page-header pretitle="Store" title="Add Invoice Layout" back-route="store.invoice-layout.list" />
@endsection

@section('main-container')

<form method="POST" action="{{ route('store.invoice-layout.add') }}">
    @csrf

    <div class="card">
        <div class="card-body">

            <div class="row">
                <div class="col-md-3">
                    <label class="form-label">Layout Name</label>
                    <input type="text" name="name" class="form-control" value="{{ old('name') }}" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Invoice Type</label>
                    <select id="invoice_type" name="invoice_type" class="form-control" required>
                        <option value="thermal" {{ old('invoice_type')=='thermal'?'selected':'' }}>Thermal</option>
                        <option value="a4" {{ old('invoice_type')=='a4'?'selected':'' }}>A4 (Standard)</option>
                        <option value="a3" {{ old('invoice_type')=='a3'?'selected':'' }}>A3</option>
                        <option value="a2" {{ old('invoice_type')=='a2'?'selected':'' }}>A2</option>
                    </select>
                </div>
            </div>

            {{-- Placeholder Chips --}}
            <div class="mt-3 mb-1">
                <div class="d-flex align-items-center gap-2 mb-2">
                    <span style="font-size:.78rem;font-weight:600;color:#374151">Available Placeholders</span>
                    <span class="text-muted" style="font-size:.72rem">— click to insert at cursor · preview replaces with demo values</span>
                </div>
                <div id="placeholderChips" style="display:flex;flex-wrap:wrap;gap:5px">
                    @foreach(getInvoicePlaceholderData() as $key => $demoVal)
                        @php $preview = (strlen((string)$demoVal) < 40) ? $demoVal : '(table)'; @endphp
                        <button type="button" class="ph-chip" data-key="{{ $key }}"
                            title="{{ $key }} → {{ $preview }}"
                            style="font-size:.7rem;padding:2px 9px;border-radius:20px;background:#f0f4ff;border:1px solid #c7d7f8;color:#1a56db;font-family:monospace;font-weight:600;line-height:1.7;cursor:pointer;white-space:nowrap">
                            {{ $key }}
                        </button>
                    @endforeach
                </div>
            </div>

            <div class="row mt-2">

                {{-- Template Editor --}}
                <div class="col-md-6">
                    <label class="form-label">HTML Template</label>
                    <textarea id="html_template" name="html_template" rows="22" class="form-control" style="font-family:monospace;font-size:.82rem" required>{{ old('html_template', $defaultTemplate) }}</textarea>
                    <div id="load-default-hint" class="mt-1" style="display:none">
                        <button type="button" id="load-default-btn" class="btn btn-sm btn-outline-secondary" style="font-size:.72rem">
                            Load default template for this type
                        </button>
                    </div>
                </div>

                {{-- Live Preview --}}
                <div class="col-md-6">
                    <label class="form-label">Live Preview <span class="text-muted fw-normal" style="font-size:.75rem">(demo data)</span></label>
                    <iframe id="previewFrame" style="width:100%;height:500px;border:1px solid #ddd;font-family:Arial,sans-serif;border-radius:4px"></iframe>
                </div>

            </div>

            <div class="form-check mt-3">
                <input type="checkbox" name="is_default" value="1" class="form-check-input" id="is_default">
                <label class="form-check-label" for="is_default">Set as Default Layout</label>
            </div>

            <div class="mt-3">
                <button class="btn btn-success">{!! svg_icon('check','#fff') !!} Save Layout</button>
                <a href="{{ route('store.invoice-layout.list') }}" class="btn btn-secondary">Cancel</a>
            </div>

        </div>
    </div>

</form>

@endsection

@section('script')
<script>
const textarea        = document.getElementById('html_template');
const previewFrame    = document.getElementById('previewFrame');
const typeSelect      = document.getElementById('invoice_type');
const placeholderData = @json(getInvoicePlaceholderData());

const _defaultTemplates = {
    thermal: @json($defaultThermalTemplate),
    other:   @json($defaultTemplate),
};

function renderPreview() {
    let html = textarea.value;
    for (const key in placeholderData) {
        html = html.replaceAll(key, placeholderData[key]);
    }
    const doc = previewFrame.contentWindow.document;
    doc.open();
    doc.write(html);
    doc.close();
}

// Click chip → insert placeholder at cursor
document.getElementById('placeholderChips').addEventListener('click', function (e) {
    const chip = e.target.closest('.ph-chip');
    if (!chip) return;
    const key   = chip.dataset.key;
    const start = textarea.selectionStart;
    const end   = textarea.selectionEnd;
    textarea.value = textarea.value.slice(0, start) + key + textarea.value.slice(end);
    textarea.selectionStart = textarea.selectionEnd = start + key.length;
    textarea.focus();
    renderPreview();
});

// Show "load default" hint when type changes
typeSelect.addEventListener('change', function () {
    document.getElementById('load-default-hint').style.display = 'block';
});

// Load default template for selected type
document.getElementById('load-default-btn').addEventListener('click', function () {
    const isThermal = typeSelect.value === 'thermal';
    textarea.value  = isThermal ? _defaultTemplates.thermal : _defaultTemplates.other;
    document.getElementById('load-default-hint').style.display = 'none';
    renderPreview();
});

textarea.addEventListener('input', renderPreview);
window.addEventListener('load', renderPreview);
</script>
@endsection