@php
    $previewContext = $previewContext ?? 'user';
    $previewExcludedIds = $previewExcludedIds ?? [];
    if (old('excluded_project_ids') !== null) {
        $previewExcludedIds = array_map('intval', (array) old('excluded_project_ids'));
    }
    $previewDepartmentField = $previewDepartmentField ?? 'department_ids';
    $previewVisible = $previewVisible ?? true;
@endphp

@if ($previewVisible)
<div class="row mt-3" id="accessible-projects-preview-wrap">
    <div class="col-md-12">
        <div class="card card-outline card-secondary mb-0">
            <div class="card-body pb-2">
                <div class="d-flex flex-wrap align-items-start justify-content-between mb-2">
                    <div class="mb-2 mb-md-0">
                        <h5 class="mb-1 font-weight-bold">Accessible Projects Preview</h5>
                        <p class="text-muted small mb-0">
                            Uses the same project authorization as Scheme and Project Allocation. When a block is assigned (or filtered in the table), preview matches navbar block selection for that block.
                        </p>
                    </div>
                    <div class="form-group mb-0 ml-md-3" style="min-width: 160px;">
                        <label for="accessible-projects-status-filter" class="small mb-1">Status</label>
                        <select id="accessible-projects-status-filter" class="form-control form-control-sm">
                            <option value="active" selected>Active</option>
                            <option value="inactive">Inactive</option>
                            <option value="all">All</option>
                        </select>
                    </div>
                </div>

                <div class="d-flex flex-wrap align-items-center justify-content-between mb-2">
                    <div class="mb-2 mb-md-0">
                        <span class="mr-3">Total: <strong id="accessible-projects-total" class="text-primary">0</strong></span>
                        <span>Excluded: <strong id="accessible-projects-excluded-count" class="text-danger">0</strong></span>
                    </div>
                    <div class="mb-2">
                        <button type="button" class="btn btn-info btn-sm" id="accessible-projects-exclude-btn" disabled>
                            Exclude Selected Projects
                        </button>
                        <button type="button" class="btn btn-default btn-sm" id="accessible-projects-unexclude-btn" disabled>
                            Unexclude Selected
                        </button>
                    </div>
                </div>

                <div id="accessible-projects-empty" class="alert alert-light border text-muted mb-2" style="display: none;">
                    No schemes are available for the selected department(s).
                </div>

                <div class="table-responsive">
                    <table id="accessible-projects-table" class="table table-bordered table-hover table-sm w-100 accessible-projects-table" style="display: none;">
                        <thead>
                            <tr>
                                <th style="width: 36px;"><input type="checkbox" id="accessible-projects-select-all" aria-label="Select all"></th>
                                <th>UID</th>
                                <th>Schemes</th>
                                <th>ADP Number</th>
                                <th>Department</th>
                                <th>Sub Department</th>
                                <th>Sector</th>
                                <th>Sub Sector</th>
                                <th>Block</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <div id="accessible-projects-hidden-inputs"></div>
            </div>
        </div>
    </div>
</div>
@endif

@once
    @push('stylesheets')
        <link rel="stylesheet" href="{{ asset('assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
        <style>
            .accessible-projects-table thead th {
                background-color: #d4edda;
                vertical-align: middle;
                white-space: nowrap;
            }
            .accessible-projects-table tbody tr.is-excluded td {
                opacity: 0.65;
                background-color: #fff5f5;
            }
            .accessible-projects-table tbody tr.is-excluded td:nth-child(3) {
                text-decoration: line-through;
            }
            #accessible-projects-preview-wrap .dataTables_wrapper .dataTables_filter {
                margin-bottom: 0.5rem;
            }
        </style>
    @endpush

    @push('scripts')
        <script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
        <script src="{{ asset('assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    @endpush
@endonce

@push('scripts')
<script>
(function () {
    var previewConfig = {
        context: @json($previewContext),
        dataUrl: @json(route('accessible-projects-preview.data')),
        departmentField: @json($previewDepartmentField),
        initialExcluded: @json(array_values(array_map('intval', $previewExcludedIds))),
    };

    var excludedIds = new Set(previewConfig.initialExcluded.map(Number));
    var dataTable = null;
    var selectedRowIds = new Set();

    function getSubDepartmentIds() {
        var $field = $('#sub_department_ids');
        if (!$field.length) {
            return [];
        }
        var val = $field.val();
        if (!val) {
            return [];
        }
        return (Array.isArray(val) ? val : [val]).map(function (id) {
            return parseInt(id, 10);
        }).filter(function (id) {
            return id > 0;
        });
    }

    function getFilterSectorIds() {
        var $field = $('#filter_sector_ids');
        if (!$field.length) {
            return [];
        }
        var val = $field.val();
        if (!val) {
            return [];
        }
        return (Array.isArray(val) ? val : [val]).map(function (id) {
            return parseInt(id, 10);
        }).filter(function (id) {
            return id > 0;
        });
    }

    function getFilterSubSectorIds() {
        var $field = $('#filter_sub_sector_ids');
        if (!$field.length) {
            return [];
        }
        var val = $field.val();
        if (!val) {
            return [];
        }
        return (Array.isArray(val) ? val : [val]).map(function (id) {
            return parseInt(id, 10);
        }).filter(function (id) {
            return id > 0;
        });
    }

    function getDepartmentIds() {
        var $field = $('#' + previewConfig.departmentField);
        if (!$field.length) {
            return [];
        }
        var val = $field.val();
        if (!val) {
            return [];
        }
        return (Array.isArray(val) ? val : [val]).map(function (id) {
            return parseInt(id, 10);
        }).filter(function (id) {
            return id > 0;
        });
    }

    function multiSelectIds(selector) {
        var $field = $(selector);
        if (!$field.length) {
            return [];
        }
        var val = $field.val();
        if (!val) {
            return [];
        }
        return (Array.isArray(val) ? val : [val]).map(function (id) {
            return parseInt(id, 10);
        }).filter(function (id) {
            return id > 0;
        });
    }

    function getCoreSectorIds() {
        return multiSelectIds('#core_sector_ids');
    }

    function getCoreSubSectorIds() {
        return multiSelectIds('#core_sub_sector_ids');
    }

    function getBlkIds() {
        return multiSelectIds('#blk_ids');
    }

    function hasPreviewScope() {
        return getDepartmentIds().length > 0
            || getSubDepartmentIds().length > 0
            || getCoreSectorIds().length > 0
            || getCoreSubSectorIds().length > 0
            || getBlkIds().length > 0;
    }

    function syncHiddenInputs() {
        var $container = $('#accessible-projects-hidden-inputs');
        $container.empty();
        excludedIds.forEach(function (id) {
            $container.append('<input type="hidden" name="excluded_project_ids[]" value="' + id + '">');
        });
    }

    function updateExcludedCount() {
        $('#accessible-projects-excluded-count').text(excludedIds.size);
    }

    function updateActionButtons() {
        var hasSelection = selectedRowIds.size > 0;
        var canExclude = false;
        var canUnexclude = false;
        selectedRowIds.forEach(function (id) {
            if (excludedIds.has(id)) {
                canUnexclude = true;
            } else {
                canExclude = true;
            }
        });
        $('#accessible-projects-exclude-btn').prop('disabled', !hasSelection || !canExclude);
        $('#accessible-projects-unexclude-btn').prop('disabled', !hasSelection || !canUnexclude);
    }

    function applyRowExcludedState() {
        if (!dataTable) {
            return;
        }
        $('#accessible-projects-table tbody tr').each(function () {
            var $row = $(this);
            var id = parseInt($row.attr('data-project-id') || '0', 10);
            $row.toggleClass('is-excluded', excludedIds.has(id));
        });
    }

    function pruneExcludedToVisible() {
        if (!dataTable) {
            return;
        }
        var visibleIds = new Set();
        dataTable.rows({ page: 'all' }).every(function () {
            var row = this.data();
            if (row && row.project_id) {
                visibleIds.add(Number(row.project_id));
            }
        });
        // Keep exclusions only for projects still in current department scope (server validates on save)
        excludedIds.forEach(function (id) {
            if (!visibleIds.has(id)) {
                // retain — may be on another page; server sanitizes on save
            }
        });
        syncHiddenInputs();
        updateExcludedCount();
    }

    function destroyDataTable() {
        if (dataTable) {
            dataTable.destroy();
            dataTable = null;
        }
        $('#accessible-projects-table tbody').empty();
        selectedRowIds.clear();
        updateActionButtons();
    }

    function loadPreview() {
        destroyDataTable();

        if (!hasPreviewScope()) {
            $('#accessible-projects-table').hide();
            $('#accessible-projects-empty').hide();
            $('#accessible-projects-total').text('0');
            updateExcludedCount();
            return;
        }

        $('#accessible-projects-table').show();
        $('#accessible-projects-empty').hide();

        dataTable = $('#accessible-projects-table').DataTable({
            processing: true,
            serverSide: true,
            searching: true,
            ordering: true,
            pageLength: 25,
            lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
            order: [[1, 'asc']],
            ajax: {
                url: previewConfig.dataUrl,
                data: function (d) {
                    d.department_ids = getDepartmentIds();
                    d.sub_department_ids = getSubDepartmentIds();
                    d.core_sector_ids = getCoreSectorIds();
                    d.core_sub_sector_ids = getCoreSubSectorIds();
                    d.blk_ids = getBlkIds();
                    d.filter_sector_ids = getFilterSectorIds();
                    d.filter_sub_sector_ids = getFilterSubSectorIds();
                    d.status_filter = $('#accessible-projects-status-filter').val() || 'active';
                },
                dataSrc: function (json) {
                    $('#accessible-projects-total').text(json.recordsTotal || 0);
                    if ((json.recordsTotal || 0) === 0) {
                        $('#accessible-projects-empty').show();
                        $('#accessible-projects-table').hide();
                    } else {
                        $('#accessible-projects-empty').hide();
                        $('#accessible-projects-table').show();
                    }
                    return json.data || [];
                }
            },
            columns: [
                {
                    data: 'project_id',
                    orderable: false,
                    searchable: false,
                    render: function (data) {
                        return '<input type="checkbox" class="accessible-projects-row-check" data-project-id="' + data + '" aria-label="Select scheme">';
                    }
                },
                { data: 'uid', defaultContent: '—' },
                { data: 'scheme_name', defaultContent: '—' },
                { data: 'adp_number', defaultContent: '—' },
                { data: 'department', defaultContent: '—' },
                { data: 'sub_department', defaultContent: '—' },
                { data: 'sector', defaultContent: '—' },
                { data: 'sub_sector', defaultContent: '—' },
                { data: 'block', defaultContent: '—' }
            ],
            drawCallback: function () {
                $('#accessible-projects-table tbody tr').each(function () {
                    var $row = $(this);
                    var $cb = $row.find('.accessible-projects-row-check');
                    var id = parseInt($cb.data('project-id') || '0', 10);
                    $row.attr('data-project-id', id);
                    $cb.prop('checked', selectedRowIds.has(id));
                    $row.toggleClass('is-excluded', excludedIds.has(id));
                });
                $('#accessible-projects-select-all').prop('checked', false);
            }
        });
    }

    $(document).on('change', '.accessible-projects-row-check', function () {
        var id = parseInt($(this).data('project-id') || '0', 10);
        if ($(this).is(':checked')) {
            selectedRowIds.add(id);
        } else {
            selectedRowIds.delete(id);
        }
        updateActionButtons();
    });

    $(document).on('change', '#accessible-projects-select-all', function () {
        var checked = $(this).is(':checked');
        $('#accessible-projects-table tbody .accessible-projects-row-check').each(function () {
            $(this).prop('checked', checked).trigger('change');
        });
        if (!checked) {
            selectedRowIds.clear();
            updateActionButtons();
        }
    });

    $('#accessible-projects-exclude-btn').on('click', function () {
        selectedRowIds.forEach(function (id) {
            excludedIds.add(id);
        });
        selectedRowIds.clear();
        syncHiddenInputs();
        updateExcludedCount();
        applyRowExcludedState();
        updateActionButtons();
        $('#accessible-projects-select-all').prop('checked', false);
        $('#accessible-projects-table tbody .accessible-projects-row-check').prop('checked', false);
    });

    $('#accessible-projects-unexclude-btn').on('click', function () {
        selectedRowIds.forEach(function (id) {
            excludedIds.delete(id);
        });
        selectedRowIds.clear();
        syncHiddenInputs();
        updateExcludedCount();
        applyRowExcludedState();
        updateActionButtons();
        $('#accessible-projects-select-all').prop('checked', false);
        $('#accessible-projects-table tbody .accessible-projects-row-check').prop('checked', false);
    });

    $('#accessible-projects-status-filter').on('change', function () {
        loadPreview();
    });

    function bindDepartmentChange() {
        if ($('#sub_department_ids').length) {
            return;
        }
        var $field = $('#' + previewConfig.departmentField);
        if (!$field.length) {
            return;
        }
        $field.on('change select2:select select2:unselect', function () {
            loadPreview();
        });
    }

    $(document).on('accessible-projects:reload', function () {
        if (getDepartmentIds().length > 0) {
            loadPreview();
        }
    });

    $(document).ready(function () {
        syncHiddenInputs();
        updateExcludedCount();
        bindDepartmentChange();
        if (getDepartmentIds().length > 0) {
            loadPreview();
        }
    });
})();
</script>
@endpush