@extends('layouts.app')

@section('title', 'District Pricing Management')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">
                <i class="bi bi-currency-dollar text-primary"></i> District Pricing Management
            </h1>
            <p class="text-muted mb-0">Manage delivery rates based on geographic locations</p>
        </div>
        <div>
            <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary me-2">
                <i class="bi bi-arrow-left"></i> Back to Dashboard
            </a>
            <a href="{{ route('admin.pricing.create') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> Add New Pricing
            </a>
        </div>
    </div>
    
    <!-- Search & Filters -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="bi bi-funnel"></i> Search & Filters
            </h6>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.pricing') }}" id="pricingFilterForm">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label for="pickup_district" class="form-label">Pickup District</label>
                        <select class="form-select" id="pickup_district" name="pickup_district" data-district-combobox="true" data-placeholder="Search pickup district…">
                            <option value="">All Districts</option>
                            @foreach($districts as $district)
                                <option value="{{ $district->id }}" {{ request('pickup_district') == $district->id ? 'selected' : '' }}>
                                    {{ $district->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="drop_district" class="form-label">Drop District</label>
                        <select class="form-select" id="drop_district" name="drop_district" data-district-combobox="true" data-placeholder="Search drop district…">
                            <option value="">All Districts</option>
                            @foreach($districts as $district)
                                <option value="{{ $district->id }}" {{ request('drop_district') == $district->id ? 'selected' : '' }}>
                                    {{ $district->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="service_type" class="form-label">Service Type</label>
                        <select class="form-select" id="service_type" name="service_type">
                            <option value="">All Services</option>
                            @foreach($serviceTypes as $key => $label)
                                <option value="{{ $key }}" {{ request('service_type') == $key ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="status" class="form-label">Status</label>
                        <select class="form-select" id="status" name="status">
                            <option value="">All</option>
                            <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                            <option value="inactive" {{ request('status') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Base Rate Range (Rs.)</label>
                        <div class="input-group">
                            <input type="number" step="0.01" min="0" class="form-control" name="base_min" placeholder="Min" value="{{ request('base_min') }}">
                            <span class="input-group-text">–</span>
                            <input type="number" step="0.01" min="0" class="form-control" name="base_max" placeholder="Max" value="{{ request('base_max') }}">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Per KG Rate Range (Rs.)</label>
                        <div class="input-group">
                            <input type="number" step="0.01" min="0" class="form-control" name="perkg_min" placeholder="Min" value="{{ request('perkg_min') }}">
                            <span class="input-group-text">–</span>
                            <input type="number" step="0.01" min="0" class="form-control" name="perkg_max" placeholder="Max" value="{{ request('perkg_max') }}">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Items per page</label>
                        <select class="form-select" id="per_page" name="per_page">
                            @foreach([100,250,500,1000] as $opt)
                                <option value="{{ $opt }}" {{ (int)request('per_page', 100) === $opt ? 'selected' : '' }}>{{ $opt }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary me-2">
                            <i class="bi bi-search"></i> Search
                        </button>
                        <a href="{{ route('admin.pricing') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-x-circle"></i> Clear
                        </a>
                    </div>
                    <div class="col-12">
                        <hr>
                        <div class="d-flex align-items-center gap-2">
                            <input type="text" class="form-control w-auto" id="preset_name" placeholder="Preset name">
                            <button type="button" class="btn btn-outline-primary" id="savePresetBtn"><i class="bi bi-bookmark"></i> Save Preset</button>
                            <div class="ms-auto d-flex align-items-center gap-2">
                                <select class="form-select w-auto" id="presetSelect"></select>
                                <button type="button" class="btn btn-outline-secondary" id="applyPresetBtn"><i class="bi bi-play"></i> Apply</button>
                                <button type="button" class="btn btn-outline-danger" id="deletePresetBtn"><i class="bi bi-trash"></i> Delete</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    
    <!-- Bulk Update Panel -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="bi bi-tools"></i> Bulk Update
            </h6>
            <div class="d-flex align-items-center gap-2">
                <span class="text-muted"><span id="selected-count">0</span> selected</span>
                <button type="button" class="btn btn-sm btn-outline-danger" id="deleteAllBtn">
                    <i class="bi bi-trash"></i> Delete All
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-4">
                    <h6 class="mb-2">Uniform Values</h6>
                    <div class="row g-2">
                        <div class="col-6"><input type="number" step="0.01" min="0" class="form-control" id="uniform_base_rate" placeholder="Base Rate"></div>
                        <div class="col-6"><input type="number" step="0.01" min="0" class="form-control" id="uniform_per_kg_rate" placeholder="Per KG Rate"></div>
                        <div class="col-6"><input type="number" step="0.01" min="0" class="form-control" id="uniform_minimum_charge" placeholder="Minimum Charge"></div>
                        <div class="col-6"><input type="number" step="0.01" min="0" class="form-control" id="uniform_maximum_charge" placeholder="Maximum Charge"></div>
                        <div class="col-6"><input type="number" min="1" class="form-control" id="uniform_estimated_days" placeholder="Estimated Days"></div>
                        <div class="col-6">
                            <div class="form-check mt-2">
                                <input class="form-check-input" type="checkbox" id="uniform_is_active">
                                <label class="form-check-label" for="uniform_is_active">Set Active</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <h6 class="mb-2">Percentage Adjustments</h6>
                    <div class="row g-2">
                        <div class="col-6"><input type="number" step="0.01" class="form-control" id="percent_base_rate" placeholder="Base Rate %"></div>
                        <div class="col-6"><input type="number" step="0.01" class="form-control" id="percent_per_kg_rate" placeholder="Per KG %"></div>
                        <div class="col-6"><input type="number" step="0.01" class="form-control" id="percent_minimum_charge" placeholder="Minimum %"></div>
                        <div class="col-6"><input type="number" step="0.01" class="form-control" id="percent_maximum_charge" placeholder="Maximum %"></div>
                        <div class="col-12"><small class="text-muted">Use negative values to decrease. Range -90% to 500%.</small></div>
                    </div>
                </div>
                <div class="col-md-4">
                    <h6 class="mb-2">Thresholds</h6>
                    <div class="row g-2">
                        <div class="col-6"><input type="number" step="0.01" min="0" class="form-control" id="threshold_minimum_charge" placeholder="Min Threshold"></div>
                        <div class="col-6"><input type="number" step="0.01" min="0" class="form-control" id="threshold_maximum_charge" placeholder="Max Threshold"></div>
                        <div class="col-12"><small class="text-muted">Enforce floors/caps after adjustments.</small></div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-between align-items-center mt-3">
                <div class="text-muted" id="bulk-validation-msg"></div>
                <div>
                    <div class="form-check form-check-inline me-3">
                        <input class="form-check-input" type="checkbox" id="dataops_toggle">
                        <label class="form-check-label" for="dataops_toggle">Process via DataOps (async)</label>
                    </div>
                    <button type="button" class="btn btn-outline-secondary me-2" id="previewBulkBtn">
                        <i class="bi bi-eye"></i> Preview Changes
                    </button>
                    <button type="button" class="btn btn-danger" id="applyBulkBtn">
                        <i class="bi bi-lightning-charge"></i> Apply Bulk Update
                    </button>
                </div>
            </div>
            <div class="progress mt-3 d-none" id="bulkProgressWrap" style="height: 8px;">
                <div class="progress-bar progress-bar-striped progress-bar-animated" id="bulkProgressBar" role="progressbar" style="width: 0%"></div>
            </div>
        </div>
    </div>

    <!-- Pricing Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="bi bi-list"></i> Pricing List ({{ $pricings->total() }} total)
            </h6>
            <div class="dropdown">
                <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    <i class="bi bi-download"></i> Export
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#"><i class="bi bi-file-earmark-excel"></i> Export to Excel</a></li>
                    <li><a class="dropdown-item" href="#"><i class="bi bi-file-earmark-pdf"></i> Export to PDF</a></li>
                </ul>
            </div>
        </div>
        <div class="card-body">
            @if($pricings->count() > 0)
                <div class="table-responsive" aria-live="polite" aria-busy="false">
                    <table class="table table-bordered table-hover" width="100%" cellspacing="0" role="table">
                        <thead class="table-light">
                            <tr>
                                <th style="width:38px" class="text-center">
                                    <input type="checkbox" id="selectAll">
                                </th>
                                <th>Route</th>
                                <th>Service Type</th>
                                <th>Pricing Details</th>
                                <th>Delivery Time</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="pricing-table-body">
                            @include('admin.pricing.partials.table')
                        </tbody>
                    </table>
                </div>
                
                <!-- Pagination -->
                <div class="d-flex justify-content-between align-items-center mt-3" id="pricing-controls">
                    <div id="pricing-results-meta" class="text-muted" aria-live="polite">
                        Showing {{ $pricings->firstItem() }} to {{ $pricings->lastItem() }} of {{ $pricings->total() }} results
                    </div>
                    <div id="pricing-pagination">
                        @include('admin.pricing.partials.pagination')
                    </div>
                </div>
                <div class="text-muted mt-1" id="page-counter">Page {{ $pricings->currentPage() }} of {{ $pricings->lastPage() }}</div>
                <div id="pricing-loading" class="d-flex align-items-center gap-2 mt-2 d-none" aria-live="polite" aria-busy="false">
                    <span class="spinner-border spinner-border-sm" role="status" aria-label="Loading"></span>
                    <span>Loading...</span>
                </div>
            @else
                <div class="text-center py-5">
                    <i class="bi bi-currency-dollar text-muted" style="font-size: 3rem;"></i>
                    <h5 class="text-muted mt-3">No pricing configurations found</h5>
                    <p class="text-muted">Start by creating your first district pricing configuration.</p>
                    <a href="{{ route('admin.pricing.create') }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i> Add New Pricing
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deletePricingModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Deletion</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this pricing configuration?</p>
                <div class="alert alert-warning">
                    <strong>Route:</strong> <span id="delete-route"></span><br>
                    <strong>Service:</strong> <span id="delete-service"></span>
                </div>
                <p class="text-danger"><strong>This action cannot be undone.</strong></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="delete-form" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete Pricing</button>
                </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Bulk Confirm Modal -->
    <div class="modal fade" id="bulkConfirmModal" tabindex="-1" aria-labelledby="bulkConfirmModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="bulkConfirmModalLabel">Confirm Bulk Update</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="bulkConfirmSummary" class="mb-2"></div>
                    <div class="alert alert-warning"><i class="bi bi-exclamation-triangle"></i> This action will modify multiple pricing records at once. Please confirm.</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmApplyBulkBtn"><i class="bi bi-lightning-charge"></i> Confirm Apply</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete All Modal -->
    <div class="modal fade" id="deleteAllModal" tabindex="-1" aria-labelledby="deleteAllModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteAllModalLabel">Delete All Pricing Records</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-2">This will permanently remove <strong>all</strong> district pricing records.</p>
                    <div class="alert alert-danger"><i class="bi bi-exclamation-triangle"></i> This action cannot be undone.</div>
                    <label for="deleteAllConfirmInput" class="form-label">Type <code>DELETE ALL</code> to confirm:</label>
                    <input type="text" class="form-control" id="deleteAllConfirmInput" placeholder="DELETE ALL">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteAllBtn"><i class="bi bi-trash"></i> Delete All</button>
                </div>
            </div>
        </div>
    </div>

<style>
.district-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.route-info {
    min-width: 200px;
}

.pricing-details {
    font-size: 0.9rem;
}

.pricing-details div {
    margin-bottom: 2px;
}

.status-toggle {
    cursor: pointer;
}
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const selected = new Set();
        const selectedCountEl = document.getElementById('selected-count');
        const selectAllEl = document.getElementById('selectAll');
        const progressWrap = document.getElementById('bulkProgressWrap');
        const progressBar = document.getElementById('bulkProgressBar');
        const bulkValidationMsg = document.getElementById('bulk-validation-msg');
        const bulkConfirmModal = new bootstrap.Modal(document.getElementById('bulkConfirmModal'));
        const bulkConfirmSummaryEl = document.getElementById('bulkConfirmSummary');
        const deleteAllModal = new bootstrap.Modal(document.getElementById('deleteAllModal'));
        const deleteAllInput = document.getElementById('deleteAllConfirmInput');
        const tableBodyEl = document.getElementById('pricing-table-body');
        const paginationContainer = document.getElementById('pricing-pagination');
        const resultsMetaEl = document.getElementById('pricing-results-meta');
        const loadingEl = document.getElementById('pricing-loading');
        const tableResponsiveEl = document.querySelector('.table-responsive');

        function updateSelectedCount() {
            selectedCountEl.textContent = selected.size;
        }

        function bindRowEvents() {
            // Row selection
            document.querySelectorAll('.select-row').forEach(cb => {
                cb.addEventListener('change', function() {
                    const id = parseInt(this.dataset.id, 10);
                    if (this.checked) selected.add(id); else selected.delete(id);
                    this.closest('tr').classList.toggle('table-active', this.checked);
                    updateSelectedCount();
                });
                // Restore selection state across pagination
                const id = parseInt(cb.dataset.id, 10);
                if (selected.has(id)) {
                    cb.checked = true;
                    cb.closest('tr').classList.add('table-active');
                }
            });

            // Status toggle functionality
            document.querySelectorAll('.status-toggle').forEach(function(toggle) {
                toggle.addEventListener('change', function() {
                    const pricingId = this.dataset.pricingId;
                    const isActive = this.checked;

                    fetch(`/admin/pricing/${pricingId}/toggle-status`, {
                        method: 'PATCH',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': csrfToken
                        },
                        body: JSON.stringify({
                            is_active: isActive
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            const badge = this.parentElement.querySelector('.badge');
                            if (isActive) {
                                badge.className = 'badge bg-success';
                                badge.textContent = 'Active';
                            } else {
                                badge.className = 'badge bg-secondary';
                                badge.textContent = 'Inactive';
                            }
                            showAlert('success', 'Pricing status updated successfully!');
                        } else {
                            this.checked = !isActive;
                            showAlert('error', 'Failed to update pricing status.');
                        }
                    })
                    .catch(() => {
                        this.checked = !isActive;
                        showAlert('error', 'An error occurred while updating pricing status.');
                    });
                });
            });

            // Delete pricing functionality
            document.querySelectorAll('.delete-pricing').forEach(function(button) {
                button.addEventListener('click', function() {
                    const pricingId = this.dataset.pricingId;
                    const route = this.dataset.route;
                    const service = this.dataset.service;
                    
                    document.getElementById('delete-route').textContent = route;
                    document.getElementById('delete-service').textContent = service;
                    document.getElementById('delete-form').action = `/admin/pricing/${pricingId}`;
                    
                    new bootstrap.Modal(document.getElementById('deletePricingModal')).show();
                });
            });

            // Inline edit handlers
            document.querySelectorAll('.pricing-details').forEach(function(container) {
                const editBtn = container.querySelector('.inline-edit-btn');
                const saveBtn = container.querySelector('.inline-save-btn');
                const cancelBtn = container.querySelector('.inline-cancel-btn');
                const inputs = container.querySelectorAll('.inline-input');
                const id = container.getAttribute('data-pricing-id');

                function setEditing(on) {
                    inputs.forEach(i => { i.disabled = !on; });
                    editBtn.classList.toggle('d-none', on);
                    saveBtn.classList.toggle('d-none', !on);
                    cancelBtn.classList.toggle('d-none', !on);
                }

                editBtn && editBtn.addEventListener('click', () => setEditing(true));
                cancelBtn && cancelBtn.addEventListener('click', () => setEditing(false));
                saveBtn && saveBtn.addEventListener('click', function() {
                    const payload = {};
                    inputs.forEach(i => { payload[i.dataset.field] = i.value; });
                    fetch(`/admin/pricing/${id}/inline`, {
                        method: 'PATCH',
                        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                        body: JSON.stringify(payload)
                    }).then(r => r.json()).then(data => {
                        if (data.success) { setEditing(false); showAlert('success', 'Pricing updated.'); }
                        else showAlert('danger', data.message || 'Update failed.');
                    }).catch(() => showAlert('danger', 'Network error.'));
                });
            });
        }

        // Select all handler remains static
        if (selectAllEl) {
            selectAllEl.addEventListener('change', function() {
                const checked = this.checked;
                document.querySelectorAll('.select-row').forEach(cb => {
                    cb.checked = checked;
                    const id = parseInt(cb.dataset.id, 10);
                    if (checked) selected.add(id); else selected.delete(id);
                    cb.closest('tr').classList.toggle('table-active', checked);
                });
                updateSelectedCount();
            });
        }

        function setLoading(on) {
            if (!loadingEl) return;
            loadingEl.classList.toggle('d-none', !on);
            loadingEl.setAttribute('aria-busy', on ? 'true' : 'false');
            if (tableResponsiveEl) tableResponsiveEl.setAttribute('aria-busy', on ? 'true' : 'false');
        }

        function buildQueryFromForm() {
            const form = document.getElementById('pricingFilterForm');
            const fd = new FormData(form);
            const params = new URLSearchParams();
            fd.forEach((v, k) => { if (v !== '') params.append(k, v); });
            return params.toString();
        }

        function loadPage(page) {
            if (!page) return;
            setLoading(true);
            const qs = buildQueryFromForm();
            const url = `${window.location.pathname}?page=${page}${qs ? '&' + qs : ''}`;
            fetch(url, {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(r => r.json())
            .then(data => {
                if (!data.success) throw new Error(data.message || 'Failed to load page');
                if (tableBodyEl) tableBodyEl.innerHTML = data.rows_html || '';
                if (paginationContainer) paginationContainer.innerHTML = data.pagination_html || '';
                if (resultsMetaEl && data.meta) {
                    resultsMetaEl.textContent = `Showing ${data.meta.from} to ${data.meta.to} of ${data.meta.total} results`;
                }
                const pageCounter = document.getElementById('page-counter');
                if (pageCounter && data.meta) pageCounter.textContent = `Page ${data.meta.current_page} of ${data.meta.last_page}`;
                bindRowEvents();
                // Reset Select All checkbox when page changes
                if (selectAllEl) selectAllEl.checked = false;
                // Focus active page link for accessibility
                const activeLink = paginationContainer.querySelector('.page-item.active .page-link');
                if (activeLink) activeLink.focus();
            })
            .catch(err => {
                console.error(err);
                showAlert('danger', 'Failed to load pricing data.');
            })
            .finally(() => setLoading(false));
        }

        // Delegate click handling for pagination links
        document.addEventListener('click', function(e) {
            const link = e.target.closest('#pricing-pagination .page-link');
            if (link) {
                e.preventDefault();
                const page = parseInt(link.dataset.page || '1', 10);
                loadPage(page);
            }
        });

        // Per-page immediate change
        document.getElementById('per_page').addEventListener('change', function() {
            loadPage(1);
        });

        // Presets
        const presetSelect = document.getElementById('presetSelect');
        function refreshPresets() {
            fetch('{{ route('admin.pricing.presets.index') }}')
                .then(r => r.json()).then(data => {
                    if (!data.success) return;
                    presetSelect.innerHTML = '';
                    data.presets.forEach(p => {
                        const opt = document.createElement('option');
                        opt.value = p.id; opt.textContent = p.name;
                        opt.dataset.criteria = JSON.stringify(p.criteria);
                        presetSelect.appendChild(opt);
                    });
                });
        }
        refreshPresets();

        document.getElementById('savePresetBtn').addEventListener('click', function() {
            const name = document.getElementById('preset_name').value.trim();
            if (!name) { showAlert('danger', 'Please enter a preset name.'); return; }
            const form = document.getElementById('pricingFilterForm');
            const fd = new FormData(form);
            const criteria = {};
            fd.forEach((v, k) => { if (v !== '') criteria[k] = v; });
            fetch('{{ route('admin.pricing.presets.save') }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
                body: JSON.stringify({ name, criteria })
            }).then(r => r.json()).then(data => {
                if (data.success) { showAlert('success', 'Preset saved.'); refreshPresets(); }
                else showAlert('danger', data.message || 'Failed to save preset.');
            });
        });

        document.getElementById('applyPresetBtn').addEventListener('click', function() {
            const opt = presetSelect.selectedOptions[0];
            if (!opt) return;
            const criteria = JSON.parse(opt.dataset.criteria || '{}');
            const form = document.getElementById('pricingFilterForm');
            Object.keys(criteria).forEach(k => {
                const el = form.querySelector(`[name="${k}"]`);
                if (el) el.value = criteria[k];
            });
            loadPage(1);
        });

        document.getElementById('deletePresetBtn').addEventListener('click', function() {
            const val = presetSelect.value; if (!val) return;
            fetch(`{{ url('/admin/pricing/presets') }}/${val}`, {
                method: 'DELETE', headers: { 'X-CSRF-TOKEN': csrfToken }
            }).then(r => r.json()).then(data => {
                if (data.success) { showAlert('success', 'Preset deleted.'); refreshPresets(); }
            });
        });

        // Keyboard navigation for pagination
        paginationContainer && paginationContainer.addEventListener('keydown', function(e) {
            const active = paginationContainer.querySelector('.page-item.active .page-link');
            const current = active ? parseInt(active.dataset.page, 10) : null;
            const lastItem = paginationContainer.querySelector('.page-item:last-child .page-link');
            const last = lastItem ? parseInt(lastItem.dataset.page, 10) : null;
            if (!current || !last) return;
            if (e.key === 'ArrowLeft') {
                e.preventDefault();
                loadPage(Math.max(1, current - 1));
            } else if (e.key === 'ArrowRight') {
                e.preventDefault();
                loadPage(Math.min(last, current + 1));
            }
        });

        // Initial bind for current DOM
        bindRowEvents();

        // Bulk validation helper
        function validateBulkInputs() {
            const ids = Array.from(selected);
            if (ids.length === 0) return 'Please select at least one record.';
        const uMax = parseFloat(document.getElementById('uniform_maximum_charge').value || '');
        const uMin = parseFloat(document.getElementById('uniform_minimum_charge').value || '');
        if (!isNaN(uMax) && !isNaN(uMin) && uMax < uMin) return 'Uniform max cannot be less than uniform min.';
        const tMax = parseFloat(document.getElementById('threshold_maximum_charge').value || '');
        const tMin = parseFloat(document.getElementById('threshold_minimum_charge').value || '');
        if (!isNaN(tMax) && !isNaN(tMin) && tMax < tMin) return 'Threshold max cannot be less than threshold min.';
        // Require at least one change specified
        const payloadPreview = buildPayload();
        const hasChanges = Object.keys(payloadPreview.uniform).length || Object.keys(payloadPreview.percent).length || Object.keys(payloadPreview.thresholds).length;
        if (!hasChanges) return 'Please specify at least one change (uniform, percent, or thresholds).';
        return null;
    }

    function buildPayload() {
        const uniform = {
            base_rate: document.getElementById('uniform_base_rate').value || null,
            per_kg_rate: document.getElementById('uniform_per_kg_rate').value || null,
            minimum_charge: document.getElementById('uniform_minimum_charge').value || null,
            maximum_charge: document.getElementById('uniform_maximum_charge').value || null,
            estimated_days: document.getElementById('uniform_estimated_days').value || null,
            is_active: document.getElementById('uniform_is_active').checked ? 1 : null,
        };
        const percent = {
            base_rate: document.getElementById('percent_base_rate').value || null,
            per_kg_rate: document.getElementById('percent_per_kg_rate').value || null,
            minimum_charge: document.getElementById('percent_minimum_charge').value || null,
            maximum_charge: document.getElementById('percent_maximum_charge').value || null,
        };
        const thresholds = {
            minimum_charge: document.getElementById('threshold_minimum_charge').value || null,
            maximum_charge: document.getElementById('threshold_maximum_charge').value || null,
        };
        // Remove empty keys
        function prune(obj) {
            const out = {};
            Object.keys(obj).forEach(k => { if (obj[k] !== null && obj[k] !== '') out[k] = obj[k]; });
            return out;
        }
        return {
            ids: Array.from(selected),
            uniform: prune(uniform),
            percent: prune(percent),
            thresholds: prune(thresholds)
        };
    }

    function showProgressStart() {
        progressWrap.classList.remove('d-none');
        progressBar.style.width = '10%';
    }
    function showProgressDone() {
        progressBar.style.width = '100%';
        setTimeout(() => { progressWrap.classList.add('d-none'); progressBar.style.width = '0%'; }, 800);
    }

    // Preview dialog
    document.getElementById('previewBulkBtn').addEventListener('click', function() {
        const err = validateBulkInputs();
        bulkValidationMsg.textContent = err ? err : '';
        if (err) { showAlert('danger', err); return; }
        const payload = buildPayload();
        const parts = [];
        if (Object.keys(payload.uniform).length) parts.push('<strong>Uniform:</strong> ' + Object.keys(payload.uniform).join(', '));
        if (Object.keys(payload.percent).length) parts.push('<strong>Percent:</strong> ' + Object.keys(payload.percent).join(', '));
        if (Object.keys(payload.thresholds).length) parts.push('<strong>Thresholds:</strong> ' + Object.keys(payload.thresholds).join(', '));
        const summary = `You are about to update <strong>${payload.ids.length}</strong> record(s).<br>${parts.join('<br>')}`;
        bulkConfirmSummaryEl.innerHTML = summary;
        bulkConfirmModal.show();
    });

    // Apply bulk update (open confirm modal first)
    document.getElementById('applyBulkBtn').addEventListener('click', function() {
        const err = validateBulkInputs();
        bulkValidationMsg.textContent = err ? err : '';
        if (err) { showAlert('danger', err); return; }
        const payload = buildPayload();
        const parts = [];
        if (Object.keys(payload.uniform).length) parts.push('<strong>Uniform:</strong> ' + Object.keys(payload.uniform).join(', '));
        if (Object.keys(payload.percent).length) parts.push('<strong>Percent:</strong> ' + Object.keys(payload.percent).join(', '));
        if (Object.keys(payload.thresholds).length) parts.push('<strong>Thresholds:</strong> ' + Object.keys(payload.thresholds).join(', '));
        const summary = `You are about to update <strong>${payload.ids.length}</strong> record(s).<br>${parts.join('<br>')}`;
        bulkConfirmSummaryEl.innerHTML = summary;
        bulkConfirmModal.show();
    });

    // Confirm apply bulk
    document.getElementById('confirmApplyBulkBtn').addEventListener('click', function() {
        const payload = buildPayload();
        bulkConfirmModal.hide();
        showProgressStart();
        const useAsync = document.getElementById('dataops_toggle').checked;
        const endpoint = useAsync ? '/admin/pricing/bulk-update/async' : '/admin/pricing/bulk-update';
        fetch(endpoint, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify(payload)
        }).then(r => r.json()).then(data => {
            if (data.success) {
                if (useAsync) {
                    showAlert('success', `Queued bulk update in DataOps region. Batch ID: ${data.batch_id}.`);
                } else {
                    showAlert('success', `Updated ${data.summary.updated} of ${data.summary.processed} records. Skipped: ${data.summary.skipped}.`);
                    setTimeout(() => { window.location.reload(); }, 800);
                }
            } else {
                showAlert('danger', data.message || 'Bulk update failed.');
            }
        }).catch(err => {
            showAlert('danger', 'Network error during bulk update.');
            console.error(err);
        }).finally(() => {
            showProgressDone();
        });
    });

    // Delete all pricing records
    document.getElementById('deleteAllBtn').addEventListener('click', function() {
        deleteAllInput.value = '';
        deleteAllModal.show();
    });

    document.getElementById('confirmDeleteAllBtn').addEventListener('click', function() {
        if ((deleteAllInput.value || '').trim().toUpperCase() !== 'DELETE ALL') {
            showAlert('danger', 'Please type DELETE ALL to confirm.');
            return;
        }
        showProgressStart();
        fetch('/admin/pricing/delete-all', {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            }
        }).then(r => r.json()).then(data => {
            if (data.success) {
                showAlert('success', `Deleted ${data.deleted} pricing records.`);
                setTimeout(() => { window.location.reload(); }, 800);
            } else {
                showAlert('danger', data.message || 'Failed to delete pricing records.');
            }
        }).catch(err => {
            console.error(err);
            showAlert('danger', 'Network error during delete-all.');
        }).finally(() => {
            deleteAllModal.hide();
            showProgressDone();
        });
    });
});

function showAlert(type, message) {
    const alertDiv = document.createElement('div');
    const map = { 'success': 'success', 'info': 'info', 'danger': 'danger', 'error': 'danger' };
    alertDiv.className = `alert alert-${map[type] || 'info'} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    const container = document.querySelector('.container-fluid');
    container.insertBefore(alertDiv, container.firstChild);
    
    // Auto dismiss after 5 seconds
    setTimeout(() => {
        alertDiv.remove();
    }, 5000);
}
</script>
@endsection