@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;
    $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');    
@endphp
<!-- Tenant Selection (only for super admin when no session tenant_id) -->
@if(!session('tenant_id'))
<div class="w-37 mb-2">
    <label for="tenant-select" class="form-label">Select Tenant</label>
    <select class="form-select" id="tenant-select" aria-label="Select Tenant">
        <option value="">Select Tenant</option>
        @if(isset($tenant_list))
            @foreach($tenant_list as $id => $name)
                <option value="{{ $id }}" {{ session('template_tenant_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
            @endforeach
        @endif
    </select>
</div>
@else 
<input type="hidden" id="tenant-select" value="{{ session('tenant_id') }}">
@endif
<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-select" class="form-label">Template</label>
                <select class="form-select" id="template-select" aria-label="Select Template">
                    <option value="">Select Template</option>
                    @foreach($templates as $template)
                        <option value="{{ $template->id }}" 
                                {{ ($current_template_id == $template->id || session('template_id') == $template->id) ? 'selected' : '' }}
                                data-template-name="{{ $template->name }}">
                            {{ $template->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="w-37">
                <label for="section-select" class="form-label">Section</label>
                <select class="form-select" id="section-select" aria-label="Select Section" 
                        {{ !$current_template_id ? 'disabled' : '' }}>
                    <option value="">Select Section</option>
                    @foreach($sections as $section)
                        <option value="{{ $section->id }}" 
                                {{ $current_section_id == $section->id ? 'selected' : '' }}
                                data-section-color="{{ $section->color_code }}">
                            {{ $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
                            Section</a>
                        </div>
                </div>
            @endif
            <div class="mt-1">
                <label for="exampleFormControlInput1" class="form-label mob_none">&nbsp; </label>
                <div><a href="javascript:void(0);" class="search-btn" id="template-search-btn"><img src="{{ asset('images/search.svg') }}" /> </a></div>
            </div>
        </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"><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> -->
            @if($template_permissions['create'])
            <a href="javascript:void(0);" class="filter_btn btn w-auto" data-bs-toggle="modal"
                data-bs-target="#addTemplateModal"><img src="{{ asset('images/add.svg') }}" /> Add
                Template</a>
            @endif
            <!-- <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>
                    Introduction
                    <span class="line-hrozontal"></span>
                </a>
            </li>
            <li>
                <a href="{{ route('report-templates.cover-letters.index') }}" {{ $templateClassName === 'ReportTemplateCoverLetterController' ? 'class=active' : '' }} class="template-nav-link">
                    <div class="tick_markcircle">
                        <img src="{{ asset('images/tick_white.svg') }}" />
                    </div>
                    Cover Letter
                    <span class="line-hrozontal"></span>
                </a>
            </li>
            <li>
                <a href="{{ route('report-templates.questions.index') }}" {{ $templateClassName === 'ReportQuestionController' ? 'class=active' : '' }} class="template-nav-link">
                    <div class="tick_markcircle">
                        <img src="{{ asset('images/tick_white.svg') }}" />
                    </div>
                    Report Question
                    <span class="line-hrozontal"></span>
                </a>
            </li>
            <li>
                <a href="{{ route('report-templates.attachments.index') }}" {{ $templateClassName === 'ReportTemplateAttachmentController' ? 'class=active' : '' }} class="template-nav-link">
                    <div class="tick_markcircle">
                        <img src="{{ asset('images/tick_white.svg') }}" />
                    </div>
                    Attachment
                    <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 section 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 Section</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>

<!-- Template Search Modal -->
<div class="modal fade" id="templateSearchModal" tabindex="-1" aria-labelledby="templateSearchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="templateSearchModalLabel">Search Templates</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" class="form-control" id="template-search-input" placeholder="Search templates...">
                </div>
                <div id="template-search-results">
                    <!-- Search results will be loaded here -->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Template Modal -->
<div class="modal fade" id="addTemplateModal" tabindex="-1" aria-labelledby="addTemplateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="addTemplateModalLabel">Add Template</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0">
                <form id="addTemplateForm">
                    @csrf
                    
                    <!-- Tenant Selection (only for super admin) or Hidden Field -->
                    <input type="hidden" id="template-tenant" name="tenant_id" value="{{ session('tenant_id') }}">


                    <!-- Template Title -->
                    <div class="mb-3">
                        <label for="template-title" class="form-label">Template Title <span class="text-danger">*</span></label>
                        <div><input type="text" class="form-control" id="template-title" name="title" required 
                               placeholder="Enter template name"></div>
                    </div>

                    <!-- Associated Services -->
                    <div class="mb-3" style="display: none;">
                        <label for="template-services" class="form-label">Associated Services <span class="text-danger">*</span></label>
                        <div><select class="form-select" id="template-services" name="services[]" multiple required>
                            <option value="">Loading services...</option>
                        </select></div>
                        <div class="form-text">Select one or more services this template will be used for</div>
                    </div>

                    <!-- Template Type -->
                    <div class="mb-3" style="display: none;">
                        <label for="template-type" class="form-label">Template Type <span class="text-danger">*</span></label>
                        <div><select class="form-select" id="template-type" name="template_type" required>
                            <option value="">Select Type</option>
                            <option value="general" selected>General</option>
                            <option value="texas">Texas</option>
                        </select></div>
                    </div>

                    <!-- Structure Type -->
                    <div class="mb-3" style="display: none;">
                        <label for="structure-type" class="form-label">Structure Type <span class="text-danger">*</span></label>
                        <div><select class="form-select" id="structure-type" name="structure_type" required>
                            <option value="">Select Structure</option>
                            <option value="section_by_section" selected>Section by Section</option>
                            <option value="room_by_room">Room by Room</option>
                        </select></div>
                    </div>
                </form>
            </div>
            <div class="edit_category_btnctrl mt-0">
                <a href="javascript:void(0)" class="btn editcategory_save" id="saveTemplateBtn">Save</a>
            </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 Item</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>
// 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() {
    
            // Check if tenant is pre-selected and load templates automatically
            var preSelectedTenant = $('#tenant-select').val();
            if (preSelectedTenant) {
                loadTemplatesForTenant(preSelectedTenant);
                // For super admin, initialize hidden field with selected tenant value
                $('#template-tenant').val(preSelectedTenant);
            } else {
                // For regular users, ensure template selection is synchronized with session
                var sessionTemplateId = '{{ session("template_id") }}';
                if (sessionTemplateId) {
                    var templateSelect = $('#template-select');
                    if (templateSelect.find('option[value="' + sessionTemplateId + '"]').length > 0) {
                        templateSelect.val(sessionTemplateId);
                        loadSectionsForTemplate(sessionTemplateId);
                        toggleTemplateNavigation(sessionTemplateId);
                    }
                }
            }
    
            // Tenant selection handler (for super admin)
            $('#tenant-select').on('change', function() {
                var tenantId = $(this).val();
                
                // Update the hidden input field with selected tenant value
                $('#template-tenant').val(tenantId || '{{ session("tenant_id") }}');
                
                if (tenantId) {
                    // Load templates for selected tenant
                    loadTemplatesForTenant(tenantId);
                } else {
                    // Clear template and section dropdowns
                    $('#template-select').html('<option value="">Select Template</option>');
                    $('#section-select').html('<option value="">Select Section</option>').prop('disabled', true);
                    toggleContentDisplay('');
                }

                setTimeout(function() {
                    window.location.reload();
                }, 1000); 
            });
    
            // Function to store template ID in session
            function storeTemplateInSession(templateId) {
                if (templateId) {
                    $.ajax({
                        url: '{{ route("report-templates.set-template") }}',
                        type: 'POST',
                        data: {
                            template_id: templateId,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.status) {
                                console.log('Template stored in session:', templateId);
                            } else {
                                console.error('Error storing template in session:', response.message);
                            }
                        },
                        error: function(xhr) {
                            console.error('Error storing template in session:', xhr);
                        }
                    });
                }
            }
    
            // Template selection handler
            $('#template-select').on('change', function() {
                var templateId = $(this).val();
                var templateName = $(this).find('option:selected').data('template-name');
                
                // Enable/disable template navigation based on template selection
                toggleTemplateNavigation(templateId);
                
                if (templateId) {
                    // Store template ID in session via AJAX
                    $.ajax({
                        url: '{{ route("report-templates.set-template") }}',
                        type: 'POST',
                        data: {
                            template_id: templateId,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.status) {
                                // Load sections for the selected template
                                loadSectionsForTemplate(templateId);
                                
                                // Show success message
                                showNotification('success', 'Template "' + templateName + '" selected successfully');
                                
                                // Reset content display since sections will be reloaded
                                toggleContentDisplay('');
                            } else {
                                showNotification('error', response.message || 'Error selecting template');
                            }
                        },
                        error: function(xhr) {
                            console.error('Error storing template in session:', xhr);
                            showNotification('error', 'Error storing template selection');
                            
                            // Still load sections even if session storage fails
                            loadSectionsForTemplate(templateId);
                            toggleContentDisplay('');
                        }
                    });
                } else {
                    // Clear sections if no template selected
                    $('#section-select').html('<option value="">Select Section</option>').prop('disabled', true);
                    // Hide content when no template is selected
                    toggleContentDisplay('');
                }
            });

            // 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');
                }
            }

            // Load templates for a specific tenant
            function loadTemplatesForTenant(tenantId) {
                $.ajax({
                    url: '{{ route("report-templates.get-templates-by-tenant") }}',
                    type: 'GET',
                    data: {
                        tenant_id: tenantId
                    },
                    success: function(response) {
                        var templateSelect = $('#template-select');
                        templateSelect.html('<option value="">Select Template</option>');
                        
                        if (response.status && response.templates) {
                            $.each(response.templates, function(index, template) {
                                templateSelect.append(
                                    '<option value="' + template.id + '" data-template-name="' + template.name + '">' + 
                                    template.name + 
                                    '</option>'
                                );
                            });
                            
                            // Check if there's a session template_id to select
                            var sessionTemplateId = '{{ session("template_id") }}' || '{{ $current_template_id }}';
                            
                            if (sessionTemplateId && templateSelect.find('option[value="' + sessionTemplateId + '"]').length > 0) {
                                // Select the template from session
                                templateSelect.val(sessionTemplateId);
                                // Store in session (already stored, but ensure consistency)
                                storeTemplateInSession(sessionTemplateId);
                                // Load sections for the selected template
                                loadSectionsForTemplate(sessionTemplateId);
                                // Enable template navigation
                                toggleTemplateNavigation(sessionTemplateId);
                            } else if (response.templates.length > 0) {
                                // Auto-select first template if no session template or session template not found
                                var firstTemplate = response.templates[0];
                                templateSelect.val(firstTemplate.id);
                                // Store in session
                                storeTemplateInSession(firstTemplate.id);
                                // Load sections for the first template
                                loadSectionsForTemplate(firstTemplate.id);
                                // Enable template navigation
                                toggleTemplateNavigation(firstTemplate.id);
                            } else {
                                // No templates available - disable navigation
                                toggleTemplateNavigation('');
                            }
                        } else {
                            templateSelect.html('<option value="">No templates available</option>');
                        }
                        
                        // Clear section dropdown and hide content
                        $('#section-select').html('<option value="">Select Section</option>').prop('disabled', !response.templates || response.templates.length === 0);
                        toggleContentDisplay('');
                    },
                    error: function(xhr) {
                        console.error('Error loading templates:', xhr);
                        $('#template-select').html('<option value="">Error loading templates</option>');
                        $('#section-select').html('<option value="">Select Section</option>').prop('disabled', true);
                        toggleContentDisplay('');
                    }
                });
            }

            // 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 + '" data-section-color="' + section.color_code + '"' + 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('change', '#section_image', function() {
                const file = this.files[0];
                if (file) {
                    // Validate file type
                    if (!file.type.startsWith('image/')) {
                        showNotification('error','Please select a valid image file.');
                        return;
                    }
                    
                    // Validate file size (20MB max)
                    if (file.size > 20 * 1024 * 1024) {
                        showNotification('error','Image size must be less than 20MB.');
                        return;
                    }

                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#banner-preview').attr('src', e.target.result).removeClass('d-none').show();
                        $('.banner-placeholder').hide();
                        $('#banner-upload-area').addClass('has-image');
                    };
                    reader.readAsDataURL(file);
                }
            });

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

                const templateId = $('#template-select').val();
                const tenantId = $('#tenant-select').val() || "{{ session('tenant_id') }}";

                if (!templateId) {
                    showNotification('error', 'Please select a template first');
                    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);
                            if ($.fn.select2) {
                                $('#section_column').select2({
                                    dropdownParent: $('#addSectionModal'),
                                    placeholder: 'Select columns to exclude',
                                    width: '100%'
                                });
                            }
                        } else {
                            modalBody.html('<div class="p-3 text-danger">Failed to load form.</div>');
                        }
                        $('#addSectionModalLabel').text('Add Section');
                        safeShowModal('#addSectionModal');
                    },
                    error: function(){
                        modalBody.html('<div class="p-3 text-danger">Error loading form.</div>');
                        safeShowModal('#addSectionModal');
                    }
                });
            });

            $(document).on('click', '.color_code', function() {
                $('.color_code').removeClass('selected');
                $(this).addClass('selected');
                var colorCode = $(this).data('color_code');
                $('#selected_color_code').val(colorCode);
            });

            $(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);
                            if ($.fn.select2) {
                                $('#section_column').select2({
                                    dropdownParent: $('#addSectionModal'),
                                    width: '100%'
                                });
                            }
                            var existingColor = $('#selected_color_code').val();
                            if(existingColor){
                                $('.color_code[data-color_code="'+existingColor+'"]').addClass('selected');
                            }
                        } 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 colorCode = $('#selected_color_code').val();
                var includeByDefault = $('#checkDefault').is(':checked');
                var section_column = $('#section_column').val();
                var templateId = $('#template-select').val();
                var tenantId = $('#tenant-select').val() || '{{ session("tenant_id") }}';
                var fileInput = $('#section_image')[0];
                var file = fileInput && fileInput.files.length ? fileInput.files[0] : null;
                if (!title) { showNotification('error', 'Please enter a section title'); return; }
                if (!templateId) { showNotification('error', 'Please select a template first'); return; }
                fd.append('title', title);
                if (colorCode) fd.append('color_code', colorCode);
                fd.append('include_by_default', includeByDefault ? 1 : 0);
                fd.append('template_id', templateId);
                fd.append('tenant_id', tenantId);
                if (section_column) {
                    if (Array.isArray(section_column)) {
                        section_column.forEach(function(id){ fd.append('section_column[]', id); });
                    } else {
                        fd.append('section_column', section_column);
                    }
                }
                fd.append('_token', "{{ csrf_token() }}");
                if (file) { fd.append('banner_image', file); }
                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('');
                            $('#selected_color_code').val('');
                            $('.color_code').removeClass('selected');
                            $('#checkDefault').prop('checked', false);
                            $('#section_image').val('');
                            $('#banner-preview').hide().attr('src','');
                            $('#banner-preview').addClass('d-none');
                            $('.banner-placeholder').show();
                            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 functionality
            $('#template-search-btn').on('click', function() {
                safeShowModal('#templateSearchModal');
            });

            $('#template-search-input').on('input', function() {
                var query = $(this).val().trim();
                
                if (query.length >= 2) {
                    searchTemplates(query);
                } else {
                    $('#template-search-results').html('');
                }
            });

            function searchTemplates(query) {
                $.ajax({
                    url: '{{ route("report-templates.search") }}',
                    type: 'GET',
                    data: {
                        q: query
                    },
                    success: function(response) {
                        if (response.status) {
                            var resultsHtml = '';
                            
                            if (response.templates.length > 0) {
                                $.each(response.templates, function(index, template) {
                                    resultsHtml += '<div class="template-search-item p-2 border-bottom cursor-pointer" data-template-id="' + template.id + '">';
                                    resultsHtml += '<h6 class="mb-1">' + template.name + '</h6>';
                                    resultsHtml += '<small class="text-muted">' + (template.description || 'No description') + '</small>';
                                    resultsHtml += '</div>';
                                });
                            } else {
                                resultsHtml = '<div class="text-center p-3 text-muted">No templates found</div>';
                            }
                            
                            $('#template-search-results').html(resultsHtml);
                        }
                    },
                    error: function(xhr) {
                        console.error('Error searching templates:', xhr);
                    }
                });
            }    

            // Handle template search result click
            $(document).on('click', '.template-search-item', function() {
                var templateId = $(this).data('template-id');
                $('#template-select').val(templateId).trigger('change');
                safeHideModal('#templateSearchModal');
            });

            // Add Template Modal functionality
            $('#addTemplateModal').on('show.bs.modal', function() {
                loadTenantsForTemplate();
                
                // For super admin, get tenant from dropdown selection, for regular admin use session
                var selectedTenantId = $('#tenant-select').val() || '{{ session("tenant_id") }}';
                if (selectedTenantId) {
                    $('#template-tenant').val(selectedTenantId);
                    loadServicesForTemplate(selectedTenantId);
                } else {
                loadServicesForTemplate();
                }
            });

            // Tenant selection change handler for Add Template modal
            $('#template-tenant').on('change', function() {
                var tenantId = $(this).val();
                loadServicesForTemplate(tenantId);
            });

            // Load tenants for template (only for super admin)
            function loadTenantsForTemplate() {
                @if(!session('tenant_id'))
                // If tenant_list is already available from controller, use it
                @if(isset($tenant_list))
                var tenantSelect = $('#template-tenant');
                tenantSelect.html('<option value="">Select Tenant</option>');
                
                @foreach($tenant_list as $id => $name)
                tenantSelect.append('<option value="{{ $id }}">{{ $name }}</option>');
                @endforeach
                @else
                // Fallback to AJAX if tenant_list is not available
                $.ajax({
                    url: '{{ route("agreements.get-services-by-tenant") }}', // Use existing route pattern
                    type: 'GET',
                    data: { get_tenants: true }, // Add flag to get tenants instead
                    success: function(response) {
                        if (response.status) {
                            var tenantSelect = $('#template-tenant');
                            tenantSelect.html('<option value="">Select Tenant</option>');
                            
                            $.each(response.tenants, function(index, tenant) {
                                tenantSelect.append(
                                    '<option value="' + tenant.id + '">' + tenant.name + '</option>'
                                );
                            });
                        }
                    },
                    error: function(xhr) {
                        console.error('Error loading tenants:', xhr);
                    }
                });
                @endif
                @endif
            }

            // Load services for template based on tenant
            function loadServicesForTemplate(tenantId = null) {
                // Priority: provided tenantId > tenant dropdown selection > session tenant_id > hidden field value
                var currentTenantId = tenantId || $('#tenant-select').val() || '{{ session("tenant_id") }}' || $('#template-tenant').val();
                
                if (!currentTenantId) {
                    $('#template-services').html('<option value="">Please select a tenant first</option>');
                    return;
                }

                // Update hidden field with current tenant ID
                $('#template-tenant').val(currentTenantId);

                // Show loading state
                $('#template-services').html('<option value="">Loading services...</option>');
                
                console.log('Loading services for tenant ID:', currentTenantId);

                $.ajax({
                    url: '{{ route("agreements.get-services-by-tenant") }}',
                    type: 'GET',
                    data: {
                        tenant_id: currentTenantId
                    },
                    success: function(response) {
                        console.log('Services response:', response);
                        var serviceSelect = $('#template-services');
                        serviceSelect.html('');
                        
                        if (response && typeof response === 'object') {
                            $.each(response, function(id, name) {
                                serviceSelect.append(
                                    '<option value="' + id + '">' + name + '</option>'
                                );
                            });
                            
                            // Initialize or refresh Select2 if available
                            if ($.fn.select2) {
                                serviceSelect.select2({
                                    dropdownParent: $('#addTemplateModal'),
                                    placeholder: 'services...',
                                    allowClear: true,
                                    width: '100%'
                                });
                            }
                        } else {
                            serviceSelect.html('<option value="">No services available</option>');
                        }
                    },
                    error: function(xhr) {
                        console.error('Error loading services:', xhr);
                        console.error('Error details:', xhr.responseText);
                        console.error('Request URL:', '{{ route("agreements.get-services-by-tenant") }}');
                        console.error('Tenant ID sent:', currentTenantId);
                        $('#template-services').html('<option value="">Error loading services</option>');
                    }
                });
            }

            // Save template functionality (placeholder)
            $('#saveTemplateBtn').on('click', function() {
                var formData = {
                    title: $('#template-title').val(),
                    services: $('#template-services').val(),
                    tenant_id: $('#template-tenant').val(),
                    template_type: $('#template-type').val(),
                    structure_type: $('#structure-type').val(),
                    _token: '{{ csrf_token() }}'
                };

                // Debug: Log form data
                console.log('Form data being sent:', formData);

                // Basic validation
                if (!formData.title) {
                    showNotification('error', 'Please enter a template title');
                    return;
                }

                // if (!formData.services || formData.services.length === 0) {
                //     showNotification('error', 'Please select at least one service');
                //     return;
                // }

                if (!formData.tenant_id) {
                    showNotification('error', 'Please select a tenant');
                    return;
                }

                if (!formData.template_type) {
                    showNotification('error', 'Please select a template type');
                    return;
                }

                if (!formData.structure_type) {
                    showNotification('error', 'Please select a structure type');
                    return;
                }

                // Show loading state
                $('#saveTemplateBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-1"></i>Saving...');

                // Save template via AJAX
                $.ajax({
                    url: '{{ route("report-templates.add-template") }}',
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        console.log('Success response:', response);
                        if (response.status) {
                            showNotification('success', response.message);
                            
                            // Force close modal and remove any backdrop
                            safeHideModal('#addTemplateModal');
                            $('.modal-backdrop').remove();
                            $('body').removeClass('modal-open');
                            $('body').css('padding-right', '');
                            
                            $('#addTemplateForm')[0].reset();
                            
                            // Reload template dropdown to include new template
                            if (response.template) {
                                var templateSelect = $('#template-select');
                                templateSelect.append(
                                    '<option value="' + response.template.id + '" data-template-name="' + response.template.name + '">' + 
                                    response.template.name + 
                                    '</option>'
                                );
                                
                                // Set the new template as selected and enable navigation
                                templateSelect.val(response.template.id);
                                // Store in session
                                storeTemplateInSession(response.template.id);
                                toggleTemplateNavigation(response.template.id);
                                
                                // Load sections for the new template
                                loadSectionsForTemplate(response.template.id);

                                toggleContentDisplay('');
                            }
                            
                            // Destroy Select2 instance if it exists and is initialized
                            if ($.fn.select2) {
                                var $templateServices = $('#template-services');
                                if ($templateServices.hasClass('select2-hidden-accessible')) {
                                    $templateServices.select2('destroy');
                                }
                            }
                        } else {
                            showNotification('error', response.message || 'Error creating template');
                        }
                    },
                    error: function(xhr) {
                        console.log('Error response:', xhr);
                        var message = 'Error creating template';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        } else if (xhr.responseText) {
                            try {
                                var errorResponse = JSON.parse(xhr.responseText);
                                message = errorResponse.message || message;
                            } catch (e) {
                                console.log('Could not parse error response');
                            }
                        }
                        
                        // Force close modal and remove any backdrop on error too
                        $('.modal-backdrop').remove();
                        $('body').removeClass('modal-open');
                        $('body').css('padding-right', '');
                        
                        showNotification('error', message);
                    },
                    complete: function() {
                        $('#saveTemplateBtn').prop('disabled', false).html('SAVE');
                    }
                });
            });

            // Reset form when modal is hidden
            $('#addTemplateModal').on('hidden.bs.modal', function() {
                $('#addTemplateForm')[0].reset();
                
                // Destroy Select2 instance if it exists and is initialized
                if ($.fn.select2) {
                    var $templateServices = $('#template-services');
                    if ($templateServices.hasClass('select2-hidden-accessible')) {
                        $templateServices.select2('destroy');
                    }
                }
            });

            // Initialize Select2 for better dropdown styling
            if ($.fn.select2) {
                $('#template-select, #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 current template selection
            var currentTemplateId = $('#template-select').val();
            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 Template Modal exists:', $('#addTemplateModal').length);
            console.log('Add Section Modal exists:', $('#addSectionModal').length);
            console.log('Bootstrap version:', typeof bootstrap !== 'undefined' ? bootstrap : 'Bootstrap not loaded');
            
            // Manual event handlers as fallback
            $('[data-bs-target="#addTemplateModal"]').on('click', function(e) {
                e.preventDefault();
                console.log('Add Template button clicked');
                safeShowModal('#addTemplateModal');
            });
            
            // 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