@extends('layouts.app')
@section('content')
<style>
    #page-loader {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(255, 255, 255, 0.85);
        z-index: 99999;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #page-loader.active { display: flex; }
    .loader-spinner {
        width: 50px; height: 50px;
        border: 5px solid #e5e5e5;
        border-top: 5px solid #007bff;
        border-radius: 50%;
        animation: ocg-spin 0.8s linear infinite;
    }
    @keyframes ocg-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .ocg-page {
        max-width: 100%;
        margin: 0 auto;
        padding: 12px 20px 24px;
    }
    .ocg-page h2 {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0 0 4px;
        color: #333;
    }
    .ocg-page .ocg-subtitle {
        font-size: 13px;
        margin: 0 0 14px;
        color: #6c757d;
    }

    .ocg-toolbar {
        background: #f8f9fa;
        border: 1px solid #e2e2e2;
        border-radius: 6px;
        padding: 14px 16px;
        margin-bottom: 14px;
    }
    .ocg-toolbar .ocg-field {
        margin-bottom: 0;
    }
    .ocg-toolbar .ocg-field > label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #444;
        margin-bottom: 6px;
    }
    .ocg-toolbar .fs-wrap {
        width: 100%;
        display: block;
    }
    .ocg-toolbar .fs-label-wrap,
    .ocg-toolbar .fs-dropdown {
        width: 100%;
    }

    .ocg-paste-row {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
    }
    .ocg-paste-row #paste-numbers {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 38px;
        height: 38px;
        resize: vertical;
        padding: 6px 10px;
        line-height: 1.4;
    }
    .ocg-paste-row #btn-load-paste {
        flex: 0 0 auto;
        height: 38px;
        padding: 0 14px;
        line-height: 36px;
        white-space: nowrap;
        margin: 0;
    }

    .ocg-meta {
        color: #666;
        font-size: 13px;
        margin: 0 0 12px;
        text-align: left;
    }
    .ocg-alert {
        display: none;
        margin-bottom: 12px;
    }
    .ocg-actions {
        margin-top: 16px;
        display: flex;
        gap: 10px;
        align-items: center;
    }
    .ocg-actions #btn-clear {
        background: #fff;
        border: 1px solid #ced4da;
        color: #495057;
    }
    .ocg-apply-all {
        display: none;
        background: #eef3f8;
        border: 1px solid #d0d7de;
        border-radius: 6px;
        padding: 10px 12px;
        margin-bottom: 10px;
        overflow: visible;
        box-sizing: border-box;
        width: 100%;
        position: relative;
        z-index: 20;
    }
    .ocg-apply-all .ocg-apply-title {
        font-size: 13px;
        font-weight: 600;
        margin: 0 0 8px;
        color: #333;
    }
    .ocg-apply-all .ocg-apply-fields {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        align-items: end;
        overflow: visible;
    }
    .ocg-apply-all .ocg-apply-fields .ocg-field {
        min-width: 0;
        margin-bottom: 0;
        position: relative;
        z-index: 1;
        overflow: visible;
    }
    .ocg-apply-all .ocg-apply-fields .ocg-field:focus-within,
    .ocg-apply-all .ocg-apply-fields .ocg-field:has(.fs-wrap.fs-open) {
        z-index: 30;
    }
    .ocg-apply-all .fs-wrap {
        width: 100%;
        display: block;
        max-width: 100%;
        box-sizing: border-box;
        position: relative;
    }
    .ocg-apply-all .fs-wrap.fs-open {
        z-index: 40;
    }
    .ocg-apply-all .fs-dropdown {
        z-index: 50 !important;
    }
    .ocg-apply-all .ocg-field > label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 600;
        color: #444;
        margin-bottom: 4px;
        min-height: 18px;
    }
    .ocg-apply-all .ocg-field > label input[type="checkbox"] {
        margin: 0;
    }
    .ocg-apply-all .fs-label-wrap {
        height: 34px;
        box-sizing: border-box;
    }
    .ocg-apply-all .fs-label {
        line-height: 32px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .ocg-apply-all .form-control {
        font-size: 13px;
        height: 34px !important;
        min-height: 34px;
        max-height: 34px;
        padding: 6px 8px !important;
        line-height: 20px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .ocg-apply-all .ocg-apply-action {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-width: 0;
    }
    .ocg-apply-all .ocg-apply-action .ocg-apply-action-spacer {
        min-height: 18px;
        margin-bottom: 4px;
    }
    .ocg-apply-all #btn-apply-all {
        height: 34px;
        width: 100%;
        padding: 0 10px;
        white-space: nowrap;
        box-sizing: border-box;
    }
    @media (max-width: 992px) {
        .ocg-apply-all .ocg-apply-fields {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
    @media (max-width: 576px) {
        .ocg-apply-all .ocg-apply-fields {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
    }

    .ocg-table-wrap {
        width: 100%;
        overflow-x: auto;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        background: #fff;
        position: relative;
        z-index: 1;
    }
    .ocg-table {
        width: 100%;
        margin: 0;
        border-collapse: collapse;
        table-layout: fixed;
        min-width: 1100px;
    }
    .ocg-table thead th {
        background: #f1f3f5;
        font-size: 12px;
        font-weight: 600;
        color: #333;
        padding: 3px 6px;
        border-bottom: 1px solid #dee2e6;
        white-space: nowrap;
        vertical-align: middle;
    }
    .ocg-table tbody td {
        padding: 3px;
        border-bottom: 1px solid #eee;
        vertical-align: middle;
        font-size: 13px;
    }
    .ocg-table tbody tr:hover {
        background: #fafbfc;
    }
    .ocg-table .ocg-col-number { width: 110px; }
    .ocg-table .ocg-col-entity { width: 200px; }
    .ocg-table .ocg-col-pbn { width: 160px; }
    .ocg-table .ocg-col-status { width: 120px; }
    .ocg-table .ocg-col-desc { width: 150px; }
    .ocg-table .ocg-col-cg { width: 240px; }
    .ocg-table .ocg-col-action {
        width: 28px;
        text-align: center;
        padding: 2px !important;
    }
    .ocg-table button.btn-remove-row,
    .ocg-table .btn-remove-row {
        display: inline-block;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 2px !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #dc3545 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        cursor: pointer;
        vertical-align: middle;
    }
    .ocg-table button.btn-remove-row:hover,
    .ocg-table .btn-remove-row:hover {
        color: #a71d2a !important;
        background: transparent !important;
    }
    .ocg-table .ocg-number {
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.2px;
        white-space: nowrap;
    }
    .ocg-table .form-control {
        font-size: 13px;
        height: 32px;
        padding: 2px 6px;
    }
    .ocg-table .fs-wrap {
        width: 100%;
        display: block;
        margin: 0;
    }
    .ocg-table td .fs-label-wrap {
        width: 100%;
    }
    .ocg-cg-empty {
        color: #999;
        font-size: 12px;
    }
</style>

<div id="page-loader">
    <div class="loader-spinner"></div>
    <div style="margin-top:12px;font-weight:600;">Loading...</div>
</div>

<div class="container-fluid ocg-page">
    <h2>OBN Carrier Group Update Tool</h2>
    <p class="ocg-subtitle">Load OBNs by entity or paste, then update entities, status, preferred business name, description, and mapper carrier groups.</p>

    <div id="ocg-alert" class="alert ocg-alert" role="alert"></div>

    <div class="ocg-toolbar">
        <div class="row align-items-end">
            <div class="col-md-3">
                <div class="ocg-field">
                    <label for="user-select">User</label>
                    <select id="user-select" class="form-control">
                        <option value="">Select User</option>
                        @foreach($users as $user)
                            <option value="{{ $user['user_reference_id'] }}">{{ $user['user_login'] }} ({{ $user['user_reference_id'] }})</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-3">
                <div class="ocg-field">
                    <label for="entity-select">Entity</label>
                    <select id="entity-select" class="form-control">
                        <option value="">Select Entity</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <div class="ocg-field">
                    <label for="paste-numbers">Paste numbers (CSV / Excel copy)</label>
                    <div class="ocg-paste-row">
                        <textarea id="paste-numbers" class="form-control" rows="1" placeholder="Paste numbers here (newline, comma, or tab separated)"></textarea>
                        <button type="button" class="btn btn-primary" id="btn-load-paste">Load Paste</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ocg-meta">
        <span id="numbers-count">0 numbers loaded</span>
        <span id="skipped-info" style="margin-left:12px;"></span>
    </div>

    <div id="ocg-apply-all" class="ocg-apply-all">
        <div class="ocg-apply-title">Apply to all loaded numbers (check fields to apply)</div>
        <div class="ocg-apply-fields">
            <div class="ocg-field">
                <label><input type="checkbox" class="ocg-apply-chk" data-field="entity" checked> Entity</label>
                <select id="apply-entity" class="form-control" multiple="multiple"></select>
            </div>
            <div class="ocg-field">
                <label><input type="checkbox" class="ocg-apply-chk" data-field="pbn" checked> Preferred Business Name</label>
                <input type="text" id="apply-pbn" class="form-control" placeholder="Preferred Business Name">
            </div>
            <div class="ocg-field">
                <label><input type="checkbox" class="ocg-apply-chk" data-field="status" checked> Status</label>
                <select id="apply-status" class="form-control">
                    @foreach($statuses as $status)
                        <option value="{{ $status['id'] }}">{{ $status['label'] }}</option>
                    @endforeach
                </select>
            </div>
            <div class="ocg-field">
                <label><input type="checkbox" class="ocg-apply-chk" data-field="desc" checked> Description</label>
                <input type="text" id="apply-desc" class="form-control" placeholder="Description">
            </div>
            <div class="ocg-field">
                <label><input type="checkbox" class="ocg-apply-chk" data-field="cg" checked> Carrier Groups</label>
                <div id="apply-cg-wrap">
                    <select id="apply-cg" class="form-control" multiple="multiple"></select>
                    <span id="apply-cg-empty" class="ocg-cg-empty" style="display:none;">Select mapper entities first</span>
                </div>
            </div>
            <div class="ocg-apply-action">
                <div class="ocg-apply-action-spacer"></div>
                <button type="button" class="btn btn-primary" id="btn-apply-all">Apply</button>
            </div>
        </div>
    </div>

    <div id="numbers-container" class="ocg-table-wrap" style="display:none;">
        <table class="ocg-table" id="ocg-numbers-table">
            <thead>
                <tr>
                    <th class="ocg-col-number">Number</th>
                    <th class="ocg-col-entity">Entity (max 6)</th>
                    <th class="ocg-col-pbn">Preferred Business Name</th>
                    <th class="ocg-col-status">Status</th>
                    <th class="ocg-col-desc">Description</th>
                    <th class="ocg-col-cg">Carrier Groups</th>
                    <th class="ocg-col-action"></th>
                </tr>
            </thead>
            <tbody id="ocg-numbers-body"></tbody>
        </table>
    </div>

    <div class="ocg-actions">
        <button type="button" class="btn btn-success" id="btn-save" disabled>Save Changes</button>
        <button type="button" class="btn btn-default" id="btn-clear">Clear</button>
    </div>
</div>

<script>
(function ($) {
    var CSRF = '{{ csrf_token() }}';
    var STATUSES = @json($statuses);
    var MAX_ENTITIES = 6;
    var entitiesCache = [];
    var entitiesById = {};
    var currentUserId = null;
    var fSelectOpts = {
        placeholder: 'Select',
        numDisplayed: 2,
        overflowText: '{n} selected',
        noResultsText: 'No results',
        searchText: 'Search',
        showSearch: true
    };

    function showLoader(show) {
        $('#page-loader').toggleClass('active', !!show);
    }

    var alertHideTimer = null;

    function showAlert(type, message) {
        var $a = $('#ocg-alert');
        if (alertHideTimer) {
            clearTimeout(alertHideTimer);
            alertHideTimer = null;
        }
        $a.stop(true, true)
            .removeClass('alert-success alert-danger alert-warning alert-info')
            .addClass('alert-' + type)
            .html(message)
            .show();
        alertHideTimer = setTimeout(function () {
            $a.fadeOut(300);
            alertHideTimer = null;
        }, 4000);
    }

    function hideAlert() {
        if (alertHideTimer) {
            clearTimeout(alertHideTimer);
            alertHideTimer = null;
        }
        $('#ocg-alert').stop(true, true).hide();
    }

    function initFSelect($el, opts) {
        if (!$el || !$el.length) {
            return;
        }
        // fSelect destroy() does not clear data('fSelect'), so re-init would be skipped
        if ($el.data('fSelect')) {
            try { $el.fSelect('destroy'); } catch (e) {}
            $el.removeData('fSelect');
        }
        if ($el.parent().hasClass('fs-wrap')) {
            $el.unwrap();
        }
        $el.parent().children('.fs-wrap').remove();
        $el.removeClass('hidden').show();
        $el.fSelect($.extend({}, fSelectOpts, opts || {}));
    }

    function setRowEntitySelect($row, selectedEntityIds) {
        var $td = $row.find('.ocg-col-entity');
        $td.html(
            '<select class="form-control ocg-entity-select" multiple="multiple">' +
            entityOptionsHtml(selectedEntityIds) +
            '</select>'
        );
        initFSelect($td.find('.ocg-entity-select'), {
            placeholder: 'Select Entity',
            overflowText: '{n} selected',
            noResultsText: 'No Entity found',
            searchText: 'Search Entity'
        });
    }

    function setRowStatusSelect($row, status) {
        var $td = $row.find('.ocg-col-status');
        $td.html(
            '<select class="form-control ocg-status">' +
            statusOptionsHtml(status) +
            '</select>'
        );
        initFSelect($td.find('.ocg-status'), {
            placeholder: 'Status',
            showSearch: false,
            numDisplayed: 1
        });
    }

    function reloadFSelect($el) {
        if ($el.data('fSelect')) {
            $el.fSelect('reload');
        } else {
            initFSelect($el);
        }
    }

    function statusOptionsHtml(selected) {
        var html = '';
        STATUSES.forEach(function (s) {
            html += '<option value="' + s.id + '"' + (String(s.id) === String(selected) ? ' selected' : '') + '>' + s.label + '</option>';
        });
        return html;
    }

    function entityOptionsHtml(selectedIds) {
        selectedIds = (selectedIds || []).map(String);
        var html = '';
        entitiesCache.forEach(function (e) {
            var selected = selectedIds.indexOf(String(e.id)) !== -1 ? ' selected' : '';
            html += '<option value="' + e.id + '"' + selected + '>' + e.entity + ' (' + e.entity_type_label + ')</option>';
        });
        return html;
    }

    function escapeAttr(str) {
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
    }

    function carrierGroupOptionsHtml(selectedEntityIds, selectedByEntity) {
        selectedByEntity = selectedByEntity || {};
        var html = '';
        (selectedEntityIds || []).forEach(function (entityId) {
            var entity = entitiesById[entityId];
            if (!entity || parseInt(entity.entity_type, 10) !== 3) {
                return;
            }
            if (!entity.carrier_groups || !entity.carrier_groups.length) {
                return;
            }
            var selectedIds = (selectedByEntity[String(entityId)] || []).map(String);
            html += '<optgroup label="' + escapeAttr(entity.entity) + '">';
            entity.carrier_groups.forEach(function (g) {
                var value = g.id + '_' + entityId;
                var selected = selectedIds.indexOf(String(g.id)) !== -1 ? ' selected' : '';
                html += '<option value="' + value + '"' + selected + '>' +
                    escapeAttr(g.group_name) +
                    '</option>';
            });
            html += '</optgroup>';
        });
        return html;
    }

    function getRowCarrierSelections($row) {
        var result = {};
        var selected = $row.find('.ocg-cg-select').val() || [];
        selected.forEach(function (val) {
            var parts = String(val).split('_');
            if (parts.length < 2) {
                return;
            }
            var groupId = parts[0];
            var entityId = parts.slice(1).join('_');
            if (!result[entityId]) {
                result[entityId] = [];
            }
            result[entityId].push(Number(groupId));
        });
        return result;
    }

    function renderCarrierGroupSelect($row, selectedEntityIds, preserveSelections) {
        var $td = $row.find('.ocg-col-cg');
        var previous = preserveSelections || getRowCarrierSelections($row);
        var optionsHtml = carrierGroupOptionsHtml(selectedEntityIds, previous);

        // Rebuild as a single select with entity optgroups (image 1 format)
        $td.find('.fs-wrap').remove();
        $td.html(
            '<select class="form-control ocg-cg-select" multiple="multiple"></select>' +
            '<span class="ocg-cg-empty" style="display:none;">No mapper carrier groups</span>'
        );

        var $select = $td.find('.ocg-cg-select');
        if (!optionsHtml) {
            $select.hide();
            $td.find('.ocg-cg-empty').show();
            return;
        }

        $td.find('.ocg-cg-empty').hide();
        $select.html(optionsHtml);
        initFSelect($select, {
            placeholder: 'Select Carrier Group',
            overflowText: '{n} selected',
            noResultsText: 'No Group found',
            searchText: 'Search',
            showSearch: true,
            numDisplayed: 3
        });
    }

    function ensureTableVisible(show) {
        var becomingVisible = show && !$('#ocg-apply-all').is(':visible');
        $('#numbers-container').toggle(!!show);
        $('#ocg-apply-all').toggle(!!show);
        if (becomingVisible) {
            refreshApplyAllControls();
        }
    }

    function refreshApplyAllControls() {
        var currentEntities = $('#apply-entity').val() || [];
        var $applyEntity = $('#apply-entity');
        if ($applyEntity.length) {
            $applyEntity.html(entityOptionsHtml(currentEntities));
            initFSelect($applyEntity, {
                placeholder: 'Select Entity',
                overflowText: '{n} selected',
                noResultsText: 'No Entity found',
                searchText: 'Search Entity'
            });
        }

        if ($('#apply-status').length) {
            initFSelect($('#apply-status'), {
                placeholder: 'Status',
                showSearch: false,
                numDisplayed: 1
            });
        }

        refreshApplyCarrierGroups();
    }

    function refreshApplyCarrierGroups() {
        var selectedEntities = $('#apply-entity').val() || [];
        var previous = {};
        var $existingCg = $('#apply-cg');
        if ($existingCg.length) {
            ($existingCg.val() || []).forEach(function (val) {
                var parts = String(val).split('_');
                if (parts.length < 2) return;
                var groupId = parts[0];
                var entityId = parts.slice(1).join('_');
                if (!previous[entityId]) previous[entityId] = [];
                previous[entityId].push(Number(groupId));
            });
        }

        var optionsHtml = carrierGroupOptionsHtml(selectedEntities, previous);
        var $wrap = $('#apply-cg-wrap');
        $wrap.find('.fs-wrap').remove();
        $wrap.html(
            '<select id="apply-cg" class="form-control" multiple="multiple"></select>' +
            '<span id="apply-cg-empty" class="ocg-cg-empty" style="display:none;">Select mapper entities first</span>'
        );

        var $cg = $wrap.find('#apply-cg');
        if (!optionsHtml) {
            $cg.hide();
            $wrap.find('#apply-cg-empty').show();
            return;
        }

        $wrap.find('#apply-cg-empty').hide();
        $cg.html(optionsHtml).show();
        initFSelect($cg, {
            placeholder: 'Select Carrier Group',
            overflowText: '{n} selected',
            noResultsText: 'No Group found',
            searchText: 'Search',
            showSearch: true,
            numDisplayed: 3
        });
    }

    function getApplyCarrierSelections() {
        var result = {};
        var $cg = $('#apply-cg');
        if (!$cg.length) {
            return result;
        }
        ($cg.val() || []).forEach(function (val) {
            var parts = String(val).split('_');
            if (parts.length < 2) return;
            var groupId = parts[0];
            var entityId = parts.slice(1).join('_');
            if (!result[entityId]) result[entityId] = [];
            result[entityId].push(Number(groupId));
        });
        return result;
    }

    function applyAllToRows() {
        var rows = $('#ocg-numbers-body .ocg-row');
        if (!rows.length) {
            showAlert('warning', 'No numbers loaded.');
            return;
        }

        var applyEntity = $('.ocg-apply-chk[data-field="entity"]').is(':checked');
        var applyPbn = $('.ocg-apply-chk[data-field="pbn"]').is(':checked');
        var applyStatus = $('.ocg-apply-chk[data-field="status"]').is(':checked');
        var applyDesc = $('.ocg-apply-chk[data-field="desc"]').is(':checked');
        var applyCg = $('.ocg-apply-chk[data-field="cg"]').is(':checked');

        if (!applyEntity && !applyPbn && !applyStatus && !applyDesc && !applyCg) {
            showAlert('warning', 'Check at least one field to apply.');
            return;
        }

        var entities = $('#apply-entity').val() || [];
        if (applyEntity && entities.length > MAX_ENTITIES) {
            showAlert('warning', 'Maximum ' + MAX_ENTITIES + ' entities allowed.');
            return;
        }

        var pbn = $('#apply-pbn').val();
        var status = $('#apply-status').val();
        var desc = $('#apply-desc').val();
        var carrierGroups = getApplyCarrierSelections();

        rows.each(function () {
            var $row = $(this);
            var rowCgBefore = getRowCarrierSelections($row);

            if (applyEntity) {
                setRowEntitySelect($row, entities);
            }

            if (applyPbn) {
                $row.find('.ocg-pbn').val(pbn);
            }

            if (applyStatus) {
                setRowStatusSelect($row, status);
            }

            if (applyDesc) {
                $row.find('.ocg-desc').val(desc);
            }

            if (applyEntity || applyCg) {
                var rowEntities = applyEntity ? entities : ($row.find('.ocg-entity-select').val() || []);
                var cgToApply = {};

                if (applyCg) {
                    cgToApply = carrierGroups;
                } else {
                    rowEntities.forEach(function (entityId) {
                        var key = String(entityId);
                        if (rowCgBefore[key] && rowCgBefore[key].length) {
                            cgToApply[key] = rowCgBefore[key];
                        }
                    });
                }

                renderCarrierGroupSelect($row, rowEntities, cgToApply);
            }
        });

        showAlert('success', 'Applied selected fields to ' + rows.length + ' number(s).');
    }

    function renderNumberRow(item) {
        var number = item.number;
        var entities = item.entities || [];
        var carrierGroups = item.carrier_groups || {};
        if (Array.isArray(carrierGroups)) {
            carrierGroups = {};
        }

        var html = '<tr class="ocg-row" data-number="' + number + '">' +
            '<td class="ocg-col-number"><span class="ocg-number">' + number + '</span></td>' +
            '<td class="ocg-col-entity">' +
            '<select class="form-control ocg-entity-select" multiple="multiple">' +
            entityOptionsHtml(entities) +
            '</select></td>' +
            '<td class="ocg-col-pbn">' +
            '<input type="text" class="form-control ocg-pbn" value="' + escapeAttr(item.preferred_business_name || '') + '">' +
            '</td>' +
            '<td class="ocg-col-status">' +
            '<select class="form-control ocg-status">' +
            statusOptionsHtml(item.status) +
            '</select></td>' +
            '<td class="ocg-col-desc">' +
            '<input type="text" class="form-control ocg-desc" value="' + escapeAttr(item.number_description || '') + '">' +
            '</td>' +
            '<td class="ocg-col-cg"></td>' +
            '<td class="ocg-col-action">' +
            '<button type="button" class="btn-remove-row" title="Remove">&times;</button>' +
            '</td>' +
            '</tr>';

        var $row = $(html);
        $('#ocg-numbers-body').append($row);

        initFSelect($row.find('.ocg-entity-select'), {
            placeholder: 'Select Entity',
            overflowText: '{n} selected',
            noResultsText: 'No Entity found',
            searchText: 'Search Entity'
        });
        initFSelect($row.find('.ocg-status'), {
            placeholder: 'Status',
            showSearch: false,
            numDisplayed: 1
        });

        renderCarrierGroupSelect($row, entities, carrierGroups);
    }

    function updateCount(n, skipped) {
        $('#numbers-count').text(n + ' number' + (n === 1 ? '' : 's') + ' loaded');
        if (skipped && skipped.length) {
            $('#skipped-info').text('Skipped (not found): ' + skipped.join(', '));
        } else {
            $('#skipped-info').text('');
        }
        $('#btn-save').prop('disabled', n === 0);
        ensureTableVisible(n > 0);
    }

    function clearCards() {
        $('#ocg-numbers-body').empty();
        updateCount(0);
    }

    function renderNumbers(list, skipped) {
        clearCards();
        (list || []).forEach(renderNumberRow);
        updateCount((list || []).length, skipped || []);
    }

    function loadEntities(userId) {
        return $.ajax({
            url: '{{ route("obncarriergrouptool.entities") }}',
            method: 'GET',
            data: { user_id: userId }
        }).done(function (res) {
            if (!res.success) {
                showAlert('danger', res.message || 'Failed to load entities');
                entitiesCache = [];
                entitiesById = {};
                return;
            }
            entitiesCache = res.data || [];
            entitiesById = {};
            entitiesCache.forEach(function (e) {
                entitiesById[e.id] = e;
            });

            var $entity = $('#entity-select');
            var html = '<option value="">Select Entity</option>';
            entitiesCache.forEach(function (e) {
                html += '<option value="' + e.id + '">' + e.entity + ' (' + e.entity_type_label + ')</option>';
            });
            $entity.html(html);
            reloadFSelect($entity);
        }).fail(function () {
            showAlert('danger', 'Failed to load entities.');
        });
    }

    function loadNumbersByEntity(userId, entityId) {
        showLoader(true);
        hideAlert();
        $.ajax({
            url: '{{ route("obncarriergrouptool.numbers") }}',
            method: 'GET',
            data: { user_id: userId, entity_id: entityId }
        }).done(function (res) {
            if (!res.success) {
                showAlert('danger', res.message || 'Failed to load numbers');
                clearCards();
                return;
            }
            renderNumbers(res.data || []);
            if (!(res.data || []).length) {
                showAlert('info', 'No numbers found for this entity.');
            }
        }).fail(function () {
            showAlert('danger', 'Request failed while loading numbers.');
        }).always(function () {
            showLoader(false);
        });
    }

    // Init top-level selects
    initFSelect($('#user-select'), { placeholder: 'Select User', numDisplayed: 1, showSearch: true });
    initFSelect($('#entity-select'), { placeholder: 'Select Entity', numDisplayed: 1, showSearch: true });

    $('#user-select').on('change', function () {
        currentUserId = $(this).val() || null;
        clearCards();
        hideAlert();
        $('#paste-numbers').val('');
        if (!currentUserId) {
            $('#entity-select').html('<option value="">Select Entity</option>');
            reloadFSelect($('#entity-select'));
            return;
        }
        showLoader(true);
        loadEntities(currentUserId).always(function () {
            showLoader(false);
        });
    });

    $('#entity-select').on('change', function () {
        var entityId = $(this).val();
        if (!currentUserId || !entityId) {
            return;
        }
        loadNumbersByEntity(currentUserId, entityId);
    });

    $('#btn-load-paste').on('click', function () {
        if (!currentUserId) {
            showAlert('warning', 'Please select a user first.');
            return;
        }
        var raw = $('#paste-numbers').val();
        if (!$.trim(raw)) {
            showAlert('warning', 'Paste some numbers first.');
            return;
        }
        showLoader(true);
        hideAlert();
        $.ajax({
            url: '{{ route("obncarriergrouptool.numbersByPaste") }}',
            method: 'POST',
            data: {
                _token: CSRF,
                user_id: currentUserId,
                numbers: raw
            }
        }).done(function (res) {
            if (!res.success) {
                showAlert('danger', res.message || 'Failed to load pasted numbers');
                clearCards();
                return;
            }
            renderNumbers(res.data || [], res.skipped || []);
            if (res.skipped_count) {
                showAlert('warning', 'Loaded ' + res.found_count + ' number(s). Skipped ' + res.skipped_count + ' not found for this user.');
            } else if (!(res.data || []).length) {
                showAlert('info', 'No matching numbers found.');
            } else {
                showAlert('success', 'Loaded ' + res.found_count + ' number(s).');
            }
        }).fail(function () {
            showAlert('danger', 'Request failed while loading pasted numbers.');
        }).always(function () {
            showLoader(false);
        });
    });

    $(document).on('change', '.ocg-entity-select', function () {
        var $select = $(this);
        var $row = $select.closest('.ocg-row');
        var selected = $select.val() || [];

        if (selected.length > MAX_ENTITIES) {
            selected = selected.slice(0, MAX_ENTITIES);
            $select.val(selected);
            reloadFSelect($select);
            showAlert('warning', 'Maximum ' + MAX_ENTITIES + ' entities allowed per number.');
        }

        renderCarrierGroupSelect($row, selected);
    });

    $('#apply-entity').on('change', function () {
        var selected = $(this).val() || [];
        if (selected.length > MAX_ENTITIES) {
            selected = selected.slice(0, MAX_ENTITIES);
            $(this).val(selected);
            reloadFSelect($(this));
            showAlert('warning', 'Maximum ' + MAX_ENTITIES + ' entities allowed.');
        }
        refreshApplyCarrierGroups();
    });

    $('#btn-apply-all').on('click', function () {
        applyAllToRows();
    });

    $(document).on('click', '.btn-remove-row', function () {
        $(this).closest('.ocg-row').remove();
        updateCount($('#ocg-numbers-body .ocg-row').length);
    });

    $('#btn-clear').on('click', function () {
        clearCards();
        hideAlert();
        $('#paste-numbers').val('');
    });

    $('#btn-save').on('click', function () {
        if (!currentUserId) {
            showAlert('warning', 'Please select a user.');
            return;
        }

        var payload = [];
        var invalid = false;

        $('#ocg-numbers-body .ocg-row').each(function () {
            var $row = $(this);
            var entities = $row.find('.ocg-entity-select').val() || [];
            if (entities.length > MAX_ENTITIES) {
                invalid = true;
                return false;
            }
            payload.push({
                number: String($row.attr('data-number') || ''),
                entities: entities.map(Number),
                preferred_business_name: $row.find('.ocg-pbn').val(),
                status: Number($row.find('.ocg-status').val()),
                number_description: $row.find('.ocg-desc').val(),
                carrier_groups: getRowCarrierSelections($row)
            });
        });

        if (invalid) {
            showAlert('danger', 'One or more numbers exceed the max entity limit.');
            return;
        }
        if (!payload.length) {
            showAlert('warning', 'No numbers to save.');
            return;
        }

        showLoader(true);
        hideAlert();
        $.ajax({
            url: '{{ route("obncarriergrouptool.save") }}',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                _token: CSRF,
                user_id: Number(currentUserId),
                numbers: payload
            }),
            headers: {
                'X-CSRF-TOKEN': CSRF,
                'Accept': 'application/json'
            }
        }).done(function (res) {
            if (res.success) {
                var msg = res.message || 'Saved successfully.';
                if (res.data && res.data.errors && res.data.errors.length) {
                    msg += '<br>' + res.data.errors.join('<br>');
                    showAlert('warning', msg);
                } else {
                    showAlert('success', msg);
                }
            } else {
                var errMsg = res.message || 'Save failed.';
                if (res.data && res.data.errors && res.data.errors.length) {
                    errMsg += '<br>' + res.data.errors.join('<br>');
                }
                showAlert('danger', errMsg);
            }
        }).fail(function (xhr) {
            showAlert('danger', 'Save request failed.' + (xhr.responseJSON && xhr.responseJSON.message ? ' ' + xhr.responseJSON.message : ''));
        }).always(function () {
            showLoader(false);
        });
    });
})(jQuery);
</script>
@endsection