@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">Assign Evaluators to Proposals</div>
    <div class="page-subtitle">Assign 2 evaluators for each proposal below</div>
@endsection

@section('nav-bottom-left')
    <ul>
        <li><a href="/"><i class="fas fa-chart-pie"></i> Dashboard</a></li>
        <li class=""><a href="{{route('call.view', ['call' => $call->hash_id])}}"><i class="fas fa-list-ul"></i> Admin Area</a></li>
        <li class="active"><a href="#"><i class="fas fa-pen"></i> Assign Evaluators</a></li>
    </ul>
@endsection
@section('nav-bottom-right')
    <div class="colors-legend">
        <ul>
            <li><span class="color color-submitted"></span> Evaluated</li>
            <li><span class="color color-assigned"></span> Evaluators Assigned</li>
            <li><span class="color color-unevaluated"></span> No Evaluators Assigned</li>
        </ul>
    </div>
@endsection

@section('content')
    <div class="form-container elements-list">
        <div class="card-body">

            {{-- Search bar --}}
            <div class="search-container row justify-content-between align-items-center mb-3">
                <div class="search-field col-sm-10">
                    <label for="searchField" class="form-label">Search</label>
                    <input type="text" id="searchField" class="form-control" placeholder="search...." />
                </div>
            </div>

            <div class="list-box-header" id="proposalsCounter"></div>

            @if($proposals->count() > 0)
                <div class="list-box col-sm-12">
                    <div class="list-box--inner">
                        <div class="list-box--inner---list">
                            <ul>
                                {{-- Header row --}}
                                <li class="list-header">
                                    <div class="list-box--inner---list----project">Proposal Title</div>
                                    <div class="list-box--inner---list----project acronym">Acronym</div>
                                    <div class="list-box--inner---list----person">
                                        <div class="list-box--inner---list----action">Applicant</div>
                                    </div>
                                    <div class="list-box--inner---list----evaluators">
                                        <div class="list-box--inner---list----action">Evaluators</div>
                                    </div>
                                    <div class="list-box--inner---list----domain">Domain</div>
                                    <div class="list-box--inner---list----actions">Actions</div>
                                </li>

                                {{-- Proposal rows --}}
                                @foreach($proposals as $proposal)
                                    @php
                                        $evaluatorsList = $proposal->evaluators()->get();
                                        $evaluator1Id   = $evaluatorsList[0]['id'] ?? '';
                                        $evaluator2Id   = $evaluatorsList[1]['id'] ?? '';
                                    @endphp

                                    <li class="proposal-list-item @if($proposal->getBothIndividualFinalizedAttribute()) submitted @endif
                                        @if($evaluator1Id && $evaluator2Id) assigned  @endif"
                                        data-title="{{ strtolower($proposal->title) }}"
                                        data-eligible="{{ $proposal->is_eligible ?? '' }}"
                                        data-acronym="{{ strtolower($proposal->acronym) }}"
                                        data-applicant="{{ strtolower($proposal->applicant->fullname ?? '') }}"
                                        data-entity="proposal"
                                        data-id="{{ $proposal->id }}">

                                        <div class="list-box--inner---list----project">
                                            {{ $proposal->title }}
                                        </div>

                                        <div class="list-box--inner---list----project acronym">
                                            {{ $proposal->acronym ?? '' }}
                                        </div>

                                        <div class="list-box--inner---list----person">
                                            {{ $proposal->applicant->fullname ?? '' }}
                                        </div>
                                        <div class="list-box--inner---list----evaluators">
                                            @forelse($evaluatorsList as $eval)
                                                <div class="single-evaluator">
                                                    <div class="list-box--inner---list----person-name">
                                                        {{ $eval->fullname }}
                                                    </div>
                                                </div>
                                            @empty
                                            @endforelse

                                            @for($i = $evaluatorsList->count(); $i < 2; $i++)
                                                <div class="list-box--inner---list----person-name">
                                                    Evaluator Not Assigned
                                                </div>
                                            @endfor
                                        </div>
                                        <div class="list-box--inner---list----actions domain">
                                            {{$proposal->primary_domain_name_el}}
                                        </div>
                                        {{-- Dropdown column: .dropdown IS the column, not a child of one --}}
                                        <div class="list-box--inner---list----actions dropdown">
                                            <div class="options-toggler" role="button"
                                                 data-bs-toggle="dropdown" aria-expanded="false">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </div>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li>
                                                    <a class="dropdown-item open-modal"
                                                       href="#"
                                                       data-bs-toggle="modal"
                                                       data-bs-target="#assign_evaluators"
                                                       data-proposal-hash="{{ $proposal->hash_id }}"
                                                       data-proposal-title="{{ $proposal->title }}"
                                                       data-evaluator-1="{{ $evaluator1Id }}"
                                                       data-evaluator-2="{{ $evaluator2Id }}">
                                                        Assign/Edit Evaluators
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>


                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            @else
                <div class="no-elements">
                    <p>There are no available finalized proposals to assign</p>
                </div>
            @endif
        </div>
    </div>

    {{-- Assign Evaluators Modal --}}
    <div id="assign_evaluators" class="modal" tabindex="-1" role="dialog" style="top: 15vh">
        <div class="modal-dialog modal-xl" role="document">
            <form action="{{ route('assign.evaluators.submit', [$call]) }}" method="POST">
                @csrf
                {{-- Populated by JS from the clicked row's data-proposal-hash --}}
                <input type="hidden" name="proposal_hash_id" id="proposalHashId" value="">

                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            Assign Evaluators to <span id="proposalTitle"></span>
                        </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>Choose from Available Evaluators.</p>
                        <div class="row">
                            <label for="evaluator_1" class="col-sm-12 col-md-6 form-label">
                                Evaluator 1 *<br/>
                                <select id="evaluator_1" class="form-select evaluator-select" name="evaluator_1" required>
                                    <option value="0">Select Evaluator</option>
                                    @foreach($available_evaluators as $evaluator)
                                        <option value="{{ $evaluator->id }}">
                                            {{ $evaluator->fullname }}
                                            - Total Assigns: {{ count($evaluator->getAssignedProposalsForCall($call->id)) }}
                                        </option>
                                    @endforeach
                                </select>
                            </label>

                            <label for="evaluator_2" class="col-sm-12 col-md-6 form-label">
                                Evaluator 2 *<br/>
                                <select id="evaluator_2" class="form-select evaluator-select" name="evaluator_2" required>
                                    <option value="0">Select Evaluator</option>
                                    @foreach($available_evaluators as $evaluator)
                                        <option value="{{ $evaluator->id }}">
                                            {{ $evaluator->fullname }}
                                            - Total Assigns: {{ count($evaluator->getAssignedProposalsForCall($call->id)) }}
                                        </option>
                                    @endforeach
                                </select>
                            </label>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-check-square"></i> Assign
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('styles')
    {{-- Select2 CSS — required for the dropdowns to actually look like dropdowns --}}
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        /* Ensure dropdown menus aren't clipped by the list's overflow */
        .list-box,
        .list-box--inner,
        .list-box--inner---list,
        .list-box--inner---list ul,
        .list-box--inner---list ul li.proposal-list-item {
            overflow: visible;
        }
        .list-box--inner---list ul li.proposal-list-item .dropdown-menu.show {
            display: block;
            z-index: 1055;
        }
    </style>
@endsection

@section('javascripts')
    {{-- Bootstrap 5 JS (includes Popper) — required for dropdowns and modals --}}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    {{-- Select2 from CDN. Requires jQuery to already be loaded by your layout. --}}
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        // ---------------------------------------------------------
        // Modal: open + populate + mutual-exclusion between selects
        // ---------------------------------------------------------
        $m = jQuery.noConflict();

        // IDs of the evaluators currently saved on the proposal for the row just clicked.
        // Stays fixed for the lifetime of the open modal.
        let origEvaluator1Id = '';
        let origEvaluator2Id = '';

        $m(document).ready(function () {

            // $m('.evaluator-select').select2({
            //     minimumResultsForSearch: -1,
            //     dropdownParent: $m('#assign_evaluators')
            // });

            $m('.evaluator-select').each(function () {
                $m(this).select2({
                    minimumResultsForSearch: -1,
                    dropdownParent: $m('#assign_evaluators')
                });
            })

            $m('.open-modal').on('click', function () {
                let proposalHash  = $m(this).data('proposal-hash');
                let proposalTitle = $m(this).data('proposal-title');
                let evaluator1    = $m(this).data('evaluator-1');
                let evaluator2    = $m(this).data('evaluator-2');

                origEvaluator1Id = evaluator1 ? String(evaluator1) : '';
                origEvaluator2Id = evaluator2 ? String(evaluator2) : '';

                $m('#proposalTitle').text(proposalTitle);
                $m('#proposalHashId').val(proposalHash);

                $m('#evaluator_1').val(evaluator1 ? evaluator1 : '0').trigger('change.select2');
                $m('#evaluator_2').val(evaluator2 ? evaluator2 : '0').trigger('change.select2');

                refreshEvaluatorExclusions();
            });

            $m('#evaluator_1, #evaluator_2').on('change', function () {
                refreshEvaluatorExclusions();
            });

            function refreshEvaluatorExclusions() {
                let val1 = $m('#evaluator_1').val();
                let val2 = $m('#evaluator_2').val();

                // Reset every option to enabled
                $m('#evaluator_1 option, #evaluator_2 option').prop('disabled', false);

                // Mutual exclusion: the two selects can't share a value
                if (val1 && val1 !== '0') {
                    $m('#evaluator_2 option[value="' + val1 + '"]').prop('disabled', true);
                }
                if (val2 && val2 !== '0') {
                    $m('#evaluator_1 option[value="' + val2 + '"]').prop('disabled', true);
                }

                // A currently-saved evaluator is locked out of the opposite slot
                if (origEvaluator1Id) {
                    $m('#evaluator_2 option[value="' + origEvaluator1Id + '"]').prop('disabled', true);
                }
                if (origEvaluator2Id) {
                    $m('#evaluator_1 option[value="' + origEvaluator2Id + '"]').prop('disabled', true);
                }

                $m('#evaluator_1').trigger('change.select2');
                $m('#evaluator_2').trigger('change.select2');
            }
        });


        // ---------------------------------------------------------
        // Client-side search / filter
        // ---------------------------------------------------------
        $l = jQuery.noConflict();

        $l(document).ready(function () {
            $l('#searchField').on('keyup', function () {
                filterProposals();
            });

            $l('#clearFilters').on('click', function () {
                $l('#searchField').val('');
                filterProposals();
            });
        });

        function filterProposals() {
            let search = $l('#searchField').val().trim().toLowerCase();
            let visibleCount = 0;

            $l('li.proposal-list-item').each(function () {
                let $row      = $l(this);
                let title     = ($row.data('title')     || '').toString();
                let acronym   = ($row.data('acronym')   || '').toString();
                let applicant = ($row.data('applicant') || '').toString();

                let matches = search === '' ||
                    title.indexOf(search)     !== -1 ||
                    acronym.indexOf(search)   !== -1 ||
                    applicant.indexOf(search) !== -1;

                $row.toggle(matches);
                if (matches) visibleCount++;
            });

            if (search === '') {
                $l('#proposalsCounter').text('');
            } else if (visibleCount > 0) {
                $l('#proposalsCounter').text('Number of proposals found: ' + visibleCount);
            } else {
                $l('#proposalsCounter').text('No available results');
            }
        }
    </script>
@endsection