@extends('layouts.master')
@section('content')
<style>
    ._date-order {
        padding-left: 15px;
    }

    ._sa-customer {
        flex: 0 0 280px;
        max-width: 280px;
        padding-right: 0
    }

    .calendar-icon {
        top: 6px;
    }

    ._add-product .addItemCell {
        width: 230px;
    }

    ._add-product .unit-w {
        width: 130px;
    }

    .addItemCell2 {
        text-align: left !important;
        color: #282828 !important;
    }

    .AP_heading .addItemCell2 {
        color: #0038ba !important;
    }

    ._add-product input {
        text-align: left !important;
        border: solid 1px #fff !important;
        height: 25px !important;
        margin-top: -3px;
    }

    ._add-product .addItemCell3 {
        width: 100px;
        text-align: right !important;
    }

    ._order-del {
        right: 10px
    }

    ._INV-h:HOVER ._row-product input {
        border: solid 1px #e9e9e9 !important;
    }

    .addItemCell ._emp-sele .select2-container--default .select2-selection--single {
        border: solid 1px #fff !important;
    }

    ._INV-h:HOVER .addItemCell ._emp-sele .select2-container--default .select2-selection--single {
        border: solid 1px #e9e9e9 !important;
    }

    .addItemCell .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 25px;
    }

    .addItemCell .select2-container .select2-selection--single {
        height: 25px;
    }

    .addItemCell .select2-container .select2-selection--single .select2-selection__rendered {
        padding-left: 5px;
    }

    ._row-product .addItemCell3 {
        color: #282828 !important
    }

    ._totalBar2 {}

    ._totalBar2 ._h25 {
        height: 20px;
        color: #282828;
        font-size: 14px;
    }

    ._totalBar2 .width-t {
        width: 196px;
        text-align: right !important;
    }

    ._totalBar2 .addItemCell3 {
        font-family: 'Rationale', sans-serif;
        font-size: 17px;
        line-height: 1;
    }
</style>


<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-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="billsModalCS" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content top-borderBlue">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Select paper size for print <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">
                <style>
                    .print-icon-div{text-align: center; padding: 15px;}
                    .print-icon-div a{display: inline-block; border: solid 1px #e9ecef; padding: 15px; width: 100%; text-align: center; text-decoration: none; color: #282828; font-size: 13px;}
                    .print-icon-div a:HOVER{border: solid 1px #0038ba; color: #0038ba; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);}
                    .print-icon{filter: grayscale(1); width: 45px; opacity: 0.7; display: block; margin: auto; margin-top: 10px; margin-bottom: 15px;}
                    .print-icon-div a:HOVER .print-icon{filter:none; opacity: 1;}
                    </style>
                                  <div class="row print-icon-div">

                                            <div class="col-6">
                                                <a id='a4BillsCS'><img class="print-icon" src="/images/a4.svg" alt=""> <strong>A4 Portrait Paper</strong></a>
                                            </div>

                                            <div class="col-6">
                                                <a id='a5BillsCS'><img class="print-icon" src="/images/a5.svg" alt=""> <strong>A5 Landscape Paper</strong></a>
                                            </div>

                                            </div>
                              </div>
            </div>

        </div>
    </div>
    <button hidden data-toggle="modal" data-target="#deleteModal" id="hidden_btn_to_open_modal"></button>
</div>


<div class="row mt-2 mb-3">
    <div class="col-md-12">
        <h2 class="_head01 float-left">New <span>Order</span></h2>
    </div>

</div>

<div class="row mt-2">
    <div class="col-md-12">
        <div class="card p-20 top_border mb-3 _INV-h">
            <div class="row _add-customer">
                <div class="col-12">
                    <div class="row">
                        <div class="_date-order" style="display: none">
                            <div class="form-group">
                                <label class="date_label">Order Date</label>
                                <div class="dp3 input-append date position-relative"
                                    data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                                    <input type="text" class="order_date" readonly style="font-size: 14px">
                                    <span class="add-on calendar-icon"> <img src="/images/calendar-icon.svg" alt="" class="date_cal" /> </span>
                                </div>
                            </div>
                        </div>

                        <div class="_sa-customer">
                            <div class="form-s2">
                                <select class="form-control formselect spot_sale_emp_id" placeholder="Select Employee">
                                    <option selected disabled value='0'>Select Employee</option>
                                    @foreach ($employees as $emp)
                                        <option value='{{$emp->employee_id}}'>{{$emp->employee_first_name.' '.($emp->employee_last_name ? $emp->employee_last_name : '')}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="_sa-customer">
                            <div class="form-s2">
                                <select class="form-control formselect spot_sale_route_id" placeholder="Select Route">
                                    <option disabled selected value='0'>Select Route</option>
                                </select>
                            </div>
                        </div>

                        <div class="_sa-customer">
                            <div class="form-s2">
                                <select class="form-control formselect spot_sale_retailer_id" placeholder="Select Retailer">
                                    <option selected disabled value="0">Select Retailer</option>
                                </select>
                            </div>
                        </div>

                        <div class="_sa-customer" style="display:none;">
                            <div class="form-s2">
                                <select class="form-control formselect spot_sale_salesman_id" placeholder="Select Salesman">
                                    <option selected disabled value="0">Select Salesman</option>
                                    <option value='counter_sale'>Counter Sale</option>
                                    @foreach ($salesman as $salesman)
                                        <option value='{{$salesman->id}}'>{{$salesman->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="_cut-detail">
                        <div class="row">
                            <div class="col-md-6"><strong>Retailer Name: &nbsp; </strong> <span class="retailer_name">--</span></div>
                            <div class="col-md-6"><strong>Channel Type: &nbsp; </strong> <span class="retailer_type">--</span></div>
                            <div class="col-md-6"><strong>Location: &nbsp; </strong> <span class="retailer_location">--</span></div>
                            <div class="col-md-6"><strong>Territory: &nbsp; </strong> <span class="retailer_territory">--</span></div>
                        </div>
                    </div>

                    <div class="_add-product">
                        <div class="add_product_div" style="display:none">
                            <div class="row AP_heading">
                                <div class="addItemCell PL-5">Product Name</div>
                                <div class="addItemCell unit-w">Unit</div>

                                <div class="addItemCell2">QTY.</div>
                                <div class="addItemCell2">Trade Price</div>
                                <div class="addItemCell2">Trade Dis.</div>
                                <div class="addItemCell2">Special Dis.</div>
                                <div class="addItemCell2">Trade Offer</div>
                                <div class="addItemCell2">Extra Dis.</div>
                                <div class="addItemCell3">Net Amount</div>
                            </div>

                            <div class="new_product_div">
                                <div class="row _row-product">
                                    <a href="#" class="dd-handle dd3-handle swap-div"></a>
                                    <div class="col-12 p-0">
                                        <div class="addItemCell PL-5">
                                            <div class="_emp-sele _addProduct">
                                                <select class="form-control formselect spot_pro_n product_for_spot_sale_0"
                                                    placeholder="select Product" data-allow_clear="1">
                                                    <option selected disabled value="0">Select Product</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="addItemCell unit-w">
                                            <div class="_emp-sele _addProduct">
                                                <select class="form-control formselect spot_unit_n unit_for_spot_sale_0"
                                                    placeholder="select" data-allow_clear="1">
                                                    <option selected disabled value="0">Select Unit</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="addItemCell2 _h25"><input type="number" class="spot_sale_qty" placeholder="0" style="font-size: 13px"></div>
                                        <div class="addItemCell2 _h25 item_tp">0.00</div>
                                        <div class="addItemCell2 _h25 item_disc">0.00</div>
                                        <div class="addItemCell2 _h25 item_sp">0.00</div>
                                        <div class="addItemCell2 _h25 item_to">0.00</div>
                                        <div class="addItemCell2 _h25"><input type="number" placeholder="0" class="extra_discount" style="font-size: 13px"></div>

                                        <div class="addItemCell3 _h25 spot_sale_net_amt">0.00</div>
                                        <a class="btn _order-del remove_spot_sale_item" title="Delete"><i
                                                class="fa fa-trash-alt"></i></a>
                                    </div>
                                </div>
                            </div>

                            <div class="row _totalBar _totalBar2">
                                <div class="addItemCell _h25 PL-5">Total Items</div>
                                <div class="addItemCell _h25 unit-w ttl_spot_sale_items">0</div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25 width-t">Sub Total:</div>

                                <div class="addItemCell3 _h25 spot_sale_sub_ttl" name="0">0.00</div>
                            </div>

                            <div class="row _totalBar2">
                                <div class="addItemCell _h25 PL-5"></div>
                                <div class="addItemCell _h25 unit-w"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25 width-t">Trade Discount:</div>

                                <div class="addItemCell3 _h25 spot_sale_trade_disc" name="0">0.00</div>
                            </div>

                            <div class="row _totalBar2">
                                <div class="addItemCell _h25 PL-5"></div>
                                <div class="addItemCell _h25 unit-w"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25 width-t">Special Discount:</div>

                                <div class="addItemCell3 _h25 spot_sale_special_disc" name="0">0.00</div>
                            </div>

                            <div class="row _totalBar2">
                                <div class="addItemCell _h25 PL-5"></div>
                                <div class="addItemCell _h25 unit-w"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25 width-t">Trade Offer:</div>

                                <div class="addItemCell3 _h25 spot_sale_to" name="0">0.00</div>
                            </div>

                            <div class="row _totalBar2">
                                <div class="addItemCell _h25 PL-5"></div>
                                <div class="addItemCell _h25 unit-w"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25 width-t">Extra Discount:</div>

                                <div class="addItemCell3 _h25 spot_sale_ext_disc" name="0">0.00</div>
                            </div>

                            <div class="row _totalBar2">
                                <div class="addItemCell _h25 PL-5"></div>
                                <div class="addItemCell _h25 unit-w"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25 width-t">Previous Balance:</div>

                                <div class="addItemCell3 _h25 spot_sale_previous_bal" name="0">0.00</div>
                            </div>

                            <div class="row _totalBar2">
                                <div class="addItemCell _h25 PL-5"></div>
                                <div class="addItemCell _h25 unit-w"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25"></div>
                                <div class="addItemCell2 _h25 width-t"><strong>Total Amount Due:</strong>
                                </div>

                                <div class="addItemCell3 _h25 spot_sale_amt_due" name="0" style="font-size: 18px; color: #0038ba">
                                    0.00</div>
                            </div>
                        </div>

                        <div class="row">
                            <button class="btn add-product-line add_new_product"><i class="fa fa-plus"> </i> Add a Product</button>
                        </div>

                        <div class="row _notesTER">
                            <div class="col-md-12">
                                Notes
                                <textarea class="textarea-NOTES" rows='1' placeholder="Enter Notes"
                                    style="font-size: 13px"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="Action_bottom">
        <div class="container-fluid">
            <div class="align-right">
                <a href="/DistributorAdmin/Home" class="btn btn-cancel mr-2" >Cancel</a>
                <button class="btn btn-primary save_spot_sale">Save Order</button>

                <button class="btn btn-primary float-left" data-toggle="modal" id="checkCreditModal"
                    data-target="#CheckCreditModal">Add Cheque or Credit</button>
            </div>
        </div>
    </div>
</div>
@endsection