@extends('layouts.app')

@php
    $listingMode = $listingMode ?? 'assign';
    $filterRoute = $filterRoute ?? route('reports.compliance-replies.assign');
    $isAssignedListing = $listingMode === 'assigned';
    $pageTitle = $isAssignedListing ? __('Assigned Schemes') : __('Assign Scheme');
@endphp
@section('title', $pageTitle)

@push('stylesheets')
@include('reports.partials.mec-listing-table-styles')
@include('partials.index-datatable-styles')
@include('partials.filter-card-styles')
@include('partials.scheme-visit-history-styles')
<link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
<style>
    #complianceAssignTableCard .table-responsive { overflow-x: visible; overflow-y: visible; }
    @media (max-width: 768px) {
        #complianceAssignTableCard .table-responsive { overflow-x: auto; }
    }
    #tblComplianceAssign tbody tr.compliance-assign-row { cursor: pointer; }
    #tblComplianceAssign tbody tr.compliance-assign-row:hover { background: rgba(0, 64, 26, 0.04); }
</style>
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        @php
            $filters = $filters ?? [];
            $filtersOpen = trim((string) ($search ?? '')) !== ''
                || trim((string) ($filters['adp'] ?? '')) !== ''
                || trim((string) ($filters['uid'] ?? '')) !== ''
                || trim((string) ($filters['scheme_name'] ?? '')) !== ''
                || trim((string) ($filters['department'] ?? '')) !== ''
                || trim((string) ($filters['visit_date_from'] ?? '')) !== ''
                || trim((string) ($filters['visit_date_to'] ?? '')) !== ''
                || trim((string) ($filters['assigned_to'] ?? '')) !== ''
                || trim((string) ($filters['assigned_by'] ?? '')) !== '';
        @endphp
        <x-table-filter-card
            action="{{ $filterRoute }}"
            id="complianceAssignFilterForm"
            :resetUrl="$filterRoute"
            :title="__('FIND SCHEMES')"
            :open="$filtersOpen"
        >
            <div class="pms-filter-field">
                <label for="filter-search">{{ __('Search') }}</label>
                <input type="text" name="search" id="filter-search" class="form-control form-control-sm"
                       placeholder="{{ __('Scheme, ADP, UID…') }}" value="{{ $search ?? '' }}">
            </div>
            <div class="pms-filter-field">
                <label for="filter-adp">{{ __('ADP') }}</label>
                <input type="text" name="adp" id="filter-adp" class="form-control form-control-sm"
                       value="{{ $filters['adp'] ?? '' }}">
            </div>
            <div class="pms-filter-field">
                <label for="filter-uid">{{ __('UID') }}</label>
                <input type="text" name="uid" id="filter-uid" class="form-control form-control-sm"
                       value="{{ $filters['uid'] ?? '' }}">
            </div>
            <div class="pms-filter-field">
                <label for="filter-scheme-name">{{ __('Scheme Name') }}</label>
                <input type="text" name="scheme_name" id="filter-scheme-name" class="form-control form-control-sm"
                       value="{{ $filters['scheme_name'] ?? '' }}">
            </div>
            <div class="pms-filter-field">
                <label for="filter-department">{{ __('Department') }}</label>
                <input type="text" name="department" id="filter-department" class="form-control form-control-sm"
                       value="{{ $filters['department'] ?? '' }}">
            </div>
            <div class="pms-filter-field">
                <label for="filter-visit-from">{{ __('Visit Date From') }}</label>
                <input type="date" name="visit_date_from" id="filter-visit-from" class="form-control form-control-sm"
                       value="{{ $filters['visit_date_from'] ?? '' }}">
            </div>
            <div class="pms-filter-field">
                <label for="filter-visit-to">{{ __('Visit Date To') }}</label>
                <input type="date" name="visit_date_to" id="filter-visit-to" class="form-control form-control-sm"
                       value="{{ $filters['visit_date_to'] ?? '' }}">
            </div>
            <div class="pms-filter-field">
                <label for="filter-assigned-to">{{ __('Assigned to') }}</label>
                <input type="text" name="assigned_to" id="filter-assigned-to" class="form-control form-control-sm"
                       value="{{ $filters['assigned_to'] ?? '' }}">
            </div>
            <div class="pms-filter-field">
                <label for="filter-assigned-by">{{ __('Assigned by') }}</label>
                <input type="text" name="assigned_by" id="filter-assigned-by" class="form-control form-control-sm"
                       value="{{ $filters['assigned_by'] ?? '' }}">
            </div>
        </x-table-filter-card>
        <x-active-filter-chips :chips="$activeChips ?? []" />

        <div class="card pms-index-card" id="complianceAssignTableCard">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between w-100 gap-2">
                <div class="d-flex flex-wrap align-items-center flex-fill min-width-0 gap-3">
                    <h3 class="card-title mb-0">{{ $pageTitle }}</h3>
                    @include('reports.partials.mec-listing-scheme-name-toggle')
                </div>
            </div>
            <div class="card-body p-3">
                <p class="text-primary small mb-3">
                    @if ($isAssignedListing)
                        {{ __('Schemes already assigned to AD or EA users. Click a row for scheme and report details.') }}
                    @else
                        {{ __('Un-Satisfactory PMS and FILMS schemes that still need compliance replies. Schemes with submitted replies, or FILMS records that already have a compliance received date, are hidden. Click a row for scheme and report details.') }}
                    @endif
                </p>
                <div class="table-responsive">
                    @include('mec-sims.compliances.partials.scheme-like-listing-table', [
                        'tableId' => 'tblComplianceAssign',
                        'reportRows' => $reportRows,
                        'listingVariant' => \App\Support\MecSimsComplianceListingTable::VARIANT_ASSIGN,
                    ])
                </div>
                <div class="pms-index-card__pagination">
                    <div class="pms-index-card__pagination-perpage">
                        {!! view('components.per-page-selector', ['current' => $perPage ?? 25, 'baseUrl' => $filterRoute])->render() !!}
                    </div>
                    <div class="pms-index-card__pagination-links">
                        {!! ($paginator ?? null)?->links('vendor.pagination.bootstrap-4') !!}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="complianceAssignDetailModal" tabindex="-1" role="dialog" aria-labelledby="complianceAssignDetailModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white" id="complianceAssignDetailModalTitle">
                        <i class="fas fa-clipboard-list mr-2"></i>{{ __('Scheme details') }}
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="{{ __('Close') }}">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="complianceAssignDetailModalBody" style="min-height: 140px;"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('Close') }}</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="complianceAssignUserPickerModal" tabindex="-1" role="dialog" aria-labelledby="complianceAssignUserPickerTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <form method="post" class="modal-content" id="complianceAssignPickerForm">
                @csrf
                <div class="modal-header bg-success">
                    <h5 class="modal-title text-white" id="complianceAssignUserPickerTitle">
                        <i class="fas fa-user-plus mr-2"></i>{{ __('Assign user') }}
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="{{ __('Close') }}">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="small text-muted mb-3">{{ __('Select department, district, and role. Users with Compliances Reply permission then appear.') }}</p>
                    <div class="form-group">
                        <label class="small font-weight-bold" for="complianceAssignPickerDepartment">{{ __('Department') }}</label>
                        <select id="complianceAssignPickerDepartment" class="form-control form-control-sm" required>
                            <option value="">{{ __('— Select —') }}</option>
                            @foreach ($assignDepartments ?? [] as $departmentId => $departmentName)
                                <option value="{{ $departmentId }}">{{ $departmentName }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="small font-weight-bold" for="complianceAssignPickerDistrict">{{ __('District') }}</label>
                        <select id="complianceAssignPickerDistrict" class="form-control form-control-sm" required>
                            <option value="">{{ __('— Select —') }}</option>
                            @foreach ($assignDistricts ?? [] as $districtId => $districtName)
                                <option value="{{ $districtId }}">{{ $districtName }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="small font-weight-bold" for="complianceAssignPickerRole">{{ __('Role') }}</label>
                        <select id="complianceAssignPickerRole" class="form-control form-control-sm" required>
                            <option value="">{{ __('— Select —') }}</option>
                            <option value="ea">{{ __('EA') }}</option>
                            <option value="ad">{{ __('AD') }}</option>
                        </select>
                    </div>
                    <div class="form-group mb-0">
                        <label class="small font-weight-bold" for="complianceAssignPickerUser">{{ __('User') }}</label>
                        <select name="assignee_user_id" id="complianceAssignPickerUser" class="form-control form-control-sm" required disabled>
                            <option value="">{{ __('Select department, district, and role first') }}</option>
                        </select>
                    </div>
                    <p class="small text-muted mb-0 mt-2" id="complianceAssignPickerHint"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('Cancel') }}</button>
                    <button type="submit" class="btn btn-success" id="complianceAssignPickerSubmit" disabled>{{ __('Assign') }}</button>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection

@push('scripts')
@include('partials.index-datatable-scripts')
@include('reports.partials.mec-listing-scheme-name-toggle-scripts')
<script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
<script>
(function () {
    var tableSelector = '#tblComplianceAssign';
    var loadingHtml = '<div class="text-center py-4 text-muted"><div class="spinner-border" role="status"></div><p class="mt-2 mb-0">{{ __("Loading") }}…</p></div>';
    var failMsg = @json(__('Failed to load scheme details.'));
    var $modal = $('#complianceAssignDetailModal');
    var $picker = $('#complianceAssignUserPickerModal');
    var bodyEl = document.getElementById('complianceAssignDetailModalBody');
    var usersUrl = '';
    var canAssignAd = false;
    var lastDetailUrl = '';
    var switchingToPicker = false;
    var reopenDetailAfterPicker = false;

    function initPickerSelects() {
        if (typeof $.fn.select2 !== 'function') {
            return;
        }
        ['#complianceAssignPickerDepartment', '#complianceAssignPickerDistrict', '#complianceAssignPickerRole', '#complianceAssignPickerUser'].forEach(function (selector) {
            var $el = $(selector);
            if ($el.hasClass('select2-hidden-accessible')) {
                $el.select2('destroy');
            }
            $el.select2({
                theme: 'bootstrap4',
                width: '100%',
                dropdownParent: $picker,
                placeholder: $el.find('option:first').text()
            });
        });
    }

    function resetPickerUsers(placeholder) {
        var $user = $('#complianceAssignPickerUser');
        $user.empty().append($('<option>', { value: '', text: placeholder || @json(__('Select department, district, and role first')) }));
        $user.val('').prop('disabled', true).trigger('change');
        $('#complianceAssignPickerSubmit').prop('disabled', true);
    }

    function loadPickerUsers() {
        var departmentId = $('#complianceAssignPickerDepartment').val();
        var districtId = $('#complianceAssignPickerDistrict').val();
        var role = $('#complianceAssignPickerRole').val();
        if (!usersUrl || !departmentId || !districtId || !role) {
            resetPickerUsers();
            return;
        }
        if (role === 'ad' && !canAssignAd) {
            resetPickerUsers(@json(__('This scheme can only be assigned to an EA user.')));
            return;
        }
        var $user = $('#complianceAssignPickerUser');
        resetPickerUsers(@json(__('Loading users…')));
        $.getJSON(usersUrl, {
            department_id: departmentId,
            district_id: districtId,
            role: role
        }).done(function (data) {
            var users = data.users || [];
            $user.empty().append($('<option>', { value: '', text: users.length ? @json(__('— Select —')) : @json(__('No matching users')) }));
            users.forEach(function (user) {
                $user.append($('<option>', { value: user.id, text: user.name }));
            });
            $user.prop('disabled', users.length === 0).trigger('change');
            $('#complianceAssignPickerSubmit').prop('disabled', true);
        }).fail(function () {
            resetPickerUsers(@json(__('Failed to load users.')));
        });
    }

    function openAssignPicker(button) {
        usersUrl = button.getAttribute('data-users-url') || '';
        canAssignAd = button.getAttribute('data-can-assign-ad') === '1';
        $('#complianceAssignPickerForm').attr('action', button.getAttribute('data-store-url') || '');
        $('#complianceAssignPickerDepartment').val('').trigger('change');
        $('#complianceAssignPickerDistrict').val('').trigger('change');
        $('#complianceAssignPickerRole').val('').trigger('change');
        $('#complianceAssignPickerRole option[value="ad"]').prop('disabled', !canAssignAd);
        $('#complianceAssignPickerHint').text(
            canAssignAd
                ? @json(__('Unlinked FILMS schemes can be assigned to EA or AD.'))
                : @json(__('This scheme can be assigned to an EA user.'))
        );
        resetPickerUsers();
        switchingToPicker = true;
        reopenDetailAfterPicker = true;
        $modal.one('hidden.bs.modal', function () {
            switchingToPicker = false;
            $picker.modal('show');
        });
        $modal.modal('hide');
    }

    function reopenDetailModal() {
        if (bodyEl && $.trim(bodyEl.innerHTML) !== '' && bodyEl.innerHTML.indexOf('spinner-border') === -1) {
            $modal.modal('show');
            return;
        }
        if (lastDetailUrl) {
            openAssignModal(lastDetailUrl);
        }
    }

    function openAssignModal(url) {
        if (!url || !bodyEl) {
            return;
        }
        lastDetailUrl = url;
        bodyEl.innerHTML = loadingHtml;
        $modal.modal('show');
        $.ajax({
            url: url,
            method: 'GET',
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        }).done(function (html) {
            bodyEl.innerHTML = html;
        }).fail(function (xhr) {
            bodyEl.innerHTML = '<p class="text-muted text-center py-4 mb-0">' + failMsg + ' (HTTP ' + (xhr.status || '?') + ').</p>';
        });
    }

    $(function () {
        var $tbl = $(tableSelector);
        if ($tbl.length && typeof window.PmsIndexDataTable !== 'undefined') {
            if ($.fn.DataTable.isDataTable($tbl)) $tbl.DataTable().destroy();
            $tbl.attr('data-pms-empty-message', @json($isAssignedListing ? __('No assigned schemes found.') : __('No Un-Satisfactory schemes waiting for assignment.')));
            PmsIndexDataTable.initLaravelPaginated(tableSelector, {
                scrollX: true,
                ordering: false,
                columnDefs: @json(\App\Support\MecSimsComplianceListingTable::dataTableColumnDefs()),
                colvisPersistKey: @json('compliance-listing-assign-uid-' . (int) auth()->id()),
            });
            PmsIndexDataTable.attachServerSort(tableSelector, {
                sortColParam: 'sort_col',
                sortDirParam: 'sort_dir',
                currentSortCol: '{{ request("sort_col", "visit_date_order") }}',
                currentSortDir: '{{ request("sort_dir", "desc") }}',
                currentQuery: @json(request()->except(['page', 'sort_col', 'sort_dir']))
            });
        }

        $tbl.on('click', 'tbody tr.compliance-assign-row', function () {
            openAssignModal(this.getAttribute('data-modal-url'));
        });

        $(bodyEl).on('click', '#complianceAssignModalAssignToggle', function () {
            openAssignPicker(this);
        });

        $modal.on('hidden.bs.modal', function () {
            if (switchingToPicker) {
                return;
            }
            if (bodyEl) {
                bodyEl.innerHTML = '';
            }
        });

        initPickerSelects();
        $('#complianceAssignPickerDepartment, #complianceAssignPickerDistrict, #complianceAssignPickerRole').on('change', loadPickerUsers);
        $('#complianceAssignPickerUser').on('change', function () {
            $('#complianceAssignPickerSubmit').prop('disabled', !$(this).val());
        });
        $('#complianceAssignPickerForm').on('submit', function () {
            reopenDetailAfterPicker = false;
        });
        $picker.on('hidden.bs.modal', function () {
            if (!reopenDetailAfterPicker) {
                return;
            }
            reopenDetailAfterPicker = false;
            reopenDetailModal();
        });
    });
})();
</script>
@endpush