@extends('layouts.app')
@section('title', 'Create Template')
@section('content')
<div class="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h2 class="page-title">Create Template</h2>
        <p class="page-subtitle">Design a new invoice template</p>
    </div>
    <a href="{{ route('templates.index') }}" class="btn-ghost">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        Back to Templates
    </a>
</div>

<form method="POST" action="{{ route('templates.store') }}" class="space-y-6">
    @csrf

    <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-6 lg:p-8 card-elevated">
        <h3 class="section-title">Template Information</h3>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <x-form-group label="Template Name" name="template_name" :value="old('template_name')" required placeholder="e.g. Standard Invoice" />
            <x-form-group label="Template Code" name="template_code" :value="old('template_code')" required placeholder="e.g. standard" />
            <div class="flex items-center gap-6">
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="is_default" value="1" {{ old('is_default') ? 'checked' : '' }} class="w-4 h-4 rounded border-gray-300 dark:border-dark-border text-primary-600 focus:ring-primary-500">
                    <span class="text-sm font-medium text-gray-700 dark:text-dark-text">Set as default template</span>
                </label>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="status" value="active" {{ old('status', 'active') === 'active' ? 'checked' : '' }} class="w-4 h-4 rounded border-gray-300 dark:border-dark-border text-primary-600 focus:ring-primary-500">
                    <span class="text-sm font-medium text-gray-700 dark:text-dark-text">Active</span>
                </label>
            </div>
        </div>
    </div>

    <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-6 lg:p-8 card-elevated">
        <h3 class="section-title">Template Content</h3>
        <div class="space-y-4">
            <div>
                <label for="header_html" class="form-label dark:text-dark-muted">Header HTML</label>
                <p class="text-xs text-gray-400 dark:text-dark-muted mb-2">This section appears at the top of the invoice. Typically includes company logo, name, and invoice title.</p>
                <textarea name="header_html" id="header_html" rows="6" class="form-input dark:bg-dark-surface dark:border-dark-border dark:text-dark-text font-mono">{{ old('header_html') }}</textarea>
            </div>
            <div>
                <label for="body_html" class="form-label dark:text-dark-muted">Body HTML</label>
                <p class="text-xs text-gray-400 dark:text-dark-muted mb-2">The main content of the invoice. Includes billing details, line items table, and totals.</p>
                <textarea name="body_html" id="body_html" rows="10" class="form-input dark:bg-dark-surface dark:border-dark-border dark:text-dark-text font-mono">{{ old('body_html') }}</textarea>
            </div>
            <div>
                <label for="footer_html" class="form-label dark:text-dark-muted">Footer HTML</label>
                <p class="text-xs text-gray-400 dark:text-dark-muted mb-2">Appears at the bottom of the invoice. Use for terms & conditions, payment details, or thank you notes.</p>
                <textarea name="footer_html" id="footer_html" rows="6" class="form-input dark:bg-dark-surface dark:border-dark-border dark:text-dark-text font-mono">{{ old('footer_html') }}</textarea>
            </div>
        </div>
    </div>

    <div class="bg-white dark:bg-dark-card rounded-2xl border border-gray-100 dark:border-dark-border p-6 lg:p-8 card-elevated">
        <h3 class="section-title">Available Template Variables</h3>
        <p class="text-sm text-gray-500 dark:text-dark-muted mb-4">Use these variables in your HTML template. They will be replaced with actual data when generating invoices.</p>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2">
            @foreach(['company_name', 'company_logo', 'company_email', 'company_phone', 'company_website', 'company_address', 'gst_number', 'pan_number', 'invoice_number', 'invoice_date', 'due_date', 'customer_name', 'customer_email', 'customer_phone', 'customer_address', 'customer_gst', 'items', 'subtotal', 'discount', 'taxable_amount', 'cgst', 'sgst', 'igst', 'grand_total', 'amount_in_words', 'invoice_prefix', 'financial_year', 'tax_invoice_prefix'] as $var)
                <code class="px-2 py-1.5 text-xs bg-gray-50 dark:bg-dark-surface border border-gray-200 dark:border-dark-border rounded-md text-indigo-600 font-mono">@{{{{ $var }}}}</code>
            @endforeach
        </div>
    </div>

    <div class="flex items-center justify-end gap-3">
        <a href="{{ route('templates.index') }}" class="btn-secondary">Cancel</a>
        <x-button type="submit">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            Create Template
        </x-button>
    </div>
</form>
@endsection