@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">Import Evaluators to call "{{$call->title}}"</div>
    <div class="page-subtitle">Select the way you want to import evaluators to the call</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="active"><a href="#"><i class="fas fa-list-ul"></i> Import Evaluators</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 col-md-6">
                <div class="inner">
                    <h2 class="form-inner-title col-sm-6 active" data-select="addEvaluator">Add a single user</h2>
                    <span class="select-or">or</span>
                    <h2 class="form-inner-title col-sm-6" data-select="addExisting">Select an existing evaluator</h2>
                    <div class="form-container" id="addEvaluator">
                        <form id="add-evaluator" class="row"
                              action="{{route('invite.add-user', ['call' => $call->hash_id])}}" method="POST">
                            @csrf
                            <input type="hidden" name="role_id" value="3">
                            <div class="form-field col-sm-12 col-md-6 invalid">
                                <label for="firstname" class="form-label">First Name *</label>
                                <input type="text" class="form-control" name="firstname" value="" id="firstname" required>
                                <div class="invalid-feedback">
                                    Please provide a valid Name.
                                </div>
                            </div>
                            <div class="form-field col-sm-12 col-md-6 invalid">
                                <label for="lastname" class="form-label">Last Name *</label>
                                <input type="text" class="form-control" name="lastname" value="" id="lastname" required>
                                <div class="invalid-feedback">
                                    Please provide a valid Surname.
                                </div>
                            </div>
                            <div class="form-field col-sm-12 col-md-12 invalid">
                                <label for="email" class="form-label">Email *</label>
                                <input type="text" class="form-control" name="email" value="" id="email" required>
                                <div class="invalid-feedback">
                                    Please provide a valid e-mail address.
                                </div>
                            </div>
                            <div class="form-field col-sm-12 col-md-12 invalid">
                                <label for="role_id" class="form-label">Role *</label>
                                <select name="role_id" id="role_id" class="form-select" required>
                                    <option value="">Please select a role for the user</option>
                                    <option value="3">Individual Evaluator</option>
                                    <option value="4">Panel Chair</option>
                                </select>
                                <div class="invalid-feedback">
                                    Please select a role.
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-check">
                                    <label for="send_invitation" class="form-check-label">Send Invitation
                                    </label>
                                    <input type="checkbox" name="send_invitation" id="send_invitation" checked="checked"  class="form-check-input">
                                </div>
                            </div>
                            <div class="form-buttons inline col-sm-6">
                                <button type="submit"><i class="fas fa-user-plus"></i> Add User</button>
                            </div>
                        </form>
                    </div>

                    <div class="form-container" style="display: none" id="addExisting">
                        <form id="select-evaluator" class="row"
                              action="{{route('invite.add-existing-user', ['call' => $call->hash_id])}}" method="POST">
                            @csrf
                            <div class="form-field col-sm-12 invalid">
                                <label for="existing_evaluator_hash_id" class="form-label">Evaluator</label>
                                <select name="existing_evaluator_hash_id" id="existing_evaluator_hash_id" class="form-select">
                                    <option value="">Select from existing</option>
                                    @foreach($existing_evaluators as $existing_evaluator)
                                        <option value="{{$existing_evaluator->hash_id}}">{{$existing_evaluator->fullname}}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">
                                    Please provide a valid Name.
                                </div>
                            </div>
                            <div class="form-buttons inline col-sm-12">
                                <button type="submit"><i class="fas fa-user-check"></i> Add Evaluator</button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
            <div class="invite-box invite-excel col-sm-12 col-md-6" style="padding: 0 20px;">
                <div class="inner row">
                    <h2 class="form-inner-title">Bulk upload evaluators or panel chairs</h2>
                    <div class="form-container col-sm-12">
                        <form id="upload-evaluators-excel " class="row"
                              action="{{route('invite.import-users', ['call' => $call->hash_id])}}" method="POST"
                              enctype="multipart/form-data">
                            @csrf
                            <div class="form-field upload-box">
                                <input id="evaluators" type="file" name="evaluators" class="form-control" value="" required>
                            </div>
                            <div class="form-field col-sm-12 col-md-12 invalid">
                                <label for="role_id" class="form-label">Role *</label>
                                <select name="role_id" id="role_id" class="form-select" required>
                                    <option value="">Please select a role for the users</option>
                                    <option value="3">Individual Evaluators</option>
                                    <option value="4">Panel Chairs</option>
                                </select>
                                <div class="invalid-feedback">
                                    Please select a role.
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-check">
                                    <label for="send_invitation" class="form-check-label">Send Invitations</label>
                                    <input type="checkbox" name="send_invitation" id="send_invitation" checked="checked"  class="form-check-input">
                                </div>
                            </div>
                            <div class="form-buttons inline col-sm-12">
                                <button type="submit"><i class="fa-solid fa-person-arrow-up-from-line"></i> Upload Users</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="selectRole">
                <ul>
                    <li data-select="Evaluators" class="active">Evaluators</li>
                    <li data-select="panelChairs">Panel Chairs</li>
                </ul>
            </div>

            <div id="Evaluators" class="active users-list col-sm-12">
                <h4>Evaluators <div class="colors-legend"><ul><li><span class="color color-evaluated"></span>Invitation Accepted</li><li><span class="color color-unevaluated"></span>Invitation Pending</li></ul></div></h4>
                @foreach($evaluators as $evaluator)
                    <div class="elements-list--item {{$evaluator->is_active ? 'active' : 'inactive'}}" title="{{$evaluator->is_active ? 'User Accepted Invitation' : 'User has not accept yet'}}">
                        <div class="elements-list--item---title">
                            <a href="">{{$evaluator->fullname}}</a>
                        </div>
                        <div class="elements-list--item---title">
                            <a href="">{{$evaluator->email}}</a>
                        </div>
                        <div class="elements-list--item---role">
                            Evaluator
                        </div>
                        <div class="elements-list--item---buttons-list">
                            <ul>
                                <li>
                                    <a href="#" class="modal-btn send @if($evaluator->is_invited) invited @endif"
                                       data-bs-toggle="modal"
                                       data-bs-target="#send_invitation_{{$evaluator->id}}"
                                       @if(!$evaluator->is_invited)
                                           title="Send Invitation" @else
                                           title="Invitation Already Sent" @endif>
                                        <i class="fas fa-envelope "></i>
                                    </a>

                                    <div class="modal fade" id="send_invitation_{{$evaluator->id}}" tabindex="-1"
                                         role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
                                        <form method="POST" action="{{route('invite.send-invitation', ['call' => $call->hash_id])}}">
                                            @csrf
                                            <input type="hidden" name="hash_id" value="{{$evaluator->hash_id}}">
                                            <div class="modal-dialog modal-lg modal-dialog-centered">
                                                <div class="modal-content">
                                                    <div class="modal-header bg-red">
                                                        <h3 class="modal-title">Send Invitation</h3>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                    </div> <!-- End Modal Header -->
                                                    <div class="modal-body delete">
                                                        <h6 class="text-center text-bold mt-3">Are you sure you want to
                                                            send the Invitation Email ?</h6>
                                                        <p class="text-center">Recepient:
                                                            <strong>{{$evaluator->fullname}}</strong></p>
                                                    </div> <!-- End Modal Body -->
                                                    <div class="modal-footer">
                                                        <div class="col-xs-6">
                                                            <button type="button" class="btn btn-secondary"
                                                                    data-bs-dismiss="modal">Cancel
                                                            </button>
                                                        </div>
                                                        <div class="col-xs-6"><input type="submit" value="Send Email"
                                                                                     class="btn btn-primary" id="confirm-1">
                                                        </div>
                                                    </div> <!-- End Modal Footer -->
                                                </div> <!-- End Modal Content -->
                                            </div> <!-- End Modal Dialog -->
                                        </form>
                                    </div> <!-- End Modal -->

                                </li>
                                <li>
                                    <a href="#" class="modal-btn delete" data-bs-toggle="modal"
                                       data-bs-target="#delete_user_{{$evaluator->id}}" title="Delete User">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                    <form method="POST" action="{{route('invite.delete-evaluator-from-call', ['call' => $call->hash_id])}}" accept-charset="UTF-8" id="form-delete1"> {{-- TODO route 'admin/call/{hash}/delete-evaluator' --}}
                                        <input type="hidden" name="evaluator" value="{{$evaluator->hash_id}}">
                                        @csrf
                                        {{--                                    @method('DELETE')--}}
                                        <div class="modal fade" id="delete_user_{{$evaluator->id}}" tabindex="-1"
                                             role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-lg modal-dialog-centered">
                                                <div class="modal-content">
                                                    <div class="modal-header bg-red">
                                                        <h3 class="modal-title">Remove User from Call</h3>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                    </div> <!-- End Modal Header -->
                                                    <div class="modal-body delete">
                                                        <h6 class="text-center text-bold mt-3">Are you sure you want to
                                                            remove <strong>{{$evaluator->fullname}}</strong> from this call ?</h6>
                                                    </div> <!-- End Modal Body -->
                                                    <div class="modal-footer">
                                                        <div class="col-xs-6">
                                                            <button type="button" class="btn btn-secondary"
                                                                    data-bs-dismiss="modal">Cancel
                                                            </button>
                                                        </div>
                                                        <div class="col-xs-6"><input type="submit" value="Delete"
                                                                                     class="btn btn-danger" id="confirm-1">
                                                        </div>
                                                    </div> <!-- End Modal Footer -->
                                                </div> <!-- End Modal Content -->
                                            </div> <!-- End Modal Dialog -->
                                        </div> <!-- End Modal -->
                                    </form>
                                </li>
                            </ul>
                        </div>
                    </div>
                @endforeach
            </div>
            <div id="panelChairs" class="users-list col-sm-12">
                <h4>Panel Chairs <div class="colors-legend"><ul><li><span class="color color-evaluated"></span>Invitation Accepted</li><li><span class="color color-unevaluated"></span>Invitation Pending</li></ul></div></h4>
                @foreach($panel_chairs as $panel_chair)
                    <div class="elements-list--item {{$panel_chair->is_active ? 'active' : 'inactive'}}" title="{{$panel_chair->is_active ? 'User Accepted Invitation' : 'User has not accept yet'}}">
                        <div class="elements-list--item---title">
                            {{$panel_chair->fullname}}
                        </div>
                        <div class="elements-list--item---title">
                            {{$panel_chair->email}}
                        </div>
                        <div class="elements-list--item---role">
                            Panel Chair
                        </div>
                        <div class="elements-list--item---buttons-list">
                            <ul>
                                <li>
                                    <a href="#" class="modal-btn send @if($panel_chair->is_invited) invited @endif"
                                       data-bs-toggle="modal"
                                       data-bs-target="#send_invitation_{{$panel_chair->id}}"
                                       @if(!$panel_chair->is_invited)
                                           title="Send Invitation" @else
                                           title="Invitation Already Sent" @endif>
                                        <i class="fas fa-envelope "></i>
                                    </a>

                                    <div class="modal fade" id="send_invitation_{{$panel_chair->id}}" tabindex="-1"
                                         role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
                                        <form method="POST" action="{{route('invite.send-invitation', ['call' => $call->hash_id])}}">
                                            @csrf
                                            <input type="hidden" name="hash_id" value="{{$panel_chair->hash_id}}">
                                            <div class="modal-dialog modal-lg modal-dialog-centered">
                                                <div class="modal-content">
                                                    <div class="modal-header bg-red">
                                                        <h3 class="modal-title">Send Invitation</h3>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                    </div> <!-- End Modal Header -->
                                                    <div class="modal-body delete">
                                                        <h6 class="text-center text-bold mt-3">Are you sure you want to
                                                            send the Invitation Email ?</h6>
                                                        <p class="text-center">Recepient:
                                                            <strong>{{$panel_chair->fullname}}</strong></p>
                                                    </div> <!-- End Modal Body -->
                                                    <div class="modal-footer">
                                                        <div class="col-xs-6">
                                                            <button type="button" class="btn btn-secondary"
                                                                    data-bs-dismiss="modal">Cancel
                                                            </button>
                                                        </div>
                                                        <div class="col-xs-6"><input type="submit" value="Send Email"
                                                                                     class="btn btn-primary" id="confirm-1">
                                                        </div>
                                                    </div> <!-- End Modal Footer -->
                                                </div> <!-- End Modal Content -->
                                            </div> <!-- End Modal Dialog -->
                                        </form>
                                    </div> <!-- End Modal -->

                                </li>
                                <li>
                                    <a href="#" class="modal-btn delete" data-bs-toggle="modal"
                                       data-bs-target="#delete_user_{{$panel_chair->id}}" title="Delete User">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                    <form method="POST" action="{{route('invite.delete-panel-chair-from-call', ['call' => $call->hash_id])}}" accept-charset="UTF-8" id="form-delete1"> {{-- TODO route 'admin/call/{hash}/delete-evaluator' --}}
                                        <input type="hidden" name="panel_chair" value="{{$panel_chair->hash_id}}">
                                        @csrf
                                        {{--                                    @method('DELETE')--}}
                                        <div class="modal fade" id="delete_user_{{$panel_chair->id}}" tabindex="-1"
                                             role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-lg modal-dialog-centered">
                                                <div class="modal-content">
                                                    <div class="modal-header bg-red">
                                                        <h3 class="modal-title">Permanently delete</h3>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                aria-label="Close"></button>
                                                    </div> <!-- End Modal Header -->
                                                    <div class="modal-body delete">
                                                        <h6 class="text-center text-bold mt-3">Are you sure you want to
                                                            delete this User ?</h6>
                                                        <p class="text-center">{{$panel_chair->fullname}}</p>
                                                    </div> <!-- End Modal Body -->
                                                    <div class="modal-footer">
                                                        <div class="col-xs-6">
                                                            <button type="button" class="btn btn-secondary"
                                                                    data-bs-dismiss="modal">Cancel
                                                            </button>
                                                        </div>
                                                        <div class="col-xs-6"><input type="submit" value="Delete"
                                                                                     class="btn btn-primary" id="confirm-1">
                                                        </div>
                                                    </div> <!-- End Modal Footer -->
                                                </div> <!-- End Modal Content -->
                                            </div> <!-- End Modal Dialog -->
                                        </div> <!-- End Modal -->
                                    </form>
                                </li>
                            </ul>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection

@section('javascripts')
    <script>
        $a = jQuery.noConflict();
        $a(document).ready(function() {
            $a('.invite-single .form-inner-title').on('click', function() {
                $a('.invite-single .form-inner-title').removeClass('active');
                $a(this).addClass('active');
                let selection = $a(this).data('select');
                $a('.invite-single .form-container').hide();
                $a('#'+selection).show();
                console.log(selection);
            });

            $a('.modal-btn.delete, .modal-btn.send').on('click', function(e) {
                e.preventDefault();
                let user = $a(this).attr('data-bs-target');
                console.log(user);
                $a(user).addClass('show');
            });
            $a('.btn-close').on('click', function() {
                $a('.modal').removeClass('show');
            })
            $a('button[data-bs-dismiss="modal"]').on('click', function() {
                $a('.modal').removeClass('show');
            });

            $a('.selectRole li').on('click', function() {
                let selection = $a(this).data('select');
                $a('.selectRole li').removeClass('active');
                $a(this).addClass('active');
                $a('.users-list').hide();
                $a('#'+selection).show();
            })
        });
    </script>
@endsection