@extends('layouts.master')
@section('data-sidebar')
<div id="product-cl-sec"> <a id="pl-close" class="close-btn-pl"></a>
    <div class="pro-header-text">Add <span>Product</span></div>
    <div class="se_cus-type form-wrap p-15">
        <div class="row">
            <div class="col-12">
                <div class="productSearch"><i class="fa fa-search"></i>
                    <input type="text" class="form-control search_from_inventory" id="" placeholder="Search">
                </div>
            </div>
        </div>
    </div>
    <div class="pc-cartlist">
        <div class="overflow-plist">
            <div class="plist-content">
                <div class="_left-filter pt-0">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <div class="card top_border p-15">
                                    <table class="AddProductTable" width="100%">
                                        <tbody class="inventory_table_body">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="_cl-bottom">
        <button id="pl-close" type="button" class="btn btn-primary mr-2 dn">Add</button>
        <button id="pl-close" type="button" class="btn btn-cancel mr-2">Cancel</button>
    </div>
</div>
@endsection

@section('content')


{{-- 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="CheckCreditModal" 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 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="payment" opp="cheque" id="payment1" value=''>
                                <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="payment" opp="credit" id="payment2" value=''>
                                <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-6">
                            <div class="custom-control custom-radio">
                                <input class="custom-control-input payment_type" type="radio" name="payment_type" id="full" value=''>
                                <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="payment_type" checked id="partial" value=''>
                                <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" 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="payment_type" id="full" value=''>
                                        <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="payment_type" checked id="partial" value=''>
                                        <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">Amount*</label>
                                        <input type="number" class="form-control credit_amount">
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-primary" 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="ConfirmCancel" 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>


<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: 20px;
        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: 18px;
        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;
    }

</style>

<div class="row mt-1 mb-2">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">Orders <span>Management</span></h2>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a href="#"><span>Orders</span></a></li>
            <li><span>execution</span></li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-md-12 mb-30">
        <div class="card 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> <span
                                class="execution_bookers">---</span></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">
                                    <div class="APS-list"><i class="fa fa-search"></i>
                                        <input type="text" class="form-control" id="searchExecutionRetaiers"
                                            placeholder="Search">
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="ProList-div execution_retailers_list">

                        </div>
                    </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>
                        </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>Spec. Disc</th>
                                        <th>T.O.</th>
                                        <th>Net AMT</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody class="retailerExecutionOrderDetail">

                                </tbody>
                            </table>

                            <div class="total-valu-div order_total_div">

                            </div>

                        </div>

                    </div>

                    <div class="col-md-12 text-right PT-15">
                        <button class="btn btn-primary mr-2 float-left" data-toggle="modal"
                            data-target="#CheckCreditModal">Add cheque or credit</button>
                        <button class="btn btn-primary mr-2 save_order_execution">Save Order</button>
                        {{-- <a href="/DistributorAdmin/dispatchd_orders" class="btn btn-cancel">Cancel Order</a> --}}
                        <button class="btn btn-cancel cancel_order_btn" data-toggle="modal" data-target="#ConfirmCancel">Cancel</button>
                    </div>
                </div>
            </div>

            <div class="row" style="margin: 5px;">
                <div class="col-md-12 text-right" style="background-color: #f3f3f3; padding: 8px; margin-top: 5px;">
                    <a class="btn btn-primary open_cash_report">Next</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection