@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">Call "{{$call->title}}" Settings Page</div>
    <div class="page-subtitle">Manage Call Attributes</div>
@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('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="active"><a href="#"><i class="fas fa-cogs"></i> Call Settings</a></li>
    </ul>
@endsection
@section('content')

    <div class="form-container container elements-list">
        <div class="evaluators-top row">
            <div class="invite-box invite-single col-sm-12">
                <div class="inner">
                    <h2 class="form-inner-title col-sm-6 active">Call Options</h2>
                    <div class="form-container" id="addEvaluator">
                        <form id="call_settings" class="row align-items-center"
                              action="{{route('update.call', ['call' => $call])}}" method="POST">
                            @csrf
                            <div class="form-field col-sm-12 col-md-6">
                                <label for="title" class="form-label">Call Title *</label>
                                <input type="text" class="form-control" disabled value="{{$call->title}}" id="title" required>
                                <div class="invalid-feedback">
                                    Please provide a valid Title.
                                </div>
                            </div>
                            <div class="form-field col-sm-12 col-md-6">
                                <label for="code" class="form-label">Call Code *</label>
                                <input type="text" class="form-control" disabled value="{{$call->code}}" id="code" required>
                                <div class="invalid-feedback">
                                    Please provide a valid Code Name.
                                </div>
                            </div>
                            <div class="form-field col-sm-12">
                                <label for="description" class="form-label">Call Description *</label>
                                <textarea class="form-control" disabled id="description" required>{{$call->description}}</textarea>
                            </div>
                            <div class="form-field col-sm-12 col-md-6">
                                <label for="start_date" class="form-label">Start Date *</label>
                                <input type="date" class="form-control" disabled id="start_date" value="{{$call->start_date}}" required>
                            </div>
                            <div class="form-field col-sm-12 col-md-6">
                                <label for="end_date" class="form-label">End Date *</label>
                                <input type="datetime-local" class="form-control" name="end_date" id="end_date" value="{{$call->end_date}}" required>
                            </div>
                            <div class="form-field col-sm-12 col-md-12">
                                <label for="phase_id" class="form-label">Phase *</label>
                                <select name="phase_id" id="phase_id" class="form-select select2">
                                    @foreach($phases as $phase)
                                        <option value="{{$phase->id}}" @if($phase->id === $call->phase_id) selected @endif>{{$phase->view_name_en}}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                    Please select phase.
                                </div>
                            </div>
                            <div class="form-field col-sm-12 col-md-6">

                                <label for="allocation_type" class="form-label">Allocation Type *</label>
                                <select name="allocation_type" id="allocation_type" class="form-select select2" required>
                                    <option value="proposals" @selected(old('allocation_type', $call->callSetting->allocation_type ?? 'proposals') === 'proposals')>
                                        Number of Proposals
                                    </option>
                                    <option value="budget" @selected(old('allocation_type', $call->callSetting->allocation_type ?? 'proposals') === 'budget')>
                                        Budget Based
                                    </option>
                                </select>
                                <div class="invalid-feedback">
                                    Please select an allocation type.
                                </div>
                            </div>

                            {{-- Shown when allocation_type === proposals --}}
                            <div class="form-field col-sm-12 col-md-6" id="proposals_field" data-allocation="proposals">
                                <label for="proposals_count" class="form-label">Number of Funding Proposals *</label>
                                <input type="number" min="1" step="1" class="form-control" name="proposals_count"
                                       id="proposals_count" value="@isset ($call->callSetting->proposals_count){{$call->callSetting->proposals_count}}@endisset">
                                <div class="invalid-feedback">
                                    Please provide a valid number of proposals.
                                </div>
                            </div>

                            {{-- Shown when allocation_type === budget --}}
                            <div class="form-field col-sm-12 col-md-6" id="budget_field" data-allocation="budget">
                                <label for="total_budget" class="form-label">Total Budget of the Call *</label>
                                <input type="number" min="0" step="0.01" class="form-control" name="total_budget"
                                       id="total_budget" value="@isset ($call->callSetting->total_budget){{$call->callSetting->total_budget}}@endisset">
                                <div class="invalid-feedback">
                                    Please provide a valid budget.
                                </div>
                            </div>

                            <div class="form-buttons inline col-sm-12 text-center">
                                <button type="submit"><i class="fas fa-save"></i> Save Settings</button>
                            </div>
                        </form>
                    </div>

                </div>
            </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
            });
        });
        document.addEventListener('DOMContentLoaded', function () {
            const select        = document.getElementById('allocation_type');
            const proposalsField = document.getElementById('proposals_field');
            const budgetField    = document.getElementById('budget_field');

            function toggleFields() {
                const isProposals = select.value === 'proposals';

                proposalsField.style.display = isProposals ? '' : 'none';
                budgetField.style.display    = isProposals ? 'none' : '';

                // keep `required` only on the visible/active input so the form validates correctly
                proposalsField.querySelector('input').required = isProposals;
                budgetField.querySelector('input').required    = !isProposals;
            }

            toggleFields();
            $s('#allocation_type').on('change', toggleFields);
        });
    </script>
@endsection