@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">View Panel</div>
    <div class="page-subtitle">{{$panel->name}}</div>
@endsection
@section('nav-bottom-left')
    <ul>
        <li class=""><a href="{{route('dashboard')}}"><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=""><a href="{{route('manage.panels', ['call' => $call->hash_id])}}"><i class="fas fa-layer-group"></i> Manage Panels</a></li>
        <li class="active"><a href="#"><i class="fas fa-square-parking"></i> View Panel</a></li>
    </ul>
@endsection
@section('nav-bottom-right')
        <a class="btn btn-primary" style="font-size: 14px;margin-top: -15px;padding: 5px 12px;min-width: auto;" href="{{route('panel.edit', ['call'=> $call->hash_id, 'panel' => $panel->hash_id])}}"><i class="fas fa-edit"></i> Edit Panel</a>
@endsection
@section('content')
    <div class="card panel-details">
        <div class="card-body row">
            <div class="card-body-item col-sm-5">
                <div class="title">Panel Title:</div>
                <div class="value">{{$panel->name}}</div>
            </div>
            <div class="card-body-item col-sm-5">
                <div class="title">Panel Chair:</div>
                <div class="value">{{$panel->panelChair->fullname}}</div>
            </div>
            <div class="card-body-item col-sm-5">
                <div class="title">Panel Domain:</div>
                <div class="value">{{$panel->domain->view_name_en}}</div>
            </div>
            <div class="card-body-item col-sm-5">
                <div class="title">No of assigned proposals:</div>
                <div class="value">{{$panel->proposals->count()}}</div>
            </div>
        </div>
    </div>
    <div class="form-container container elements-list">
        <div class="card-body ">
            <div class="search-header row mb-4">
                <div class="form-field col-sm-12">
                    <input type="search" id="searchField" class="form-control" placeholder="search...." />
                </div>
                <div class="list-box col-sm-12">
                    <div class="list-box--inner">
                        @if(count($panel->proposals) > 0)
                        <div class="list-box--inner---list">
                            <ul>
                                <li>
                                    <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----evaluators">
                                        <div class="list-box--inner---list----action">Evaluators</div>
                                    </div>
{{--                                    <div class="list-box--inner---list----actions">--}}
{{--                                        <div class="list-box--inner---list----action">Actions</div>--}}
{{--                                    </div>--}}
                                    {{--                                    <div class="list-box--inner---list----actions">Actions</div>--}}
                                </li>

                                @foreach($panel->proposals as $proposal)
                                    <li class="proposal-box @if($proposal->is_submitted) submitted @endif"
                                        data-title="{{$proposal->title}}"
                                        data-acronym="{{$proposal->acronym}}"
                                    >

                                        {{--                                        @if($proposal->isEligible()) data-eligible="1" @endif>--}}
                                        <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----evaluators">
                                            @foreach($proposal->evaluators as $evaluator)
                                                {{$evaluator->fullname}} <span class="names-sep"></span>
                                            @endforeach
                                        </div>
                                @endforeach
                            </ul>
                        </div>
                        @else
                            <div class="no-evaluation-available">
                                <i class="fas fa-business-time"></i>
                                    There are no proposals assigned to this panel yet. You can <a  style="display: contents" href="{{route('panel.edit', ['call'=> $call->hash_id, 'panel' => $panel->hash_id])}}">edit panel</a> to assign some.
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('javascripts')
    <script>

        // ---------------------------------------------------------
        // 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-box').each(function () {
                let $row      = $l(this);
                let title     = ($row.data('title')     || '').toString();
                let acronym   = ($row.data('acronym')   || '').toString();

                let matches = search === '' ||
                    title.indexOf(search)     !== -1 ||
                    acronym.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