@extends('admin.layouts.layout')

@section('content')
<div class="mb-4">    
    <div class="servicestitle">
        <h3>Report Template Management</h3>
        <div class="services_searchbtn d-flex align-items-center gap-2 ms-auto">
            <div class="search_box">
                <input type="text" class="form-control" placeholder="Search templates..." id="live-search-input" value="{{ request('search_query') }}">
                <button class="btn btn_search" id="search-btn">
                    <img src="{{ asset('images/search_w.svg') }}" alt="Search Icon">
                </button>
                <button class="btn btn-clear-search" id="clear-search" @if(!request('search_query')) style="display: none; margin-left: 5px;" @else style="margin-left: 5px;" @endif>
                    <i class="fas fa-times"></i> Clear
                </button>
                <div class="search-loading" id="search-loading" style="display: none; margin-left: 10px;">
                    <i class="fas fa-spinner fa-spin text-primary"></i>
                    <small class="text-muted ms-1">Searching...</small>
                </div>
            </div>
            <div class="contact_btns">
                @if($permission['create'])
                <a href="{{ route('report-templates.master-templates.create') }}" class="add_btn btn">
                    <img src="{{ asset('images/template.svg') }}"> Add Template
                </a>                
                @endif
                @if($permission['destroy'])
                <a href="javascript:void(0);" class="delete_btn btn" id="delete-selected" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="multipleTemplateDelete()">
                    <img src="{{ asset('images/delete_multiple.svg') }}"> Delete Multiple
                </a>                
                @endif
            </div>
        </div>
    </div>

    <div class="service_contentarea">
        <div class="table-responsive">
            <table class="table service_table" id="template-table">
                <thead>
                    <tr>
                        <th width="30">
                            <input type="checkbox" class="form-check-input" id="select-all-templates" title="Select All Templates">
                        </th>
                        <th>Template Name</th>
                        <th>Services</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                    <tbody>
                        @if(isset($data) && count($data) > 0)
                            @foreach($data as $template)
                                <tr>
                                    <td width="50">
                                        <input type="checkbox" class="form-check-input template-checkbox" value="{{ $template->id }}" id="template-{{ $template->id }}">
                                    </td>
                                    <td>
                                        <strong>{{ $template->name }}</strong>
                                    </td>
                                    <td>
                                        @if($template->templateServices->count() > 0)
                                            @php
                                                $serviceNames = $template->templateServices->map(function($templateService) {
                                                    return $templateService->service ? $templateService->service->service_name : 'Unknown Service';
                                                })->filter()->toArray();
                                            @endphp
                                            @if(count($serviceNames) > 0)
                                                <span class="text-dark">{{ implode(', ', $serviceNames) }}</span>
                                            @else
                                                <span class="text-muted">No services</span>
                                            @endif
                                        @else
                                            <span class="text-muted">No services</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="d-flex gap-1">
                        
                                            @if($permission['edit'])
                                            <a href="{{ route('report-templates.master-templates.edit', $template->id) }}" class="me-2" title="Edit">
                                                <img src="{{ asset('images/edit.svg') }}">
                                            </a>
                                            @endif
                                            @if($permission['destroy'])
                                            <a class="me-4" title="Delete"
                                               data-confirm="Are You Sure?|This action can not be undone. Do you want to continue." 
                                               data-confirm-yes="event.preventDefault(); document.getElementById('delete-form-{{$template->id}}').submit();">
                                                <img src="{{ asset('images/delete_black.svg') }}">
                                            </a>
                                            {!! html()->form('DELETE', route('report-templates.master-templates.destroy', $template->id))->attributes([
                                                'style' => 'display:inline',
                                                'id'    => 'delete-form-' . $template->id  
                                                ])->open() !!}
                                            {!! html()->form()->close() !!}
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="4" class="text-center py-5">
                                    <div class="text-muted">
                                        <i class="fas fa-folder-open fa-3x mb-3" style="color: #dee2e6;"></i>
                                        <h5>No templates found</h5>
                                        <p>Create your first template to get started</p>
                                        @if($permission['create'])
                                        <a href="{{ route('report-templates.master-templates.create') }}" class="btn btn-sm" style="background: linear-gradient(135deg, #B8860B, #CD853F); color: white;">
                                            <img src="{{ asset('images/add.svg') }}" style="filter: brightness(0) invert(1);" /> Add First Template
                                        </a>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Hidden Forms -->
    <form id="multiple-delete-form" action="{{ route('report-templates.master-templates.delete-multiple') }}" method="POST" style="display: none;">
        @csrf
        <input type="hidden" name="selected_ids" id="selected-ids-input">
    </form>
</div>

<div class="pagination-container">
    @if(isset($data) && $data instanceof \Illuminate\Pagination\LengthAwarePaginator && $data->hasPages())
    <div class="card-footer">
        <div class="row">
            <div class="col-lg-12">
                <div class="d-flex">
                    <div class="flex-shrink-0 align-self-center me-3">
                        {{ $data->appends(request()->input())->links() }}
                    </div>
                    <div class="flex-grow-1 text-right">
                        Total records: {{ $data->total() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection

@push('page_script')
<script>
$(document).ready(function() {
    const selectAllCheckbox = $('#select-all-templates');
    const templateCheckboxes = $('.template-checkbox');
    const deleteSelectedButton = $('#delete-selected');
    const multipleDeleteForm = $('#multiple-delete-form');
    const selectedIdsInput = $('#selected-ids-input');
    const liveSearchInput = $('#live-search-input');
    const clearSearchBtn = $('#clear-search');
    const templateTable = $('#template-table');
    const paginationElement = $('.pagination-container');
    
    // Function to update delete button state
    function updateDeleteButtonState() {
        const checkedCount = $('.template-checkbox:checked').length;
        if (checkedCount > 0) {
            deleteSelectedButton.addClass('active');
        } else {
            deleteSelectedButton.removeClass('active');
        }
    }
    
    // Handle select all checkbox
    selectAllCheckbox.on('change', function() {
        const isChecked = $(this).prop('checked');
        templateCheckboxes.prop('checked', isChecked);
        updateDeleteButtonState();
    });
    
    // Handle individual checkboxes
    templateCheckboxes.on('change', function() {
        updateDeleteButtonState();
        
        // If any checkbox is unchecked, uncheck the "select all" checkbox
        if (!$(this).prop('checked')) {
            selectAllCheckbox.prop('checked', false);
        } else if ($('.template-checkbox:checked').length === $('.template-checkbox').length) {
            // If all checkboxes are checked, check the "select all" checkbox
            selectAllCheckbox.prop('checked', true);
        }
    });
    
    // Client-side filter function for immediate feedback
    function filterTableRowsLocal(searchTerm) {
        searchTerm = searchTerm.toLowerCase();
        let matchCount = 0;
        
        // Always remove any existing "no results" row first
        templateTable.find('tbody tr.no-results').remove();
        
        // Show all rows first if search is empty
        if (searchTerm === '') {
            templateTable.find('tbody tr').show();
            clearSearchBtn.hide();
            // Show pagination when search is cleared
            paginationElement.show();
            return;
        }
        
        clearSearchBtn.show();
        // Hide pagination when filtering
        paginationElement.hide();
        
        // Hide/show rows based on search term
        templateTable.find('tbody tr').each(function() {
            const row = $(this);
            // Skip any "no data" rows (initial empty state)
            if (row.find('td[colspan]').length > 0 && !row.hasClass('no-results')) {
                row.hide();
                return;
            }
            
            const name = row.find('td:nth-child(2)').text().toLowerCase();
            const services = row.find('td:nth-child(3)').text().toLowerCase();
            const type = row.find('td:nth-child(4)').text().toLowerCase();
            const structure = row.find('td:nth-child(5)').text().toLowerCase();
            const status = row.find('td:nth-child(6)').text().toLowerCase();
            
            if (name.includes(searchTerm) || 
                services.includes(searchTerm) || 
                type.includes(searchTerm) || 
                structure.includes(searchTerm) || 
                status.includes(searchTerm)) {
                row.show();
                matchCount++;
            } else {
                row.hide();
            }
        });
        
        // Show "no results" message if no matches and search term isn't empty
        if (matchCount === 0 && searchTerm.length > 0) {
            templateTable.find('tbody').append(`
                <tr class="no-results">
                    <td colspan="7" class="text-center py-4">
                        <div class="text-muted">
                            <i class="fas fa-search fa-2x mb-2"></i>
                            <p>No templates found matching "${searchTerm}"</p>
                        </div>
                    </td>
                </tr>
            `);
        }
    }
    
    // Function to perform AJAX search
    let searchTimer;
    function filterTableRows(searchTerm) {
        // First immediately apply local filtering for responsiveness
        filterTableRowsLocal(searchTerm);
        
        // Clear any existing timers to prevent multiple requests
        clearTimeout(searchTimer);
        
        // Only make AJAX request if search term is not empty and has at least 2 characters
        if (searchTerm.length >= 2) {
            // Set a small delay to prevent too many requests while typing
            searchTimer = setTimeout(function() {
                $.ajax({
                    url: '{{ route("report-templates.master-templates.search") }}',
                    method: 'GET',
                    data: {
                        search_query: searchTerm
                    },
                    beforeSend: function() {
                        // Show loading indicator if needed
                    },
                    success: function(response) {
                        // Handle successful response
                        if (response.status === 200 && response.data) {
                            // If the search term is still the same (user hasn't changed it)
                            if (liveSearchInput.val().toLowerCase() === searchTerm.toLowerCase()) {
                                // Keep pagination hidden for search results
                                paginationElement.hide();
                                // Update the table with new data if needed
                            }
                        }
                    },
                    error: function(xhr) {
                        console.error('Search request failed', xhr);
                    },
                    complete: function() {
                        // Hide loading indicator if needed
                    }
                });
            }, 300); // 300ms delay
        }
    }
    
    // Event handler for search input
    liveSearchInput.on('input', function() {
        filterTableRows($(this).val());
    });
    
    // Clear search button
    clearSearchBtn.on('click', function() {
        liveSearchInput.val('');
        // Remove any "no results" row
        templateTable.find('tbody tr.no-results').remove();
        filterTableRows('');
        // Show pagination when clearing search
        paginationElement.show();
    });
    
    // Initialize search if there's a value (from URL parameter)
    if (liveSearchInput.val()) {
        filterTableRows(liveSearchInput.val());
    }
    
    // Check if delete button should be active
    updateDeleteButtonState();
    
    // Add click handler for delete button to check if any templates are selected
    deleteSelectedButton.on('click', function(e) {
        if (!$(this).hasClass('active')) {
            e.preventDefault();
            e.stopPropagation();
            showNotification('warning', 'Please select at least one template to delete.');
            return false;
        }
    });
    
    // Function to handle multiple delete
    window.multipleTemplateDelete = function() {
        if (!deleteSelectedButton.hasClass('active')) {
            showNotification('warning', 'Please select at least one template to delete.');
            return;
        }
        
        const selectedIds = [];
        $('.template-checkbox:checked').each(function() {
            selectedIds.push($(this).val());
        });
        
        if (selectedIds.length === 0) {
            showNotification('warning', 'Please select at least one template to delete.');
            return;
        }
        
        selectedIdsInput.val(JSON.stringify(selectedIds));
        multipleDeleteForm.submit();
    };
});
</script>
@endpush