@extends('admin.layouts.layout')

@section('content')
<div class="mb-4">    
    <div class="servicestitle">
        <h3>Fees Per Property Age</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 fees..." 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'] ?? true)
                <a href="{{ route('property-age-fees.create') }}" class="add_btn btn">
                    <img src="{{ asset('images/add_fees.svg') }}"> Add Fees
                </a>                
                @endif
                @if($permission['destroy'] ?? true)
                <a href="javascript:void(0);" class="delete_btn btn" id="delete-selected">
                    <img src="{{ asset('images/delete_multiple.svg') }}"> Delete Multiple
                </a>                
                @endif
                <!-- <a href="javascript:void(0);" class="filter_btn btn w-auto show-panel" data-id="filter-panel">
                    <img src="{{ asset('images/filter.svg') }}">
                </a>                 -->
            </div>
        </div>
    </div>

    <!-- Filters Section -->
    <!-- <div class="service_contentarea filter-panel" id="filter-panel" style="display: block;">
        <div class="row">
            <div class="col-md-3">
                <div class="mb-3">
                    <label for="filter_service" class="form-label">Service</label>
                    <select class="form-select" id="filter_service" name="service_id">
                        <option value="">All Services</option>
                        @foreach($filters['services'] ?? [] as $id => $name)
                            <option value="{{ $id }}">{{ $name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="mb-3">
                    <label for="filter_construction_from" class="form-label">Construction From</label>
                    <input type="number" class="form-control" id="filter_construction_from" name="constructed_from" 
                           placeholder="e.g., 1900" min="1700" max="3000">
                </div>
            </div>
            <div class="col-md-3">
                <div class="mb-3">
                    <label for="filter_construction_to" class="form-label">Construction To</label>
                    <input type="number" class="form-control" id="filter_construction_to" name="constructed_to" 
                           placeholder="e.g., 1950" min="1700" max="3000">
                </div>
            </div>
            <div class="col-md-3">
                <div class="mb-3 d-flex align-items-end">
                    <button type="button" class="btn btn-primary me-2" id="apply-filters">Apply Filters</button>
                    <button type="button" class="btn btn-secondary" id="clear-filters">Clear</button>
                </div>
            </div>
        </div>
    </div> -->

    <div class="service_contentarea">
        <div class="table-responsive">
            <table class="table service_table" id="property-age-fees-table">
                <thead>
                    <tr>
                        <th width="30">
                            <input type="checkbox" class="form-check-input" id="select-all" title="Select All Fees">
                        </th>
                        <th>Sort Order</th>
                        <th>Fee</th>
                        <th>Construction</th>
                        <th>Service</th>                        
                        @if($permission['edit'] || $permission['destroy'] || $permission['show'])
                        <th>Action</th>
                        @endif
                    </tr>
                </thead>
                <tbody id="sortable-property-age-fees">
                    @if(isset($data) && $data->count() > 0)
                        @foreach($data as $fee)
                        <tr class="property-age-fee-row" data-fee-id="{{ $fee->id }}">
                            <td width="30">
                                <input type="checkbox" class="form-check-input fee-checkbox" value="{{ $fee->id }}">
                            </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 d-none" 
                                           value="{{ $fee->sort_order ?? 0 }}" 
                                           min="0" 
                                           data-id="{{ $fee->id }}" readonly />
                                </div>
                            </td>
                            <td>
                                <div class="d-flex flex-column">
                                    <strong>
                                        @if($permission['show'] ?? true)
                                            <a href="{{ route('property-age-fees.show', $fee->id) }}" class="text-decoration-none">
                                                ${{ number_format($fee->fee, 2) }}
                                            </a>
                                        @else
                                            ${{ number_format($fee->fee, 2) }}
                                        @endif
                                    </strong>
                                </div>
                            </td>
                            <td>
                                <span class="badge bg-info">{{ $fee->constructed_from }} - {{ $fee->constructed_to }}</span>
                            </td>
                            <td>
                                @if($fee->service)
                                    <span class="badge bg-primary">{{ $fee->service->service_name }}</span>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>                            
                            @if($permission['edit'] || $permission['destroy'] || $permission['show'])                      
                            <td class="text-right">                      
                                @if($permission['show'] ?? true)
                                <a href="{{ route('property-age-fees.show', $fee->id) }}" class="me-2" title="View Fee">
                                    <img src="{{ asset('images/view.svg') }}">
                                </a>
                                @endif
                                @if($permission['edit'] ?? true)
                                <a href="{{ route('property-age-fees.edit', $fee->id) }}" class="me-4" data-toggle="tooltip" title="Edit" data-original-title="Edit">
                                    <img src="{{ asset('images/edit.svg') }}">
                                </a>
                                @endif
                                @if($permission['destroy'] ?? true)
                                <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-{{$fee->id}}').submit();" 
                                   data-original-title="Delete">
                                    <img src="{{ asset('images/delete_black.svg') }}">
                                </a>
                                {!! html()->form('DELETE', route('property-age-fees.destroy', $fee->id))->attributes([
                                    'style' => 'display:inline',
                                    'id'    => 'delete-form-' . $fee->id  
                                ])->open() !!}
                                {!! html()->form()->close() !!}
                                @endif
                            </td>
                            @endif
                        </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="6" class="text-center py-4">
                                <div class="text-muted">
                                    <i class="fas fa-dollar-sign fa-2x mb-2"></i>
                                    <p>No Property Age Fees Found</p>
                                </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>

{{-- Fees Per Service Area Section (Static) --}}
@include('admin.property-age-fees.partials._fees_per_service_area_static')

<!-- Taxes Section -->
    @if($permission['taxIndex'] ?? true)
    <div class="mb-4 mt-5 d-none">
        <div class="servicestitle">
            <h3>Taxes</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 taxes..." id="tax-search-input">
                    <button class="btn btn_search" id="tax-search-btn">
                        <img src="{{ asset('images/search_w.svg') }}" alt="Search Icon">
                    </button>
                    <button class="btn btn-clear-search" id="tax-clear-search" style="display: none; margin-left: 5px;">
                        <i class="fas fa-times"></i> Clear
                    </button>
                </div>
                <div class="contact_btns">
                    @if($permission['taxCreate'] ?? true)
                    <a href="{{ route('taxes.create') }}" class="add_btn btn">
                        <img src="{{ asset('images/add_fees.svg') }}"> Add Tax
                    </a>                
                    @endif
                    @if($permission['taxDestroy'] ?? true)
                    <a href="javascript:void(0);" class="delete_btn btn" id="tax-delete-selected">
                        <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="taxes-table">
                    <thead>
                        <tr>
                            <th width="30">
                                <input type="checkbox" class="form-check-input" id="tax-select-all" title="Select All Taxes">
                            </th>
                            <th>Tax Title</th>
                            <th>Tax Type</th>
                            <th>Tax Rate</th>
                            <th>Service</th>
                            @if($permission['taxEdit'] || $permission['taxDestroy'] || $permission['taxShow'])
                            <th>Action</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody id="taxes-tbody">
                        <!-- Taxes will be loaded here via AJAX -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif
    <!-- Client Discounts Section -->
    @if($permission['clientDiscountIndex'] ?? true)
    <div class="mb-4 mt-5">
        <div class="servicestitle">
            <h3>Client Discounts</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 client discounts..." id="discount-search-input">
                    <button class="btn btn_search" id="discount-search-btn">
                        <img src="{{ asset('images/search_w.svg') }}" alt="Search Icon">
                    </button>
                    <button class="btn btn-clear-search" id="discount-clear-search" style="display: none; margin-left: 5px;">
                        <i class="fas fa-times"></i> Clear
                    </button>
                </div>
                <div class="contact_btns">
                    @if($permission['clientDiscountCreate'] ?? true)
                    <a href="{{ route('client-discounts.create') }}" class="add_btn btn">
                        <img src="{{ asset('images/add_fees.svg') }}"> Add Discount
                    </a>                
                    @endif
                    @if($permission['clientDiscountDestroy'] ?? true)
                    <a href="javascript:void(0);" class="delete_btn btn" id="discount-delete-selected">
                        <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="client-discounts-table">
                    <thead>
                        <tr>
                            <th width="30">
                                <input type="checkbox" class="form-check-input" id="discount-select-all" title="Select All Client Discounts">
                            </th>
                            <th>Discount Title</th>
                            <th>Discount Type</th>
                            <th>Discount</th>
                            <th>Status</th>
                            @if($permission['clientDiscountEdit'] || $permission['clientDiscountDestroy'] || $permission['clientDiscountShow'])
                            <th>Action</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody id="client-discounts-tbody">
                        <!-- Client Discounts will be loaded here via AJAX -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif

    <!-- Discount Coupons Section -->
    @if($permission['discountCouponIndex'] ?? true)
    <div class="mt-5 d-none">
        <div class="servicestitle">
            <h3>Discount Coupons</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 discount coupons..." id="coupon-search-input">
                    <button class="btn btn_search" id="coupon-search-btn">
                        <img src="{{ asset('images/search_w.svg') }}" alt="Search Icon">
                    </button>
                    <button class="btn btn-clear-search" id="coupon-clear-search" style="display: none; margin-left: 5px;">
                        <i class="fas fa-times"></i> Clear
                    </button>
                    <div class="search-loading" id="coupon-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['discountCouponCreate'] ?? true)
                    <a href="{{ route('discount-coupons.create') }}" class="add_btn btn">
                        <img src="{{ asset('images/add_fees.svg') }}"> Add Coupon
                    </a>                
                    @endif
                    @if($permission['discountCouponDestroy'] ?? true)
                    <a href="javascript:void(0);" class="delete_btn btn" id="delete-selected-coupons">
                        <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="discount-coupons-table">
                    <thead>
                        <tr>
                            <th width="30">
                                <input type="checkbox" class="form-check-input" id="coupon-select-all" title="Select All Coupons">
                            </th>
                            <th>Coupon Code</th>
                            <th>User Type</th>
                            <th>Allowed Users</th>
                            <th>Status</th>
                            @if($permission['discountCouponEdit'] || $permission['discountCouponDestroy'] || $permission['discountCouponShow'])
                            <th>Action</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody id="discount-coupons-tbody">
                        <!-- Discount Coupons will be loaded here via AJAX -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif
</div>
@endsection

@push('page_script')
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Google Maps JavaScript API -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ Config::get('settings.address_auto_populate_key') }}&libraries=places"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
<script src="{{ asset('assets/js/property-age-fee-sorting.js') }}"></script>
<script>
$(document).ready(function() {
    // Initialize sortable functionality
    if (typeof initializeSortable === 'function') {
        initializeSortable();
    }

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

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

    function updateDeleteButtonState() {
        const checkedBoxes = $('.fee-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 = [];
        $('.fee-checkbox:checked').each(function() {
            selectedIds.push($(this).val());
        });

        if (selectedIds.length === 0) {            
            showAlert('Please select at least one fee 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 ${selectedIds.length} selected fee(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) {
                $.ajax({
                    url: '{{ route("property-age-fees.delete-multiple") }}',
                    method: 'POST',
                    data: {
                        ids: selectedIds,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.status) {
                            location.reload();
                        } else {
                            showAlert('Error: ' + response.message, 'error');
                        }
                    },
                    error: function(xhr) {
                        showAlert('Error deleting fees. Please try again.', 'error');
                    }
                });
            }
        });
    });

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

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

        $.ajax({
            url: '{{ route("property-age-fees.search") }}',
            method: 'GET',
            data: { q: query },
            success: function(response) {
                $('#search-loading').hide();
                updateTable(response.data);
            },
            error: function() {
                $('#search-loading').hide();
                showAlert('Search failed. Please try again.', 'error');
            }
        });
    }

    function updateTable(fees) {
        const tbody = $('#sortable-property-age-fees');
        tbody.empty();

        if (!fees || fees.length === 0) {
            tbody.append(`
                <tr>
                    <td colspan="6" class="text-center py-4">
                        <div class="text-muted">
                            <i class="fas fa-search fa-2x mb-2"></i>
                            <p>No fees found matching your search</p>
                        </div>
                    </td>
                </tr>
            `);
            return;
        }

        fees.forEach(function(fee) {
            const row = `
                <tr class="property-age-fee-row" data-fee-id="${fee.id}">
                    <td width="30">
                        <input type="checkbox" class="form-check-input fee-checkbox" value="${fee.id}">
                    </td>
                    <td>
                        <div class="d-flex flex-column">
                            <strong>
                                @if($permission['show'] ?? true)
                                <a href="{{ route('property-age-fees.show', '') }}/${fee.id}" class="text-decoration-none">
                                    $${parseFloat(fee.fee).toFixed(2)}
                                </a>
                                @else
                                $${parseFloat(fee.fee).toFixed(2)}
                                @endif
                            </strong>
                        </div>
                    </td>
                    <td>
                        <span class="badge bg-info">${fee.constructed_from} - ${fee.constructed_to}</span>
                    </td>
                    <td>
                        ${fee.service ? `<span class="badge bg-primary">${fee.service.service_name}</span>` : '<span class="text-muted">-</span>'}
                    </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="${fee.sort_order || 0}" min="0" data-id="${fee.id}" readonly />
                        </div>
                    </td>
                    <td class="text-right">
                        @if($permission['show'] ?? true)
                        <a href="{{ route('property-age-fees.show', '') }}/${fee.id}" class="me-2" title="View Fee">
                            <img src="{{ asset('images/view.svg') }}">
                        </a>
                        @endif
                        @if($permission['edit'] ?? true)
                        <a href="{{ route('property-age-fees.edit', '') }}/${fee.id}" class="me-4" data-toggle="tooltip" title="Edit">
                            <img src="{{ asset('images/edit.svg') }}">
                        </a>
                        @endif
                        @if($permission['destroy'] ?? true)
                        <a class="me-4" data-toggle="tooltip" 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-${fee.id}').submit();" 
                                   data-original-title="Delete">
                            <img src="{{ asset('images/delete_black.svg') }}">
                        </a>
                        <form id="delete-form-${fee.id}" action="{{ route('property-age-fees.destroy', '') }}/${fee.id}" method="POST" style="display:inline">
                            @csrf
                            @method('DELETE')
                        </form>
                        @endif
                    </td>
                </tr>
            `;
            tbody.append(row);
        });

        // Reinitialize event handlers
        $('.fee-checkbox').change(function() {
            updateDeleteButtonState();
        });
    }

    // Filter functionality
    $('.show-panel').click(function() {
        const panelId = $(this).data('id');
        $('#' + panelId).slideToggle();
    });

    $('#apply-filters').click(function() {
        const filters = {
            service_id: $('#filter_service').val(),
            constructed_from: $('#filter_construction_from').val(),
            constructed_to: $('#filter_construction_to').val()
        };

        const queryParams = new URLSearchParams();
        Object.keys(filters).forEach(key => {
            if (filters[key]) {
                queryParams.append(key, filters[key]);
            }
        });

        const url = queryParams.toString() ? 
            `{{ route('property-age-fees.index') }}?${queryParams.toString()}` : 
            `{{ route('property-age-fees.index') }}`;
        
        window.location.href = url;
    });

    $('#clear-filters').click(function() {
        $('#filter_service').val('');
        $('#filter_construction_from').val('');
        $('#filter_construction_to').val('');
        window.location.href = `{{ route('property-age-fees.index') }}`;
    });

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

    // Initialize delete button state
    updateDeleteButtonState();

    // ---------------------------------------------------------------------------------------------------------

    // Load taxes on page load
    loadTaxes();

    // Load client discounts on page load
    loadClientDiscounts();

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

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

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

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

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

        if (selectedIds.length === 0) {            
            showAlert('Please select at least one tax 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 ${selectedIds.length} selected tax(es)?`,
            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) {
                $.ajax({
                    url: '{{ route("taxes.delete-multiple") }}',
                    method: 'POST',
                    data: {
                        ids: selectedIds,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.status) {
                            loadTaxes(); // Reload taxes after deletion
                            showAlert(response.message, 'success');
                        } else {
                            showAlert('Error: ' + response.message, 'error');
                        }
                    },
                    error: function(xhr) {
                        showAlert('Error deleting taxes. Please try again.', 'error');
                    }
                });
            }
        });
    });

    // Load taxes function
    function loadTaxes() {
        $.ajax({
            url: '{{ route("taxes.index") }}',
            method: 'GET',
            data: { ajax: 1 },
            success: function(response) {
                updateTaxesTable(response.data || []);
            },
            error: function() {
                showAlert('Error loading taxes. Please try again.', 'error');
            }
        });
    }

    // Perform tax search
    function performTaxSearch(query) {
        if (query.length === 0) {
            $('#tax-clear-search').hide();
            loadTaxes();
            return;
        }

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

        $.ajax({
            url: '{{ route("taxes.search") }}',
            method: 'GET',
            data: { q: query },
            success: function(response) {
                updateTaxesTable(response.data || []);
            },
            error: function() {
                showAlert('Error performing tax search. Please try again.', 'error');
            }
        });
    }

    // Update taxes table
    function updateTaxesTable(taxes) {
        const tbody = $('#taxes-tbody');
        tbody.empty();
        
        if (!taxes || taxes.length === 0) {
            tbody.append(`
                <tr>
                    <td colspan="6" class="text-center py-4">
                        <div class="text-muted">
                            <i class="fas fa-receipt fa-2x mb-2"></i>
                            <p>No taxes found</p>                            
                        </div>
                    </td>
                </tr>
            `);
            return;
        }

        taxes.forEach(function(tax) {
            console.log(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 || 'N/A'}</strong>
                    </td>
                    <td>
                        <span class="badge bg-info">${tax.tax_type || 'N/A'}</span>
                    </td>
                    <td>
                        <strong>${tax.formatted_tax_rate || 'N/A'}</strong>
                    </td>
                    <td>
                        <span class="text-muted">${tax.service ? tax.service.service_name : 'N/A'}</span>
                    </td>
                    @if($permission['taxEdit'] || $permission['taxDestroy'] || $permission['taxShow'])
                    <td>
                        @if($permission['taxShow'] ?? true)
                        <a href="{{ route('taxes.show', '') }}/${tax.id}" class="me-2" title="View Tax">
                            <img src="{{ asset('images/view.svg') }}">
                        </a>
                        @endif
                        @if($permission['taxEdit'] ?? true)
                        <a href="{{ route('taxes.edit', '') }}/${tax.id}" class="me-2" title="Edit Tax">
                            <img src="{{ asset('images/edit.svg') }}">
                        </a>
                        @endif
                        @if($permission['taxDestroy'] ?? true)
                        <a class="me-4" data-toggle="tooltip" 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-tax-${tax.id}').submit();" 
                                   data-original-title="Delete">
                            <img src="{{ asset('images/delete_black.svg') }}">
                        </a>
                        <form id="delete-form-tax-${tax.id}" action="{{ route('taxes.destroy', '') }}/${tax.id}" method="POST" style="display:inline">
                            @csrf
                            @method('DELETE')
                        </form>                        
                        @endif
                    </td>
                    @endif
                </tr>
            `;
            tbody.append(row);
        });

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

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

    // Delete individual tax
    window.deleteTax = function(taxId, taxTitle) {
        if (confirm(`Are you sure you want to delete the tax "${taxTitle}"?`)) {
            $.ajax({
                url: `/taxes/destroy/${taxId}`,
                method: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.status) {
                        loadTaxes(); // Reload taxes after deletion
                        showAlert('Tax deleted successfully', 'success');
                    } else {
                        showAlert('Error: ' + response.message, 'error');
                    }
                },
                error: function() {
                    showAlert('Error deleting tax. Please try again.', 'error');
                }
            });
        }
    };
    
    // ---------------------------------------------------------------------------------------------------------
    
    // Client Discounts functionality
    
    // Client discount search functionality
    let discountSearchTimeout;
    $('#discount-search-input').on('input', function() {
        clearTimeout(discountSearchTimeout);
        const query = $(this).val().trim();
        
        if (query.length >= 2 || query.length === 0) {
            discountSearchTimeout = setTimeout(function() {
                performDiscountSearch(query);
            }, 500);
        }
    });

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

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

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

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

        if (selectedIds.length === 0) {            
            showAlert('Please select at least one client discount 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 ${selectedIds.length} selected client discount(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) {
                $.ajax({
                    url: '{{ route("client-discounts.delete-multiple") }}',
                    method: 'POST',
                    data: {
                        ids: selectedIds,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.status) {
                            loadClientDiscounts(); // Reload client discounts after deletion
                            showAlert(response.message, 'success');
                        } else {
                            showAlert('Error: ' + response.message, 'error');
                        }
                    },
                    error: function(xhr) {
                        showAlert('Error deleting client discounts. Please try again.', 'error');
                    }
                });
            }
        });
    });

    // Load client discounts function
    function loadClientDiscounts() {
        $.ajax({
            url: '{{ route("client-discounts.index") }}',
            method: 'GET',
            data: { ajax: 1 },
            success: function(response) {
                updateClientDiscountsTable(response.data || []);
            },
            error: function() {
                showAlert('Error loading client discounts. Please try again.', 'error');
            }
        });
    }

    // Perform client discount search
    function performDiscountSearch(query) {
        if (query.length === 0) {
            $('#discount-clear-search').hide();
            loadClientDiscounts();
            return;
        }

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

        $.ajax({
            url: '{{ route("client-discounts.search") }}',
            method: 'GET',
            data: { q: query },
            success: function(response) {
                updateClientDiscountsTable(response.data || []);
            },
            error: function() {
                showAlert('Error performing client discount search. Please try again.', 'error');
            }
        });
    }

    // Update client discounts table
    function updateClientDiscountsTable(clientDiscounts) {
        const tbody = $('#client-discounts-tbody');
        tbody.empty();
        
        if (!clientDiscounts || clientDiscounts.length === 0) {
            tbody.append(`
                <tr>
                    <td colspan="6" class="text-center py-4">
                        <div class="text-muted">
                            <i class="fas fa-percentage fa-2x mb-2"></i>
                            <p>No client discounts found</p>                            
                        </div>
                    </td>
                </tr>
            `);
            return;
        }

        clientDiscounts.forEach(function(discount) {
            const statusBadge = discount.is_active ? 
                '<span class="badge bg-success">Active</span>' : 
                '<span class="badge bg-danger">Inactive</span>';
                
            const row = `
                <tr class="discount-row" data-discount-id="${discount.id}">
                    <td width="30">
                        <input type="checkbox" class="form-check-input discount-checkbox" value="${discount.id}">
                    </td>
                    <td>
                        <strong>${discount.title || 'N/A'}</strong>
                    </td>
                    <td>
                        <span class="badge bg-${discount.discount_type === 'Percentage' ? 'info' : 'warning'}">${discount.discount_type || 'N/A'}</span>
                    </td>
                    <td>
                        <strong class="text-success">${discount.formatted_amount || 'N/A'}</strong>
                    </td>
                    <td>
                        ${statusBadge}
                    </td>
                    @if($permission['clientDiscountEdit'] || $permission['clientDiscountDestroy'] || $permission['clientDiscountShow'])
                    <td>
                        @if($permission['clientDiscountShow'] ?? true)
                        <a href="{{ route('client-discounts.show', '') }}/${discount.id}" class="me-2" title="View Client Discount">
                            <img src="{{ asset('images/view.svg') }}">
                        </a>
                        @endif
                        @if($permission['clientDiscountEdit'] ?? true)
                        <a href="{{ route('client-discounts.edit', '') }}/${discount.id}" class="me-2" title="Edit Client Discount">
                            <img src="{{ asset('images/edit.svg') }}">
                        </a>
                        @endif
                        @if($permission['clientDiscountDestroy'] ?? true)
                        <a class="me-4" data-toggle="tooltip" 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-discount-${discount.id}').submit();" 
                                   data-original-title="Delete">
                            <img src="{{ asset('images/delete_black.svg') }}">
                        </a>
                        <form id="delete-form-discount-${discount.id}" action="{{ route('client-discounts.destroy', '') }}/${discount.id}" method="POST" style="display:inline">
                            @csrf
                            @method('DELETE')
                        </form>                        
                        @endif
                    </td>
                    @endif
                </tr>
            `;
            tbody.append(row);
        });

        // Update client discount checkboxes event handlers
        $('.discount-checkbox').change(function() {
            updateDiscountDeleteButtonState();
            
            // Update select all checkbox state
            const totalCheckboxes = $('.discount-checkbox').length;
            const checkedCheckboxes = $('.discount-checkbox:checked').length;
            $('#discount-select-all').prop('checked', totalCheckboxes === checkedCheckboxes);
        });
    }

    // Update client discount delete button state
    function updateDiscountDeleteButtonState() {
        const checkedBoxes = $('.discount-checkbox:checked').length;
        $('#discount-delete-selected').prop('disabled', checkedBoxes === 0);
        
        if (checkedBoxes > 0) {
            $('#discount-delete-selected').removeClass('btn-secondary').addClass('btn-danger');
        } else {
            $('#discount-delete-selected').removeClass('btn-danger').addClass('btn-secondary');
        }
    }

    // Delete individual client discount
    window.deleteClientDiscount = function(discountId, discountTitle) {
        if (confirm(`Are you sure you want to delete the client discount "${discountTitle}"?`)) {
            $.ajax({
                url: `/client-discounts/destroy/${discountId}`,
                method: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.status) {
                        loadClientDiscounts(); // Reload client discounts after deletion
                        showAlert('Client discount deleted successfully', 'success');
                    } else {
                        showAlert('Error: ' + response.message, 'error');
                    }
                },
                error: function() {
                    showAlert('Error deleting client discount. Please try again.', 'error');
                }
            });
        }
    };

    // ---------------------------------------------------------------------------------------------------------

    // Load discount coupons on page load
    loadDiscountCoupons();

    // Discount Coupon search functionality
    $('#coupon-search-input').on('keyup', function() {
        clearTimeout(couponSearchTimeout);
        var query = $(this).val();
        
        if (query.length >= 2 || query.length === 0) {
            couponSearchTimeout = setTimeout(function() {
                loadDiscountCoupons(query);
            }, 500);
        }
    });

    $('#coupon-search-btn').on('click', function() {
        var query = $('#coupon-search-input').val();
        loadDiscountCoupons(query);
    });

    $('#coupon-clear-search').on('click', function() {
        $('#coupon-search-input').val('');
        $(this).hide();
        loadDiscountCoupons();
    });

    // Discount coupon select all functionality
    $('#coupon-select-all').on('change', function() {
        var isChecked = $(this).is(':checked');
        $('.coupon-checkbox').prop('checked', isChecked);
        
        if (isChecked) {
            $('.coupon-checkbox').each(function() {
                var row = $(this).closest('tr');
                if (!row.hasClass('selected')) {
                    row.addClass('selected');
                    selectedCoupons.push(parseInt($(this).val()));
                }
            });
        } else {
            $('.coupon-checkbox').closest('tr').removeClass('selected');
            selectedCoupons = [];
        }
        
        updateDeleteCouponsButton();
    });

    // Individual coupon checkbox functionality
    $(document).on('change', '.coupon-checkbox', function() {
        var couponId = parseInt($(this).val());
        var row = $(this).closest('tr');
        
        if ($(this).is(':checked')) {
            row.addClass('selected');
            if (selectedCoupons.indexOf(couponId) === -1) {
                selectedCoupons.push(couponId);
            }
        } else {
            row.removeClass('selected');
            selectedCoupons = selectedCoupons.filter(function(id) {
                return id !== couponId;
            });
            $('#coupon-select-all').prop('checked', false);
        }
        
        updateDeleteCouponsButton();
    });

    // Delete selected coupons
    $('#delete-selected-coupons').on('click', function(e) {
        e.preventDefault();
        
        if (selectedCoupons.length === 0) {
            showAlert('Please select at least one coupon 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 ${selectedCoupons.length} selected coupon(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) {
                deleteSelectedCoupons();
            }
        });
    });

    var couponSearchTimeout;
    var selectedCoupons = [];

    function loadDiscountCoupons(search = '') {
        $('#coupon-search-loading').show();
        
        var url = "{{ route('discount-coupons.index') }}";
        var data = {};
        
        if (search) {
            data.search = search;
            $('#coupon-clear-search').show();
        } else {
            $('#coupon-clear-search').hide();
        }
        
        $.ajax({
            url: url,
            type: 'GET',
            data: data,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                $('#coupon-search-loading').hide();
                
                if (response.status && response.data) {
                    populateDiscountCouponsTable(response.data);
                } else {
                    $('#discount-coupons-tbody').html('<tr><td colspan="6" class="text-center py-4"><div class="text-muted"><i class="fas fa-percentage fa-2x mb-2"></i><p>No discount coupons found</p></div></td></tr>');
                }
            },
            error: function(xhr) {
                $('#coupon-search-loading').hide();
                console.error('Error loading discount coupons:', xhr);
                showAlert('Error loading discount coupons. Please try again.', 'error');
            }
        });
    }

    function populateDiscountCouponsTable(coupons) {
        var tbody = $('#discount-coupons-tbody');
        tbody.empty();
        
        if (coupons.length === 0) {
            tbody.html('<tr><td colspan="6" class="text-center py-4"><div class="text-muted"><i class="fas fa-percentage fa-2x mb-2"></i><p>No discount coupons found</p></div></td></tr>');
            return;
        }
        
        $.each(coupons, function(index, coupon) {
            var statusBadge = coupon.is_active ? 
                '<span class="badge bg-success">Active</span>' : 
                '<span class="badge bg-danger">Inactive</span>';
                
            // Convert audience to display format
            var userTypeBadge = '';
            switch(coupon.audience) {
                case 'All':
                    userTypeBadge = '<span class="badge bg-primary">All</span>';
                    break;
                case 'Customer':
                    userTypeBadge = '<span class="badge bg-info">Customer</span>';
                    break;
                case 'Agent':
                    userTypeBadge = '<span class="badge bg-warning">Agent</span>';
                    break;
                case 'Customer_Agent':
                    userTypeBadge = '<span class="badge bg-secondary">Customer Agent</span>';
                    break;
                default:
                    userTypeBadge = '<span class="badge bg-light text-dark">' + (coupon.audience || 'N/A') + '</span>';
            }
            
            // Format allowed users count
            var allowedUsers = coupon.max_unique_users || 'Unlimited';
            
            var actionButtons = '';
            @if($permission['discountCouponShow'] ?? true)
            actionButtons += `<a href="{{ route('discount-coupons.show', '') }}/${coupon.id}" class="me-2" title="View Coupon">
                <img src="{{ asset('images/view.svg') }}">
            </a>`;
            @endif
            @if($permission['discountCouponEdit'] ?? true)
            actionButtons += `<a href="{{ route('discount-coupons.edit', '') }}/${coupon.id}" class="me-2" title="Edit Coupon">
                <img src="{{ asset('images/edit.svg') }}">
            </a>`;
            @endif
            @if($permission['discountCouponDestroy'] ?? true)
            actionButtons += `<a class="me-4" data-toggle="tooltip" 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-coupon-${coupon.id}').submit();" 
                       data-original-title="Delete">
                <img src="{{ asset('images/delete_black.svg') }}">
            </a>
            <form id="delete-form-coupon-${coupon.id}" action="{{ route('discount-coupons.destroy', '') }}/${coupon.id}" method="POST" style="display: none;">
                @csrf
                @method('DELETE')
            </form>`;
            @endif
            
            var row = `<tr>
                <td width="30">
                    <input type="checkbox" class="form-check-input coupon-checkbox" value="${coupon.id}">
                </td>
                <td><strong>${coupon.code}</strong></td>
                <td>${userTypeBadge}</td>
                <td><span class="badge bg-success">${allowedUsers}</span></td>
                <td>${statusBadge}</td>`;
                
            if (actionButtons) {
                row += `<td>${actionButtons}</td>`;
            }
            
            row += '</tr>';
            tbody.append(row);
        });
        
        // Reset selections
        selectedCoupons = [];
        $('#coupon-select-all').prop('checked', false);
        updateDeleteCouponsButton();
    }

    function updateDeleteCouponsButton() {
        var deleteBtn = $('#delete-selected-coupons');
        if (selectedCoupons.length > 0) {
            deleteBtn.removeClass('btn-secondary').addClass('btn-danger');
            deleteBtn.find('img').attr('src', '{{ asset("images/delete_multiple.svg") }}');
        } else {
            deleteBtn.removeClass('btn-danger').addClass('btn-secondary');
            deleteBtn.find('img').attr('src', '{{ asset("images/delete_multiple.svg") }}');
        }
    }

    function deleteSelectedCoupons() {
        $.ajax({
            url: "{{ route('discount-coupons.delete-multiple') }}",
            type: 'POST',
            data: {
                ids: selectedCoupons,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.status) {
                    showAlert(response.message, 'success');
                    loadDiscountCoupons();
                    selectedCoupons = [];
                    updateDeleteCouponsButton();
                } else {
                    showAlert(response.message || 'Error deleting coupons', 'error');
                }
            },
            error: function(xhr) {
                console.error('Error deleting coupons:', xhr);
                showAlert('Error deleting discount coupons. Please try again.', 'error');
            }
        });
    }
});
</script>
@endpush