<!DOCTYPE html>
<html lang="en">
    <head><%- include('./partials/_head') %>
    <link rel="stylesheet" href="/stylesheets/profilePageSty.css">
    <title>Profile Page</title>
</head>
<body>
    <div class="container emp-profile">
            <div class="row">
                <div class="col-md-4">
                    <!-- ===============TODO========================== -->
                    <!-- <div class="profile-img">
                            <img src="/images/a.png" alt="profile image"/>
                            <div class="file btn btn-lg btn-primary">
                                Change Photo
                                <input type="file" name="file"/>
                            </div>
                        </div> -->
                        <% if (ROWDATA.reject_message !== null) { %>
                            <p><%= ROWDATA.reject_message %>te</p>
                        <%}%>
                        
                </div>
                    <!-- ================================================= -->
                    <div class="col-md-6">
                        <div class="profile-head">
                            <h5><%= ROWDATA.first_name %></h5>
                            <h6>
                                JKUAT KAREN CAMPUS
                            </h6>
                            <p class="proile-rating">Gender : <span><%= ROWDATA.gender %></span></p>
<!-- __________APPROAL REJECT CONTROLLERS_______________ -->
                            <% if(ROWDATA.institution_id == null){ %>
                                <p>Not applied for Attachment/Internship</p>    
                            <%}else if(ROWDATA.approved == 1){ %>
                                <a class="btn btn-sm btn-success disabled">Approved</a>
                            <% }else if(ROWDATA.rejected == 1){ %>
                                <a class="btn btn-sm btn-warning disabled">Rejected</a>
                            <% }else { %>
                                <a href="#approve" data-toggle="modal" class="btn btn-sm btn-success approve">Approve</a>
                                <a href="#reject" data-toggle="modal" class="btn btn-sm btn-danger disApprove">Reject</a>    
                            <% } %>

                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active green-text" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" aria-disabled="true">About</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link green-text " id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Attachment Info</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link green-text " id="supervisor-tab" data-toggle="tab" href="#supervisor" role="tab" aria-controls="supervisor" aria-selected="false">Supervisor Info</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <a href="/dashboard/admin" class="back btn btn-sm btn-outline-secondary"><small> BACK</small></a>
                    </div>
                    
            
            </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="profile-work">

                            <% if(ROWDATA.institution_id !== null){ %>
                                <a href="<%= link %>" target="_blank" rel="noreferrer" class="btn btn-sm btn-dark">PREVIEW</a>
                                 <embed src="<%= link%>#toolbar=0&navpanes=0" type="application/pdf" width="auto" height="399px" />
                            <% }else { %>
                                <aside style="align-items: center;">
                                <h4 class="noletter text-mutted">Letter from institution is not available</h4>
                                </aside>  
                            <% } %>
                           
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="tab-content profile-tab" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label>REGISTRATION NUMBER:</label>
                                    </div>
                                    <div class="col-md-6">
                                                <p><%= ROWDATA.registration_number %></p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label>NAME:</label>
                                            </div>
                                            <div class="col-md-6">
                                                <p><%= ROWDATA.first_name %> <%= ROWDATA.last_name %> <%= ROWDATA.other_name %> </p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label>EMAIL:</label>
                                            </div>
                                            <div class="col-md-6">
                                                <p><%= ROWDATA.user_email %></p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label>PHONE:</label>
                                            </div>
                                            <div class="col-md-6">
                                                <p><%= ROWDATA.phone_number %></p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label>PROGRAMME:</label>
                                            </div>
                                            <div class="col-md-6">
                                                <p><%= ROWDATA.programme_name %></p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label>ACADEMIC YEAR:</label>
                                            </div>
                                            <div class="col-md-6">
                                                <p><%= ROWDATA.academic_year %></p>
                                            </div>
                                        </div>
                            </div>
                                    
                            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                <div class="row">
                                            <div class="col-md-6">
                                                <label>NAME OF INSTITUTION:</label>
                                            </div>
                                            <div class="col-md-6">
                                                <p><%= ROWDATA.institution_name %></p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label>LOCATION:</label>
                                            </div>
                                            <div class="col-md-6">
                                                <p><%= ROWDATA.location %></p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label>INSTITUTION WEBSITE:</label>
                                            </div>
                                            <div class="col-md-6">
                                                <p><%= ROWDATA.email_address%></p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label>POSITION ATATCHED:</label>
                                            </div>
                                            <div class="col-md-6">
                                                <p><%= ROWDATA.work_position %></p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label>DURATION DATES:</label>
                                            </div>
                                            <div class="col-md-6">
                                                <p><%= xdate %> to <%= ydate %></p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <label>MORE INFO:</label><br/>
                                        <p><%= ROWDATA.additional_info %></p>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="supervisor" role="tabpanel" aria-labelledby="supervisor-tab">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label>SUPERVISOR'S NAME:</label>
                                    </div>
                                    <div class="col-md-6">
                                                <p><%= ROWDATA.supv_last_name %> <%= ROWDATA.supv_first_name %></p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label>EMAIL:</label>
                                            </div>
                                            <div class="col-md-6">
                                                <p><%= ROWDATA.supv_email %></p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <label>PHONE:</label>
                                            </div>
                                            <div class="col-md-6">
                                                <p><%= ROWDATA.supv_contact %></p>
                                            </div>
                                        </div>
                            </div>
                        </div>
                    </div>
                </div>        
    </div> 

<!-- ~~~~~~APPROVE MODAL~~~~~~~ -->
    <div class="modal fade" id="approve" tabindex="-1" role="dialog" aria-labelledby="approveLabel" data-backdrop="static">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">

                        Are you sure you want to approve
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
            </div>
    
            <div class="modal-footer text-center">
            <a href="/dashboard/admin/approve/<%= ROWDATA.user_id%>" class="btn btn-sm btn-outline-secondary" data-dismiss="modal" >Yes</a>
            <a class="btn btn-sm btn-outline-secondary" data-dismiss="modal">No</a> 
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->

<!-- ~~~~~~REJECT MODAL~~~~~~ -->
    <div class="modal fade" id="reject" tabindex="-1" role="dialog" aria-labelledby="rejectLabel" data-backdrop="static">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">

                        Are you sure you want to reject <%= ROWDATA.first_name %>'s institution application?
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div id="modal-body">
            </div>
    
            <div class="modal-footer text-center">
            <a onclick="loadForm()" class="btn btn-sm btn-outline-secondary approve">Yes </a>
            <a id="dismiss" class="btn btn-sm btn-outline-secondary disApprove" data-dismiss="modal">No </a> 
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div id="alertBox"></div>
    <footer>
    <%- include('./partials/_foot') %>
<script type="text/javascript">
function loadForm() {
            
        
    const modalBody = document.getElementById('modal-body');
    const modalFooter = document.querySelectorAll('.modal-footer');
    const alertBox = document.getElementById('alertBox')

    modalBody.classList.add('modal-body');
    modalBody.innerHTML = `
    <form method="POST" id="rejectMsgForm">
    <div class="md-form">
    <i class="fa fa-comment prefix"></i>
    <input type="text" class="form-control" name="rejectMessage" id="rejectMessage" required>
    <label for="rejectMessage" class="text-center">Reason</label>
    <button type="button" id="msgsubmit_button" data-dismiss="modal" class="btn btn-sm btn-dark">Send</button>
    </div>
    </form>`;
    modalFooter[1].parentNode.removeChild(modalFooter[1]);

    document.getElementById("msgsubmit_button").onclick = function(){
    console.log("clicked submitt");
    const rejectMessage = document.getElementById("rejectMessage").value;
    $.ajax({
        url: 'http://127.0.0.1:3000/dashboard/admin/reject/<%= ROWDATA.user_id %>',
        type: "POST",
        dataType: 'json',
        data: { rejectMessage: rejectMessage },
        headers: {'Access-Control-Allow-Origin': '*'},
        success: function (res, data){
            function redirect(){
                location.href = `/dashboard/admin/profileView/<%= ROWDATA.user_id %>`
            }

            if(res == "REJECT_SUCCESS"){

            let alertMsg = `<a class="close" data-dismiss="alert" aria-label="close">&times</a><strong>Success: </strong>Rejected successfully and message sent!` 
            alertBox.classList.add("_2faAlert", "alert", "alert-secondary");
            alertBox.innerHTML = alertMsg;
            setTimeout(redirect, 1500)

            }else {
                console.log("Reject Failed");
            }
        },
        Error: function(xhr){ console.log(xhr) }
    })
    }
}

$(function () {
$('[data-mdb-toggle="popover"]').popover()
})
</script>
</footer>
</body>
</html>