@extends('sales.template.master')
@section('content')
    <div class="page-content">
        <div class="container-fluid">
            <div class="box-typical box-typical-padding">
                <h3 class="page-header">{{pageTitle()}}</h3>
                <div class="row">
                    <div class="col-md-8">
                        <div class="row">
                            <div class="form-group col-md-4">
                                <label>Name/Barcode</label>
                                <input type="text" name="prd_stk" id="prd_stk" class="form-control" placeholder="" />
                            </div>
                            <div class="form-group col-md-4">
                                <label>Quantity <span id="prd_stk_unit"></span></label>
                                <input type="text" name="prd_stk_qty" id="prd_stk_qty" class="form-control isnumber"
                                    placeholder="" />
                            </div>
                            <div class="form-group col-md-2">
                                <button type="button" id="btn-add-prd-stk-atl" class="btn btn-block btn-primary mt-20"><i
                                        class="fa fa-plus"></i> </button>
                            </div>
                            <div class="form-group col-md-1">
                                <a type="button" class="btn btn-success mt-20" data-toggle="modal"
                                    data-target="#show-stock-modal" label="Show Stock"><i class="fa fa-th"></i></a>
                            </div>
                            <div class="col-md-12">
                                <table id="" class="table table-striped table-bordered dt-responsive nowrap sr"
                                    cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                            <th>Sno</th>
                                            <th>Name-Barcode</th>
                                            <th>Purchase Price</th>
                                            <th>Quantity</th>
                                            <th>Unit Price</th>
                                            <th>Total Price</th>
                                            <th>Remove</th>
                                        </tr>
                                    </thead>
                                    <tbody id="prd_stk_tbody">

                                    </tbody>
                                    <tfoot>
                                        <th>&nbsp;</th>
                                        <th>&nbsp;</th>
                                        <th id="purchase_total"></th>
                                        <th>&nbsp;</th>
                                        <th>&nbsp;</th>
                                        <th>&nbsp;</th>
                                        <th>&nbsp;</th>
                                    </tfoot>
                                </table>
                            </div>
                            <div class="col-md-12">
                                <label for="">Notes</label>
                                <textarea name="notes" id="notes" class="form-control"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="row">
                            <div class="col-md-6 mb-2 align-middle">
                                <h5 class="text-center pt-2"> CUSTOMER # </h5>
                            </div>
                            <div class="col-md-6">
                                <input type="text" id="customer_contact" class="form-control isnumber text-center"
                                    placeholder="Phone / Contact #">
                            </div>
                            <div class="col-md-6 mb-3">
                                <h5 class="text-center pt-2"> CUSTOMER NAME </h5>
                            </div>
                            <div class="col-md-6">
                                <input type="text" id="customer_name" class="form-control text-center"
                                    placeholder="Name">
                            </div>
                            <div class="col-md-6 mb-2">
                                <h5 class="text-center pt-2"> CUSTOMER EMAIL </h5>
                            </div>
                            <div class="col-md-6">
                                <input type="text" id="customer_email" class="form-control text-center"
                                    placeholder="Email">
                            </div>
                            <div class="col-md-6 d-none">
                                <h5 class="text-center text-pink"> ITEMS-TOTAL </h5>
                            </div>
                            <div class="col-md-6 d-none">
                                <h5 class="text-center text-pink" id="item-subtotal"> 0.00 </h5>
                            </div>
                            <div class="col-md-6 d-none">
                                <h5 class="text-center text-purple"> SERVICE-TOTAL </h5>
                            </div>
                            <div class="col-md-6 d-none">
                                <h5 class="text-center text-purple" id="service-subtotal"> 0.00 </h5>
                            </div>
                            <div class="col-md-6 mb-2">
                                <h5 class="text-center pt-2"> SUB-TOTAL </h5>
                            </div>
                            <div class="col-md-6">
                                <h5 class="text-center pt-2" id="subtotal"> 0.00 </h5>
                            </div>
                            <div class="col-md-6 mb-2">
                                <h5 class="text-center pt-2"> DISCOUNT <a href="#" id="dpercent" title="on"
                                        class="text-danger"> % </a></h5>
                            </div>
                            <div class="col-md-6">
                                <input type="text" id="discount" class="form-control isnumber text-center"
                                    placeholder="discount amount">
                            </div>
                            <div class="col-md-6 mb-2">
                                <h5 class="text-center pt-2"> GRAND-TOTAL </h5>
                            </div>
                            <div class="col-md-6">
                                <h5 class="text-center pt-2" id="grandtotal"> 0.00 </h5>
                            </div>
                            <div class="col-md-6 d-none">
                                <h5 class="text-center"> PAYMENT </h5>
                            </div>
                            <div class="col-md-6 d-none">
                                <input type="text" id="payments" class="form-control isnumber text-center"
                                    placeholder="payment amount">
                            </div>
                            <div class="col-md-6 d-none">
                                <h5 class="text-center"> CHANGE </h5>
                            </div>
                            <div class="col-md-6 d-none">
                                <h5 class="text-center" id="change"> 0.00 </h5>
                            </div>
                            <div class="col-md-12">
                                <button type="button" id="btn-process-items" class="btn btn-block btn-danger m-t-30"><i
                                        class="fa fa-check"></i> Process Checkout </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--.container-fluid-->

        <div id="show-stock-modal" class="modal fade" role="dialog">
            <div class="modal-dialog modal-lg">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="modal-close" data-dismiss="modal"><i class="font-icon-close-2"></i></button>
                        <h4 class="modal-title">Stock Items</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="">
                                    <table id="salesStkItemsTable"
                                        class="table table-striped table-sm table-bordered dt-responsive nowrap"
                                        style="width:100%;">
                                        <thead>
                                            <tr>
                                                <th>Sno</th>
                                                <th>Category</th>
                                                <th>Barcode</th>
                                                <th>Name</th>
                                                <th>Purchase Price</th>
                                                <th>Selling Price</th>
                                                <th>Quantity</th>
                                                <th>Notes</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div><!--.page-content-->
@endsection
@section('customjs')
    <script src="{{ asset('custom_js/quotations.js') }}"></script>
@endsection