@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">

            <!-- Filter Options Here -->
            
            <input type="hidden" name="total_records" id="total_records" value="{{convertCommaValue($options['total_records']) ?? 0}}">
            
            <input type="hidden" name="name" id="name" value="{{$options['name']}}">
            <input type="hidden" name="last_name" id="last_name" value="{{$options['last_name']}}">
            <input type="hidden" name="email" id="email" value="{{$options['email']}}">
            <input type="hidden" name="research_name" id="research_name" value="{{$options['research_name']}}">
            <input type="hidden" name="research_state_id" id="research_state_id" value="{{$options['research_state_id']}}">
            <input type="hidden" name="phone" id="phone" value="{{$options['phone']}}">
            <input type="hidden" name="position" id="position" value="{{$options['position']}}">
            <input type="hidden" name="status" id="status" value="{{$options['status']}}">
            
            <input type="hidden" name="membership_start" id="membership_start" value="{{$options['membership_start']}}">
            <input type="hidden" name="membership_end" id="membership_end" value="{{$options['membership_end']}}">
            <input type="hidden" name="dsll_start" id="dsll_start" value="{{$options['dsll_start']}}">
            <input type="hidden" name="dsll_end" id="dsll_end" value="{{$options['dsll_end']}}">
            <input type="hidden" name="total_login_start" id="total_login_start" value="{{$options['total_login_start']}}">
            <input type="hidden" name="total_login_end" id="total_login_end" value="{{$options['total_login_end']}}">
            <input type="hidden" name="total_post_start" id="total_post_start" value="{{$options['total_post_start']}}">
            <input type="hidden" name="total_post_end" id="total_post_end" value="{{$options['total_post_end']}}">
            <input type="hidden" name="total_collaboration_start" id="total_collaboration_start" value="{{$options['total_collaboration_start']}}">
            <input type="hidden" name="total_collaboration_end" id="total_collaboration_end" value="{{$options['total_collaboration_end']}}">
            
            <input type="hidden" name="data_posts_start" id="data_posts_start" value="{{$options['data_posts_start']}}">
            <input type="hidden" name="data_posts_end" id="data_posts_end" value="{{$options['data_posts_end']}}">
            <input type="hidden" name="sample_posts_start" id="sample_posts_start" value="{{$options['sample_posts_start']}}">
            <input type="hidden" name="sample_posts_end" id="sample_posts_end" value="{{$options['sample_posts_end']}}">
            <input type="hidden" name="skill_posts_start" id="skill_posts_start" value="{{$options['skill_posts_start']}}">
            <input type="hidden" name="skill_posts_end" id="skill_posts_end" value="{{$options['skill_posts_end']}}">
            <!-- Filter Options Here -->
            
            <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" 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 active" 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 -->
                                        <div class="member-title d-flex align-items-center justify-content-between mb-3">
                                            <h6>
                                                <i class="fa fa-search mr-3"></i>
                                                {{$options['total_records'] ?? 0}} FOUND RECORDS
                                            </h6>
                                        </div>
                                        <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">
                                            <a href="{{getAURL('pi-search')}}" class="btn btn-primary btn-wide btn-pill btn-custom mb-2">New Search</a>
                                            <a href="{{getAURL('home')}}" class="btn btn-primary btn-wide btn-pill btn-custom mb-2">Dashboard</a>
                                            <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 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 PIbv vfg  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