@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 services 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 Service
                </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           
                <a href="javascript:void(0);" class="filter_btn btn w-auto show-panel" data-id="filter-panel" title="Filter Services">
                    <img src="{{ asset('images/filter.svg') }}">
                </a> 
            </div>
        </div>
    </div>

    <!-- Filters Section -->
    <div class="filter-section" id="filter-panel" style="display: {{ request()->get('filter') ? 'block' : 'none' }};">
        <div class="card">
            <div class="card-body">
                <form id="filter-form" method="GET" action="{{ route('services.index') }}">
                <input type="hidden" name="filter" value="true">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="service_type" class="form-label">Service Type</label>
                            <select name="service_type" id="service_type" class="form-select">
                                <option value="">All Types</option>
                                @foreach($filters['service_types'] ?? [] as $key => $value)
                                    <option value="{{ $key }}" {{ request('service_type') == $key ? 'selected' : '' }}>
                                        {{ $value }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="fee_type" class="form-label">Fee Type</label>
                            <select name="fee_type" id="fee_type" class="form-select">
                                <option value="">All Fee Types</option>
                                @foreach($filters['fee_types'] ?? [] as $key => $value)
                                    <option value="{{ $key }}" {{ request('fee_type') == $key ? 'selected' : '' }}>
                                        {{ $value }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="col-md-3 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary me-2">Apply Filters</button>
                            <a href="{{ route('services.index') }}" class="btn btn-default waves-effect">Clear</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <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 Services">
                        </th>
                        <th width="50">{{ __('Sort') }}</th>
                        <th>{{ __('Service Name') }}</th>
                        <th>{{ __('Service Type') }}</th>
                        <th>{{ __('Fee Type') }}</th>
                        <th>{{ __('Base Fee') }}</th>
                        <th>{{ __('Duration') }}</th>
                        <th>{{ __('Language') }}</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-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>
                            <div class="d-flex flex-column">
                                <strong>
                                    <a href="{{ route('services.show', $row->id) }}" class="text-decoration-none">
                                        {{ $row->service_name }}
                                    </a>
                                </strong>
                                @if($row->short_name_of_service)
                                    <small class="text-muted">{{ $row->short_name_of_service }}</small>
                                @endif
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-{{ $row->service_type == 'Residential' ? 'primary' : ($row->service_type == 'Sewer' ? 'success' : 'info') }}">
                                {{ ucfirst($row->service_type) }}
                            </span>
                        </td>
                        <td>
                            <span class="badge bg-secondary">
                                {{ ucfirst(str_replace('_', ' ', $row->fee_type)) }}
                            </span>
                        </td>
                        <td>
                            @if($row->fee_type == 'Fixed')
                                {{ \App\Helpers\Helper::price($row->fee ?? 0) }}                                           
                            @elseif($row->fee_type == 'Variable')
                                {{ \App\Helpers\Helper::price($row->base_fee ?? 0) }} + {{ \App\Helpers\Helper::price($row->fee_per_sqft ?? 0) }}/sqft
                            @else
                                {{ \App\Helpers\Helper::price($row->base_fee ?? 0) }}
                            @endif
                        </td>
                        <td>
                            @if($row->duration)
                                {{ $row->duration }} Minute{{ $row->duration > 1 ? 's' : '' }}
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td>
                            @if($row->language)
                                <span class="badge bg-info">{{ $row->language->name }}</span>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </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'] || $permission['show'])                      
                        <td>
                            <div class="d-flex gap-2">                      
                                @if($permission['show'])
                                <a href="{{ route('services.show', $row->id) }}" class="me-2" title="View Service">
                                    <img src="{{ asset('images/view.svg') }}">
                                </a>
                                @endif
                                @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="10" class="text-center py-4">
                            <div class="text-muted">
                                <i class="fas fa-inbox fa-2x mb-2"></i>
                                <p>{{ __('No Services 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 services.', '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 Services 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} service${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) {
        var serviceTypeClass = service.service_type === 'Residential' ? 'primary' : 
                              (service.service_type === 'Sewer' ? 'success' : 'info');
        
        var feeDisplay = '';
        if (service.fee_type === 'Fixed') {
            feeDisplay = '$' + parseFloat(service.fee || 0).toFixed(2);
        } else if (service.fee_type === 'Variable') {
            feeDisplay = '$' + parseFloat(service.base_fee || 0).toFixed(2) + ' + $' + parseFloat(service.fee_per_sqft || 0).toFixed(2) + '/sqft';
        } else {
            feeDisplay = '$' + parseFloat(service.base_fee || 0).toFixed(2);
        }

        var durationDisplay = service.duration ? 
            service.duration + ' hour' + (service.duration > 1 ? 's' : '') : 
            '<span class="text-muted">-</span>';

        return `
            <tr class="service-row" data-service-id="${service.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>
                    <div class="d-flex flex-column">
                        <strong>${service.service_name}</strong>
                        ${service.short_name_of_service ? '<small class="text-muted">' + service.short_name_of_service + '</small>' : ''}
                    </div>
                </td>
                <td>
                    <span class="badge bg-${serviceTypeClass}">
                        ${service.service_type}
                    </span>
                </td>
                <td>
                    <span class="badge bg-secondary">
                        ${service.fee_type.replace('_', ' ')}
                    </span>
                </td>
                <td>${feeDisplay}</td>
                <td>${durationDisplay}</td>
                <td>
                    ${service.language ? '<span class="badge bg-info">' + service.language.name + '</span>' : '<span class="text-muted">-</span>'}
                </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['show'])
                        <a href="{{ route('services.show', '') }}/${service.id}" class="me-2" title="View Service">
                            <img src="{{ asset('images/view.svg') }}">
                        </a>
                        @endif
                        @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 services 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 service(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('Service order updated successfully', 'success');
                            location.reload();
                        } else {
                            showAlert(response.message || '{{ __("Error deleting services") }}', 'error');
                        }
                    },
                    error: function(xhr) {
                        var message = xhr.responseJSON ? xhr.responseJSON.message : '{{ __("Error deleting services") }}';
                        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