{{-- Delete Modal --}}
<div class="modal fade" id="exampleModal-del" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content top-borderRed">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Delete <span></span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col-md-12">
                    <p>Are you sure you want to delete?</p>
                </div>

            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-primary deleteItemFromExecution" data-dismiss="modal"
                    aria-label="Close">Yes</button>
                <button type="button" class="btn btn-cancel" data-dismiss="modal" aria-label="Close">No</button>
            </div>
        </div>
    </div>
</div>

{{-- Cheque OR Credit Modal --}}
{{-- <div class="modal fade" id="CheckCreditModalSpotSale" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content top_border">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add <span> cheque or credit information</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div style="min-height: 265px">
                <div class="col-12">
                    <div id="floating-label" class="form-wrap p-0">
                        <div class="row pt-10">
                            <div class="col-3">
                                <div class="custom-control custom-radio">
                                    <input class="custom-control-input payment_radios" type="radio" name="execution_payment_radio"
                                        opp="cheque" id="payment1" value='cheque'>
                                    <label class="custom-control-label" style="font-size: 13px; line-height: 1.9"
                                        for="payment1">Cheque</label>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="custom-control custom-radio">
                                    <input class="custom-control-input payment_radios" checked type="radio" name="execution_payment_radio"
                                        opp="credit" id="payment2" value='credit'>
                                    <label class="custom-control-label" style="font-size: 13px; line-height: 1.9"
                                        for="payment2">Credit</label>
                                </div>
                            </div>

                        </div>

                        <div class="row cheque_case_div" style="display:none">
                            <div class="col-12">
                                <hr>
                            </div>
                            <div class="col-6">
                                <div class="custom-control custom-radio">
                                    <input class="custom-control-input payment_type" type="radio" name="execution_payment_type"
                                        id="full" value='full_amount'>
                                    <label class="custom-control-label" style="font-size: 13px; line-height: 1.9"
                                        for="full">Full Amount</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="custom-control custom-radio">
                                    <input class="custom-control-input payment_type" type="radio" name="execution_payment_type"
                                        checked id="partial" value='partial_amount'>
                                    <label class="custom-control-label" style="font-size: 13px; line-height: 1.9"
                                        for="partial">Partial Amount</label>
                                </div>
                            </div>

                            <div class="col-md-6 PT-10">
                                <div class="form-group">
                                    <label class="control-label mb-10">Cheque Number*</label>
                                    <input type="text" class="form-control cheque_num">
                                </div>
                            </div>
                            <div class="col-md-6 PT-10">
                                <div class="form-group">
                                    <label class="control-label mb-10">Date*</label>
                                    <input type="text" id="datepicker" class="form-control cheque_date datepicker">
                                </div>
                            </div>
                            <div class="col-md-6 PT-5">
                                <div class="form-group">
                                    <label class="control-label mb-10">Bank Name*</label>
                                    <input type="text" class="form-control cheque_bank_name">
                                </div>
                            </div>
                            <div class="col-md-6 PT-5">
                                <div class="form-group">
                                    <label class="control-label mb-10">Total Amount*</label>
                                    <input type="number" id="executionChequeAmount" class="form-control cheque_amount">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <hr>
                            </div>

                            <div class="col-12">
                                <div class="row pt-10">
                                    <div class="col-6">
                                        <div class="custom-control custom-radio">
                                            <input class="custom-control-input payment_type" type="radio"
                                                name="execution_payment_type" id="full2" value='full_amount'>
                                            <label class="custom-control-label" style="font-size: 13px; line-height: 1.9"
                                                for="full2">Full Amount</label>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="custom-control custom-radio">
                                            <input class="custom-control-input payment_type" type="radio"
                                                name="execution_payment_type" checked id="partial2" value='partial_amount'>
                                            <label class="custom-control-label" style="font-size: 13px; line-height: 1.9"
                                                for="partial2">Partial Amount</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6 PT-10">
                                        <div class="form-group">
                                            <label class="control-label mb-10">Amount*</label>
                                            <input type="number" id="executionCreditAmount" class="form-control credit_amount">
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-primary onAddCheckCredit" data-dismiss="modal" aria-label="Close"
                    onclick="window.onAddClickPop=1">Add</button>
                <button type="button" class="btn btn-cancel" data-dismiss="modal" aria-label="Close">Cancel</button>
            </div>
        </div>
    </div>
</div> --}}


<div class="modal fade" id="CreditModalSpotSale" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content top_border">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add <span> credit information</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div style="min-height: 265px">
                <div class="col-12">
                    <div id="floating-label" class="form-wrap p-0">
                        <div class="row">
                            <div class="col-12">
                                <hr>
                            </div>

                            <div class="col-12">
                                <div class="row pt-10">
                                    <div class="col-6">
                                        <div class="custom-control custom-radio">
                                            <input class="custom-control-input payment_type payment_type_credit" type="radio"
                                                name="execution_payment_credit_type" id="full2" value='full_amount'>
                                            <label class="custom-control-label" style="font-size: 13px; line-height: 1.9"
                                                for="full2">Full Amount</label>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="custom-control custom-radio">
                                            <input class="custom-control-input payment_type payment_type_credit" type="radio"name="execution_payment_credit_type" id="partial2" value='partial_amount' checked>
                                            <label class="custom-control-label" style="font-size: 13px; line-height: 1.9"
                                                for="partial2">Partial Amount</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6 PT-10" id="CreditTotalAmountDiv">
                                        <div class="form-group">
                                            <label class="control-label mb-10">Amount*</label>
                                            <input type="number" id="executionCreditAmount" class="form-control credit_amount">
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close" onclick="window.onAddClickPop=1; onAddCheckCredit('credit')">Add</button>
                <button type="button" class="btn btn-cancel" data-dismiss="modal" aria-label="Close">Cancel</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="CheckModalSpotSale" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content top_border">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add <span> cheque information</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div style="min-height: 265px">
                <div class="col-12">
                    <div id="floating-label" class="form-wrap p-0">

                        <div class="row cheque_case_div">
                            <div class="col-12">
                                <hr>
                            </div>
                            <div class="col-6">
                                <div class="custom-control custom-radio">
                                    <input class="custom-control-input payment_type payment_type_cheque" type="radio" name="execution_payment_cheque_type"
                                        id="full" value='full_amount'>
                                    <label class="custom-control-label" style="font-size: 13px; line-height: 1.9"
                                        for="full">Full Amount</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="custom-control custom-radio">
                                    <input class="custom-control-input payment_type payment_type_cheque" type="radio" name="execution_payment_cheque_type"
                                        checked id="partial" value='partial_amount'>
                                    <label class="custom-control-label" style="font-size: 13px; line-height: 1.9"
                                        for="partial">Partial Amount</label>
                                </div>
                            </div>

                            <div class="col-md-6 PT-10">
                                <div class="form-group">
                                    <label class="control-label mb-10">Cheque Number*</label>
                                    <input type="text" class="form-control cheque_num">
                                </div>
                            </div>
                            <div class="col-md-6 PT-10">
                                <div class="form-group">
                                    <label class="control-label mb-10">Date*</label>
                                    <input type="text" id="datepicker" class="form-control cheque_date datepicker">
                                </div>
                            </div>
                            <div class="col-md-6 PT-5">
                                <div class="form-group">
                                    <label class="control-label mb-10">Bank Name*</label>
                                    <input type="text" class="form-control cheque_bank_name">
                                </div>
                            </div>
                            <div class="col-md-6 PT-5" id="ChequeTotalAmountDiv">
                                <div class="form-group">
                                    <label class="control-label mb-10">Total Amount*</label>
                                    <input type="number" id="executionChequeAmount" class="form-control cheque_amount">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close"
                    onclick="window.onAddClickPop=1; onAddCheckCredit('cheque')">Add</button>
                <button type="button" class="btn btn-cancel" data-dismiss="modal" aria-label="Close">Cancel</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="ConfirmCancelSpotSale" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content top-borderRed">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Delete <span></span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col-md-12">
                    <p>Are you sure you want to Cancel this Order?</p>
                </div>

            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-primary confirm_cancel_order">Yes</button>
                <button type="button" class="btn btn-cancel close_modal" data-dismiss="modal"
                    aria-label="Close">No</button>
            </div>
        </div>
    </div>
</div>

{{-- Return Modal --}}
<div class="modal fade" id="ReturnModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document" style="max-width:1100px;">
        <div class="modal-content  top_border">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add <span>Returns</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span
                        aria-hidden="true">&times;</span> </button>
            </div>

            <div class="modal-body addreturn">
                <div class="col-4 p-0" style="display: none">
                    <label class="font12 mb-5">Select Retailer</label>
                    <div class="form-s2 mb-10">
                        <select class="form-control formselect retailer_id_cashreport" placeholder="Expense Type"
                            style="width: 100%">
                            <option selected value="0" disabled>Select Retailer* </option>
                        </select>
                    </div>
                </div>
                <div class="col-12 p-0">
                    <table class="table table-hover dt-responsive nowrap" style="width:100%">
                        <thead>
                            <tr>
                                <th><strong>Select Product</strong></th>
                                <th><strong>QTY.</strong></th>
                                <th><strong>DISC</strong></th>
                                <th><strong>Value</strong></th>
                                <th><strong>Type</strong></th>
                                <th><strong>Action</strong></th>
                            </tr>
                        </thead>
                        <tbody class="return_table_body">
                        </tbody>
                    </table>
                </div>

            </div>
            <div class="modal-footer border-0" style="background-color: #f6f6f6">
                <button type="button" class="btn btn-primary save_return_items" data-dismiss="modal">Save</button>
                <button type="button" class="btn btn-cancel" data-dismiss="modal" aria-label="Close">Cancel</button>
            </div>
        </div>
    </div>
</div>


<style>
    ._PR_filter {
        margin-top: -4px;
        width: 190px !important;
    }

    ._PR_filter .form-s2 .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 30px !important;
        font-family: 'proximanova-light', sans-serif !important;
        font-size: 13px !important;
    }

    ._PR_filter .form-s2 .select2-container .select2-selection--single,
    ._PR_filter .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 31px !important;
    }

    #wrapper #content-wrapper {
        padding-left: 0 !important;
    }

    .container {
        max-width: 1280px;
    }

    .add-stock-input {
        font-size: 13px;
        width: 80px;
        height: 25px;
        box-shadow: none;
        border-color: #dddddd;
        padding: 0px 5px 0 8px;
    }

    .retailerTable .table thead th {
        font-size: 12px;
        padding: 5px 8px !important
    }

    .retailerTable .table td {
        font-size: 12px !important;
        padding: 5px 8px !important;
        vertical-align: middle;
        line-height: 1
    }

    .CP-name {
        letter-spacing: 1px;
    }

    .CP-name span {
        letter-spacing: 1px;
        display: block;
        margin-top: 4px;
    }

    .ProList-div .table img {
        margin-top: -2px;
        margin-bottom: -2px;
        margin-left: 4px;
    }

    ._selectProList .header .add_button {
        padding: 4px 8px 3px 8px;
        right: 15px;
    }

    .topstats {
        margin-top: 10px;
        font-size: 13px;
        margin-bottom: 5px;
    }

    .topstats .gary-box {
        line-height: 1;
        background-color: #f9f9f9;
        border-bottom: solid 1px #d1d1d1;
        padding: 10px;
    }

    .topstats .gary-box span {
        font-family: 'Rationale', sans-serif;
        color: #0038ba;
        font-size: 18px;
        float: right;
        margin-top: -4px;
    }

    .min-w {
        min-width: 240px
    }

    .order-list {
        font-size: 13px;
        background: #fff;
        padding: 6px 10px;
        border: solid 1px #eaeaea;
        position: relative;
        transition: all 0.2s;
        transform: translateZ(0);
        -ms-transform: scale(0.97);
        -webkit-transform: scale(0.97);
        transform: scale(0.97);
        cursor: pointer;
    }

    .order-list.active {
        border-color: #0038ba;
    }

    .order-list:hover,
    .order-list.active {
        box-shadow: 0px 0px 22px 0px rgba(0, 0, 0, 0.18);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        z-index: 3
    }

    .order-list span {
        display: block
    }

    .order-list span .fa {
        color: #b5b5b5
    }

    .order-list span.or-val {
        font-family: 'Rationale', sans-serif;
        font-size: 16.5px !important;
        line-height: 1;
        color: #0038ba
    }

    .order-list .ord-no {
        font-family: 'Poppins', sans-serif;
        line-height: 1;
        font-size: 35px;
        font-weight: 800;
        color: #ececec;
        position: absolute;
        right: 80px;
        top: 7px
    }

    .addPR-head {
        padding: 15px 15px 0px 20px !important;
        background: none !important
    }

    #orderList-id {
        flex: 0 0 320px;
        max-width: 320px;
        width: 320px;
    }

    .value_input {
        padding: 2px;
        margin: 0 !important;
        font-size: 12px;
        box-shadow: none;
        height: 22px;
        width: 58px;
    }

    .total-valu-div {
        width: 260px;
        font-size: 12px;
        padding-left: 20px;
        padding-right: 20px;
        margin-left: auto;
        margin-right: 0;
        padding-top: 5px;
        background-color: #f7f7f7;
        border: solid 1px #ececec
    }

    .total-valu-div .row {
        border-bottom: solid 1px #e8e6e6
    }

    .total-valu-div .row .col-6 {
        padding: 2px;
        line-height: 1.5;
        font-family: proximanova-semibold, sans-serif !important;
    }

    .total-valu-div span {
        font-family: 'Rationale', sans-serif;
        line-height: 1.1;
        font-size: 15px;
        text-align: right;
        display: block
    }

    .total-a-val {
        font-size: 17px !important;
        color: #0038ba;
    }

    .ProListHeight {
        height: calc(100vh - 160px)
    }

    .rightHeight {
        height: calc(100vh - 210px);
        overflow-y: auto;
    }

    .addpr {
        padding: 4px 8px;
        font-size: 12px;
        top: 11px;
        right: 15px;
    }

    .itemQTY {
        font-size: 12px;
        width: 70px;
        padding: 0px 5px;
        border: solid 1px #e6e6e6
    }

    .itemIMG {
        width: 32px;
        height: 32px;
        border: solid 1px #e5e5e5;
        margin-top: -5px;
        margin-bottom: -5px;
        margin-right: 5px;
        float: left
    }

    .productSearch {
        position: relative;
    }

    .productSearch input {
        height: 32px;
        border: solid 1px #eae9e9;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        padding-left: 30px;
        font-size: 13px;
        letter-spacing: 1px;
    }

    .productSearch .fa {
        position: absolute;
        top: 8px;
        left: 8px;
        color: #b5b5b5;
    }

    .AddProductTable {
        padding: 0;
        margin: 0
    }

    .AddProductTable tr {
        border-bottom: solid 1px #eeeeee
    }

    .AddProductTable td {
        padding-bottom: 7px;
        padding-top: 7px
    }

    .ProListDiv {
        padding: 0;
        display: table;
    }

    .ProListDiv .PR_Name {
        display: table-cell;
        vertical-align: middle;
        font-size: 14px;
        letter-spacing: 1px;
        line-height: 16px
    }

    .ProListDiv .PrList_img {
        width: 35px;
        height: 35px;
        margin-right: 8px;
        border: solid 1px #e0e0e0
    }

    .AddProductTable .btn-default {
        padding: 5px 8px;
        font-size: 13px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -khtml-border-radius: 0;
        background: linear-gradient(90deg, #1e54d3 0%, #0038ba 100%);
        color: #fff;
        text-align: center;
        margin: 0;
        line-height: 1;
        min-width: 74px;
        letter-spacing: 1px;
        float: right;
        border: none !important
    }

    .AddDetailPR {
        padding: 25px;
        font-size: 14px
    }

    .AddDetailPR .form-control {
        height: 32px;
        border: solid 1px #dedede;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        padding: 0px 10px;
        font-size: 13px;
        letter-spacing: 1px;
    }

    .AddDetailPR select {
        border-radius: 0;
        padding: 0px 10px;
        height: 32px;
        border: solid 1px #dedede;
        font-size: 14px
    }

    .se_cus-type .form-control {
        border: 1px solid #eeeeee;
        background-color: #fff;
    }

    input[type='number'] {
        -moz-appearance: textfield;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    .return_btn_order {
        padding: 7px 8px;
        font-size: 12px;
        top: 1px;
        right: 128px;

    }

    .font13{
        font-size: 13px !important;
        padding: 4px 10px !important;
    }

    /* Shimmer Effects */
    .shine {
      background: #f6f7f8;
      background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
      background-repeat: no-repeat;
      background-size: 800px 104px;
      display: inline-block;
      position: relative;

      -webkit-animation-duration: 1s;
      -webkit-animation-fill-mode: forwards;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-name: placeholderShimmer;
      -webkit-animation-timing-function: linear;
      }

    .box-list {
      height: 50px;
      width: 100%;
    }
    .lines {
      height: 20px;
      margin-top: 15px;
      width: 100%;
    }
    @-webkit-keyframes placeholderShimmer {
      0% {
        background-position: -468px 0;
      }

      100% {
        background-position: 468px 0;
      }
    }

</style>

<div class="row" id="executionMain">
    <div class="col-md-12 mb-15">
        <div class="pb-0">

            <div class="topstats">
                <div class="row m-0">
                    <div class="col pr-0">
                        <div class="gary-box "><strong>Date:</strong> <span class="execution_date">---</span></div>
                    </div>
                    <div class="col-auto pr-0">
                        <div class="gary-box min-w "><strong>Order Booker:</strong> <b
                                class="execution_bookers float-right">---</b></div>
                    </div>
                    <div class="col-auto pr-0">
                        <div class="gary-box min-w "><strong>Territory:</strong> <span
                                class="execution_territories">---</span></div>
                    </div>
                    <div class="col pr-0">
                        <div class="gary-box "><strong>Total Outlets:</strong> <span class="execution_order">---</span>
                        </div>
                    </div>
                    <div class="col">
                        <div class="gary-box " style="min-width: 200px;"><strong>Total Amount:</strong>
                            <span class="execution_amount">Rs. ---</span></div>
                    </div>
                </div>
            </div>

            <div class="row m-0 grayTopborder">


                <div id="orderList-id" class="col-4 p-0">
                    <div class="_selectProList ProListHeight">

                        <div class="header ProListHD">
                            <div class="row">
                                <div class="col-12">
                                    <h2 class="w-100">Orders <span> List</span></h2>
                                </div>
                                <div class="col-12 searchTop" style="display: none">
                                    <div class="APS-list"><i class="fa fa-search"></i>
                                        <input type="text" class="form-control" id="searchExecutionRetaiers"
                                            placeholder="Search">
                                    </div>
                                </div>
                                <div class="col-12"><div class="box-list shine mt-10 loadinEffectTop"></div></div>
                            </div>
                        </div>

                        <div class="ProList-div execution_retailers_list_loading" style="background-color:#fff; border-color:#fff">

                            <div class="col-12"><div class="box-list shine"></div></div>
                            <div class="col-12"><div class="box-list shine"></div></div>
                            <div class="col-12"><div class="box-list shine"></div></div>
                            <div class="col-12"><div class="box-list shine"></div></div>
                            <div class="col-12"><div class="box-list shine"></div></div>
                            <div class="col-12"><div class="box-list shine"></div></div>
                            <div class="col-12"><div class="box-list shine"></div></div>
                            <div class="col-12"><div class="box-list shine"></div></div>
                            <div class="col-12"><div class="box-list shine"></div></div>
                            <div class="col-12"><div class="box-list shine"></div></div>
                            <div class="col-12"><div class="box-list shine"></div></div>
                            <div class="col-12"><div class="box-list shine"></div></div>

                        </div>

                        <div class="ProList-div execution_retailers_list" style="display: none">

                        </div>
                    </div>
                </div>
                <div class="spinner_custom">
                    <div class="spinner-grow text-success loader" style="display: none"></div>
                </div>
                <div class="col p-0 order_detail_div">
                    <div class="rightHeight">
                        <div class="header addPR-head mb-10">
                            <h2>Orders<span> Detail</span> </h2>
                            <a id="productlist01" class="btn add_button addpr"><i class="fa fa-plus"></i> <span>Add Product</span></a>
                            <button class="btn add_button return-btn open_stock_modal return_btn_order"
                                data-toggle="modal" data-target="#ReturnModal">Add Return</button>
                        </div>
                        <div class="col-12 retailerTable">
                            <table class="table table-hover dt-responsive nowrap" style="width:100%">
                                <thead>
                                    <tr>
                                        <th style="width:250px">Product Name</th>
                                        <th>Bkd Qty</th>
                                        <th>Dely.Qty</th>
                                        <th>T.P.</th>
                                        <th>GR.Amt</th>
                                        <th>T.O.</th>
                                        <th>T.Disc</th>
                                        <th>Spec.Disc</th>
                                        <th>B.Disc</th>
                                        <th>Net Amt</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>

                                <tbody class="retailerExecutionOrderDetail">

                                </tbody>
                            </table>

                            <div class="row">
                                    <div class="col-6">
                                        <div class="total-valu-div order_total_div_1 w-100"></div>
                                    </div>
                                    <div class="col-6">
                                        <div class="total-valu-div order_total_div_2 w-100"></div>
                                    </div>
                            </div>



                        </div>

                    </div>

                    <div class="col-md-12 text-right PT-15">
                        <button class="btn btn-primary mr-2 float-left font13" data-toggle="modal" data-target="#CheckModalSpotSale">Add cheque</button>
                        <button class="btn btn-primary mr-2 float-left font13" data-toggle="modal" data-target="#CreditModalSpotSale">Add credit</button>
                        <button class="btn btn-primary mr-2 save_order_execution font13">Save Order</button>
                        <button class="btn btn-cancel cancel_order_btn font13" data-toggle="modal"
                            data-target="#ConfirmCancelSpotSale">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>