<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;
    }

    .innerTdInput{
        border-radius: 0px !important;
        border-color: transparent !important;
        background-color: white;
    }

    .center-svg {
        text-align: center !important; /* Align content horizontally */
        /*vertical-align: middle; /* Align content vertically */
        /*height: 100%; /* Ensure full height of the cell */
    }
    .innerTableHeader{
        background-color: #808080;
        color: white;
        padding: 5px !important;
    }

    .innerTableContent{
        padding: 2px !important;
        vertical-align: top !important;
    }

    #prospectLoadingModal {
        z-index: 9999 !important;
    }
    .labelSVGCenter {
        padding-right:5px; 
        padding-top:7px;
    }

    /* textarea with btn inside css*/
    /* ================================= */
    .input-with-button {
        position: relative;
    }

    .input-with-button input {
        width: 100%;
        padding-right: 50px; /* Make space for the button */
        box-sizing: border-box;
    }
    .input-with-button button {
        position        : absolute;
        right           : 0;
        top             : 0;
        height          : 100%;
        border          : none;
        color           : #007BFF;
        background-color: white;
        padding         : 0 15px;
        cursor          : pointer;
    }
    /* ================================= */

    /* textarea with btn inside css*/
    /* ================================= */

    .textarea-container {
        position        : relative;
    }

    .textarea-container textarea {
        padding-right   : 40px; /* Make space for the button */
        box-sizing      : border-box; /* Include padding and border in the element's total width and height */
    }

    .icon-button {
        position    : absolute;
        right       : 10px;
        top         : 5px;
        background  : none;
        border      : none;
        cursor      : pointer;
        font-size   : 20px;
        color       : #7cbbff;
    }

    .icon-button:focus {
        outline     : none;
    }
    /* ================================= */

    /* Input dropdown css*/
    /* ================================= */
    .dropdown {
            position: relative;
            display: inline-block;
        }

    .dropdown-content {
        display: none;
        position: relative;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    .dropdown-content a:hover {background-color: #f1f1f1;}

    .show {display: block;
    }

    .form-control{
        padding: 5px;
    }
    /* ================================= */

    .truncate-text {
        display: inline-block;
        max-width: 250px;      /* adjust width to fit your table */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
    }
    .truncate-text.expanded {
        white-space: normal;
        overflow: visible;
        max-width: none;
    }
</style>
<div id="screen[index]" style="padding-top: 10px;">
    <div class="col-md-12" id="errorShow"></div>

    <?php if ($show_followup) { ?>
    <div style="margin-bottom:10px;">
        <div class="row">
            <div class="col-sm-2">
                <div class="col-sm-12" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">Action Date From</label>
                    <input type="date" class="form-control" id="txtFollowUpActionDateFrom">
                </div>
            </div>
            <div class="col-sm-2">
                <div class="col-sm-12" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">Action Date To</label>
                    <input type="date" class="form-control" id="txtFollowUpActionDateTO">
                </div>
            </div>
            <div class="col-sm-2"><br/>
                <div class="col-sm-12">
                    <a href="#" class="btn btn-secondary btn-md" style="background-color:grey;color:white;margin-top:5px;" onclick="filterFollowUpTable();">Filter</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12" style="margin-bottom: 10px;">
        <div class="tableFixHead" id="followUpTable" style="height: 250px;overflow: auto;">
            <table class="table table-bordered" style="width: 80%; max-width: 100%; margin-bottom: 20px;" id="followup-table">
                <thead style="background-color: grey;color:white;">
                    <tr>
                        <th class="kt-datatable__cell" style="width: 1%;" id="collapse-followup" name="prospect_sort_column" onclick="showHideFollowUpTable()">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
                                <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
                            </svg>
                        </th>
                        <th class="kt-datatable__cell" style="width:10%;" id="col_code" name="followup_sort_column">
                            Date<i class="fa"></i>
                        </th>
                        <th class="kt-datatable__cell" style="width:11%;" id="col_name" name="followup_sort_column">
                            Best Time<i class="fa fa-sort-up"></i>
                        </th>
                        <th class="kt-datatable__cell" id="col_status" style="width:10%;"name="followup_sort_column">
                            Full Name<i class="fa"></i>
                        </th>
                        <th class="kt-datatable__cell" id="col_status" style="width:15%;"name="followup_sort_column">
                            Last Conversation<i class="fa"></i>
                        </th>
                        <th class="kt-datatable__cell" id="col_status" style="width:15%;"name="followup_sort_column">
                            Next Action<i class="fa"></i>
                        </th>
                        <th class="kt-datatable__cell" id="col_status" style="width:10%;"name="followup_sort_column">
                            Phone Number<i class="fa"></i>
                        </th>
                        <th class="kt-datatable__cell" id="col_status" style="width:10%;"name="followup_sort_column">
                            Assign To<i class="fa"></i>
                        </th>
                        <th class="kt-datatable__cell" id="col_status" style="width:15%;text-align:center;"name="followup_sort_column">
                            Action<i class="fa"></i>
                        </th>
                    </tr>
                </thead>
                <tbody id="followup-table-body">
                </tbody>
            </table>
        </div>
        <br>
        <button class="col-sm-2 btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px; max-width:170px;" type="button" data-toggle="modal" onclick="exportReport();">Export Follow Up Table</button>
    </div>
    <?php } ?>

    <div style="margin-bottom:20px;">
        <?php if ($show_followup) { ?>
        <div class="row">
            <div class="col-sm-2">
                <div class="col-sm-12" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">Industry</label>
                    <input type="text" class="form-control" id="txtSuspectIndustry">
                </div>
            </div>
            <div class="col-sm-2">
                <div class="col-sm-12" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">Business Sector</label>
                    <input type="text" class="form-control" id="txtSuspectBusinessSector">
                </div>
            </div>
            <div class="col-sm-2">
                <div class="col-sm-12" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">No. of Employee</label>
                    <input type="number" class="form-control" id="txtSuspectNoOfEmployee">
                </div>
            </div>
        </div>
        <?php } ?>
        <div class="row" style="padding: 10px 0px 0px 0px;">
            <div class="col-sm-2">
                <div class="col-sm-12" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">Company Name</label>
                    <input type="text" class="form-control" id="txtSuspectCompanyName">
                </div>
            </div>
            <div class="col-sm-2">
                <div class="col-sm-12" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">Phone Number</label>
                    <input type="text" class="form-control" id="txtSuspectTelephone">
                </div>
            </div>
            <div class="col-sm-2">
                <div class="col-sm-12" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">Account Type</label>
                    <select class="form-control" id="cobSuspectAccountFlag">
                        <option value="">All</option>
                        <option value="<?php echo AccountFlags::Customer; ?>">Customer</option>
                        <option value="<?php echo AccountFlags::Supplier; ?>">Supplier</option>
                    </select>
                </div>
            </div>
            <?php if ($show_followup) { ?>
            <div class="col-sm-2">
                <div class="col-sm-12" style="padding-right: 0px;">
                    <label style="text-align:left;" for="" class="control-label">State</label>
                    <input type="text" class="form-control" id="txtSuspectState">
                </div>
            </div>
            <?php } ?>
            <div class="col-sm-2"><br/>
                <div class="col-sm-12">
                    <a href="#" class="btn btn-secondary btn-md" style="background-color:grey;color:white;margin-top:5px;" onclick="clearFilter();">Clear</a>
                    <a href="#" class="btn btn-secondary btn-md" style="background-color:grey;color:white;margin-top:5px;" onclick="filterSuspectList();">Filter</a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-12" style="margin-top: 10px;">
        <div class="tableFixHead col-lg-12" id="divTelemarketingTable" style="height: 600px;overflow: auto; padding-left: 0px;">
            <select style="display:none;" id="cobUserList">
                <option value="0">None</option>
                <?php echo $this->getAllUsers();?>
            </select>
            <select style="display:none;" id="cobTimeOption">
                <?php echo Util::getTimeDropdown();?>
            </select>
            <select style="display:none;" id="cobLunchTimeOption">
                <?php echo Util::getTimeDropdown();?>
            </select>
            <select style="display:none;" id="cobStatusOption">
                <?php echo $this->getSalesStatusOption();?>
            </select>
            <select style="display:none;" id="cobStatus2Option">
                <?php echo $this->getSalesStatus2Option();?>
            </select>
            <select style="display:none;" id="cobIndustryOption">
                <?php echo $this->getIndustryOption();?>
            </select>
            <select style="display:none;" id="cobBusinessSectorOption">
                <?php echo $this->getBusinessSectorOption();?>
            </select>
            <!-- changes -->
            <select style="display:none;" id="cobBusinessNatureOption">
                <?php echo $this->getBusinessNatureOption();?>
            </select>
            <!-- changes ended -->
            <select style="display:none;" id="cobSoftwareAccountingOption">
                <?php echo $this->getSoftwareOption(1);?>
            </select>
            <select style="display:none;" id="cobSoftwareSalesOption">
                <?php echo $this->getSoftwareOption(2);?>
            </select>
            <select style="display:none;" id="cobSoftwareOtherOption">
                <?php echo $this->getSoftwareOption(3);?>
            </select>
            <select style="display:none;" id="cobAccountFlagsOption">
                <?php echo $this->getAccountFlagsOptions();?>
            </select>
            <table class="table table-striped table-bordered" style="width: 100%; max-width: 100%; margin-bottom: 20px;" id="prospect-table">
                <thead style="background-color: grey;color:white;">
                    <tr>
                        <th class="kt-datatable__cell" style="width: 1%;" id="col_code" name="prospect_sort_column">
                            <button class="btn btn-success btn-sm btn-icon btn-icon-md" type="button" id="btnNewContact" onclick="addSuspectHeader();"><i class="fa fa-plus"></i></button>
                        </th>
                        <th class="kt-datatable__cell" style="width:25%;" id="col_code" name="prospect_sort_column">
                            Company Detail
                            <label style="float: right; font-weight: bold !important; padding-left: 5px;" id="lblSubsidiary" onclick="showSubsidiary()">
                                Subsidiary
                                <i style="padding-left:3px;" id="iconSubsidiary" class="fa fa-chevron-left"></i>
                            </label>
                        </th>
                        <th class="kt-datatable__cell colSubsidiary" id="col_status" style="width:17%; display:none;"name="prospect_sort_column">
                            Subsidiary
                            <label style="float: right; font-weight: bold !important; padding-left: 5px;">
                                &nbsp;
                            </label>
                        </th>
                        <th class="kt-datatable__cell" style="width:20%;" id="col_name" name="prospect_sort_column">
                            <label style="float: left; font-weight: bold !important;">Business Description</label>
                            <label style="float: right; font-weight: bold !important;" id="lblSoftwareUsed" onclick="showSoftwareUsed()">
                                Software Used
                                <i style="padding-left:3px;" id="iconSoftwareUsed" class="fa fa-chevron-left"></i>
                            </label>
                        </th>
                        <th class="kt-datatable__cell colSoftwareUsed" id="col_status" style="width:22%; display:none;"name="prospect_sort_column">
                            Software Used
                            <label style="float: right; font-weight: bold !important; padding-left: 5px;">
                                &nbsp;
                            </label>
                        </th>
                        <th class="kt-datatable__cell" id="col_status" style="width:15%;"name="prospect_sort_column">
                            <label style="float: left; font-weight: bold !important;">Status</label>
                            <label style="float: right; font-weight: bold !important;" id="lblShowMemo" onclick="showMemo()">
                                Memo
                                <i style="padding-left:3px;" id="iconMemo" class="fa fa-chevron-right"></i>
                            </label>
                        </th>
                    </tr>
                </thead>
                <tbody id="suspect-table-body">
                </tbody>
            </table>
        </div>
        <div class="col-lg-2" id="divMemoField" style="display: none;">
            <label>Memo</label>
            <textarea id="txtMemo" rows="15" class="form-control"><?php echo $this->getMemo(); ?></textarea>
            <br>
            <button class="col-sm-4 btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px;" type="button" data-toggle="modal" onclick="saveMemo();">Save</button>
        </div>
    </div>
</div>

<div id="assignedProspectModal" tabindex="-1" class="modal fade" data-backdrop="static" data-keyboard="false">
	<div class="modal-dialog" style="width: 30%;">
		<div class="modal-content" style="width: 100%;">
			<div class="modal-header" style="background-color:white;color:Black;">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title">Assigned to</h4>
			</div>
			<div class="modal-body">
                <div class="row" style="padding:0px 50px 0px 50px;">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label style="text-align:left;" for="" class="col-sm-3 control-label">User</label>
                            <div class="col-sm-6">
                                <select class="form-control col-sm-3" id="cobJournalListingJournalTypeFilter">
                                    <option>Dave</option>
                                    <option>David</option>
                                    <option>Daniel</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label style="text-align:left;" for="" class="col-sm-3 control-label">Description</label>
                            <div class="col-sm-6">
                                <textarea class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label style="text-align:left;" for="" class="col-sm-3 control-label">Date</label>
                            <div class="col-sm-6">
                                <input type="date" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label style="text-align:left;" for="" class="col-sm-3 control-label">Action</label>
                            <div class="col-sm-6">
                                <select class="form-control col-sm-3" id="cobJournalListingJournalTypeFilter">
                                    <option>Follow Up</option>
                                    <option>Appointment</option>
                                    <option>Completed</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
			</div>
			<div class="modal-footer" style="padding:5px">
				<div>
					<button type="button" class="btn btn-secondary" style="background-color:grey;color:white;" onclick=""> Assigned</button>
					<button type="button" class="btn btn-secondary" style="background-color:grey;color:white;" onclick="hideAssignedProspectModal()"> Cancel</button>
				</div>
			</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="importSuspectModal" 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="importSuspectModalHeader" style="background-color:#3c8dbc;color:white;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="importSuspectModalTitle" >Import Suspect</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="downloadSuspectExcelTemplate();" 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="triggerSuspectUploadExcel();" 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="uploadFileSuspect" name="uploadFileSuspect[]"  onchange="processSuspectUploadExcel(this);" class="btn btn-success m-btn m-btn--icon">
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="padding:5px">
                    <div id="importSuspectModalButton">
                        <button type="button" class="btn btn-secondary" style="background-color:grey;color:white;" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- LOADING PROGRESS MODAL -->
<div id="exportSuspectModal" 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="exportSuspectModalHeader" style="background-color:#3c8dbc;color:white;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="exportSuspectModalTitle" >Import Suspect</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="exportNewContact();" style="background-color:#3c8dbc;color:white;" class="btn btn-md col-sm-4" value="Export new contact" role="button">
                            <span class="col-sm-2"></span>
                            <input type="button" id="importFAData" onclick="exportAllContact();" style="background-color:#3c8dbc;color:white;" class="btn btn-md col-sm-4" value="Export all contact" role="button">
                            <form enctype="multipart/form-data" id="form-upload-fa-excel">
                                <input style="display:none" type="file" id="uploadFileSuspect" name="uploadFileSuspect[]"  onchange="processSuspectUploadExcel(this);" class="btn btn-success m-btn m-btn--icon">
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="padding:5px">
                    <div id="exportSuspectModalButton">
                        <button type="button" class="btn btn-secondary" style="background-color:grey;color:white;" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<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="conversationHistory" class="modal fade" style="overflow: auto;overflow-y: scroll;">
    <div class="modal-dialog" style="width: 1000px">
        <div class="modal-content">
            <div class="modal-header" id="conversationHistory" style="background-color:#3c8dbc;color:white;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" >Conversation history</h4>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <div class="col-md-12">
                            <div style="border: 1px solid black; padding: 10px; border-radius: 5px;" id="conversationHistoryContent">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <label style="text-align:left; margin-top: 20px;" for="" class="control-label">Current Conversation</label>
                            <textarea class="form-control" id="txtCurrentConversation"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="padding:5px">
                    <div id="importProspectModalButton" style="margin-top: 10px;">
                        <button type="button" class="btn btn-secondary" style="background-color:grey;color:white;" data-dismiss="modal" id="btnSaveConversation">Save</button>
                        <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('suspect-row-filter', this, false);
        // filterSuspectList();
        <?php if ($show_followup) { ?>
        filterFollowUpTable();
        <?php } ?>
    });
</script>