@extends('layouts.dashboard')

@section('nav-top-left')
    @foreach (Auth::user()->getActiveRolesForCall($call) as $role)
        <div class="pill-role">
            <i class="fa fa-user"></i> {{ $role->view_name }}
        </div>
    @endforeach
    <div class="page-title">Advisory Board</div>
    <div class="page-subtitle">Advisory Board Evaluation</div>
@endsection

@section('nav-bottom-left')
    <ul>
        <li><a href="{{ route('dashboard') }}"><i class="fas fa-chart-pie"></i> Dashboard</a></li>
        <li class="active"><a href="#"><i class="fas fa-user-tie"></i> Advisory Board</a></li>
    </ul>
@endsection

@section('content')
    @php
        $isFinalized = $call->advisory_board_is_finalized ?? false;
        $canMakeSelection = ($canMakeSelection ?? true) && !$isFinalized;
        $columns = [];

        if ($canMakeSelection) {
            $columns[] = ['label' => '', 'class' => 'list-box--inner---list----checkbox', 'style' => 'text-align:center',
                'cell' => fn ($p) => '<div class="list-box--inner---list----checkbox" style="text-align:center">'
                    . '<input type="checkbox" class="proposal-select"'
                    . ' data-id="' . ($p->hash_id ?? '') . '"'
                    . ' data-url="' . route('advisory-board.select.proposal', ['call' => $call, 'proposal' => $p]) . '"'
                    . ' data-amount="' . (float) ($p->totalBadget ?? 0) . '"'
                    . ($p->selectedByAdvisory !== null ? ' checked' : '') . '>'
                    . '</div>'];
        }

        $rowClass = function ($p) {
            return $p->selectedByAdvisory !== null ? 'selectedByAdvisory advisory-area' : 'advisory-area';
        };

        $headerClasses = 'advisory-area';

        $rowTitle = function ($p) {
            return match (rescue(fn () => $p->panelResult(), null)) {
                'not_rejected' => 'The Proposal is Passed',
                'rejected'     => 'The Proposal is Rejected',
                default        => '',
            };
        };

        $columns = array_merge($columns, [
            ['label' => 'Proposal title', 'class' => 'list-box--inner---list----project',
             'value' => fn ($p) => $p->title ?? ''],

            ['label' => 'Applicant', 'class' => 'list-box--inner---list----person',
             'value' => fn ($p) => trim(($p->applicant?->lastname ?? '') . ' ' . ($p->applicant?->firstname ?? ''))],

            ['label' => 'Scientific Area', 'class' => 'list-box--inner---list----scientific_area',
             'value' => fn ($p) => $p->primary_domain_name_en ?? ''],

            ['label' => 'Organisation Info', 'class' => 'list-box--inner---list----percentage',
             'value' => fn ($p) => $p->applicant?->organization_info ?? ''],

            ['label' => 'Total Score',
             'title' => fn ($p) => collect($p->panelEvaluation?->scores_json ?? [])
                 ->map(fn ($v, $k) => ucwords(str_replace('_', ' ', $k)) . ': ' . ($v ?? ''))
                 ->implode("\n"),
             'class' => 'list-box--inner---list----total',
             'style' => 'text-align:center',
             'value' => fn ($p) => $p->panelEvaluation ? (int) round($p->panelEvaluation->total_score) : null],

            ['label' => 'Actions', 'class' => 'list-box--inner---list----actions',
             'cell' => fn ($p) => '<div class="list-box--inner---list----actions"><a class="action-icon icon-view" style="text-decoration:none" href="' . route('view-proposal', [$p->call->hash_id, $p->hash_id]) . '">
                                       <div class="list-box--inner---list----view"><i class="fas fa-arrow-right"></i></div>
                                   </a>'
                 . ($p->panelEvaluation?->submission_files?->hash_id
                     ? '<a class="action-icon icon-download" style="text-decoration:none" href="' . route('download.file.panel', ['call' => $p->call->hash_id, 'file_hash_id' => $p->panelEvaluation->submission_files->hash_id]) . '" title="Download Evaluation File"><i class="fas fa-download"></i></a>'
                     : ''). '</div>',
            ],
        ]);
    @endphp
    @if ($isFinalized)
        <div class="col-12">
            <div class="alert alert-info advisory-phase-banner">
                <i class="fa fa-info-circle"></i> The selection for this call have been finalized. You can notify all applicants.
                <button style="width:max-content" type="button" id="informBtn" class="btn btn-primary">
                    <i class="fas fa-envelope"></i> Inform Applicants
                </button>
                @if ($lastNotified)
                    <span id="lastNotifiedMsg" class="last-notified-msg text-muted"
                          style="margin-left:.75rem; white-space:nowrap;"
                          title="{{ $lastNotified->diffForHumans() }}">
            <i class="fa fa-clock"></i> Applicants last informed on {{ $lastNotified->format('d/m/Y') }} at {{ $lastNotified->format('H:i') }}
        </span>
                @endif
            </div>
        </div>
        <div id="informModal" class="modal" tabindex="-1" role="dialog" style="top: 15vh">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Confirm Send Emails</h5>
                        <a href="#" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </a>
                    </div>

                    <div class="modal-body">
                        <p id="informModalMsg">You are about to send result emails to all applicants. This action cannot be undone.</p>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="button" id="informConfirmBtn" class="btn btn-primary">
                            <i class="fa fa-check-square"></i> Confirm
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endif
    @if ($proposals && $proposals->count() > 0)
        <x-proposal-list
            :proposals="$proposals"
            :columns="$columns"
            :row-class="$rowClass"
            :header-classes="$headerClasses"
            :row-title="$rowTitle" />

        @if ($canMakeSelection)

            <div class="finalize-wrap" style="text-align:center; margin-top:1rem;">
                <div id="selectionStatus" class="selection-status" style="margin-bottom:.5rem;"></div>
                <button type="button" id="finalizeBtn" style="display:none;">
                    <i class="fas fa-check"></i> Finalize selection
                </button>
            </div>

            {{-- Confirmation modal --}}
            <div id="finalizeModal" class="modal" tabindex="-1" role="dialog" style="top: 15vh">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Confirm selection</h5>
                            <a href="#" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </a>
                        </div>

                        <div class="modal-body">
                            <p id="finalizeModalMsg"></p>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                                Cancel
                            </button>
                            <button type="button" id="finalizeConfirmBtn" class="btn btn-primary">
                                <i class="fa fa-check-square"></i> Confirm
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @endif

    @else
        <div class="no-evaluation-available">
            <i class="fas fa-business-time"></i>
            There are no proposals. Please check back later.
        </div>
    @endif
@endsection

@section('javascripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <x-proposal-search />
    @if ($isFinalized)
        <script>
            const INFORM_URL = '{{ route('advisory-board.inform.applicants', ['call' => $call]) }}';
            const informCsrf = () => '{{ csrf_token() }}';

            let informModalInstance = null;

            function submitInform() {
                const confirmBtn = document.getElementById('informConfirmBtn');
                confirmBtn.disabled = true;

                fetch(INFORM_URL, {
                    method: 'POST',
                    redirect: 'manual',
                    headers: {
                        'Accept': 'text/html',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': informCsrf(),
                    },
                    body: JSON.stringify({}),
                })
                    .then(r => {
                        if (!r.ok && r.type !== 'opaqueredirect') throw new Error('inform failed');
                    })
                    .then(() => {
                        window.location.reload();
                    })
                    .catch(() => {
                        confirmBtn.disabled = false;
                        alert('Could not send notifications. Please try again.');
                    });
            }

            document.addEventListener('DOMContentLoaded', function () {
                const modalEl = document.getElementById('informModal');
                if (modalEl) informModalInstance = new bootstrap.Modal(modalEl);

                document.getElementById('informBtn')?.addEventListener('click', () => informModalInstance?.show());
                document.getElementById('informConfirmBtn')?.addEventListener('click', submitInform);
            });
        </script>
    @endif
    @if ($canMakeSelection)
       <script>
            let finalized = false;
            const MAX_SELECTIONS = {{ $call->callSetting->proposals_count ?? 10 }};
            const MAX_BUDGET     = {{ $call->callSetting->total_budget ?? 0.0 }};
            const CURRENCY       = '{{  'EUR' }}';
            const MODE = @json($call->callSetting->allocation_type === 'budget' ? 'budget' : 'count');

            const FINALIZE_URL = '{{ route('advisory-board.finalize.proposals', ['call' => $call]) }}';

            const csrf = () => '{{ csrf_token() }}';

            const round2 = n => Math.round((Number(n) || 0) * 100) / 100;
            const amountOf = cb => parseFloat(cb.dataset.amount || '0') || 0;
            const currentSum = () =>
                [...document.querySelectorAll('.proposal-select:checked')].reduce((s, cb) => s + amountOf(cb), 0);

            const fmt = (n) => {
                try { return new Intl.NumberFormat(undefined, { style: 'currency', currency: CURRENCY }).format(n); }
                catch { return CURRENCY + ' ' + Number(n).toLocaleString(); }
            };

            function applySelectionLimit() {
                const boxes   = document.querySelectorAll('.proposal-select');
                const checked = document.querySelectorAll('.proposal-select:checked');
                const btn     = document.getElementById('finalizeBtn');
                const status  = document.getElementById('selectionStatus');
                if (finalized) {
                    if (btn) btn.style.display = 'none';
                    return;
                }
                if (MODE === 'budget') {
                    const sum = currentSum();

                    // disable any unchecked proposal that would push us over budget
                    boxes.forEach(cb => {
                        if (!cb.checked) cb.disabled = round2(sum + amountOf(cb)) > MAX_BUDGET;
                    });

                    if (btn) btn.style.display = '';                       // always available in budget mode
                    if (status) status.textContent = `Selected ${fmt(sum)} of ${fmt(MAX_BUDGET)}`;
                } else {
                    const total  = boxes.length;
                    const atLimit = checked.length >= MAX_SELECTIONS;

                    boxes.forEach(cb => { if (!cb.checked) cb.disabled = atLimit; });

                    const target = Math.min(MAX_SELECTIONS, total);
                    if (btn) btn.style.display = (checked.length > 0) ? '' : 'none';
                    if (status) status.textContent = `Selected ${checked.length} of ${MAX_SELECTIONS}`;
                }
            }

            // --- per-row selection ---
            document.addEventListener('change', function (e) {
                const cb = e.target.closest('.proposal-select');
                if (!cb) return;

                const row = cb.closest('.proposal-list-item');
                const selected = cb.checked;

                if (selected) {
                    if (MODE === 'budget') {
                        // cb is already checked, so currentSum() includes it
                        if (round2(currentSum()) > MAX_BUDGET) {
                            cb.checked = false;
                            applySelectionLimit();
                            alert(`This selection exceeds the available budget of ${fmt(MAX_BUDGET)}.`);
                            return;
                        }
                    } else {
                        if (document.querySelectorAll('.proposal-select:checked').length > MAX_SELECTIONS) {
                            cb.checked = false;
                            applySelectionLimit();
                            alert(`You can select at most ${MAX_SELECTIONS}.`);
                            return;
                        }
                    }
                }

                // optimistic class toggle (must come AFTER `const selected` above)
                if (row) row.classList.toggle('selectedByAdvisory', selected);

                cb.disabled = true;

                fetch(cb.dataset.url, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrf(),
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({ selected }),
                })
                    .then(r => {
                        if (!r.ok) throw new Error('save failed');
                        // controller may return JSON or a redirect; only parse JSON if it is JSON
                        const ct = r.headers.get('content-type') || '';
                        return ct.includes('application/json') ? r.json() : null;
                    })
                    .then(data => {
                        // if the server returns an authoritative state, honour it
                        if (data && typeof data.selected === 'boolean') {
                            cb.checked = data.selected;
                            if (row) row.classList.toggle('selectedByAdvisory', data.selected);
                        }
                    })
                    .catch(() => {
                        cb.checked = !selected;   // revert the optimistic toggle
                        if (row) row.classList.toggle('selectedByAdvisory', !selected);   // revert the class too
                        alert('Could not save. Please try again.');
                    })
                    .finally(() => {
                        cb.disabled = false;
                        applySelectionLimit();
                    });
            });

            // --- modal ---
            let finalizeModalInstance = null;

            function openConfirm() {
                const msgEl = document.getElementById('finalizeModalMsg');
                if (MODE === 'budget') {
                    msgEl.textContent =
                        `You have selected proposals totalling ${fmt(currentSum())} out of ${fmt(MAX_BUDGET)} available.`;
                } else {
                    const n = document.querySelectorAll('.proposal-select:checked').length;
                    msgEl.textContent =
                        `You have selected ${n} out of ${MAX_SELECTIONS} proposal${n === 1 ? '' : 's'}.`;
                }
                finalizeModalInstance?.show();
            }

            function closeConfirm() {
                finalizeModalInstance?.hide();
            }

            function submitFinalize() {
                const confirmBtn = document.getElementById('finalizeConfirmBtn');
                confirmBtn.disabled = true;

                fetch(FINALIZE_URL, {
                    method: 'POST',
                    redirect: 'manual',          // do NOT follow back()'s 302 — keep the flash pending
                    headers: {
                        'Accept': 'text/html',   // let the controller redirect normally (not as JSON)
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrf(),
                    },
                    body: JSON.stringify({ is_finalized: true }),
                })
                    .then(r => {
                        // 302 not followed shows up as type 'opaqueredirect' (status 0); a 2xx is also fine
                        if (!r.ok && r.type !== 'opaqueredirect') throw new Error('finalize failed');
                    })
                    .then(() => {
                        // reload so this fresh GET consumes the session flash and renders the toaster
                        window.location.reload();
                    })
                    .catch(() => {
                        confirmBtn.disabled = false;
                        alert('Could not finalize. Please try again.');
                    });
            }

            document.addEventListener('DOMContentLoaded', function () {
                applySelectionLimit();

                const modalEl = document.getElementById('finalizeModal');
                if (modalEl) finalizeModalInstance = new bootstrap.Modal(modalEl);

                document.getElementById('finalizeBtn')?.addEventListener('click', openConfirm);
                document.getElementById('finalizeConfirmBtn')?.addEventListener('click', submitFinalize);
            });
        </script>
    @endif
@endsection