{{-- Excel import feature added: SheetJS parses .xlsx/.xls/.csv client-side, generates styled HTML table, inserts into TinyMCE --}}
<style>
    .template-container {
        padding: 20px;
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .tpl-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--card-border);
    }
    
    .tpl-header-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .btn-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        border-radius: 6px;
        color: var(--text-primary);
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        transition: all 0.2s;
    }
    
    .btn-back:hover {
        background: var(--card-hover);
        border-color: var(--primary);
        color: var(--primary);
    }
    
    .tpl-header-icon {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }
    
    .tpl-header-icon svg { width: 22px; height: 22px; }
    .tpl-header h1 { font-size: 20px; font-weight: 600; color: var(--text-primary); margin: 0; }
    .tpl-header-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
    
    .btn-add {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--primary);
        color: #fff;
        padding: 8px 16px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 500;
        font-size: 13px;
        transition: all 0.2s;
        border: none;
        cursor: pointer;
    }
    .btn-add:hover { background: var(--primary-hover); color: #fff; }
    .btn-add svg { width: 16px; height: 16px; }
    
    /* Placeholders Card */
    .placeholders-card {
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        border-radius: 10px;
        margin-bottom: 20px;
    }
    
    .placeholders-header {
        padding: 12px 16px;
        border-bottom: 1px solid var(--card-border);
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .placeholders-header:hover {
        background: var(--card-hover);
    }
    
    .placeholders-header h3 {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .placeholders-body {
        padding: 16px;
        display: none;
    }
    
    .placeholders-body.show {
        display: block;
    }
    
    .placeholder-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 10px;
    }
    
    .placeholder-item {
        padding: 10px 14px;
        background: var(--card-hover);
        border: 1px solid var(--card-border);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .placeholder-item:hover {
        border-color: var(--primary);
        background: rgba(59, 130, 246, 0.1);
    }
    
    .placeholder-code {
        font-family: monospace;
        font-size: 12px;
        color: var(--primary);
        font-weight: 600;
    }
    
    .placeholder-desc {
        font-size: 11px;
        color: var(--text-muted);
        margin-top: 4px;
    }
    
    /* Templates List */
    .templates-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .template-card {
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        border-radius: 10px;
        padding: 16px 20px;
        transition: all 0.2s;
    }
    
    .template-card:hover {
        border-color: var(--primary);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    
    .template-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .template-info {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .template-icon {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
    }
    
    .template-name {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-primary);
    }
    
    .template-meta {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 2px;
    }
    
    .template-actions {
        display: flex;
        gap: 8px;
    }
    
    .btn-icon {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        border: 1px solid var(--card-border);
        background: var(--card-bg);
        color: var(--text-muted);
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .btn-icon:hover {
        background: var(--card-hover);
        color: var(--text-primary);
    }
    
    .btn-icon.danger:hover {
        background: #fee2e2;
        color: #dc2626;
        border-color: #fecaca;
    }
    
    .btn-icon svg {
        width: 16px;
        height: 16px;
    }
    
    .status-badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        margin-left: 10px;
    }
    
    .status-badge.active {
        background: #dcfce7;
        color: #16a34a;
    }
    
    .status-badge.inactive {
        background: rgba(107,114,128,0.12);
        color: var(--text-muted, #6b7280);
    }
    
    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        background: var(--card-bg);
        border: 2px dashed var(--card-border);
        border-radius: 12px;
    }
    
    .empty-state-icon {
        font-size: 48px;
        margin-bottom: 16px;
    }
    
    .empty-state-title {
        font-size: 18px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 8px;
    }
    
    .empty-state-text {
        color: var(--text-muted);
        margin-bottom: 20px;
    }
    
    /* Modal */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        padding: 20px;
    }
    
    .modal-overlay.active {
        display: flex;
    }
    
    .modal-content {
        background: var(--card-bg);
        border-radius: 12px;
        width: 100%;
        max-width: 900px;
        max-height: 90vh;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }
    
    .modal-header {
        padding: 16px 20px;
        border-bottom: 1px solid var(--card-border);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .modal-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }
    
    .modal-close {
        width: 32px;
        height: 32px;
        border: none;
        background: var(--card-hover);
        border-radius: 6px;
        cursor: pointer;
        font-size: 18px;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .modal-close:hover {
        background: var(--card-border);
    }
    
    .modal-body {
        padding: 20px;
        overflow-y: auto;
        overflow-x: visible;
        flex: 1;
    }

    /* Fix TinyMCE dropdowns appearing outside modal */
    .tox-tinymce-aux {
        z-index: 100000 !important;
    }

    .tox-menu, .tox-dialog, .tox-pop {
        z-index: 100001 !important;
    }

    .modal-content {
        overflow: visible;
    }

    .editor-wrap {
        position: relative;
        z-index: 1;
    }
    
    .modal-footer {
        padding: 16px 20px;
        border-top: 1px solid var(--card-border);
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }
    
    /* Form */
    .form-group {
        margin-bottom: 16px;
    }
    
    .form-label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 6px;
    }
    
    .form-label .required {
        color: #dc2626;
    }
    
    .form-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--card-border);
        border-radius: 6px;
        font-size: 13px;
        background: var(--card-bg);
        color: var(--text-primary);
        transition: all 0.2s;
    }
    
    .form-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }
    
    .btn-light {
        background: var(--card-bg);
        color: var(--text-primary);
        border: 1px solid var(--card-border);
        padding: 8px 16px;
        border-radius: 6px;
        font-weight: 500;
        font-size: 13px;
        cursor: pointer;
    }
    
    .btn-light:hover {
        background: var(--card-hover);
    }
    
    /* Editor */
    .editor-wrap {
        border: 1px solid var(--card-border);
        border-radius: 6px;
        overflow: visible;
    }
    
    .tox-tinymce {
        border: none !important;
    }
    
    /* Toast */
    .toast {
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 12px 18px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        z-index: 99999;
        animation: slideIn 0.3s ease;
    }
    
    .toast.success {
        background: #dcfce7;
        color: #166534;
        border: 1px solid #bbf7d0;
    }
    
    .toast.error {
        background: #fee2e2;
        color: #991b1b;
        border: 1px solid #fecaca;
    }
    
    @keyframes slideIn {
        from { opacity: 0; transform: translateX(20px); }
        to { opacity: 1; transform: translateX(0); }
    }

    /* Excel import toolbar */
    .editor-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;
    }
    .btn-excel-import {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: #16a34a;
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }
    .btn-excel-import:hover { background: #15803d; }
    .btn-excel-import svg { width: 14px; height: 14px; }
    .excel-preview {
        display: none;
        margin-bottom: 12px;
        border: 1px solid #bbf7d0;
        border-radius: 8px;
        background: #f0fdf4;
        padding: 12px 14px;
    }
    .excel-preview.show { display: block; }
    .excel-preview-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .excel-preview-title { font-size: 12px; font-weight: 600; color: #166534; display: flex; align-items: center; gap: 6px; }
    .excel-preview-actions { display: flex; gap: 6px; }
    .btn-insert-excel { padding: 5px 12px; background: #16a34a; color: #fff; border: none; border-radius: 5px; font-size: 12px; font-weight: 500; cursor: pointer; }
    .btn-insert-excel:hover { background: #15803d; }
    .btn-cancel-excel { padding: 5px 10px; background: transparent; color: #6b7280; border: 1px solid #d1d5db; border-radius: 5px; font-size: 12px; cursor: pointer; }
    .btn-cancel-excel:hover { background: #f3f4f6; }
    .excel-preview-table-wrap { max-height: 180px; overflow: auto; border-radius: 4px; border: 1px solid #bbf7d0; }
    .excel-preview-table-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .excel-preview-table-wrap th { background: #166534; color: #fff; padding: 6px 10px; text-align: left; font-weight: 600; white-space: nowrap; }
    .excel-preview-table-wrap td { padding: 5px 10px; border-bottom: 1px solid #dcfce7; color: #1f2937; }
    .excel-preview-table-wrap tr:last-child td { border-bottom: none; }
    .excel-preview-table-wrap tr:nth-child(even) td { background: #f0fdf4; }
    .sheet-selector { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; color: #166534; }
    .sheet-selector select { padding: 3px 8px; border: 1px solid #bbf7d0; border-radius: 4px; font-size: 12px; background: #fff; color: #1f2937; }

/* TinyMCE Dark Mode */
.tox-tinymce { border-color: var(--card-border, #e5e7eb) !important; }
.tox .tox-toolbar, .tox .tox-toolbar__overflow, .tox .tox-toolbar__primary { background: var(--card-bg, #fff) !important; border-bottom-color: var(--card-border, #e5e7eb) !important; }
.tox .tox-edit-area__iframe { background: var(--card-bg, #fff) !important; }
.tox .tox-toolbar__group { border-color: var(--card-border, #e5e7eb) !important; }
.tox .tox-tbtn { color: var(--text-primary, #1f2937) !important; background: transparent !important; }
.tox .tox-tbtn svg { fill: var(--text-primary, #1f2937) !important; }
.tox .tox-tbtn:hover { background: var(--body-bg, #f3f4f6) !important; }
.tox .tox-tbtn--enabled, .tox .tox-tbtn--enabled:hover { background: var(--body-bg, #e2e8f0) !important; }
.tox .tox-tbtn--bespoke .tox-tbtn__select-label { color: var(--text-primary, #1f2937) !important; }
.tox .tox-split-button:hover { box-shadow: none !important; }
.tox .tox-split-button__chevron svg { fill: var(--text-primary, #1f2937) !important; }
.tox .tox-statusbar { background: var(--card-bg, #fff) !important; border-top-color: var(--card-border, #e5e7eb) !important; }
.tox .tox-statusbar a, .tox .tox-statusbar__path-item, .tox .tox-statusbar__text-container, .tox .tox-statusbar__wordcount { color: var(--text-muted, #6b7280) !important; }
.tox .tox-menu, .tox .tox-collection--list { background: var(--card-bg, #fff) !important; border-color: var(--card-border, #e5e7eb) !important; }
.tox .tox-collection__item { color: var(--text-primary, #1f2937) !important; }
.tox .tox-collection__item--active { background: var(--body-bg, #f3f4f6) !important; }
select option { background: var(--card-bg, #fff); color: var(--text-primary, #1f2937); }
</style>

<div class="template-container">
    <!-- Header -->
    <div class="tpl-header">
        <div class="tpl-header-left">
            {{-- Back Button --}}
            <a href="{{ route('admin.salesmanagement.proposals.index') }}" class="btn-back">
                ← Back
            </a>
            <div class="tpl-header-icon">
                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
            </div>
            <div>
                <h1>Proposal Templates</h1>
                <div class="tpl-header-sub">Create and manage reusable proposal templates</div>
            </div>
        </div>
        @can('salesmanagement.document-templates.create')
        <button type="button" class="btn-add" onclick="openAddModal()">
            <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
            </svg>
            Add Template
        </button>
        @endcan
    </div>

    <!-- Placeholders Reference -->
    <div class="placeholders-card">
        <div class="placeholders-header" onclick="togglePlaceholders()">
            <h3>
                <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
                </svg>
                Available Placeholders
            </h3>
            <svg id="placeholderChevron" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
            </svg>
        </div>
        <div class="placeholders-body" id="placeholdersBody">
            <p style="margin-bottom: 12px; color: var(--text-muted); font-size: 12px;">Click any placeholder to copy to clipboard</p>
            <div class="placeholder-grid">
                <div id="placeholders-list"></div>
            </div>
        </div>
    </div>

<!-- Templates List — rendered by JS renderTemplates() -->
    <div class="templates-list">
        <table style="width:100%; border-collapse:collapse; background:var(--card-bg); border:1px solid var(--card-border); border-radius:10px; overflow:hidden;">
            <thead>
                <tr style="border-bottom:1px solid var(--card-border);">
                    <th style="padding:10px 14px; text-align:left; font-size:12px; color:var(--text-muted); font-weight:600; width:60px;">ID</th>
                    <th style="padding:10px 14px; text-align:left; font-size:12px; color:var(--text-muted); font-weight:600;">Name</th>
                    <th style="padding:10px 14px; text-align:left; font-size:12px; color:var(--text-muted); font-weight:600; width:100px;">Order</th>
                    <th style="padding:10px 14px; text-align:left; font-size:12px; color:var(--text-muted); font-weight:600; width:100px;">Status</th>
                    <th style="padding:10px 14px; text-align:left; font-size:12px; color:var(--text-muted); font-weight:600; width:180px;">Actions</th>
                </tr>
            </thead>
            <tbody id="ptemplates-tbody">
                <tr>
                    <td colspan="5" style="text-align:center; color:var(--text-muted); padding:40px;">
                        Loading...
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Modal -->
<div class="modal-overlay" id="templateModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title" id="modalTitle">Add Template</h3>
            <button type="button" class="modal-close" onclick="closeModal()">×</button>
        </div>
        <div class="modal-body">
            <input type="hidden" id="templateId" value="">
            
            <div class="form-group">
                <label class="form-label"><span class="required">*</span> Template Title</label>
                <input type="text" class="form-input" id="templateName" placeholder="Enter template name">
            </div>
            
            <div class="form-group">
                <div class="editor-toolbar">
                    <label class="form-label" style="margin-bottom:0;">Template Content</label>
                    <button type="button" class="btn-excel-import" onclick="triggerExcelImport()" title="Import table from Excel / CSV">
                        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                        </svg>
                        Import from Excel
                    </button>
                </div>

                <input type="file" id="excelFileInput" accept=".xlsx,.xls,.csv" style="display:none" onchange="handleExcelFile(this)">

                <div class="excel-preview" id="excelPreview">
                    <div class="excel-preview-header">
                        <div class="excel-preview-title">
                            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                            <span id="excelFileName">file.xlsx</span>
                            <span id="excelRowCount" style="font-weight:400; opacity:0.8;"></span>
                        </div>
                        <div class="excel-preview-actions">
                            <button type="button" class="btn-insert-excel" onclick="insertExcelIntoEditor()">&#8595; Insert into Editor</button>
                            <button type="button" class="btn-cancel-excel" onclick="cancelExcelImport()">Cancel</button>
                        </div>
                    </div>
                    <div class="sheet-selector" id="sheetSelector" style="display:none;">
                        <label>Sheet:</label>
                        <select id="sheetSelect" onchange="renderSheetPreview()"></select>
                    </div>
                    <div class="excel-preview-table-wrap" id="excelPreviewTable"></div>
                </div>

                <div class="editor-wrap">
                    <textarea id="templateContent"></textarea>
                </div>
            </div>
            
            <div class="form-group">
                <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                    <input type="checkbox" id="templateActive" checked>
                    <span style="font-size: 13px;">Active</span>
                </label>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn-light" onclick="closeModal()">Close</button>
            <button type="button" class="btn-add" id="saveBtn" onclick="saveTemplate()">
                <span id="saveBtnText">Save</span>
            </button>
        </div>
    </div>
</div>

{{-- SheetJS: client-side Excel parsing --}}
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
<!-- TinyMCE -->
<script src="https://cdn.jsdelivr.net/npm/tinymce@7/tinymce.min.js"></script>
<script>
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}';
let editor = null;

function initEditor() {
    if (editor) {
        tinymce.remove('#templateContent');
    }
    
    var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
    tinymce.init({
        selector: '#templateContent',
        height: 350,
        menubar: true,
        license_key: 'gpl',
        promotion: false,
        skin: isDark ? 'oxide-dark' : 'oxide',
        content_css: isDark ? 'dark' : 'default',
        content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; font-size: 14px; } table { border-collapse: collapse; width: 100%; } th { background: #1e3a5f; color: #fff; padding: 8px 12px; font-weight: 600; border: 1px solid #1e3a5f; } td { padding: 8px 12px; border: 1px solid #e5e7eb; } tr:nth-child(even) td { background: #f9fafb; }',
        plugins: 'advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table help wordcount',
        toolbar: 'undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | table | code',
        branding: false,
        promotion: false,
        sandbox_iframes: false,
        convert_unsafe_embeds: true,
        relative_urls: false,
        remove_script_host: false,
        document_base_url: window.location.origin,
        setup: function(ed) {
            editor = ed;
        }
    });
}

function togglePlaceholders() {
    const body = document.getElementById('placeholdersBody');
    const chevron = document.getElementById('placeholderChevron');
    body.classList.toggle('show');
    chevron.style.transform = body.classList.contains('show') ? 'rotate(180deg)' : 'rotate(0)';
}

function copyPlaceholder(text) {
    navigator.clipboard.writeText(text).then(() => {
        showToast('Copied: ' + text, 'success');
    });
}

function openAddModal() {
    document.getElementById('modalTitle').textContent = 'Add Template';
    document.getElementById('templateId').value = '';
    document.getElementById('templateName').value = '';
    document.getElementById('templateActive').checked = true;
    document.getElementById('saveBtnText').textContent = 'Save';
    cancelExcelImport();
    document.getElementById('templateModal').classList.add('active');
    
    setTimeout(() => {
        initEditor();
        if (editor) editor.setContent('');
    }, 100);
}

function editTemplate(id) {
    document.getElementById('modalTitle').textContent = 'Edit Template';
    document.getElementById('saveBtnText').textContent = 'Update';
    
    fetch(`{{ url('admin/sales/proposal-templates') }}/${id}`, {
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            // ✅ FIX: successResponse() wraps data inside data.data, not data directly
            const t = (data.data && data.data.template) ? data.data.template : data.template;
            document.getElementById('templateId').value = t.id;
            document.getElementById('templateName').value = t.name;
            document.getElementById('templateActive').checked = t.is_active;
            document.getElementById('templateModal').classList.add('active');
            
            setTimeout(() => {
                initEditor();
                setTimeout(() => { if (editor) editor.setContent(t.content || ''); }, 300);
            }, 100);
        } else {
            showToast(data.message || 'Error', 'error');
        }
    })
    .catch(e => { console.error(e); showToast('Error loading template', 'error'); });
}

function closeModal() {
    document.getElementById('templateModal').classList.remove('active');
    cancelExcelImport();
    if (editor) { tinymce.remove('#templateContent'); editor = null; }
}

function saveTemplate() {
    const id = document.getElementById('templateId').value;
    const name = document.getElementById('templateName').value.trim();
    const content = editor ? editor.getContent() : '';
    const isActive = document.getElementById('templateActive').checked;
    
    if (!name) { showToast('Please enter template name', 'error'); return; }
    
    const url = id ? `{{ url('admin/sales/proposal-templates') }}/${id}` : `{{ route('admin.salesmanagement.proposal-templates.store') }}`;
    const method = id ? 'PUT' : 'POST';
    
    document.getElementById('saveBtn').disabled = true;
    document.getElementById('saveBtnText').textContent = 'Saving...';
    
    fetch(url, {
        method: method,
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'X-Requested-With': 'XMLHttpRequest' },
        body: JSON.stringify({ name, content, is_active: isActive })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            showToast(data.message || 'Saved!', 'success');
            closeModal();
            setTimeout(() => location.reload(), 1000);
        } else {
            showToast(data.message || 'Error', 'error');
        }
    })
    .catch(e => { console.error(e); showToast('Error saving', 'error'); })
    .finally(() => {
        document.getElementById('saveBtn').disabled = false;
        document.getElementById('saveBtnText').textContent = id ? 'Update' : 'Save';
    });
}

function duplicateTemplate(id) {
    if (!confirm('Duplicate this template?')) return;
    
    fetch(`{{ url('admin/sales/proposal-templates') }}/${id}/duplicate`, {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) { showToast(data.message, 'success'); setTimeout(() => location.reload(), 1000); }
        else showToast(data.message || 'Error', 'error');
    })
    .catch(e => { console.error(e); showToast('Error', 'error'); });
}

function toggleStatus(id) {
    fetch(`{{ url('admin/sales/proposal-templates') }}/${id}/toggle-active`, {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) { showToast(data.message, 'success'); setTimeout(() => location.reload(), 500); }
        else showToast(data.message || 'Error', 'error');
    })
    .catch(e => { console.error(e); showToast('Error', 'error'); });
}

function deleteTemplate(id, name) {
    if (!confirm(`Delete template "${name}"?`)) return;
    
    fetch(`{{ url('admin/sales/proposal-templates') }}/${id}`, {
        method: 'DELETE',
        headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) { showToast(data.message, 'success'); document.getElementById('template-' + id)?.remove(); }
        else showToast(data.message || 'Error', 'error');
    })
    .catch(e => { console.error(e); showToast('Error', 'error'); });
}

function showToast(msg, type) {
    const t = document.createElement('div');
    t.className = 'toast ' + type;
    t.innerHTML = (type === 'success' ? '✅ ' : '❌ ') + msg;
    document.body.appendChild(t);
    setTimeout(() => t.remove(), 4000);
}


/* ─────────────────────────────────────────
   Excel Import
───────────────────────────────────────── */
var xlsxWorkbook = null;

function triggerExcelImport() {
    document.getElementById('excelFileInput').value = '';
    xlsxWorkbook = null;
    document.getElementById('excelPreview').classList.remove('show');
    document.getElementById('sheetSelector').style.display = 'none';
    document.getElementById('excelFileInput').click();
}

function handleExcelFile(input) {
    var file = input.files[0];
    if (!file) return;
    var reader = new FileReader();
    reader.onload = function(e) {
        try {
            var data = new Uint8Array(e.target.result);
            xlsxWorkbook = XLSX.read(data, { type: 'array' });
            document.getElementById('excelFileName').textContent = file.name;
            var sheetNames = xlsxWorkbook.SheetNames;
            var sheetSel = document.getElementById('sheetSelect');
            sheetSel.innerHTML = '';
            sheetNames.forEach(function(name) {
                var opt = document.createElement('option');
                opt.value = name; opt.textContent = name;
                sheetSel.appendChild(opt);
            });
            document.getElementById('sheetSelector').style.display = sheetNames.length > 1 ? 'flex' : 'none';
            renderSheetPreview();
            document.getElementById('excelPreview').classList.add('show');
        } catch(err) {
            showToast('Could not read file. Please check it is a valid .xlsx, .xls or .csv file.', 'error');
        }
    };
    reader.readAsArrayBuffer(file);
}

function renderSheetPreview() {
    if (!xlsxWorkbook) return;
    var sheetName = document.getElementById('sheetSelect').value || xlsxWorkbook.SheetNames[0];
    var sheet = xlsxWorkbook.Sheets[sheetName];
    var rows = XLSX.utils.sheet_to_json(sheet, { header: 1, defval: '' });
    var dataRows = rows.filter(function(r) { return r.some(function(c) { return c !== '' && c !== null && c !== undefined; }); });
    if (!dataRows.length) {
        document.getElementById('excelPreviewTable').innerHTML = '<p style="padding:12px;color:#6b7280;font-size:12px;">Sheet is empty.</p>';
        document.getElementById('excelRowCount').textContent = '';
        return;
    }
    var count = Math.max(0, dataRows.length - 1);
    document.getElementById('excelRowCount').textContent = '— ' + count + ' row' + (count !== 1 ? 's' : '');
    var headers = dataRows[0] || [];
    var html = '<table><thead><tr>';
    headers.forEach(function(h) { html += '<th>' + xlsxEsc(String(h)) + '</th>'; });
    html += '</tr></thead><tbody>';
    dataRows.slice(1, 21).forEach(function(row) {
        html += '<tr>';
        headers.forEach(function(_, ci) { html += '<td>' + xlsxEsc(String(row[ci] !== undefined ? row[ci] : '')) + '</td>'; });
        html += '</tr>';
    });
    if (dataRows.length > 21) {
        html += '<tr><td colspan="' + headers.length + '" style="text-align:center;color:#9ca3af;padding:6px;">... and ' + (dataRows.length - 21) + ' more rows</td></tr>';
    }
    html += '</tbody></table>';
    document.getElementById('excelPreviewTable').innerHTML = html;
}

function insertExcelIntoEditor() {
    if (!xlsxWorkbook) return;
    var sheetName = document.getElementById('sheetSelect').value || xlsxWorkbook.SheetNames[0];
    var sheet = xlsxWorkbook.Sheets[sheetName];
    var rows = XLSX.utils.sheet_to_json(sheet, { header: 1, defval: '' });
    var dataRows = rows.filter(function(r) { return r.some(function(c) { return c !== '' && c !== null && c !== undefined; }); });
    if (!dataRows.length) { showToast('No data found in sheet.', 'error'); return; }
    var headers = dataRows[0] || [];
    var html = '<table style="width:100%;border-collapse:collapse;font-size:13px;font-family:Arial,sans-serif;margin:16px 0;">';
    html += '<thead><tr>';
    headers.forEach(function(h) {
        html += '<th style="padding:10px 14px;background:#1e3a5f;color:#ffffff;font-weight:600;text-align:left;border:1px solid #1e3a5f;">' + xlsxEsc(String(h)) + '</th>';
    });
    html += '</tr></thead><tbody>';
    dataRows.slice(1).forEach(function(row, idx) {
        var bg = idx % 2 === 0 ? '#ffffff' : '#f9fafb';
        html += '<tr style="background:' + bg + ';">';
        headers.forEach(function(_, ci) {
            html += '<td style="padding:9px 14px;border:1px solid #e5e7eb;color:#1f2937;">' + xlsxEsc(String(row[ci] !== undefined ? row[ci] : '')) + '</td>';
        });
        html += '</tr>';
    });
    html += '</tbody></table>';
    if (editor && editor.initialized) {
        editor.insertContent(html);
        showToast('Table inserted into editor.', 'success');
    } else {
        var ta = document.getElementById('templateContent');
        ta.value = (ta.value || '') + html;
        showToast('Table inserted.', 'success');
    }
    cancelExcelImport();
}

function cancelExcelImport() {
    xlsxWorkbook = null;
    var preview = document.getElementById('excelPreview');
    if (preview) preview.classList.remove('show');
    var fi = document.getElementById('excelFileInput');
    if (fi) fi.value = '';
}

function xlsxEsc(str) {
    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

document.getElementById('templateModal').addEventListener('click', function(e) { if (e.target === this) closeModal(); });
document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeModal(); });
</script>
<script>
(function() {
    var LIST_URL = '{{ route("admin.salesmanagement.proposal-templates.list") }}';

    fetch(LIST_URL, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
        .then(function(r) { return r.json(); })
        .then(function(res) {
            if (!res.success) return;

            // ✅ FIX: handle different response shapes from successResponse()
            var templates = [];
            var placeholders = {};

            if (res.data && Array.isArray(res.data.templates)) {
                templates    = res.data.templates;
                placeholders = res.data.placeholders || {};
            } else if (res.data && Array.isArray(res.data)) {
                templates = res.data;
            } else if (Array.isArray(res.templates)) {
                templates    = res.templates;
                placeholders = res.placeholders || {};
            }

            renderTemplates(templates);
            renderPlaceholders(placeholders);
        }).catch(function(e) {
            console.error('Proposal templates list error:', e);
        });

    function renderTemplates(templates) {
        var tbody = document.getElementById('ptemplates-tbody');
        if (!tbody) return;

        // ✅ FIX: filter out any null/undefined elements before iterating
        templates = (templates || []).filter(function(t) { return t != null && t.id != null; });

        if (!templates.length) {
            tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;color:var(--text-muted)">No templates found.</td></tr>';
            return;
        }

        tbody.innerHTML = '';
        templates.forEach(function(t) {
            var tr = document.createElement('tr');
            tr.innerHTML = '<td>' + t.id + '</td>'
                + '<td><strong>' + escH(t.name || '') + '</strong></td>'
                + '<td>' + (t.sort_order || 0) + '</td>'
                + '<td><span class="badge ' + (t.is_active ? 'active' : 'inactive') + '">'
                  + (t.is_active ? 'Active' : 'Inactive') + '</span></td>'
                + '<td>'
                  + '<button type="button" class="btn btn-sm btn-warning" onclick="editTemplate(' + t.id + ')">Edit</button> '
                  + '<button type="button" class="btn btn-sm btn-danger" onclick="deleteTemplate(' + t.id + ', \'' + escH(t.name || '') + '\')">Delete</button>'
                + '</td>';
            tbody.appendChild(tr);
        });
    }

    function renderPlaceholders(placeholders) {
        var container = document.getElementById('placeholders-list');
        if (!container) return;
        if (!placeholders || !Object.keys(placeholders).length) return;
        var html = '';
        Object.keys(placeholders).forEach(function(key) {
            html += '<div class="placeholder-item" onclick="copyPlaceholder(\'{' + key + '}\')">'
                + '<div class="placeholder-code">{' + key + '}</div>'
                + '<div class="placeholder-desc">' + escH(placeholders[key]) + '</div>'
                + '</div>';
        });
        document.getElementById('placeholders-list').innerHTML = html;
    }

    function escH(s) {
        return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
    }
})();
</script>