@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')
<style>
    .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
    }
    .dataTable td, .dataTable th, .modal-body table th, .modal-body table td {
         padding: .75rem !important;
        vertical-align: top;
        border-top: 1px solid #dddddd;
        font-size: 12px;
        font-family: 'Source Sans Pro', sans-serif;
    }

</style>
<div class="row mt-2 mb-3">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">Order <span> Management</span></h2>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a href="#"><span>Order Management</span></a></li>
            <li><span>Create</span></li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-md-12 mb-30">
        <div class="card mb-30">
            <div class="header">
                <h2>Create <span> Order</span></h2>
            </div>
            <div class="body PT-15">
                <div id="floating-label">
                    <div class="form-wrap p-0">
                        <div class="row">
                            <div class="col-md-3 pr-0">
                                <label class="font11 mb-5">Select Date*</label>
                                <input type="text" id="" class="form-control datepicker order_date" placeholder="{{date('Y-m-d')}}">
                            </div> 
                            <div class="col-md-4 pr-0" style="display:none">
                                <label class="font11 mb-5">Select Retailer*</label>
                                <div class="form-s2">
                                    <select class="form-control formselect retailer_id" placeholder="Select Distributor">
                                        <option disabled selected value="0">Select Distributor</option> 
                                        @foreach ($distributors as $data)
                                            <option value="{{$data->id}}" rd="{{$data->discount}}" selected>{{$data->distributor_name}}</option>                                            
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2" style="padding-top: 27px">
                                <button type="button" class="btn btn-primary w-100 add_product">Add Product</button>
                            </div>
                            <div class="col-md-12">
                                <hr>
                            </div>
                            <div class="col-md-12 PT-20">
                                <table class="table table-hover dt-responsive nowrap" id="example" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>SKU</th>
                                            <th>Item Name</th>
                                            <th>Quantity</th>
                                            <th>Scheme</th>
                                            <th>Total Bill</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tfoot
                                        style=" background:linear-gradient(0deg, #f6f6f6 0%, #f6f6f6 100%); font-size: 14px">
                                        <tr>
                                            <th>Total items:</th>
                                            <th class="order_total_items">0</th>
                                            <th></th>
                                            <th>Subtotal PKR.</th>
                                            <th class="order_sub_total">00</th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th>Discount%.</th>
                                            <th><input type="number" placeholder="0.0" class="itemQTY order_discount"></th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th>Total PKR.</th>
                                            <th class="order_grand_total">00</th>
                                            <th></th>
                                        </tr>
                                    </tfoot>
                                    <tbody class="order_items">
                                    </tbody>
                                </table>
                                <div class="col-md-12 p-0">
                                    <div
                                        style="background-color: #f6f6f6; padding: 15px; margin-top: 15px; margin-bottom: 0px; text-align: center; margin-bottom: 1px">
                                        <button type="button" class="btn btn-primary mr-2 save_secondary_order">Order</button>
                                        <a href="/" id="pl-close" type="button" class="btn btn-cancel mr-2">Cancel</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection