@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">Administration of {{$call->title}}</div>
    <div class="page-subtitle">Create a New Panel</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-plus"></i> Create Panel</a></li>
    </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-page-container container">
        <div class="row">
            <div class="form-container col-sm-12">

                <form role="form" action="{{route('panel.store', ['call' => $call])}}"  method="POST" class="row needs-validation">
                    @csrf
                    <div class="row">
                        <div class="form-field col-sm-12 col-md-12 invalid">
                            <label for="title" class="form-label">Panel Title *</label>
                            <input type="text" class="form-control" name="panel_title" id="title" value="" required>
                            <div class="invalid-feedback">
                                Please provide a valid title.
                            </div>
                        </div>
                        <div class="form-field col-sm-12 col-md-12 invalid">
                            <label for="description" class="form-label">Panel Description</label>
                            <textarea name="description" id="description" class="form-control"></textarea>
                            <div class="invalid-feedback">
                                Please provide a valid title.
                            </div>
                        </div>
                        <div class="form-field col-sm-12 col-md-6 invalid">
                            <label for="panel_chair_id" class="form-label">Panel Chair *</label>
                            <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}}">{{$panel_chair->fullname}} ({{count($panel_chair->chairedPanels)}})</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback">
                                Please select a panel chair.
                            </div>
                        </div>
{{--                        @if($call->panel_associated_with_domain)--}}
                            <div class="form-field col-sm-12 col-md-6 invalid">
                                <label for="domain_id" class="form-label">Domain</label>
                                <select name="domain_id" id="domain_id" class="form-select select2" >
                                    <option value="">Select Domain to be assigned in this panel</option>
                                    @foreach($domains as $domain)
                                        <option value="{{$domain->id}}">{{$domain->view_name_el}}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                    Please select a panel chair.
                                </div>
                            </div>
{{--                        @endif--}}
                        <div class="form-field col-sm-12 invalid">
                            <label for="proposals" class="form-label">Proposals * (<span class="proposals-counter">0</span>)</label>
                            <select name="proposals[]" id="proposals" class="form-select select2" required multiple>
                                @foreach($proposals as $proposal)
                                    <option value="{{$proposal->id}}">{{$proposal->title}}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback">
                                Please select a panel chair.
                            </div>
                        </div>

                        <div class="form-buttons col-sm-12">
                            <button type="reset" onClick="location.reload()"><i class="fas fa-redo-alt"></i> Cancel</button>
                            <button type="submit"><i class="fas fa-save"></i> Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </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)--}}
        $s('select#domain_id').on('change', function() {
            let selection = $s(this).val();
            console.log(selection);
            $s.ajax({
                url:"{{route('panel.proposals', [ 'call' => $call->hash_id])}}",
                type: "post",
                data: {"_token": "{{ csrf_token() }}", domain: selection},
                success:function(result){
                    $s.each(result,function(key, value){
                        $s('select#proposals option[value="'+value.id+'"]').attr('selected',true);
                    });
                    $s('select#proposals').trigger('change');
                    let counter = $s('select#proposals').find(':selected').length;
                    $s('.proposals-counter').text(counter);
                    console.log(result.length);
                }
            });
        });
{{--        @endif--}}
    </script>
@endsection