<style type="text/css">
    label {
        font-weight: normal !important;
    }

    #prospect-body-table tr {
        cursor: pointer;
    }

    tbody>tr.highlight>td {
        background: #aed1ea !important;
    }

    tbody>tr.highlight>td input {
        background: #aed1ea !important;
    }

    .tableFixHead {
        overflow: auto;
        height: 100px;
    }

    .tableFixHead thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: grey;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td {
        padding: 8px 16px;
    }

    td {
        vertical-align: middle !important;
        padding: 0px !important;
        padding-left: 8px !important;
        text-align: left !important;
        background-color: #eee;
    }

    td.numericalValue {
        vertical-align: middle !important;
        padding: 0px !important;
        text-align: right !important;
        background-color: #eee;
    }

    td input,
    td select {
        border-radius: 0px !important;
        border-color: transparent !important;
        background-color: white;
    }

    #prospectLoadingModal {
        z-index: 9999 !important;
    }
</style>
<div id="screen[index]" style="padding-top: 20px;">
    <div>
        <div class="col-sm-1">
            <div class="col-sm-12" style="padding-left: 0px;padding-right: 0px;">
                <!-- <label style="text-align:left;" for="" class="control-label">Status</label> -->
                <!-- <select class="form-control col-sm-2" id="cobProspectStatus" onchange="prospectFilter()">
                    <option>All</option>
                    <option value="active" selected>Active</option>
                    <option value="non-active">Inactive</option>
                    <option value="converted">Converted</option>
                </select> -->
            </div>
        </div>
    </div>

    <div class="col-md-12" id="errorShow"></div>


    <div class="col-md-6">
		<div class="box" style="height: 400px;">
			<div class="box-header" style="margin:10px;">
				<h3 class="box-title">To Do List</h3>
				<div class="box-tools pull-right" style="margin-top:8px;">
				</div>
			</div>
			<div class="box-body" style="margin:10px;">
				<div style="height:250px;overflow:auto;">
					<table class="table table-bordered">
						<thead>
							<tr>
								<th width="20%">Prospect</th>
								<th width="50%">Task</th>
								<th width="15%">Date</th>
								<th width="25%">Action</th>
							</tr>
						</thead>
						<tbody id="task-list-table-body">
                            <tr>
                                <td>Prospect 1 (PRO001)</td>
                                <td>Follow Up</td>
                                <td>22/05/2024</td>
                                <td>Follow Up</td>
                            </tr>
                            <tr>
                                <td>Prospect 3 (PRO003)</td>
                                <td>Appointment</td>
                                <td>22/05/2024</td>
                                <td>Appointment</td>
                            </tr>
                            <tr>
                                <td>Prospect 4 (PRO004)</td>
                                <td>Demo</td>
                                <td>22/05/2024</td>
                                <td>Demo</td>
                            </tr>
						</tbody>
					</table>
				</div>
				<div >
					<a style="float:left;margin-top:5px;background-color:grey;color:white;" href="#" onclick="addNewProspectToDo();" class="btn btn-primary btn-sm">Review</a>
				</div>
			</div>
		</div>
	</div>

<!-- button to trigger the things -->
<button id="activatebuttonscreen[index]" onclick='reactivatescreen();' style="display: none;">activate screen button</button>
</div>

<div id="screen[index]a"></div>

<!-- //================================================================= -->
<!-- LOADING PROGRESS MODAL -->
<div id="prospectLoadingModal" tabindex="-1" class="modal fade" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color:#3c8dbc;color:white;">
                <h4 class="modal-title" id="prospectLoadingModalTitle">Processing...</h4>
            </div>
            <div class="modal-body">
                <div class="progress progress-striped active">
                    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:100%">
                        <!-- <span class="sr-only">70% Complete</span> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- //Message modal -->
<div id="msgProspectModal" class="modal fade" style="overflow: auto;overflow-y: scroll;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" id="msgProspectModalHeader" style="background-color:#3c8dbc;color:white;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="msgProspectModalTitle">Message</h4>
            </div>
            <div class="modal-body">
                <P><span id="prospect_span_msg"></span></P>
            </div>
            <div class="modal-footer" style="padding:5px">
                <div id="msgProspectModalButton">
                    <button type="button" class="btn btn-secondary" style="background-color:grey;color:white;" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- //POPUP DELETE MODAL -->
<div id="deleteProspectConfirmationView" class="modal fade" style="overflow: auto;overflow-y: scroll;z-index: 99999">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" id="modalDeleteProspectConfirmationHeader" style="background-color:#3c8dbc;color:white;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="title_conf"></h4>
            </div>

            <div class="modal-body">
                <div id="modalDeleteProspectConfirmationContent">
                </div>
            </div>

            <div class="modal-footer">
                <div id="modalDeleteProspectConfirmationButton">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- //Import Modal -->
<div id="importProspectModal" class="modal fade" style="overflow: auto;overflow-y: scroll;">
    <div class="modal-dialog" style="width: 500px">
        <div class="modal-content">
            <div class="modal-header" id="importProspectModalHeader" style="background-color:#3c8dbc;color:white;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="importProspectModalTitle">Import Prospect</h4>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <div class="col-md-12">
                            <span class="col-sm-1"></span>
                            <input type="button" id="downloadTemplate" onclick="downloadProspectExcelTemplate();" style="background-color:#3c8dbc;color:white;" class="btn btn-md col-sm-5" value="Download Excel Template" role="button">
                            <span class="col-sm-1"></span>
                            <input type="button" id="importFAData" onclick="triggerProspectUploadExcel();" style="background-color:#3c8dbc;color:white;" class="btn btn-md col-sm-4" value="Import from Excel" role="button">
                            <form enctype="multipart/form-data" id="form-upload-fa-excel">
                                <input style="display:none" type="file" id="uploadFileProspect" name="uploadFileProspect[]" onchange="processProspectUploadExcel(this);" class="btn btn-success m-btn m-btn--icon">
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="padding:5px">
                    <div id="importProspectModalButton">
                        <button type="button" class="btn btn-secondary" style="background-color:grey;color:white;" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- //================================================================= -->

<!-- the function index that you want to run -->
<script type="text/javascript">
    function reactivatescreen() {
        swal2("activation screen [index]");
    }
</script>

<script>
    $(document).ready(function() {
        sorts = "";

        filterRow('prospect-row-filter', this, false);
    });
</script>