@php
    // Get data from controller - fallback to defaults if not provided
    $templates = $templates ?? collect();
    $sections = $sections ?? collect();
    $current_template_id = $current_template_id ?? session('selected_template_id');
    $current_section_id = $current_section_id ?? session('selected_section_id');
    $current_template = $current_template ?? null;
    $default_template = $current_template ?? ($templates->first() ?? null);
    
    // Get template name - prioritize current_template, then templates collection, then direct query
    $default_template_name = 'No Template Available';
    if ($current_template && isset($current_template->name) && $current_template->name) {
        $default_template_name = $current_template->name;
    } elseif ($templates->isNotEmpty() && $templates->first() && isset($templates->first()->name) && $templates->first()->name) {
        $default_template_name = $templates->first()->name;
    } else {
        // Last resort: query directly from database
        $tenant_id = session('tenant_id');
        $directTemplate = \App\Models\Template::where('tenant_id', $tenant_id ?? null)
            ->where('is_active', true)
            ->orderBy('sort_order')
            ->orderBy('name')
            ->first();
        
        if (!$directTemplate && $tenant_id) {
            // Try global template if tenant-specific not found
            $directTemplate = \App\Models\Template::whereNull('tenant_id')
                ->where('is_active', true)
                ->orderBy('sort_order')
                ->orderBy('name')
                ->first();
        }
        
        if ($directTemplate && isset($directTemplate->name)) {
            $default_template_name = $directTemplate->name;
        }
    }
    $current_section = $current_section ?? null;
    $template_permissions = \App\Models\Masters\Permission::checkModulePermissions(['index', 'create'], 'ReportTemplateController');    
    $template_service_permissions = \App\Models\Masters\Permission::checkModulePermissions(['index', 'create', 'edit', 'destroy', 'show'], 'ReportTemplateServiceController');
    $currentRoute = request()->route() ? request()->route()->getName() : '';
    $isServicesIndexPage = $currentRoute === 'report-templates.services.index';
@endphp
<!-- Tenant selection removed from template editor -->
<div class="template_top">
    <div class="templatetop_white">        
        <div class="d-flex gap-2 flex-wrap flex-grow-1">                
            
            <div class="w-37">
                <label for="template-name" class="form-label">Template</label>
                <div class="form-control" id="template-name" style="background-color: #e9ecef; border: 1px solid #ced4da; padding: 0.375rem 0.75rem;">
                    {{ $default_template_name }}
                </div>
            </div>
            <div class="w-37">
                <label for="section-select" class="form-label">Form</label>
                <select class="form-select" id="section-select" aria-label="Select Form">
                    <option value="">Select Form</option>
                    @foreach($sections as $section)
                        <option value="{{ $section->id }}" 
                                {{ $current_section_id == $section->id ? 'selected' : '' }}>
                            {{ $section->title }}
                        </option>
                    @endforeach
                </select>
            </div>
            @if($template_service_permissions['create'])
                <div class="">
                    <label for="exampleFormControlInput1" class="form-label mob_none">&nbsp; </label>
                    <div>
                        <a href="javascript:void(0);" class="add_section btn"><img src="{{ asset('images/add.svg') }}" /> Add
                            Form</a>
                        </div>
                </div>
            @endif
        </div>
        <div class="contact_btns">
            @if(session('template_tenant_id') && $template_permissions['index'])
            <a href="{{route('report-templates.master-templates.index')}}" class="import_exportbtn btn d-none"><img src="{{ asset('images/library.svg') }}" /> Library</a>
            @endif
            <!-- <a href="javascript:void(0);" class="add_btn btn"><img src="{{ asset('images/view.svg') }}" /> Preview</a>

            <a href="javascript:void(0);" class="importbg_btn btn w-auto"><img src="{{ asset('images/import (2).svg') }}" /> Import</a> -->
            <!-- <a href="javascript:void(0);" class="px-2 ">
                <img src="{{ asset('images/notification.svg') }}" />
            </a> -->
            <!-- <a href="javascript:void(0);" class="px-2">
                <img src="{{ asset('images/vertical_menu.svg') }}" />
            </a> -->
        </div>        
    </div>
    @php
    $templateClassName  =  \App\Helpers\Helper::getController();
    @endphp
    <div class="templatetop_bottom" id="template-navigation" {{ !$current_template_id && !session('template_id') ? 'style="pointer-events: none; opacity: 0.5;"' : '' }}>
        <ul>
            <li>
                <a href="{{ route('report-templates.introductions.index') }}" {{ $templateClassName === 'ReportTemplateIntroductionController' ? 'class=active' : '' }} class="template-nav-link">
                    <div class="tick_markcircle">
                        <img src="{{ asset('images/tick_white.svg') }}" />
                    </div>
                    Overview
                    <span class="line-hrozontal"></span>
                </a>
            </li>
            <li>
                <a href="{{ route('report-templates.closing-statements.index') }}" {{ $templateClassName === 'ReportTemplateClosingStatementController' ? 'class=active' : '' }} class="template-nav-link">
                    <div class="tick_markcircle">
                        <img src="{{ asset('images/tick_white.svg') }}" />
                    </div>
                    Closing Statement
                    <span class="line-hrozontal"></span>
                </a>
            </li>
        </ul>
    </div>
</div>

<!-- Template Content Section - Conditional Display -->
@if(!isset($dontShowNotSection)) 
<div id="template-content-section">
    @if($current_section_id)
        <!-- Section Content Container - This will be shown when section is selected -->
        <div id="section-content-container" style="display: block;">
            <!-- Content will be loaded here by parent pages -->
        </div>
    @else
        <!-- No Section Selected Message -->
        <div id="no-section-message" class="no-section-selected" style="display: block;">
            <div class="text-center py-5">
                <div class="empty-state-icon mb-3">
                    <i class="fas fa-file-alt" style="font-size: 4rem; color: #dee2e6;"></i>
                </div>
                <h4 class="text-muted mb-2">There is no form selected yet.</h4>
            </div>
        </div>
    @endif
</div>
@endif

<!-- Add Section Modal -->
<div class="modal fade" id="addSectionModal" tabindex="-1" aria-labelledby="addSectionModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="addSectionModalLabel">Add Form</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                
            </div>

        </div>
    </div>
</div>


<div class="modal fade" id="additemModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Add Question</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                
            </div>
           
        </div>
    </div>
</div>

<!-- Content wrapper for the actual page content -->
<div class="page-content-wrapper" 
     @if(!session('tenant_id'))
        {{-- Super admin: always show content --}}
        style="display: block;"
     @elseif(!$current_section_id)
        {{-- Regular user with no section: hide content --}}
        style="display: none;"
     @else
        {{-- Regular user with section: show content --}}
        style="display: block;"
     @endif>

<script>
// Template Editor - Role and Master Record Configuration
// Tenant Admin users cannot edit/delete records copied from master templates
window.TemplateEditorConfig = {
    isTenantAdmin: {{ (auth()->user()->roles->first()->slug ?? '') === 'tenant-admin' ? 'true' : 'false' }},
    hasTenantId: {{ session('tenant_id') ? 'true' : 'false' }},
    // Function to check if editing is allowed for a record
    canEditRecord: function(masterId) {
        // If user is Tenant Admin and record has a master_id, editing is not allowed
        if (this.isTenantAdmin && masterId) {
            return false;
        }
        return true;
    },
    // Function to check if deleting is allowed for a record
    canDeleteRecord: function(masterId) {
        // Same logic as edit
        return this.canEditRecord(masterId);
    }
};

// Wait for jQuery to be available
(function() {
    // Notification function
    // function showNotification(type, message) {
    //     if (typeof toastr !== 'undefined') {
    //         toastr[type](message);
    //     } else if (typeof Swal !== 'undefined') {
    //         Swal.fire({
    //             icon: type === 'success' ? 'success' : 'error',
    //             title: type === 'success' ? 'Success' : 'Error',
    //             text: message,
    //             timer: 3000,
    //             showConfirmButton: false
    //         });
    //     } else {
    //         alert(message);
    //     }
    // }

    function initTemplateHeader() {
        $(document).ready(function() {
            // Get default template ID from session or PHP variable
            var defaultTemplateId = '{{ $current_template_id }}';
            
            // Load sections for default template on page load
            if (defaultTemplateId) {
                loadSectionsForTemplate(defaultTemplateId);
                toggleTemplateNavigation(defaultTemplateId);
            }
    
            // Tenant selection removed

            // Section selection handler
            $('#section-select').on('change', function() {
                var sectionId = $(this).val();
                var sectionTitle = $(this).find('option:selected').text();
                console.log('Selected section ID:', sectionId);

                if(sectionId){
                    // Persist section in session then redirect to services page
                    $.post("{{ route('report-templates.set-section') }}", {
                        section_id: sectionId,
                        _token: '{{ csrf_token() }}'
                    }).done(function(response){
                        if (response.status) {
                            // Redirect to services page with selected section
                            window.location.href = "{{ route('report-templates.services.index') }}";
                        } else {
                            showNotification('error', 'Error selecting section: ' + response.message);
                        }
                    }).fail(function(xhr){
                        showNotification('error', 'Error selecting section');
                        console.error('Error selecting section:', xhr);
                    });
                } else {
                    // Clear on deselect and redirect to services page
                    $.post("{{ route('report-templates.set-section') }}", {
                        section_id: '',
                        _token: '{{ csrf_token() }}'
                    }).done(function(response){
                        if (response.status) {
                            // Redirect to services page without section
                            window.location.href = "{{ route('report-templates.services.index') }}";
                        } else {
                            showNotification('error', 'Error clearing section: ' + response.message);
                        }
                    }).fail(function(xhr){
                        showNotification('error', 'Error clearing section');
                        console.error('Error clearing section:', xhr);
                    });
                }

                // Existing display logic (leave as-is)
                toggleContentDisplay(sectionId);
                if (sectionId) {
                    showNotification('success', 'Section "' + sectionTitle + '" selected successfully');
                }
            });

            // Function to toggle content display based on section selection
            function toggleContentDisplay(sectionId) {
                var noSectionMessage = $('#no-section-message');
                var sectionContentContainer = $('#section-content-container');
                var pageContentWrapper = $('.page-content-wrapper');
                
                // Also hide services page specific content
                var serviceHeader = $('.details_title');
                var templateListArea = $('.tamplete_listarea');
                
                if (sectionId && sectionId !== '') {
                    // Section selected - show content, hide message
                    noSectionMessage.hide();
                    sectionContentContainer.show();
                    pageContentWrapper.show();
                    serviceHeader.show();
                    templateListArea.show();
                } else {
                    // No section selected - show message, hide content
                    noSectionMessage.show();
                    sectionContentContainer.hide();
                    pageContentWrapper.hide();
                    serviceHeader.hide();
                    templateListArea.hide();
                }
            }

            // Function to enable/disable template navigation based on template selection
            function toggleTemplateNavigation(templateId) {
                var templateNavigation = $('#template-navigation');
                var templateNavLinks = $('.template-nav-link');
                
                if (templateId && templateId !== '') {
                    // Template selected - enable navigation
                    templateNavigation.css({
                        'pointer-events': 'auto',
                        'opacity': '1'
                    });
                    templateNavLinks.removeClass('disabled');
                } else {
                    // No template selected - disable navigation
                    templateNavigation.css({
                        'pointer-events': 'none',
                        'opacity': '0.5'
                    });
                    templateNavLinks.addClass('disabled');
                }
            }

            // Template loading removed - using default template from database

            // Load sections for a specific template
            function loadSectionsForTemplate(templateId) {
                var sessionSectionId = "{{ session('selected_section_id') }}" || '{{ $current_section_id }}';
                $.ajax({
                    url: '{{ route("report-templates.get-sections") }}',
                    type: 'GET',
                    data: {
                        template_id: templateId
                    },
                    success: function(response) {
                        if (response.status) {
                            var sectionSelect = $('#section-select');
                            sectionSelect.html('<option value="">Select Section</option>');
                            $.each(response.sections, function(index, section) {
                                var selectedAttr = (sessionSectionId && sessionSectionId == section.id) ? ' selected' : '';
                                sectionSelect.append(
                                    '<option value="' + section.id + '"' + selectedAttr + '>' +
                                    section.title + 
                                    '</option>'
                                );
                            });
                            sectionSelect.prop('disabled', false);
                            // If we re-selected a section, update UI immediately
                            if (sessionSectionId && sectionSelect.find('option[value="'+sessionSectionId+'"]').length) {
                                sectionSelect.val(sessionSectionId);
                                toggleContentDisplay(sessionSectionId);
                            }
                        }
                    },
                    error: function(xhr) {
                        console.error('Error loading sections:', xhr);
                    }
                });
            }


            $(document).on('click', '.add_section', function(e) {
                e.preventDefault();

                const templateId = '{{ $current_template_id }}';
                const tenantId = "{{ session('tenant_id') }}";

                if (!templateId) {
                    showNotification('error', 'No template available');
                    return;
                }

                const modalBody = $('#addSectionModal .modal-body');
                modalBody.html('<div class="p-3 text-center text-muted">Loading...</div>');

                $.ajax({
                    url: "{{ route('report-templates.section-modal-body') }}",
                    type: 'GET',
                    data: {
                        template_id: templateId,
                        tenant_id: tenantId
                    },
                    success: function(resp){
                        if (resp.status) {
                            modalBody.html(resp.html);
                        } else {
                            modalBody.html('<div class="p-3 text-danger">Failed to load form.</div>');
                        }
                        $('#addSectionModalLabel').text('Add Form');
                        safeShowModal('#addSectionModal');
                    },
                    error: function(){
                        modalBody.html('<div class="p-3 text-danger">Error loading form.</div>');
                        safeShowModal('#addSectionModal');
                    }
                });
            });


            $(document).on('click', '.edit-section-trigger', function(e) {
                e.preventDefault();
                var sectionId = $(this).data('section-id');
                if(!sectionId){
                    showNotification('error','Please select a section first');
                    return;
                }
                // Reuse Add Section modal for editing
                $('#addSectionModalLabel').text('Edit Section');
                var modalBody = $('#addSectionModal .modal-body');
                modalBody.html('<div class="p-3 text-center text-muted">Loading...</div>');
                safeShowModal('#addSectionModal');
                $.ajax({
                    url: "{{ route('report-templates.section-edit-modal') }}",
                    type: 'GET',
                    data: { section_id: sectionId },
                    success: function(resp){
                        if(resp.status){
                            modalBody.html(resp.html);
                        } else {
                            modalBody.html('<div class="p-3 text-danger">Failed to load section data.</div>');
                        }
                    },
                    error: function(){
                        modalBody.html('<div class="p-3 text-danger">Error loading section data.</div>');
                    }
                });
            });

            // Fallback close handler: if Bootstrap's JS isn't managing the modal, ensure X button still closes it
            $(document).on('click','[data-bs-dismiss="modal"]', function(e) {
                var $modal = $(this).closest('.modal');
                if(!$modal.length) return;
                // If no bootstrap instance or jQuery modal plugin, use safeHideModal
                var needsFallback = true;
                if(typeof bootstrap !== 'undefined' && bootstrap.Modal){
                    var inst = bootstrap.Modal.getInstance($modal[0]);
                    if(inst){
                        // Let Bootstrap handle it
                        needsFallback = false;
                    }
                }
                if(needsFallback){
                    e.preventDefault();
                    safeHideModal('#'+$modal.attr('id'));
                }
            });


            // Delegate click for dynamically injected save button
            $(document).on('click', '.saveSectionBtn', function() {
                var isEdit = $('#edit_section_id').length > 0;
                var sectionId = isEdit ? $('#edit_section_id').val() : null;
                var fd = new FormData();
                var title = $('#section-title').val();
                var templateId = '{{ $current_template_id }}';
                var tenantId = '{{ session("tenant_id") }}';
                if (!title) { showNotification('error', 'Please enter a form title'); return; }
                if (!templateId) { showNotification('error', 'Please select a template first'); return; }
                fd.append('title', title);
                fd.append('template_id', templateId);
                fd.append('tenant_id', tenantId);
                fd.append('_token', "{{ csrf_token() }}");
                if (isEdit) { fd.append('section_id', sectionId); }
                var url = isEdit ? "{{ route('report-templates.update-section') }}" : "{{ route('report-templates.add-section') }}";
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: fd,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.status) {
                            showNotification('success', isEdit ? 'Section updated successfully' : 'Section added successfully');
                            safeHideModal('#addSectionModal');
                            if (isEdit) {
                                // Preserve edited section as selected and refresh page for simplicity
                                sessionStorage.setItem('selected_section_after_update', sectionId);
                                location.reload();
                                return;
                            }
                            $('#section-title').val('');
                            loadSectionsForTemplate(templateId);
                        } else {
                            showNotification('error', response.message || (isEdit ? 'Error updating section' : 'Error adding section'));
                        }
                    },
                    error: function(xhr) {
                        var message = isEdit ? 'Error updating section' : 'Error adding section';
                        if (xhr.responseJSON && xhr.responseJSON.message) { message = xhr.responseJSON.message; }
                        showNotification('error', message);
                    }
                });
            });


            // Template search removed - using default template

            // Initialize Select2 for section dropdown only
            if ($.fn.select2) {
                $('#section-select').select2({
                    placeholder: 'Select option...',
                    allowClear: true,
                    width: '100%'
                });
            }
        
            // Clear section selection when navigating away from services page
            $('.template-nav-link').on('click', function(e) {
                var currentPath = window.location.pathname;
                var targetHref = $(this).attr('href');
                
                // Check if we're currently on services page and navigating to another template page
                if (currentPath.includes('services') && targetHref && !targetHref.includes('services')) {
                    // Clear section selection before navigation
                    $.post("{{ route('report-templates.set-section') }}", {
                        section_id: '',
                        _token: '{{ csrf_token() }}'
                    }).done(function(response) {
                        console.log('Section selection cleared before navigation from services page');
                    }).fail(function(xhr) {
                        console.error('Error clearing section selection:', xhr);
                    });
                }
            });
        
            // Initialize content display based on current section selection
            var currentSectionId = $('#section-select').val();
            toggleContentDisplay(currentSectionId);
            
            // Initialize template navigation based on default template
            var currentTemplateId = '{{ $current_template_id }}';
            toggleTemplateNavigation(currentTemplateId);
        
            // Additional immediate hiding for content that comes after template header
            // Only for regular users with tenant_id - super admins content is always visible
            @if(!$current_section_id && session('tenant_id'))
                // Hide any content that appears after the template header
                $(document).ready(function() {
                    // $('.page-content-wrapper').nextAll().hide();
                    // $('.page-content-wrapper ~ *').hide();
                });
            @endif
        }); // End $(document).ready
    } // End initTemplateHeader function
    
    // Check if jQuery is available and initialize
    if (typeof jQuery !== 'undefined') {
        initTemplateHeader();
        
        // Debug: Test modal functionality after initialization
        $(document).ready(function() {
            console.log('Document ready - checking modal elements');
            console.log('Add Section Modal exists:', $('#addSectionModal').length);
            console.log('Bootstrap version:', typeof bootstrap !== 'undefined' ? bootstrap : 'Bootstrap not loaded');
            
            // Edit Section trigger
            
            
           
        });
    } else {
        // Wait for jQuery to load
        var checkJQuery = setInterval(function() {
            if (typeof jQuery !== 'undefined') {
                clearInterval(checkJQuery);
                initTemplateHeader();
            }
        }, 100);
    }
    // Enhanced modal helpers using ModalManager
    function safeShowModal(selector){
        // Use the enhanced ModalManager if available
        if(typeof window.safeShowModal === 'function'){
            window.safeShowModal(selector);
            return;
        }
        
        // Fallback to original implementation
        var $el = $(selector);
        if(!$el.length) return;
        if(typeof $el.modal === 'function'){
            try { $el.modal('show'); return; } catch(e) {}
        }
        if(typeof bootstrap !== 'undefined' && bootstrap.Modal){
            var inst = bootstrap.Modal.getInstance($el[0]);
            if(!inst){ inst = new bootstrap.Modal($el[0]); }
            inst.show();
        } else {
            $el.addClass('show').css('display','block');
            if(!$('body').hasClass('modal-open')) $('body').addClass('modal-open');
        }
    }
    function safeHideModal(selector){
        // Use the enhanced ModalManager if available
        if(typeof window.safeHideModal === 'function'){
            window.safeHideModal(selector);
            return;
        }
        
        // Fallback to original implementation
        var $el = $(selector);
        if(!$el.length) return;
        if(typeof $el.modal === 'function'){
            try { $el.modal('hide'); return; } catch(e) {}
        }
        if(typeof bootstrap !== 'undefined' && bootstrap.Modal){
            var inst = bootstrap.Modal.getInstance($el[0]);
            if(inst){ inst.hide(); return; }
        }
        // Fallback manual hide
        $el.removeClass('show').css('display','none');
        if($('.modal.show').length === 0){
            $('body').removeClass('modal-open');
        }
    }

   

})(); // End IIFE
</script>

<!-- Include Modal Fixes JavaScript -->
<script src="{{ asset('assets/js/modal-fixes.js') }}"></script>
<!-- Close the page content wrapper -->
</div>

@if(!$current_section_id && session('tenant_id'))
<script>
// Hide content that comes after the template header when no section is selected
// Only for regular users with tenant_id - super admins need to select tenant first
document.addEventListener('DOMContentLoaded', function() {
    // Only hide the page content wrapper - everything else should remain visible
    var wrapper = document.querySelector('.page-content-wrapper');
    if (wrapper) {
        wrapper.style.display = 'none';
    }
});
</script>
@endif