@extends('pp::layouts.app')

@section('head')
<!-- DataTable -->
<link rel="stylesheet" href="{{ url('vendors/dataTable/datatables.min.css') }}" type="text/css">
<link rel="stylesheet" href="{{ url('vendors/datepicker/daterangepicker.css') }}" type="text/css">
<!-- Prism -->
<link rel="stylesheet" href="{{ url('vendors/prism/prism.css') }}" type="text/css">
<link rel="stylesheet" href="{{ Module::asset('hr:css/hr/employee.css') }}" type="text/css">
<link rel="stylesheet" href="{{ Module::asset('hr:js/autocomplete2/css/autocomplete.min.css') }}">
<link rel="stylesheet" href="{{ Module::asset('hr:css/hr/settings.css') }}" media="all" type="text/css" />



@endsection

@section('content')

<div class="page-header">
    <div>
        <h3></h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="#">Home</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">Pages</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Form Page</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card ">

            <div class="card-body">
                <h6 class="card-title">Production Plan</h6>
                <div id="orderplan">
                    <div>
                        <button onclick="showModelAddOrder()" class="btn btn-primary mr-5" name="addordermodel" id="btnAddOrderModel" type="button">Add Order</button>
                    </div>

                    <br>

                    <div class="row" id='rowCustomerPlanTable'>
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <!-- Required for Responsive -->
                                <table id="OrderPlanTable" class="table datatable">
                                    <thead>
                                        <tr>
                                            <th class="thOrderPlan">Id</th>
                                            <!-- <th class="thOrderPlan">Customer Order Plan Id</th>!-->
                                            <th class="thmanufactureID">Manufacturing Order number</th>
                                            <th class="thOrderId">customer order</th>
                                            <th class="thcreatedate">Create date</th>
                                            <th class="thdeliveryDate">Delivery date</th>
                                            <!--<th class="thquantity">Quantity</th>
                                            <th class="thFrom">From</th>
                                            <th class="thTo">To</th>!-->
                                            <th class="thDescription">Description</th>
                                            <th class="thAction">Edit</th>
                                            <th class="thAction">View</th>
                                            <th class="thAction">Delete</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div id="ProductOrder">
                    <div>
                        <button onclick="showModelAddProductToOrder()" class="btn btn-primary mr-5 mt-5" name="addproductmodel" id="btnAddProductOrderModel" type="button">Add Product To Order</button>
                    </div>

                    <br>

                    <div class="row" id='rowProductOrderTable'>
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <!-- Required for Responsive -->
                                <table id="ProductOrderTable" class="table table-striped  datatable">
                                    <thead>
                                        <tr>
                                            <th class="">product ID</th>
                                            <th class="">product Name</th>
                                            <th class="">Quantity</th>
                                            <th class="disable">Status</th>
                                            <th class="thAction">Edit</th>
                                            <th class="thAction">View</th>
                                            <th class="thAction">Delete</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>

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


<!--Add Order Modal -->

<div class="modal fade" id="addOrderModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add Order</h5>
            </div>
            <div class="modal-body">
                <form method="POST" id="OrderPlanForm" enctype="multipart/form-data">
                    {{ csrf_field() }}

                    <input type="hidden" id="hidOrderPlanID">
                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <i class="fa fa-pencil text-info" aria-hidden="true"></i>
                            <label for="selcPurchaseOrder">Customer Purchase Order #</label>
                            <input type="hidden" id="hidOrderID" name="hidOrderID">
                            <select class="form-control" id="selcPurchaseOrder" name="selcPurchaseOrder" AutoComplete="off"></select>
                            <div class="valid-feedback">
                                Looks good!
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <i class="fa fa-pencil text-info" aria-hidden="true"></i>
                            <label for="inpManuOrderNum">Manufacturing Order number</label>
                            <input type="text" class="form-control required-input" id="inpManuOrderNum" name="inpManuOrderNum" AutoComplete="off">
                        </div>
                    </div>
                    <!--<div class="form-row">
                        <div class="col-md-12 mb-3">
                            <i class="fa fa-pencil text-info" aria-hidden="true"></i>
                            <label for="selcProduct">Product id</label>
                            <input type="hidden" id="hidProduct" name="hidProduct">
                            <select class="form-control" id="selcProduct" name="selcProduct" onchange="productQuantity()" AutoComplete="off"></select>
                            <div class="valid-feedback">
                                Looks good!
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <i class="fa fa-pencil text-info" aria-hidden="true"></i>
                            <label for="inpQuantity">Quantity</label>
                            <input type="hidden" id="hidQuantity" name="hidQuantity">
                            <input class="form-control" id="inpQuantity" name="inpQuantity" onchange="" AutoComplete="off">
                            <div class="valid-feedback">
                                Looks good!
                            </div>
                        </div>
                    </div>!-->

                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <i class="fa fa-calendar text-info" aria-hidden="true"></i>
                            <label for="dteDate">Create Date</label>
                            <input type="text" class="form-control" id="dteDate" name="dteDate" placeholder="" required="" AutoComplete="off">
                            <div class="valid-feedback">
                                Looks good!
                            </div>

                        </div>
                    </div>

                    <div class="form-row" hidden>
                        <div class="col-md-12 mb-3">
                            <i class="fa fa-calendar text-info" aria-hidden="true"></i>
                            <label for="dteDate">From</label>
                            <input type="text" class="form-control" id="dteFromDate" name="dteFromDate" placeholder="" required="" AutoComplete="off">
                            <div class="valid-feedback">
                                Looks good!
                            </div>

                        </div>
                    </div>

                    <div class="form-row" hidden>
                        <div class="col-md-12 mb-3">
                            <i class="fa fa-calendar text-info" aria-hidden="true"></i>
                            <label for="dteDate">To</label>
                            <input type="text" class="form-control" id="dteToDate" name="dteToDate" placeholder="" required="" AutoComplete="off">
                            <div class="valid-feedback">
                                Looks good!
                            </div>

                        </div>
                    </div>

                    <!--<div class="form-row">
                        <div class="col-md-12 mb-3">
                            <i class="fa fa-calendar text-info" aria-hidden="true"></i>
                            <label for="selcPlanYear">Year</label>
                            <select class="form-control" id="selcPlanYear" name="selcPlanYear">
                                <option value="2021">2021</option>
                                <option value="2022">2022</option>
                                <option value="2023">2023</option>
                                <option value="2024">2024</option>
                                <option value="2025">2025</option>
                            </select>
                            <div class="valid-feedback">
                                Looks good!
                            </div>

                        </div>
                    </div>

                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <i class="fa fa-calendar text-info" aria-hidden="true"></i>
                            <label for="selcPlanMonth">Month</label>
                            <select class="form-control" id="selcPlanMonth" name="selcPlanMonth">
                                <option value="January">January</option>
                                <option value="February">February</option>
                                <option value="March">March</option>
                                <option value="April">April</option>
                                <option value="May">May</option>
                                <option value="June">June</option>
                                <option value="July">July</option>
                                <option value="August">August</option>
                                <option value="September">September</option>
                                <option value="October">October</option>
                                <option value="November">November</option>
                                <option value="December">December</option>
                            </select>
                            <div class="valid-feedback">
                                Looks good!
                            </div>

                        </div>
                    </div>!-->

                    <div class="form-row">
                        <div class="col-md-12">
                            <i class="fa fa-pencil text-info" aria-hidden="true"></i>
                            <label for="txtDescription">Description</label>
                            <textarea class="form-control" id="txtDescription" name="txtDescription"></textarea>
                            <div class="valid-feedback">
                                Looks good!
                            </div>
                        </div>
                    </div>


                </form>
            </div>
            <div class="modal-footer">

                <button type="button" name="saveaddorder" id="btnSaveAddOrder" class="btn btn-primary">Save</button>
                <button type="button" name="canceladdorder" id="btnCancelAddOrder" class="btn btn-warning" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

<!--Add Product to Order Modal -->
<div class="modal fade" id="addProductOrderModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel1">Add product To Order</h5>
            </div>
            <div class="modal-body">
                <form method="POST" id="OrderPlanDataForm" enctype="multipart/form-data">
                    {{ csrf_field() }}


                    <input type="hidden" id="txtHidCustomerOrderPlanDataID" name="hidCustomerOrderPlanDataID">
                    <input type="hidden" class="form-control" id="txtOrderId" name="txtOrderId" placeholder="" required="">



                    <div class="form-row">
                        <div class="col-md-12 mb-0">
                            <i class="fa fa-pencil text-info" aria-hidden="true"></i>
                            <label for="txtManufacturingOrderNumber">Manufacturing Order Number</label>
                        </div>
                        <div class="col-md-8 mb-3">

                            <input type="text" class="form-control" id="txtManufacturingOrderNo" name="manufacturingOrderNo" placeholder="" required="" AutoComplete="off" readonly>
                            <div class="valid-feedback">
                                Looks good!
                            </div>

                        </div>
                        <div class="col-md-4 mb-3">
                            <input type="text" class="form-control" id="txtManufacturingOrderConcatNo" name="manufacturingOrderConcatNo" placeholder="" required="" AutoComplete="off">
                            <div class="valid-feedback">
                                Looks good!
                            </div>

                        </div>
                    </div>

                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <i class="fa fa-calendar text-info" aria-hidden="true"></i>
                            <label for="txtProduct">Customer's Product Code</label>
                            <select class="form-control" id="cmbProductCode" name="productCode"></select>
                            <div class="valid-feedback">
                                Looks good!
                            </div>

                        </div>
                    </div>



                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <i class="fa fa-archive text-info" aria-hidden="true"></i>
                            <label for="txtProductID">Our Product ID</label>
                            <input type="text" class="form-control" id="txtProductID" name="txtProductID" placeholder="Product ID" required="" AutoComplete="off" readonly>
                            <!--<div class="required-feedback">
                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                <label class="text-danger">Please Enter Product ID</label>
                            </div>!-->
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <i class="fa fa-pencil text-info" aria-hidden="true"></i>
                            <label for="txtProductName">Our Product Name</label>
                            <input class="form-control auto-complete" autocomplete="off" id="txtProductName" name="txtProductName" onchange="getProductName()" placeholder="Product Name" required="">
                            <!--<div class="required-feedback">
                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                <label class="text-danger">Please Enter Product Name</label>
                            </div>!-->
                        </div>
                    </div>

                    <!--<div class="form-row">
                        <div class="col-md-12 mb-3">
                            <i class="fa fa-calendar text-info" aria-hidden="true"></i>
                            <label for="dteStartDate">Start Date</label>
                            <input type="text" class="form-control" id="dteStartDate" name="dteStartDate" placeholder="" required="" AutoComplete="off">
                            <div class="required-feedback">
                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                <label class="text-danger">Please Enter Start Date</label>
                            </div>

                        </div>
                    </div>!-->

                    <!--<div class="form-row">
                        <div class="col-md-12 mb-3">
                            <i class="fa fa-calendar text-info" aria-hidden="true"></i>
                            <label for="dteEndDate">End Date</label>
                            <input type="text" class="form-control" id="dteEndDate" name="dteEndDate" placeholder="" required="" AutoComplete="off">
                            <div class="required-feedback">
                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                <label class="text-danger">Please Enter End Date</label>
                            </div>

                        </div>
                    </div>!-->

                    <div class="form-row">
                        <div class="col-md-12 mb-3">
                            <i class="fa fa-pencil text-info" aria-hidden="true"></i>
                            <label for="txtQuantity">Quantity</label>
                            <input type="text" class="form-control" id="txtQuantity" name="txtQuantity" placeholder="Quantity" AutoComplete="off">
                            <!--<div class="required-feedback">
                                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
                                <label class="text-danger">Please Enter QUantity</label>
                            </div>!-->
                        </div>
                    </div>


                </form>
            </div>
            <div class="modal-footer">
                <button type="button" name="saveaddproductorder" id="btnSaveAddProductOrder" class="btn btn-primary">Save</button>
                <button type="button" name="canceladdproductorder" id="btnCancelAddProductOrder" class="btn btn-warning" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
@endsection

<!-- App scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@section('script')
<!-- DataTable -->
<script src="{{ url('vendors/dataTable/datatables.min.js') }}"></script>
<script src="{{ url('assets/js/examples/datatable.js') }}"></script>
<script src="{{ Module::asset('hr:js/autocomplete2/js/autocomplete.min.js') }}?random=67d5fd374bf44"></script>
<!-- RequiredInput -->
<script src="{{ Module::asset('pp:js/rquired_input.min.js') }}?random=67d5fd374bf47"></script>
<!-- Javascript -->
<script src="{{ url('vendors/datepicker/daterangepicker.js') }}"></script>
<script src="{{ Module::asset('pp:js/customerPlan.js') }}?random=67d5fd374bf48"></script>

<!-- Prism -->
<script src="{{ url('vendors/prism/prism.js') }}"></script>
<!-- Sweet alert -->
<script src="{{ url('assets/js/examples/sweet-alert.js') }}"></script>
@endsection