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

    #analysis-schedule-body-table tr {
        cursor: pointer;
    }

    /* tbody > tr.highlight > td {
	    background: #3c8dbc!important;
	} */
    /* tbody > tr.highlight > td input {
	    background: #3c8dbc!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;
        text-align: center !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;
    }

    tbody>tr.highlight>th {
        background: #aed1ea !important;
        color: #333 !important;
    }

    .toggle-on {
        line-height: 20px !important;
    }

    .toggle-off {
        line-height: 20px !important;
    }
</style>
<div id="screen[index]" style="padding-top: 20px;">
    <div class="col-lg-12">
        <!-- Code Tab Here -->
        <ul class="nav nav-tabs nav-tabs-line nav-tabs-line-brand" id="myTab" role="tablist">
            <li class="nav-item active">
                <a class="nav-link" id="contact-tab" data-toggle="tab" style="padding-top:0" href="#contact" aria-controls="contact">
                    <i class="flaticon2-box-1"></i>General
                </a>
            </li>
          
            <li class="nav-item">
                <a class="nav-link" id="delivery-tab" data-toggle="tab" style="padding-top:0" href="#delivery" aria-controls="contact">
                    <i class="flaticon2-box-1"></i>Delivery
                </a>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <br>
            <!-- GENERAL TAB -->
            <div class="tab-pane fade active in" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                <!--begin::Form-->
                <form class="form">
                    <div class="card-body row">
                        <div class="col-lg-4">
                            <div class="form-group row" style="display: none;">
                                <label class="col-lg-3 col-form-label">Prospect ID:</label>
                                <div class="col-lg-3">
                                    <input type="text" class="form-control" id="txtProspectID">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Prospect Code:</label>
                                <div class="col-lg-4">
                                    <input type="text" class="form-control mandatory-field" id="txtProspectCode" onchange="checkProspectCode(this);">
                                    <span class="form-text text-muted"></span>
                                </div>
                                <div class="col-lg-4" style="align-self: center;">
                                    <label class="checkbox">
                                        <input type="checkbox" id="chkProspectActive" checked="checked"> Active
                                    </label>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Address:</label>
                                <div class="col-lg-8">
                                    <textarea type="text" rows="7" class="form-control" id="txtProspectAddress1"></textarea>
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                            <div class="form-group row" id="divDocProspect">
                                <label class="col-lg-3 col-form-label">Supporting Document:</label>
                                <div class="col-lg-8">
                               
                                    <a id="viewDocPortal" name="viewDocPortal" href="#" onclick="openPreviewPortal()"></a>
                                    &nbsp;&nbsp;
                                    <a id="viewDocPortalDelete" title="delete document" name="viewDocPortalDelete" href="#" onclick="deleteProspectDocument()"><i class="glyphicon glyphicon-trash"></i></a>
                                </div>
                                <!-- <label class="col-lg-3 col-form-label">Supporting Document:</label>
                                <div class="col-lg-8">
                                         
										<div class="col-lg-12" style="display: inline-flex;">
											<input type="file" style="display:inline; margin-right: 5px;" class="form-control" id="txtAddProspectAttachment" name="txtAddProspectAttachment" onchange="encodeImageFileAsURLAddProspect(event);" />											
											<input type="hidden" class="form-control" id="txtAddProspectAttachmentFilename"/>
											<input type="hidden" class="form-control" id="txtAddProspectAttachmentFileExt"/>
											<textarea style="display: none;" id="txtAddProspectAttachmentFileBase64" cols="30" rows="10"></textarea>
									
										</div>
										<div class="col-lg-12" id="view_doc">
											<a id="viewDoc" name="viewDoc" href="#" onclick="openPreview()"></a>
										</div>
                                        <div class="col-lg-12" id="view_doc_portal">
                                            <a id="viewDocPortal" name="viewDocPortal" href="#" onclick="openPreviewPortal()">supporting_document</a>
                                        </div>
										<div style="display:none;">
											<iframe  id="frame" width="100%"; height="100%"
												src="" frameBorder="0"></iframe>
										</div>
                                </div> -->
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Prospect Name:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control mandatory-field" id="txtProspectName">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Telephone:</label>
                                <div class="col-lg-5">
                                    <input type="text" class="form-control" id="txtProspectTelephone">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Software Information:</label>
                                <div class="col-lg-8">
                                    <textarea class="form-control" rows="5" id="txtProspectSoftwareInfo"></textarea>
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Billing Cycle:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtProspectBillingCycle">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">UEN:</label>
                                <div class="col-lg-8">
                                    <input type="text" class="form-control" id="txtProspectUEN">
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-lg-3 col-form-label">Remarks:</label>
                                <div class="col-lg-8">
                                    <textarea class="form-control" rows="5" id="txtProspectRemarks"></textarea>
                                    <span class="form-text text-muted"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <!--end::Form-->
            </div>

            <!-- ACCOUNT TAB -->
            <div class="tab-pane fade" id="delivery" role="tabpanel" aria-labelledby="delivery-tab">
                <?php include(PATH_CODE . "views/prospect/tabs/delivery.php"); ?>
            </div>
        </div>
    </div>

    <!-- BUTTON -->
    <div class="col-md-8" style="margin-top: 20px;clear: both;">
        <button class="col-sm-2 btn btn-secondary" id="btnSaveProspect" style="background-color:grey;color:white;margin-right: 10px;" type="button" >OK</button>
        <button class="col-sm-2 btn btn-secondary" id="btnConvertToCustomer" style="background-color:grey;color:white;margin-right: 10px;" type="button" onclick="convertProspectCustomer();">Convert to Customer</button>
        <button class="col-sm-2 btn btn-secondary" style="background-color:grey;color:white;margin-right: 10px;" type="button"  onclick="cancelProspectEntry();">Cancel</button>
    </div>

    <div class="col-md-12">
        <hr>
    </div>
    <div class="col-lg-12">
        <!-- Code Tab Here -->
        <ul class="nav nav-tabs nav-tabs-line nav-tabs-line-brand" id="myTab" role="tablist">
            <li class="nav-item active">
                <a class="nav-link" id="contact-tab" data-toggle="tab" style="padding-top:0" href="#contact" aria-controls="contact">
                    <i class="flaticon2-box-1"></i>Contacts
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="todo-tab" data-toggle="tab" style="padding-top:0" href="#todo" aria-controls="todo">
                    <i class="flaticon2-box-1"></i>To Do
                </a>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade active in" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                <?php include(PATH_CODE . "views/prospect/tabs/contact.php"); ?>
            </div>
            <div class="tab-pane fade active in" id="todo" role="tabpanel" aria-labelledby="todo-tab">
                <?php include(PATH_CODE . "views/prospect/tabs/task.php"); ?>
            </div>
        </div>
    </div>
    <div class="col-md-12" id="errorShow"></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>

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

<!-- the function index that you want to run -->
<script type="text/javascript">
    $(function() {
        $('#txtProspectToggle').bootstrapToggle({
            on: 'New',
            off: 'Existing'
        });
    })

    $('#txtProspectAccount').select2({
        width: '100%'
    });

    function reactivatescreen() {
        swal2("activation screen [index]");
    }
</script>