@extends('layouts.admin')
@section('title','Principal Investigator')
@section('page_title','')

@section('page_level_css')
<link href="{{asset('assets/vendors/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor pt-2" id="kt_content">

    <!-- begin:: Content -->
    <div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">

        <!-- begin:: Page -->
        <div class="kt-grid kt-grid--ver kt-grid--root ">
            <div class="top_main_title">
                <div class="labpair-title">
                    <p>
                        <span class="title">NEW PI MEMBER APPLICATIONS</span>
                    </p>
                </div>
            </div>
        </div>
        <!-- end:: Page -->

        <div class="inner-main-section mt-3 pt-3">

            <div class="row">
                <div class="col-12">
                    <div class="example-preview">
                        <ul class="nav nav-pills mb-0 pl-md-5" id="myTab1" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" href="{{getAURL('pi-member')}}">
                                    <span class="nav-text">PI Members</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link disabled" href="javascript:void(0);">
                                    <span class="nav-text">Member Detail</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{{getAURL('pi-search')}}">
                                    <span class="nav-text">Member Search</span>
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent1">
                            <div class="tab-pane fade show active" id="home-1" role="tabpanel" aria-labelledby="home-tab-1">
                                <div class="info-section">
                                    <p>
                                        <strong>EXPLANATION:</strong>
                                        Use this component to manage every Principal Investigator (PI) member across the enterprise. 
                                        This includes viewing their portal activity, logins, posts, collaborations, etc. 
                                        You also have the ability, when required, to suspend or purge a PI member from the system.
                                    </p>
                                </div>

                                <div class="some-custom-datatable">
                                    <div class="kt-portlet__body bg-white adding-table w-100 h-100 th-white">
                                        <!--begin: Datatable -->
                                        <table class="table table-striped- table-hover table-checkable" id="dataTableList">
                                            <thead>
                                                <tr>
                                                    <th>Edit</th>
                                                    <th>First Name</th>
                                                    <th>Last Name</th>
                                                    <th>Institution</th>
                                                    <th>City</th>
                                                    <th>State</th>
                                                    <th>DSLL</th>
                                                    <th>LL</th>
                                                    <th>LTP</th>
                                                    <th>LC</th>
                                                </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                        <!--end: Datatable -->

                                        <div class="legend">
                                            <!--<span class="round">L</span>-->
                                            <h3>LEGEND</h3>
                                            <ul>
                                                <li><span>DSLL - Days Since Last Login</span></li>
                                                <li><span>LL - Lifetime Login</span></li>
                                                <li><span>LTP - Lifetime Post</span></li>
                                                <li><span>LC - Lifetime Collaborations</span></li>
                                            </ul>
                                        </div>
                                    </div>

                                    <!--begin::Modal-->
                                    <div class="modal bg-custom fade" id="showPIMemberInformation" role="dialog" data-backdrop="false">
                                        <div class="modal-dialog modal-lg" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="exampleModalLabel">New Member Application Detail</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    </button>
                                                </div>
                                                <div class="modal-body padd-left-10 padd-right-10 pt-0 pb-0">
                                                    <div class="kt-section__body">
                                                        <div class="row">
                                                            <label class="col-lg-4 text-lg-right label">First Name:</label>
                                                            <div class="form-detail col-lg-8">
                                                                <span id="firstName">--</span>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <label class="col-lg-4 text-lg-right label">Last Name:</label>
                                                            <div class="form-detail col-lg-8">
                                                                <span id="lastName">--</span>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <label class="col-lg-4 text-lg-right label">Email Address:</label>
                                                            <div class="form-detail col-lg-8">
                                                                <span id="email">--</span>
                                                            </div>
                                                        </div>

                                                        <div class="row">
                                                            <label class="col-lg-4 text-lg-right label">Research Institution (US Only):</label>
                                                            <div class="form-detail col-lg-8">
                                                                <span id="researchName">--</span>
                                                            </div>
                                                        </div>

                                                        <div class="row">
                                                            <label class="col-lg-4 text-lg-right label">Research Institution (City):</label>
                                                            <div class="form-detail col-lg-8">
                                                                <span id="researchCity">--</span>
                                                            </div>
                                                        </div>

                                                        <div class="row">
                                                            <label class="col-lg-4 text-lg-right label">Research Institution (State):</label>
                                                            <div class="form-detail col-lg-8">
                                                                <span id="researchState">--</span>
                                                            </div>
                                                        </div>

                                                        <div class="row">
                                                            <label class="col-lg-4 text-lg-right label">Phone Number:</label>
                                                            <div class="form-detail col-lg-8">
                                                                <span id="phone">--</span>
                                                            </div>
                                                        </div>

                                                        <div class="row">
                                                            <label class="col-lg-4 text-lg-right label">What is your position?</label>
                                                            <div class="form-detail col-lg-8">
                                                                <span id="position">--</span>
                                                            </div>
                                                        </div>

                                                        <div class="row">
                                                            <label class="col-lg-4 text-lg-right label">Other</label>
                                                            <div class="form-detail col-lg-8">
                                                                <span id="other">--</span>
                                                            </div>
                                                        </div>

                                                        <div class="row">
                                                            <label class="col-lg-4 text-lg-right label light-grey">Principal Investigator</label>
                                                            <div class="form-detail col-lg-8 dark-grey">

                                                            </div>
                                                        </div>

                                                        <div class="row">
                                                            <label class="col-lg-4 text-lg-right label">Principal Investigator Full Name:</label>
                                                            <div class="form-detail col-lg-8">
                                                                <span id="investigatorName">--</span>
                                                            </div>
                                                        </div>

                                                        <div class="row">
                                                            <label class="col-lg-4 text-lg-right label">Principal Investigator Email Address:</label>
                                                            <div class="form-detail col-lg-8">
                                                                <span id="investigatorEmail">--</span>
                                                            </div>
                                                        </div>

                                                        <div class="row">
                                                            <label class="col-lg-4 text-lg-right label dark-red">Security</label>
                                                            <div class="form-detail col-lg-8 dark-black">
                                                            </div>
                                                        </div>

                                                        <div class="row">
                                                            <label class="col-lg-4 text-lg-right label">Temporary Password:</label>
                                                            <div class="form-detail col-lg-8">
                                                                <span id="tempPassword">--</span>
                                                            </div>
                                                        </div>

                                                        <div class="row">
                                                            <label class="col-lg-3 pt-4 text-lg-right"></label>
                                                            <div class="form-detail pt-4 col-lg-3">
                                                                <a href="#" class="btn btn-primary" data-id="" id="userApproveRequest">Approve</a>
                                                            </div>
                                                            <div class="form-detail pt-4 col-lg-3">
                                                                <a href="#" class="btn btn-danger showDeclineModalButton">Decline</a>
                                                            </div>
                                                            <div class="form-detail pt-4 col-lg-3">
                                                                <a href="#" data-dismiss="modal" class="btn btn-secondary modalCloseButton">Close</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="modal fade bg-grey denial" id="showDeclineUserModal" role="dialog" data-backdrop="false">
                                        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                                            
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="exampleModalLabel">Application Denial</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="kt-section__body">
                                                        <p>In the text field below, enter the reason you are declining the member’s application, then click the “Decline” button. An email will be sent to the individual explaining why their application was declined.</p>
                                                        <div class="textarea-box">
                                                            <div class="form-group mb-3">
                                                                <textarea class="form-control" rows="10" name="decline_message" id="decline_message" maxlength="800"></textarea>
                                                            </div>
                                                        </div>

                                                        <div class="btn-group d-flex align-items-center justify-content-center mt-4 pt-3">
                                                            <div class="button mr-2 ml-2">
                                                                <button type="button" class="btn btn-grey" data-id="" id="userCancelRequest">Send Decline</button>
                                                            </div>
                                                            <div class="button mr-2 ml-2">
                                                                <button type="button" class="btn btn-grey modalCloseButton" data-dismiss="modal" aria-label="Close">Close</button>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--end::Modal-->
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- end:: Content -->
    <button type="button" class="showPIMemberModal" data-toggle="modal" data-target="#showPIMemberInformation" style="display: none;">Show PI Member Details</button>
    <button type="button" class="showDeclineModal" data-toggle="modal" data-target="#showDeclineUserModal" style="display: none;">Show Decline Modal</button>
</div>

@endsection

@section('page_level_js')
<script src="{{asset('assets/js/admin/pi-member.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/vendors/custom/datatables/datatables.bundle.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/js/demo1/pages/crud/datatables/basic/paginations.js')}}" type="text/javascript"></script>
@endsection

@push('footerscript')
<script>

</script>
@endpush