@extends('admin.layouts.layout')

@section('title', 'Taxes Management')

@section('content')
<div class="mb-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div class="d-flex gap-2">
            <div class="input-group" style="width: 300px;">
                <input type="text" class="form-control" id="search-input" placeholder="Search taxes...">
                <button class="btn btn-outline-secondary" type="button" id="search-btn">
                    <i class="fas fa-search"></i>
                </button>
            </div>
            <button class="btn btn-outline-secondary" type="button" id="clear-search" style="display: none;">
                <i class="fas fa-times"></i> Clear
            </button>
        </div>
        
        <div class="d-flex gap-2">
            @if($permission['create'] ?? true)
            <a href="{{ route('taxes.create') }}" class="btn btn-success">
                <i class="fas fa-plus"></i> Add Tax
            </a>
            @endif
            @if($permission['destroy'] ?? true)
            <button type="button" class="btn btn-danger" id="delete-selected" disabled>
                <i class="fas fa-trash"></i> Delete Multiple
            </button>
            @endif
        </div>
    </div>

    <!-- Filters -->
    <div class="card mb-3">
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <label for="service-filter" class="form-label">Filter by Service</label>
                    <select class="form-select" id="service-filter">
                        <option value="">All Services</option>
                        @foreach($filters['services'] ?? [] as $id => $name)
                            <option value="{{ $id }}">{{ $name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="type-filter" class="form-label">Filter by Type</label>
                    <select class="form-select" id="type-filter">
                        <option value="">All Types</option>
                        @foreach($filters['tax_types'] ?? [] as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="status-filter" class="form-label">Filter by Status</label>
                    <select class="form-select" id="status-filter">
                        <option value="">All Status</option>
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <button type="button" class="btn btn-primary" id="apply-filters">
                        <i class="fas fa-filter"></i> Apply Filters
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="service_contentarea">
        <div class="table-responsive">
            <table class="table service_table" id="taxes-table">
                <thead>
                    <tr>
                        <th width="30">
                            <input type="checkbox" class="form-check-input" id="select-all">
                        </th>
                        <th>Tax Title</th>
                        <th>Tax Type</th>
                        <th>Tax Rate</th>
                        <th>Service</th>
                        <th>Status</th>
                        <th>Sort Order</th>
                        @if($permission['edit'] || $permission['destroy'] || $permission['show'])
                        <th class="text-right">Action</th>
                        @endif
                    </tr>
                </thead>
                <tbody id="sortable-taxes">
                    @if(isset($data) && $data->count() > 0)
                        @foreach($data as $tax)
                        <tr class="tax-row" data-tax-id="{{ $tax->id }}">
                            <td width="30">
                                <input type="checkbox" class="form-check-input tax-checkbox" value="{{ $tax->id }}">
                            </td>
                            <td>
                                <strong>{{ $tax->title }}</strong>
                            </td>
                            <td>
                                <span class="badge bg-info">{{ $tax->tax_type }}</span>
                            </td>
                            <td>
                                <strong>{{ $tax->formatted_tax_rate }}</strong>
                            </td>
                            <td>
                                @if($tax->service)
                                    <span class="text-muted">{{ $tax->service->service_name }}</span>
                                @else
                                    <span class="text-muted">All Services</span>
                                @endif
                            </td>
                            <td>
                                {!! $tax->status_badge !!}
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-grip-vertical drag-handle me-2 text-muted" style="cursor: move;" title="Drag to reorder"></i>
                                    <input type="number" class="form-control form-control-sm w-75 sort-order-input" 
                                           value="{{ $tax->sort_order ?? 0 }}" 
                                           min="0" 
                                           data-id="{{ $tax->id }}" readonly />
                                </div>
                            </td>
                            @if($permission['edit'] || $permission['destroy'] || $permission['show'])
                            <td class="text-right">
                                @if($permission['show'] ?? true)
                                <a href="{{ route('taxes.show', $tax->id) }}" class="btn btn-sm btn-outline-primary me-2" title="View Tax">
                                    <i class="fas fa-eye"></i>
                                </a>
                                @endif
                                @if($permission['edit'] ?? true)
                                <a href="{{ route('taxes.edit', $tax->id) }}" class="btn btn-sm btn-outline-warning me-2" title="Edit Tax">
                                    <i class="fas fa-edit"></i>
                                </a>
                                @endif
                                @if($permission['destroy'] ?? true)
                                <a href="#" class="btn btn-sm btn-outline-danger" title="Delete Tax"
                                   onclick="deleteTax({{ $tax->id }}, '{{ $tax->title }}')">
                                    <i class="fas fa-trash"></i>
                                </a>
                                @endif
                            </td>
                            @endif
                        </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="8" class="text-center py-4">
                                <div class="text-muted">
                                    <i class="fas fa-receipt fa-2x mb-2"></i>
                                    <p>No taxes found</p>
                                    @if($permission['create'] ?? true)
                                    <a href="{{ route('taxes.create') }}" class="btn btn-primary">
                                        <i class="fas fa-plus"></i> Add First Tax
                                    </a>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>

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

@push('page_script')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize sortable functionality
    if (typeof Sortable !== 'undefined') {
        initializeSortable();
    }

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

    $('.tax-checkbox').change(function() {
        updateDeleteButtonState();
        
        // Update select all checkbox state
        const totalCheckboxes = $('.tax-checkbox').length;
        const checkedCheckboxes = $('.tax-checkbox:checked').length;
        $('#select-all').prop('checked', totalCheckboxes === checkedCheckboxes);
    });

    function updateDeleteButtonState() {
        const checkedBoxes = $('.tax-checkbox:checked').length;
        $('#delete-selected').prop('disabled', checkedBoxes === 0);
        
        if (checkedBoxes > 0) {
            $('#delete-selected').removeClass('btn-secondary').addClass('btn-danger');
        } else {
            $('#delete-selected').removeClass('btn-danger').addClass('btn-secondary');
        }
    }

    // Bulk delete functionality
    $('#delete-selected').click(function() {
        const selectedIds = [];
        $('.tax-checkbox:checked').each(function() {
            selectedIds.push($(this).val());
        });

        if (selectedIds.length === 0) {
            alert('Please select at least one tax to delete.');
            return;
        }

        if (confirm(`Are you sure you want to delete ${selectedIds.length} selected tax(es)?`)) {
            $.ajax({
                url: '{{ route("taxes.delete-multiple") }}',
                method: 'POST',
                data: {
                    ids: selectedIds,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.status) {
                        location.reload();
                    } else {
                        alert('Error: ' + response.message);
                    }
                },
                error: function(xhr) {
                    alert('Error deleting taxes. Please try again.');
                }
            });
        }
    });

    // Search functionality
    let searchTimeout;
    $('#search-input').on('input', function() {
        clearTimeout(searchTimeout);
        const query = $(this).val().trim();
        
        if (query.length >= 2 || query.length === 0) {
            searchTimeout = setTimeout(function() {
                performSearch(query);
            }, 500);
        }
    });

    $('#search-btn').click(function() {
        const query = $('#search-input').val().trim();
        performSearch(query);
    });

    $('#clear-search').click(function() {
        $('#search-input').val('');
        $(this).hide();
        location.reload();
    });

    function performSearch(query) {
        if (query.length === 0) {
            $('#clear-search').hide();
            return;
        }

        $('#clear-search').show();

        $.ajax({
            url: '{{ route("taxes.search") }}',
            method: 'GET',
            data: { q: query },
            success: function(response) {
                updateTable(response.data);
            },
            error: function() {
                alert('Error performing search. Please try again.');
            }
        });
    }

    function updateTable(taxes) {
        const tbody = $('#sortable-taxes');
        tbody.empty();
        
        if (!taxes || taxes.length === 0) {
            tbody.append(`
                <tr>
                    <td colspan="8" class="text-center py-4">
                        <div class="text-muted">
                            <i class="fas fa-search fa-2x mb-2"></i>
                            <p>No taxes found matching your search</p>
                            <button class="btn btn-outline-secondary" onclick="location.reload()">
                                <i class="fas fa-times"></i> Clear Search
                            </button>
                        </div>
                    </td>
                </tr>
            `);
            return;
        }

        taxes.forEach(function(tax) {
            const row = `
                <tr class="tax-row" data-tax-id="${tax.id}">
                    <td width="30">
                        <input type="checkbox" class="form-check-input tax-checkbox" value="${tax.id}">
                    </td>
                    <td><strong>${tax.title}</strong></td>
                    <td><span class="badge bg-info">${tax.tax_type}</span></td>
                    <td><strong>${tax.formatted_tax_rate}</strong></td>
                    <td>
                        <span class="text-muted">${tax.service ? tax.service.service_name : 'All Services'}</span>
                    </td>
                    <td>${tax.status_badge}</td>
                    <td>
                        <div class="d-flex align-items-center">
                            <i class="fas fa-grip-vertical drag-handle me-2 text-muted" style="cursor: move;" title="Drag to reorder"></i>
                            <input type="number" class="form-control form-control-sm w-75 sort-order-input" 
                                   value="${tax.sort_order || 0}" 
                                   min="0" 
                                   data-id="${tax.id}" readonly />
                        </div>
                    </td>
                    <td class="text-right">
                        <a href="/taxes/show/${tax.id}" class="btn btn-sm btn-outline-primary me-2" title="View Tax">
                            <i class="fas fa-eye"></i>
                        </a>
                        <a href="/taxes/edit/${tax.id}" class="btn btn-sm btn-outline-warning me-2" title="Edit Tax">
                            <i class="fas fa-edit"></i>
                        </a>
                        <a href="#" class="btn btn-sm btn-outline-danger" title="Delete Tax"
                           onclick="deleteTax(${tax.id}, '${tax.title}')">
                            <i class="fas fa-trash"></i>
                        </a>
                    </td>
                </tr>
            `;
            tbody.append(row);
        });

        // Reinitialize sortable after updating table
        if (typeof initializeSortable === 'function') {
            initializeSortable();
        }
    }

    // Filter functionality
    $('#apply-filters').click(function() {
        const serviceId = $('#service-filter').val();
        const type = $('#type-filter').val();
        const status = $('#status-filter').val();
        
        // Reload page with filters
        let url = new URL(window.location);
        if (serviceId) url.searchParams.set('service_id', serviceId);
        if (type) url.searchParams.set('tax_type', type);
        if (status) url.searchParams.set('is_active', status);
        
        window.location.href = url.toString();
    });
});

// Initialize sortable functionality
function initializeSortable() {
    const sortableElement = document.getElementById('sortable-taxes');
    
    if (!sortableElement || typeof Sortable === 'undefined') {
        return;
    }

    const sortable = Sortable.create(sortableElement, {
        handle: '.drag-handle',
        animation: 150,
        ghostClass: 'sortable-ghost',
        chosenClass: 'sortable-chosen',
        dragClass: 'sortable-drag',
        
        onStart: function(evt) {
            evt.item.style.opacity = '0.5';
        },
        
        onEnd: function(evt) {
            evt.item.style.opacity = '1';
            
            if (evt.oldIndex !== evt.newIndex) {
                updateTaxOrder();
            }
        }
    });
}

// Update tax order after drag and drop
function updateTaxOrder() {
    const rows = document.querySelectorAll('.tax-row');
    const orderData = [];
    
    rows.forEach((row, index) => {
        const taxId = row.dataset.taxId;
        const sortOrder = index + 1;
        
        if (taxId) {
            orderData.push({
                id: parseInt(taxId),
                sort_order: sortOrder
            });
            
            // Update the visible sort order input
            const sortInput = row.querySelector('.sort-order-input');
            if (sortInput) {
                sortInput.value = sortOrder;
            }
        }
    });

    if (orderData.length === 0) {
        return;
    }

    // Send AJAX request to update order
    fetch('/taxes/update-order-bulk', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        },
        body: JSON.stringify({
            order_data: orderData
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.status) {
            // Show success message
            const toast = document.createElement('div');
            toast.className = 'alert alert-success alert-dismissible fade show position-fixed';
            toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999;';
            toast.innerHTML = `
                <i class="fas fa-check-circle"></i> ${data.message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            document.body.appendChild(toast);
            
            // Auto-remove after 3 seconds
            setTimeout(() => {
                if (toast.parentNode) {
                    toast.parentNode.removeChild(toast);
                }
            }, 3000);
        }
    })
    .catch(error => {
        console.error('Error updating tax order:', error);
        alert('Error updating tax order. Please try again.');
    });
}

// Delete individual tax
function deleteTax(taxId, taxTitle) {
    if (confirm(`Are you sure you want to delete the tax "${taxTitle}"?`)) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/taxes/destroy/${taxId}`;
        
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        
        const methodField = document.createElement('input');
        methodField.type = 'hidden';
        methodField.name = '_method';
        methodField.value = 'DELETE';
        
        form.appendChild(csrfToken);
        form.appendChild(methodField);
        document.body.appendChild(form);
        form.submit();
    }
}
</script>
@endpush