<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <div>
                <a href="{{ route('settings.templates.index') }}" class="text-xs font-semibold text-indigo-600 hover:text-indigo-700 flex items-center gap-1 mb-1">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                    Back to Templates
                </a>
                <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                    Customize Template: <span class="capitalize text-indigo-600">{{ $template === 'slim' ? 'FBR Standard' : $template }}</span>
                </h2>
                <p class="text-xs text-gray-400 mt-0.5">Customize styling rules, fields, and headers specifically for this template.</p>
            </div>
        </div>
    </x-slot>

    <div class="py-12" x-data="templateConfigurator()">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">

            @if($errors->any())
                <div class="mb-6 p-4 bg-rose-50 border border-rose-200 text-rose-800 rounded-xl shadow-sm">
                    <div class="font-semibold text-sm text-rose-900 mb-2">Please correct the following errors:</div>
                    <ul class="list-disc list-inside text-xs text-rose-700 space-y-1">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('settings.templates.update', $template) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                {{-- Hidden input fields mapped reactively --}}
                <input type="hidden" name="invoice_header_type" :value="settings.invoice_header_type">
                <input type="hidden" name="invoice_show_letterhead" :value="settings.invoice_show_letterhead ? '1' : '0'">
                <input type="hidden" name="invoice_show_footer_image" :value="settings.invoice_show_footer_image ? '1' : '0'">
                <input type="hidden" name="invoice_show_watermark" :value="settings.invoice_show_watermark ? '1' : '0'">
                <input type="hidden" name="invoice_watermark_text" :value="settings.invoice_watermark_text">
                <input type="hidden" name="invoice_watermark_type" :value="settings.invoice_watermark_type">
                <input type="hidden" name="invoice_title_label" :value="settings.invoice_title_label">
                
                <input type="hidden" name="field_hs_code_show" :value="settings.field_hs_code_show ? '1' : '0'">
                <input type="hidden" name="field_hs_code_label" :value="settings.field_hs_code_label">
                <input type="hidden" name="field_qty_show" :value="settings.field_qty_show ? '1' : '0'">
                <input type="hidden" name="field_qty_label" :value="settings.field_qty_label">
                <input type="hidden" name="field_uom_show" :value="settings.field_uom_show ? '1' : '0'">
                <input type="hidden" name="field_uom_label" :value="settings.field_uom_label">
                <input type="hidden" name="field_rate_show" :value="settings.field_rate_show ? '1' : '0'">
                <input type="hidden" name="field_rate_label" :value="settings.field_rate_label">
                <input type="hidden" name="field_taxable_amt_show" :value="settings.field_taxable_amt_show ? '1' : '0'">
                <input type="hidden" name="field_taxable_amt_label" :value="settings.field_taxable_amt_label">
                <input type="hidden" name="field_sales_tax_show" :value="settings.field_sales_tax_show ? '1' : '0'">
                <input type="hidden" name="field_sales_tax_label" :value="settings.field_sales_tax_label">
                <input type="hidden" name="field_total_show" :value="settings.field_total_show ? '1' : '0'">
                <input type="hidden" name="field_total_label" :value="settings.field_total_label">

                <div class="max-w-4xl mx-auto space-y-6">
                    
                    <!-- Header Config -->
                    <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm">
                        <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wider mb-4">Header Configuration</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Header Style</label>
                                <select x-model="settings.invoice_header_type" class="w-full rounded-lg border-gray-200 text-sm focus:border-indigo-400 focus:ring-indigo-400">
                                    <option value="standard">Standard (Logo + Text)</option>
                                    <option value="letterhead_image">Full Letterhead Banner Image</option>
                                </select>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Invoice Document Title</label>
                                <input type="text" x-model="settings.invoice_title_label"
                                       class="w-full rounded-lg border-gray-200 text-sm focus:border-indigo-400 focus:ring-indigo-400"
                                       placeholder="Sales Tax Invoice">
                            </div>
                        </div>

                        <div class="mt-5 grid grid-cols-1 md:grid-cols-2 gap-5 border-t border-gray-100 pt-5">
                            <div x-show="settings.invoice_header_type === 'standard'">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Business Logo</label>
                                <input type="file" name="invoice_logo" class="w-full text-xs text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100" />
                                @if($businessSettings['invoice_logo_url'])
                                    <div class="mt-2 flex items-center gap-2">
                                        <img src="{{ $businessSettings['invoice_logo_url'] }}" class="h-8 object-contain rounded border p-0.5" />
                                        <span class="text-[10px] text-gray-400">Current Logo</span>
                                    </div>
                                @endif
                            </div>

                            <div x-show="settings.invoice_header_type === 'letterhead_image'" style="display: none;">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Letterhead Banner Image</label>
                                <input type="file" name="invoice_letterhead_image" class="w-full text-xs text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100" />
                                @if($businessSettings['invoice_letterhead_image_url'])
                                    <div class="mt-2 flex items-center gap-2">
                                        <img src="{{ $businessSettings['invoice_letterhead_image_url'] }}" class="h-8 object-contain rounded border p-0.5" />
                                        <span class="text-[10px] text-gray-400">Current Banner</span>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Footer & Watermark Settings -->
                    <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm">
                        <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wider mb-4">Watermark & Footer Settings</h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div class="flex flex-col gap-4">
                                <label class="flex items-center gap-3 cursor-pointer select-none">
                                    <input type="checkbox" x-model="settings.invoice_show_letterhead"
                                           class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                    <div>
                                        <span class="text-sm font-semibold text-gray-700">Display Top Layout Stripe</span>
                                        <p class="text-[10px] text-gray-400 mt-0.5">Show layout color border/stripe.</p>
                                    </div>
                                </label>

                                <label class="flex items-center gap-3 cursor-pointer select-none">
                                    <input type="checkbox" x-model="settings.invoice_show_footer_image"
                                           class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                    <div>
                                        <span class="text-sm font-semibold text-gray-700">Show Custom Footer Image</span>
                                        <p class="text-[10px] text-gray-400 mt-0.5">Toggle footer image banner.</p>
                                    </div>
                                </label>
                            </div>

                            <div class="flex flex-col gap-4">
                                <label class="flex items-center gap-3 cursor-pointer select-none">
                                    <input type="checkbox" x-model="settings.invoice_show_watermark"
                                           class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                    <div>
                                        <span class="text-sm font-semibold text-gray-700">Display Watermark Overlay</span>
                                        <p class="text-[10px] text-gray-400 mt-0.5">Toggle watermark behind grid items.</p>
                                    </div>
                                </label>

                                <div x-show="settings.invoice_show_watermark">
                                    <label class="block text-sm font-medium text-gray-700 mb-1">Watermark Type</label>
                                    <select x-model="settings.invoice_watermark_type" class="w-full rounded-lg border-gray-200 text-sm focus:border-indigo-400 focus:ring-indigo-400">
                                        <option value="text">Text Watermark</option>
                                        <option value="image">Image Watermark</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="mt-5 border-t border-gray-100 pt-5" x-show="settings.invoice_show_watermark">
                            <div x-show="settings.invoice_watermark_type === 'text'">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Watermark Text Content</label>
                                <input type="text" x-model="settings.invoice_watermark_text"
                                       class="w-full rounded-lg border-gray-200 text-sm focus:border-indigo-400 focus:ring-indigo-400"
                                       placeholder="DRAFT, PAID, COPY">
                            </div>
                            <div x-show="settings.invoice_watermark_type === 'image'">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Watermark Image</label>
                                <input type="file" name="invoice_watermark_image" class="w-full text-xs text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-xs file:font-semibold" />
                            </div>
                        </div>

                        <div class="mt-5 border-t border-gray-100 pt-5" x-show="settings.invoice_show_footer_image">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Footer Banner Image</label>
                            <input type="file" name="invoice_footer_image" class="w-full text-xs text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-xs file:font-semibold" />
                            @if($businessSettings['invoice_footer_image_url'])
                                <div class="mt-2 flex items-center gap-2">
                                    <img src="{{ $businessSettings['invoice_footer_image_url'] }}" class="h-8 object-contain rounded border p-0.5" />
                                    <span class="text-[10px] text-gray-400">Current Footer</span>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Column Configurations -->
                    <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-sm">
                        <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wider mb-2">Item Grid Fields & Custom Labels</h3>
                        <p class="text-xs text-gray-400 mb-4">Toggle visible columns and rename display headers specifically for this template layout.</p>
                        
                        <div class="overflow-x-auto">
                            <table class="w-full text-left text-xs">
                                <thead>
                                    <tr class="border-b border-gray-100 font-semibold text-gray-400 uppercase">
                                        <th class="py-2.5">Field Name</th>
                                        <th class="py-2.5 text-center">Show</th>
                                        <th class="py-2.5">Custom Label Name</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-50">
                                    <tr>
                                        <td class="py-3 font-semibold text-gray-700">HS Code</td>
                                        <td class="py-3 text-center">
                                            <input type="checkbox" x-model="settings.field_hs_code_show" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                        </td>
                                        <td class="py-3">
                                            <input type="text" x-model="settings.field_hs_code_label" class="rounded-lg border-gray-200 text-xs py-1 px-2 focus:border-indigo-400 focus:ring-indigo-400 w-full max-w-xs">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="py-3 font-semibold text-gray-700">Quantity</td>
                                        <td class="py-3 text-center">
                                            <input type="checkbox" x-model="settings.field_qty_show" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                        </td>
                                        <td class="py-3">
                                            <input type="text" x-model="settings.field_qty_label" class="rounded-lg border-gray-200 text-xs py-1 px-2 focus:border-indigo-400 focus:ring-indigo-400 w-full max-w-xs">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="py-3 font-semibold text-gray-700">Unit (UoM)</td>
                                        <td class="py-3 text-center">
                                            <input type="checkbox" x-model="settings.field_uom_show" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                        </td>
                                        <td class="py-3">
                                            <input type="text" x-model="settings.field_uom_label" class="rounded-lg border-gray-200 text-xs py-1 px-2 focus:border-indigo-400 focus:ring-indigo-400 w-full max-w-xs">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="py-3 font-semibold text-gray-700">Rate / Unit Price</td>
                                        <td class="py-3 text-center">
                                            <input type="checkbox" x-model="settings.field_rate_show" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                        </td>
                                        <td class="py-3">
                                            <input type="text" x-model="settings.field_rate_label" class="rounded-lg border-gray-200 text-xs py-1 px-2 focus:border-indigo-400 focus:ring-indigo-400 w-full max-w-xs">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="py-3 font-semibold text-gray-700">Taxable Value</td>
                                        <td class="py-3 text-center">
                                            <input type="checkbox" x-model="settings.field_taxable_amt_show" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                        </td>
                                        <td class="py-3">
                                            <input type="text" x-model="settings.field_taxable_amt_label" class="rounded-lg border-gray-200 text-xs py-1 px-2 focus:border-indigo-400 focus:ring-indigo-400 w-full max-w-xs">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="py-3 font-semibold text-gray-700">Sales Tax</td>
                                        <td class="py-3 text-center">
                                            <input type="checkbox" x-model="settings.field_sales_tax_show" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                        </td>
                                        <td class="py-3">
                                            <input type="text" x-model="settings.field_sales_tax_label" class="rounded-lg border-gray-200 text-xs py-1 px-2 focus:border-indigo-400 focus:ring-indigo-400 w-full max-w-xs">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="py-3 font-semibold text-gray-700">Total Value</td>
                                        <td class="py-3 text-center">
                                            <input type="checkbox" x-model="settings.field_total_show" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                        </td>
                                        <td class="py-3">
                                            <input type="text" x-model="settings.field_total_label" class="rounded-lg border-gray-200 text-xs py-1 px-2 focus:border-indigo-400 focus:ring-indigo-400 w-full max-w-xs">
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="mt-6 flex justify-end">
                    <button type="submit" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold transition shadow-sm">
                        <svg class="w-4 h-4" 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>
                        Save Layout Configuration
                    </button>
                </div>
            </form>

        </div>
    </div>

    <script>
        function templateConfigurator() {
            return {
                template: '{{ $template }}',
                templateName: '{{ $template === 'slim' ? 'FBR Standard' : ucfirst($template) }}',
                settings: {
                    invoice_title_label: '{{ $templateSettings['invoice_title_label'] }}',
                    invoice_header_type: '{{ $templateSettings['invoice_header_type'] }}',
                    invoice_show_letterhead: {{ $templateSettings['invoice_show_letterhead'] == '1' ? 'true' : 'false' }},
                    invoice_show_footer_image: {{ $templateSettings['invoice_show_footer_image'] == '1' ? 'true' : 'false' }},
                    invoice_show_watermark: {{ $templateSettings['invoice_show_watermark'] == '1' ? 'true' : 'false' }},
                    invoice_watermark_text: '{{ $templateSettings['invoice_watermark_text'] }}',
                    invoice_watermark_type: '{{ $templateSettings['invoice_watermark_type'] }}',
                    field_hs_code_show: {{ $templateSettings['field_hs_code_show'] == '1' ? 'true' : 'false' }},
                    field_hs_code_label: '{{ $templateSettings['field_hs_code_label'] }}',
                    field_qty_show: {{ $templateSettings['field_qty_show'] == '1' ? 'true' : 'false' }},
                    field_qty_label: '{{ $templateSettings['field_qty_label'] }}',
                    field_uom_show: {{ $templateSettings['field_uom_show'] == '1' ? 'true' : 'false' }},
                    field_uom_label: '{{ $templateSettings['field_uom_label'] }}',
                    field_rate_show: {{ $templateSettings['field_rate_show'] == '1' ? 'true' : 'false' }},
                    field_rate_label: '{{ $templateSettings['field_rate_label'] }}',
                    field_taxable_amt_show: {{ $templateSettings['field_taxable_amt_show'] == '1' ? 'true' : 'false' }},
                    field_taxable_amt_label: '{{ $templateSettings['field_taxable_amt_label'] }}',
                    field_sales_tax_show: {{ $templateSettings['field_sales_tax_show'] == '1' ? 'true' : 'false' }},
                    field_sales_tax_label: '{{ $templateSettings['field_sales_tax_label'] }}',
                    field_total_show: {{ $templateSettings['field_total_show'] == '1' ? 'true' : 'false' }},
                    field_total_label: '{{ $templateSettings['field_total_label'] }}'
                }
            };
        }
    </script>
</x-app-layout>
