@extends('admin.layouts.layout')

@section('content')
<div class="mb-4">    
    <div class="servicestitle">
        <h3>{{ $module }}</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 evaluation types by name, description, or short name..." id="search-input">
                <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" style="display: none; margin-left: 5px;">
                    <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('services.create') }}" class="add_btn btn">
                    <img src="{{ asset('images/add_service.svg') }}"> Add Evaluation Type
                </a>
                @endif
                @if($permission['destroy'])
                <a href="javascript:void(0);" class="delete_btn btn" id="delete-selected">
                    <img src="{{ asset('images/delete_multiple.svg') }}"> Delete Selected
                </a>     
                @endif 
            </div>
        </div>
    </div>

    {{-- Filters Section - Hidden (simplified form) --}}
    
    <div class="service_contentarea">
        <div class="table-responsive">
            <table class="table service_table" id="sortable-services">
                <thead>
                    <tr>
                        <th width="30">
                            <input type="checkbox" class="form-check-input" id="select-all" title="Select All">
                        </th>
                        <th width="50">{{ __('Sort') }}</th>
                        <th>{{ __('Tenant') }}</th>
                        <th>{{ __('Evaluation Type Name') }}</th>
                        <th>{{ __('Short Name') }}</th>
                        <th>{{ __('Description') }}</th>
                        <th>{{ __('Duration') }}</th>
                        <th>{{ __('Sort Order') }}</th>       
                        @if($permission['edit'] || $permission['destroy'])                    
                        <th>{{ __('Action') }}</th>
                        @endif
                    </tr>
                </thead>                
                <tbody>
                    @forelse($data ?? [] as $row)
                    <tr class="service-row" data-service-id="{{ $row->id }}" data-tenant-id="{{ $row->tenant_id }}" data-sort-order="{{ $row->sort_order ?? 0 }}">
                        <td width="30">
                            <input type="checkbox" class="form-check-input service-checkbox" value="{{ $row->id }}">
                        </td>
                        <td width="50">
                            <div class="drag-handle" title="Drag to reorder">
                                <img src="{{ asset('images/table_menue.svg') }}" alt="Drag" class="drag-icon">
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-primary">{{ $row->tenant->name ?? 'N/A' }}</span>
                        </td>
                        <td>
                            <strong>{{ $row->service_name }}</strong>
                        </td>
                        <td>
                            {{ $row->short_name_of_service ?? '-' }}
                        </td>
                        <td>
                            {{ Str::limit($row->description, 50) ?? '-' }}
                        </td>
                        <td>
                            {{ $row->duration ?? 0 }} min
                        </td>
                        <td>
                            <input type="number" class="form-control form-control-sm w-75 sort-order-input" 
                                   value="{{ $row->sort_order ?? 0 }}" 
                                   min="0" 
                                   data-id="{{ $row->id }}" readonly />
                        </td>  
                        @if($permission['edit'] || $permission['destroy'])                      
                        <td>
                            <div class="d-flex gap-2">
                                @if($permission['edit'])
                                <a href="{{ route($routePrefix . '.edit', [$row->id]) }}" class="me-4" data-toggle="tooltip" title="Edit" data-original-title="Edit"><img src="{{ asset('images/edit.svg') }}"></a>
                                @endif
                                @if($permission['destroy'])
                                <a class="me-4" data-toggle="tooltip" title="" 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-{{$row->id}}').submit();" data-original-title="Delete"><img src="{{ asset('images/delete_black.svg') }}"></a>
                                {!! html()->form('DELETE', route(
                                    $routePrefix . '.destroy',
                                    [$row->id]
                                    ))->attributes([
                                    'style' => 'display:inline',
                                    'id'    => 'delete-form-' . $row->id  
                                ])->open() !!}
                                {!! html()->form()->close() !!}
                                @endif
                            </div>
                        </td>
                        @endif
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-4">
                            <div class="text-muted">
                                <i class="fas fa-inbox fa-2x mb-2"></i>
                                <p>{{ __('No Evaluation Types Found') }}</p>                                
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if(isset($data) && method_exists($data, 'links'))
        <div class="pagination pagination-rounded justify-content-end mb-0 mt-2">
            {{ $data->links() }}
        </div>
        @endif
    </div>
                
</div>
@endsection

@push('page_script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
<script src="{{ asset('assets/js/service-sorting.js') }}"></script>
<script>
console.log('Service sorting script loaded');
console.log('CSRF Token:', window._token);
console.log('Sortable library:', typeof Sortable);
</script>
<script>
$(document).ready(function() {    

    // Select all functionality
    $('#select-all').change(function() {
        $('.service-checkbox').prop('checked', $(this).is(':checked'));
    });

    // Search functionality
    var searchTimeout;
    $('#search-input').on('keyup', function() {
        var searchQuery = $(this).val().trim();
        
        // Clear previous timeout
        clearTimeout(searchTimeout);
        
        // Set new timeout for 300ms delay
        searchTimeout = setTimeout(function() {
            if (searchQuery.length >= 2 || searchQuery.length === 0) {
                performSearch(searchQuery);
            }
        }, 300);
    });

    // Search button click handler
    $('#search-btn').click(function() {
        var searchQuery = $('#search-input').val().trim();
        if (searchQuery.length >= 2) {
            performSearch(searchQuery);
        } else if (searchQuery.length === 1) {
            showAlert('Please enter at least 2 characters to search.', 'warning');
        }
    });

    // Enter key handler for search input
    $('#search-input').on('keypress', function(e) {
        if (e.which === 13) { // Enter key
            var searchQuery = $(this).val().trim();
            if (searchQuery.length >= 2) {
                performSearch(searchQuery);
            } else if (searchQuery.length === 1) {
                showAlert('Please enter at least 2 characters to search.', 'warning');
            }
        }
    });    

    $(document).on('click', '#clear-search, #dynamic-clear-search', function() {
        clearSearch();
    });

    // Function to clear search
    function clearSearch() {
        $('#search-input').val('');
        $('#clear-search').hide();
        showAlert('Search cleared. Showing all evaluation types.', 'info');
        location.reload();
    }

    // Function to perform search
    function performSearch(query) {
        if (query.length === 0) {
            // If search is empty, reload the page to show all services
            location.reload();
            return;
        }

        // Show loading state
        $('#search-btn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
        $('#search-loading').show();
        
        $.ajax({
            url: '{{ route("services.search") }}',
            method: 'GET',
            data: {
                q: query
            },
            success: function(response) {
                if (response.status) {
                    updateServiceTable(response.data, query);
                    $('#clear-search').show();
                } else {
                    showAlert(response.message || 'Search failed', 'error');
                }
            },
            error: function(xhr) {
                console.error('Search error:', xhr.responseText);
                showAlert('Search failed. Please try again.', 'error');
            },
            complete: function() {
                // Reset button state
                $('#search-btn').prop('disabled', false).html('<img src="{{ asset("images/search_w.svg") }}" alt="Search Icon">');
                $('#search-loading').hide();
            }
        });
    }

    // Function to update service table with search results
    function updateServiceTable(services, searchQuery) {
        var tbody = $('#sortable-services tbody');
        tbody.empty();

        if (services.length === 0) {
            tbody.append(`
                <tr>
                    <td colspan="9" class="text-center py-4">
                        <div class="text-muted">
                            <i class="fas fa-search fa-2x mb-2"></i>
                            <p>No Evaluation Types Found matching "${searchQuery}".</p>
                            <small>Try different keywords or check spelling.</small>
                        </div>
                    </td>
                </tr>
            `);
            return;
        }

        // Add search results header
        tbody.append(`
            <tr class="search-results-header">
                <td colspan="9" class="bg-light">
                    <div class="d-flex justify-content-between align-items-center p-2">
                        <span class="text-muted">
                            <i class="fas fa-search"></i> 
                            Found ${services.length} evaluation type${services.length !== 1 ? 's' : ''} matching "${searchQuery}"
                        </span>
                        <button class="btn btn-sm btn-outline-secondary" id="dynamic-clear-search">
                            <i class="fas fa-times"></i> Clear Search
                        </button>
                    </div>
                </td>
            </tr>
        `);

        services.forEach(function(service, index) {
            var serviceRow = createServiceRow(service, index);
            tbody.append(serviceRow);
        });

        // Reinitialize sortable after updating table
        if (typeof ServiceSorting !== 'undefined' && ServiceSorting.initializeSortable) {
            ServiceSorting.initializeSortable();
        }
    }

    // Function to create service row HTML
    function createServiceRow(service, index) {
        // Truncate description to 50 characters
        var description = service.description || '-';
        if (description.length > 50) {
            description = description.substring(0, 50) + '...';
        }
        
        // Get tenant name
        var tenantName = service.tenant ? service.tenant.name : 'N/A';

        return `
            <tr class="service-row" data-service-id="${service.id}" data-tenant-id="${service.tenant_id}" data-sort-order="${service.sort_order || 0}">
                <td width="30">
                    <input type="checkbox" class="form-check-input service-checkbox" value="${service.id}">
                </td>
                <td width="50">
                    <div class="drag-handle" title="Drag to reorder">
                        <img src="{{ asset('images/table_menue.svg') }}" alt="Drag" class="drag-icon">
                    </div>
                </td>
                <td>
                    <span class="badge bg-primary">${tenantName}</span>
                </td>
                <td>
                    <strong>${service.service_name}</strong>
                </td>
                <td>
                    ${service.short_name_of_service || '-'}
                </td>
                <td>
                    ${description}
                </td>
                <td>
                    ${service.duration || 0} min
                </td>
                <td>
                    <input type="number" class="form-control form-control-sm w-75 sort-order-input" 
                           value="${service.sort_order || 0}" 
                           min="0" 
                           data-id="${service.id}" readonly />
                </td>
                <td>
                    <div class="d-flex gap-2">
                        @if($permission['edit'])
                        <a href="{{ route('services.edit', '') }}/${service.id}" class="me-4" data-toggle="tooltip" title="Edit" data-original-title="Edit">
                            <img src="{{ asset('images/edit.svg') }}">
                        </a>
                        @endif
                        @if($permission['destroy'])
                        <a class="me-4" data-toggle="tooltip" title="" 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-${service.id}').submit();" data-original-title="Delete">
                            <img src="{{ asset('images/delete_black.svg') }}">
                        </a>
                        {!! html()->form('DELETE', route('services.destroy', ''))->attributes(['style' => 'display:inline', 'id' => 'delete-form-${service.id}'])->open() !!}
                        {!! html()->form()->close() !!}
                        @endif
                    </div>
                </td>
            </tr>
        `;
    }    

    // Delete multiple
    $('#delete-selected').click(function() {
        var checkedServices = $('.service-checkbox:checked');
        
        if (checkedServices.length === 0) {
            showAlert('{{ __("Please select evaluation types to delete") }}', 'warning');
            return;
        }

        // Use SweetAlert2 confirmation like single delete
        Swal.fire({
            title: 'Are You Sure?',
            text: `This action can not be undone. Do you want to continue deleting ${checkedServices.length} selected evaluation type(s)?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, Sure!',
            showClass: {
                popup: 'animate__animated animate__fadeInDown'
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                var ids = [];
                checkedServices.each(function() {
                    ids.push($(this).val());
                });
                
                $.ajax({
                    url: '{{ route("services.delete-multiple") }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        ids: ids
                    },
                    success: function(response) {
                        if (response.status) {
                            showAlert('Evaluation type order updated successfully', 'success');
                            location.reload();
                        } else {
                            showAlert(response.message || '{{ __("Error deleting evaluation types") }}', 'error');
                        }
                    },
                    error: function(xhr) {
                        var message = xhr.responseJSON ? xhr.responseJSON.message : '{{ __("Error deleting evaluation types") }}';
                        showAlert(message, 'error');
                    }
                });
            }
        });
    });

    // Helper function to show alerts
    function showAlert(message, type) {
        if (type === 'success') {
            showNotification('success', message);
        } else if (type === 'error') {
            showNotification('error', message);
        } else if (type === 'warning') {
            showNotification('warning', message);
        } else {
            showNotification('info', message);
        }
    }
});
</script>
@endpush