@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">Edit 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-pen-to-square"></i> Edit Panel</a></li>
    </ul>
@endsection
@section('nav-bottom-right')
    <ul>
        <a class="btn btn-primary" href="{{route('view.panel', ['call'=> $call->hash_id, 'panel_id' => $panel->id])}}"><i class="fas fa-circle-arrow-right" style="margin-right: 10px;"></i>View Panel</a>
    </ul>
@endsection

@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection

@section('content')
    <div class="form-container">
        <form method="POST" action="{{ route('update.panel', ['call' => $call->hash_id, 'panel' => $panel->hash_id]) }}">
            @csrf

            <div class="card panel-details">
                <div class="card-body">
                    <div class="card-body-item row align-items-center">
                        <div class="title col-sm-2">Panel Title:</div>
                        <div class="value col-sm-9">
                            <input type="text" name="panel_title" id="panel_title" class="form-control"
                                   value="{{ old('panel_title', $panel->name) }}" required>
                            @error('panel_title') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>
                    <div class="card-body-item row align-items-center">
                        <div class="title col-sm-2">Panel Description:</div>
                        <div class="value col-sm-9">
                            <input type="text" name="panel_description" id="panel_description" class="form-control"
                                   value="{{ old('panel_description', $panel->description) }}" required>
                            @error('panel_description') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>
                    <div class="card-body-item row align-items-center">
                        <div class="title col-sm-2">Panel Chair:</div>
                        <div class="value col-sm-9 form-field">
                            <select name="panel_chair_id" id="panel_chair_id" class="form-select select2" required>
                                <option value="">Select a valid evaluator as Panel Chair</option>
                                @foreach($panel_chairs as $panel_chair)
                                    <option value="{{ $panel_chair->id }}"
                                        {{ old('panel_chair_id', optional($panel->panelChair)->id) == $panel_chair->id ? 'selected' : '' }}>
                                        {{ $panel_chair->fullname }} ({{count($panel_chair->chairedPanels)}})
                                    </option>
                                @endforeach
                            </select>
                            @error('panel_chair_id') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>
                    </div>
                    <div class="card-body-item  row align-items-center">
                        <div class="title col-sm-2">Panel Domain:</div>
                        <div class="value col-sm-9">
                            {{ optional($panel->domain)->view_name_en ?? '—' }}
                            <input type="hidden" name="domain_id" value="{{ $panel->domain_id }}">
                        </div>
                    </div>
                    <div class="card-body-item row align-items-center">
                        <div class="title col-sm-2">No of assigned proposals:</div>
                        <div class="value col-sm-9" id="proposals-count">{{ $panel->proposals->count() }}</div>
                    </div>
                    <div class="card-body-item">
                        <div class="form-field col-sm-12 invalid">
                            <label for="proposals" class="form-label">Proposals * (<span class="proposals-counter">{{ $panel->proposals->count() }}</span>)</label>
                            <select name="proposals[]" id="proposals" class="form-select select2" required multiple>
                                @foreach($panel->proposals as $proposal)
                                    <option value="{{$proposal->id}}" @if($proposal->panel?->id === $panel->id ) selected @endif>{{$proposal->title}}</option>
                                @endforeach
                                @foreach($proposals as $proposal)
                                        <option value="{{$proposal->id}}">{{$proposal->title}}</option>
                                    @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-buttons col-sm-12">
                        <a href="{{ route('manage.panels', ['call' => $call->hash_id]) }}" class="btn btn-warning"><i class="fas fa-times"></i> Cancel</a>
                        <button type="submit"><i class="fas fa-save"></i> Save</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

@endsection

@section('javascripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $s = jQuery.noConflict();
        $s('.select2').each(function () {
            $s(this).select2({
                minimumResultsForSearch: -1
            });
        });

{{--        @if($call->panel_associated_with_domain)--}}
{{--        // mirror create: changing the domain reloads the proposals that will be auto-assigned to this panel--}}
{{--        $s('select#domain_id').on('change', function () {--}}
{{--            let selection = $s(this).val();--}}
{{--            if (!selection) return;--}}

{{--            $s.ajax({--}}
{{--                url: "{{ route('panel.proposals', ['call' => $call->hash_id]) }}",--}}
{{--                type: "post",--}}
{{--                data: { "_token": "{{ csrf_token() }}", domain: selection },--}}
{{--                success: function (result) {--}}
{{--                    let $list = $s('#proposals-list');--}}
{{--                    // drop current proposal rows, keep the header <li>--}}
{{--                    $list.find('li.proposal-box').remove();--}}

{{--                    $s.each(result, function (key, value) {--}}
{{--                        let $li = $s('<li class="proposal-box"></li>').attr('data-title', value.title);--}}
{{--                        $li.append($s('<div class="list-box--inner---list----project"></div>').text(value.title));--}}
{{--                        $li.append('<div class="list-box--inner---list----project acronym"></div>');--}}
{{--                        $li.append('<div class="list-box--inner---list----evaluators"></div>');--}}
{{--                        $li.append('<div class="list-box--inner---list----actions"></div>');--}}
{{--                        $list.append($li);--}}
{{--                    });--}}

{{--                    $s('#proposals-count').text(result.length);--}}
{{--                }--}}
{{--            });--}}
{{--        });--}}
{{--        @endif--}}
    </script>
@endsection