@extends('layouts.master')
@section('content')
<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
    }

    .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 320x;
        max-width: 320px;
        width: 320px;
    }

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

    .value_input-return {
        font-size: 13px;
        box-shadow: none;
        height: 36px;
        width: 100%;
    }

    .total-valu-div {
        width: 310px;
        font-size: 14px;
        padding-left: 30px;
        padding-right: 30px;
        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: 6px 0px 3px 0px;
        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: 18px;
        text-align: right;
        display: block
    }

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

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

    .cash-report {
        background-color: #f8f8f8;
        min-height: 100%;
    }

    .cash-report .header {
        background: linear-gradient(0deg, #f8f8f8 0%, #f8f8f8 50%);
        padding: 15px 20px;
    }

    .cash-report .report_value {
        background-color: #fff;
        font-size: 13px;
        position: relative;
        padding: 10px 10px;
        letter-spacing: 0.5px;
        margin-bottom: 5px;
        margin-top: 5px;
        -webkit-box-shadow: 0 2px 8px 0 rgba(79, 79, 79, .1);
        -moz-box-shadow: 0 2px 8px 0 rgba(79, 79, 79, .1);
        box-shadow: 0 2px 8px 0 rgba(79, 79, 79, .1);
        line-height: 1
    }

    .cash-report .report_value span {
        font-family: 'Rationale', sans-serif;
        line-height: 1;
        font-size: 18px;
        float: right;
        margin-top: -2px
    }

    .totalcash span {
        font-size: 20px !important;
        color: #0038ba
    }

    .cash-report .value_input {
        float: right;
        width: 85px;
    }

    .addsalesman {
        font-size: 11px;
        width: 100%;
        line-height: 1;
        margin-top: 5px;
    }

    .return-btn {
        line-height: 1;
        margin-top: 10px;
    }

    .add-expense {
        font-size: 13px;
        padding: 2px 10px;
        position: absolute;
        right: 0;
    }

    .red-bg {
        border: solid 1px #f12300
    }
    .return_pro_list {
        width:310px !important
    }
    .addreturn .form-s2 .select2-container--default .select2-selection--single .select2-selection__rendered {line-height: 28px!important; font-size: 13px!important;}
.addreturn .form-s2 .select2-container .select2-selection--single, ._PR_filter .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow{height: 28px!important;}
.addreturn .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow{height: 28px!important;}
.addreturn .value_input-return, .return_disc, .return_qty, .return_value{height: 28px; width:110px}
.addreturn .add_return_item, .addreturn .remove_return_item {font-size: 13px; padding: 3px 5px; width: 78px;}

</style>

{{-- Expense Modal --}}
<div class="modal fade" id="expenseModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content  top_border">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add <span>Expense</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-12 p-0" id="floating-label">
                    <div class="row mb-20">
                        <div class="col-md-6">
                            <label class="font12 mb-5">Expense Type</label>
                            <div class="form-s2">
                                <select class="form-control formselect expense_id" placeholder="Expense Type" style="width: 100%">
                                    <option selected value="0" disabled>Select Expense Type* </option>
                                    @foreach ($expense as $data)
                                        <option value="{{$data->id}}">{{$data->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-4 PT-10">
                            <div class="form-group">
                                <label class="control-label mb-10">Amount</label>
                                <input type="number" id="" class="form-control expense_amount" placeholder="">
                            </div>
                        </div>

                        <div class="col-2" style="padding-top:29px;"><button type="button"
                                class="btn btn-primary add_expense_btn">Add</button>
                        </div>

                    </div>


                    <div class="expense_table">
                        <table class="table table-hover dt-responsive nowrap" id="example" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Expense Type</th>
                                    <th>Amount</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>

                </div>

            </div>
            <div class="modal-footer border-0" style="background-color: #f6f6f6">
                <button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close">Save</button>
                <button type="button" class="btn btn-cancel" data-dismiss="modal" aria-label="Close">Cancel</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">
                    <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>
                            @foreach ($retailers as $data)
                                <option segment="{{$data->segment_id}}" value="{{$data->retailer_id}}">{{$data->retailer_name}}</option>
                            @endforeach
                        </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>

{{-- Confirmation Modal --}}
<div class="modal fade" id="Confirmation_Complete_Modal" 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 complete_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 order_complete_p">
                    <p >Are you sure you want to Complete these Orders?</p>
                    <p class="message_mark_complete"></p>
                </div>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-primary mark_complete">Yes</button>
                <button type="button" class="btn btn-cancel mark_complete_no_btn" data-dismiss="modal"
                    aria-label="Close">No</button>
                    <div class="col-12 PT-10 genrateDSR_btn" style="display:none">
                        <a href="" style="font-size: 14px; width:100%" class="btn btn-primary generate_dsr_button" rel="noopener noreferrer" target="_blank">Generate DSR</a>
                    </div>
            </div>
        </div>
    </div>
</div>


<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-20">
            <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">3--</span></div>
                    </div>
                    <div class="col">
                        <div class="gary-box" style="min-width: 200px;"><strong>Total Amount:</strong> <span class="execution_amount">---</span></div>
                    </div>
                </div>
            </div>
            <div class="col-12 PT-15">
                <div class="row">
                    <div class="col-8">
                        <div class="header PT-10 PB-10 mb-15">
                            <div class="row">
                                <div class="col-12 p-0">
                                    <h2 class="w-100">Delivery <span> Challan</span></h2>
                                </div>

                            </div>
                        </div>

                        <div class="orders_table_div">
                            {{-- <table class="table table-hover dt-responsive nowrap" id="example" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>SN</th>
                                        <th>Product Name</th>
                                        <th>Unit</th>
                                        <th>Issue QTY.</th>
                                        <th>Return QTY.</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>0245</td>
                                        <td>Dal Chana R5 (1x48) </td>
                                        <td>Strip</td>
                                        <td>45</td>
                                        <td>5</td>
                                    </tr>
                                </tbody>
                            </table> --}}
                        </div>

                        <button class="btn btn-primary return-btn open_stock_modal" data-toggle="modal" data-target="#ReturnModal">Add
                            Market Return</button>
                    </div>

                    <div class="col-4">
                        <div class="cash-report">
                            <div class="header">
                                <h2 class="cash-title w-100 mb-15">Cash <span>Report</span>
                                    <button class="btn btn-primary add-expense" data-toggle="modal"
                                        data-target="#expenseModal">Add Expense</button>
                                </h2>
                                <div class="report_value totalcash">
                                    <strong>Net Sales:</strong> <span class="total_cash_cashReport" name="0">--</span>
                                </div>

                                <div class="report_value">
                                    <strong>Cheque:</strong> <span class="cheque_amt_cashReport" name="0">--</span>
                                </div>

                                <div class="report_value">
                                    <strong>Credit:</strong> <span class="credit_amt_cashReport" name="0">--</span>
                                </div>

                                <div class="report_value">
                                    <strong>Expense:</strong> <span class="ttl_expense" name="0">0.00</span>
                                </div>

                                <div class="report_value">
                                    <strong>Total Cash:</strong> <span class="ttl_cash_after_deduction" name="0">0.00</span>
                                </div>

                                <div class="report_value" style="height:40px; line-height:22px;">
                                    <strong>AMT. Received:</strong>
                                    <input type="number" class="form-control value_input amount_recieved_cashReport" placeholder="0">
                                </div>

                                <div class="report_value totalcash">
                                    <strong>Balance AMT.:</strong> <span class="balance_amt_cashReport">--</span>
                                    {{-- <button class="btn btn-primary addsalesman">Add to Salesman</button> --}}
                                </div>

                                <div class="report_value totalcash">
                                    <div class="row">
                                        {{-- <div class="col-12">
                                            <button class="btn btn-primary addsalesman" style="font-size: 14px; width:100%; margin:0px; line-height:1.5">Add to Salesman</button>
                                        </div> --}}
                                        {{-- <div class="col-12 PT-10" >
                                            <a href="" style="font-size: 14px; width:100%" class="btn btn-primary generate_dsr_button" rel="noopener noreferrer" target="_blank">Generate DSR</a>
                                        </div> --}}
                                        <div class="col-12 PT-10" >
                                            <button class="btn btn-primary markCompleteOpenModal" data-toggle="modal" data-target="#Confirmation_Complete_Modal" style="font-size: 14px; width:100%">Mark Complete</button>
                                        </div>
                                    </div>

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

@endsection