@extends('layouts.admin')
@section('title','New PI Member')
@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="#">
                                    <span class="nav-text">New (PI) Applications</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 view and approve new (PI) member applications to the platform.
                                    </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>View</th>
                                                    <th>Aging</th>
                                                    <th>PI Full Name</th>
                                                    <th>Company / Institution Name</th>
                                                    <th>City</th>
                                                    <th>State</th>
                                                    <th>Zip</th>
                                                    <th>Delete</th>
                                                </tr>
                                            </thead>
                                            <tbody>

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

                                        <div class="legend">
                                            <span class="round">L</span>
                                            <h3>LEGEND</h3>
                                            <ul>
                                                <li>
                                                    <span>Aging = Days application has been awaiting approval</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="modal bg-custom fade" id="showPrincipalMemberInformation" 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">Middle Name:</label>
                                                            <div class="form-detail col-lg-8">
                                                                <span id="middleName">--</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">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 col-lg-6 offset-4">
                                                                <a href="#" class="btn btn-primary w-75" data-id="" id="userApproveRequest">Approve</a>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="form-detail col-lg-6 offset-4">
                                                                <a href="#" class="btn btn-danger showDeclineModalButton w-75" data-id="" id="userCancelRequest">Decline</a>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="form-detail col-lg-6 offset-4">
                                                                <a href="#" data-dismiss="modal" class="btn btn-secondary modalCloseButton w-75">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-primary" 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> -->
                                    
                                    <div class="modal fade" id="showDeleteModel" role="dialog" data-backdrop="false">
                                        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                                            <div class="modal-content dark-color">
                                                <div class="modal-header modal-header-blue">
                                                    <h5 class="modal-title" id="modalDeleteHerderTitle"></h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    </button>
                                                </div>
                                                <div class="modal-body gray-background">
                                                    <div class="kt-section__body">
                                                        <div class="text-center max-width-560">
                                                            <div class="icon text-center mb-4" id="modalDeleteIcon"><i class="fas fa-exclamation-triangle"></i></div>
                                                            <h3 id="modalDeleteTitle"></h3>
                                                            <p id="modalDeleteDescription"></p>
                                                        </div>
                                                        <div class="btn-group d-flex align-items-center justify-content-center mt-4 mb-4">
                                                            <div class="button mr-2 ml-2">
                                                                <button type="button" class="btn btn-danger btn-red btn-custom btn-wide yes-sure" data-id="{{$data->id ?? ''}}" id="confirmDeleteTitle"></button>
                                                            </div>
                                                            <div class="button mr-2 ml-2">
                                                                <button type="button" class="btn btn-primary btn-custom btn-wide" data-dismiss="modal" aria-label="Close" id="cancelDeleteTitle"></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <button type="button" class="showDeleteModel" data-toggle="modal" data-target="#showDeleteModel" style="display: none;">Show Delete Model</button>
                                    <!--end::Modal-->
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- end:: Content -->
    <button type="button" class="showPrincipalMemberModal" data-toggle="modal" data-target="#showPrincipalMemberInformation" style="display: none;">Show Principal 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/inbound-pi.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