@extends('layouts.master')
@section('data-sidebar')
<div id="product-cl-sec"> <a href="#" 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">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
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .add_product{ 
	font-size: 14px;
	border-radius: 0; letter-spacing:2px;
	width: 100%;
	border-color: #0038ba; background:#fff !;
    }
    .add_product:HOVER, .add_product:focus{
        color: #fff;
        background: linear-gradient(90deg, #1e54d3 0%, #0038ba 100%);
    }
    .freeUnitDropDown, .freeUnitDropDown:focus{padding-right:7px; border: solid 1px #ddd !important; height:20px; outline:none}
</style>
<div class="row mt-2 mb-3">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">Distributor <span> Purchase</span></h2>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <ol class="breadcrumb">
            <li><a href="#"><span>Distributor Purchase</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> Purchase</span></h2>
            </div>
            <div class="body pt-0">
                <div id="floating-label">
                    <div class="form-wrap p-0">
                        <div class="row">
                            <div class="col-6">
                                <div class="row">
                                    <div class="col-3 PT-10 pr-0">
                                        <div class="form-group mb-5">
                                            <label class="control-label mb-0">Received No.</label>
                                            <input type="text" id="received_no" class="form-control" name="received_no"
                                                placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-3 PT-10 pr-0">
                                        <div class="form-group mb-5">
                                            <label class="control-label mb-0">Receive Date</label>
                                            <input type="text" id="received_date" class="form-control datepicker"
                                                name="received_date" placeholder="" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-6 PT-10">
                                        <div class="form-group mb-5">
                                            <label class="control-label mb-0">Inv. No.</label>
                                            <input type="text" id="inv_no" class="form-control" name="inv_no"
                                                placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group mb-5">
                                            <label class="control-label mb-0">Remarks</label>
                                            <input type="text" id="remark" class="form-control" name="remark"
                                                placeholder="">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-6 pl-0">
                                <div class="row">
                                    <div class="col-4 PT-10 pr-0">
                                        <div class="form-group mb-5">
                                            <label class="control-label mb-0">P.O No.</label>
                                            <input type="text" id="p_o_no" class="form-control" name="p_o_no"
                                                placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-4 PT-10">
                                        <div class="form-group mb-5">
                                            <label class="control-label mb-0">D.C No.</label>
                                            <input type="text" id="d_c_no" class="form-control" name="d_c_no"
                                                placeholder="">
                                        </div>
                                    </div>

                                    <div class="col-4 pl-0" style="padding-top:10px ">
                                        <div class="form-group mb-5">
                                            <label class="control-label mb-0">Inv. Date</label>
                                            <input type="text" id="inv_date" class="form-control datepicker"
                                                name="inv_date" placeholder="" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-4 pr-0">
                                        <div class="form-group mb-5">
                                            <label class="control-label mb-0">P.O Date</label>
                                            <input type="text" id="p_o_date" class="form-control datepicker"
                                                name="p_o_date" placeholder="" autocomplete="off">
                                        </div>
                                    </div>


                                    <div class="col-4">
                                        <div class="form-group mb-5">
                                            <label class="control-label mb-0">D.C Date</label>
                                            <input type="text" id="d_c_date" class="form-control datepicker"
                                                name="d_c_date" placeholder="" autocomplete="off">
                                        </div>
                                    </div>
                                    {{-- <div class="col-4 PT-10 pr-0">

                                    </div> --}}
                                </div>
                            </div>
                            <div class="col-md-12" style="padding-top: 10px">
                                <button type="button" class="btn btn-line add_product">Add Product</button>
                            </div> 
                            <div class="col-md-12 PT-20">
                                <table class="table table-hover dt-responsive nowrap" id="dispatchPurchase"
                                    style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>SKU</th>
                                            <th style="width:300px !important">Item Name</th>
                                            <th>Ctn/Dozen</th>
                                            <th>Select Free Unit</th>
                                            <th>Free Qty</th>
                                            <th>Margin</th>
                                            <th>Net Amount</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></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></th>
                                            <th></th>
                                            <th>Distribution Discount</th>
                                            <th class="order_distributor_margin">00</th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th>GST</th>
                                            <th class="order_gst calculateFreightGst"><input type="number" id="gst" style="width:60px; border:solid 1px #ddd;">
                                            </th>
                                            <th></th>
                                        </tr> 
                                        <tr>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th>Freight Charges</th>
                                            <th class="order_fare calculateFreightGst"><input type="number" id="fare" style="width:60px; border:solid 1px #ddd;">
                                            </th>
                                            <th></th>
                                        </tr>
                                        <tr>
                                            <th></th>
                                            <th></th>
                                            <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: 10px; margin-top: 15px; text-align: center; margin-bottom: 1px">
                                        <button type="button" class="btn btn-primary mr-2 save_purchase">Save</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