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

@section('head')
<!-- DataTable -->
<!-- Prism -->
<link rel="stylesheet" href="{{ url('vendors/prism/prism.css') }}" type="text/css">
<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">

<link rel="stylesheet" href="{{ Module::asset('hr:js/autocomplete2/css/autocomplete.min.css') }}">

<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
    .pointer {
        cursor: pointer;
    }
</style>
@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 machine wise</h6>
                <div class="row">
                    <!--Left side -->
                    <div class="col-md-5">
                        <div class="row">
                            <div class="col-md-12">
                                <i class="fa fa-user-o text-info" aria-hidden="true"></i>
                                <label>Date Range</label>
                                <br>
                                <div id="dashboard-daterangepicker" class="btn btn-outline-light">
                                    <span>Jan, 05, 2021</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-7">
                        <div class="row">
                            <div class="col-md-6">
                                <i class="fa fa-user-o text-info" aria-hidden="true"></i>
                                <label>Site</label>
                                <select class="form-control" id="cmbSite" name="site" onchange=""></select>
                            </div>
                            <div class="col-md-6">
                                <i class="fa fa-user-o text-info" aria-hidden="true"></i>
                                <label>Machine</label>
                                <select class="form-control" id="cmbMachine" name="machine" onchange=""></select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-10">

                            </div>
                            <div class="col-md-2 mt-2">
                                <button id="btnAssign" style="width: 100%;" class="btn btn-primary">Assign</button>
                            </div>
                        </div>
                    </div>
                </div>


                <hr>

                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label id="lblManufacturingOrder">Manufacturing Order No :</label>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label id="lblCustomerOrder">Customer Order No :</label>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label id="lblDeliveryDate">Delivery Date :</label>
                    </div>
                </div>

                <hr>

                <div class="row">
                    <div class="col-md-12">
                        <div class="table-responsive">
                            <!-- Required for Responsive -->
                            <table id="table2" class="table datatable">
                                <thead>
                                    <tr>
                                        <th class="thdate">Date</th>
                                        <th class="thname">Product ID</th>
                                        <th class="thname">Product Name</th>
                                        <th class="thname">Planed Day Qty</th>
                                        <th class="thname">Pland Night Qty</th>
                                        <th class="thqty">Day Qty</th>
                                        <th class="thqty">Night Qty</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-11 mt-3">

                    </div>
                    <div class="col-md-1 mt-3">
                        <button id="btnSave" class="btn btn-primary">Save</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>





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

                    <div class="row">
                        <div class="col-md-12">
                            <ul class="nav nav-pills mb-3" role="tablist" id="navMenuItem">
                                <li class="nav-item">
                                    <a class="nav-link active" id="pills-order-tab" data-toggle="pill" href="#tbOrder" role="tab" aria-controls="pills-order" aria-selected="true">Order</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="pills-product-tab" data-toggle="pill" href="#tbProduct" role="tab" aria-controls="pills-product" aria-selected="false">Product</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="tbOrder" role="tabpanel" aria-labelledby="pills-order-tab">
                                    <hr>
                                    <div class="row">
                                        <div class="table-responsive">
                                            <!-- Required for Responsive -->
                                            <table id="OrderPlanTable" class="table datatable">
                                                <thead>
                                                    <tr>
                                                        <th class="thOrderPlan">Customer Order Plan Id</th>
                                                        <th class="thmanufactureID">Manufacturing Order number</th>
                                                        <th class="thOrderId">customer order</th>
                                                        <th class="thtrancedate">Trance date</th>
                                                        <th class="thdeliveryDate">Delivery date</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="tbProduct" role="tabpanel" aria-labelledby="pills-product-tab">
                                    <hr>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="table-responsive">
                                                <!-- Required for Responsive -->
                                                <table id="ProductOrderTable" class="table  datatable">
                                                    <thead>
                                                        <tr>
                                                            <th>ID</th>
                                                            <th>Start Date</th>
                                                            <th>End Date</th>
                                                            <th>product ID</th>
                                                            <th>product Name</th>
                                                            <th>Quantity</th>
                                                            <th>Planed</th>
                                                            <th>Day & Night</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>

                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" name="saveaddproductorder" id="btnAssignOrderProduct" class="btn btn-primary">Assign</button>
                <button type="button" name="canceladdproductorder" id="btnCancelAddProductOrder" class="btn btn-warning" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>







<!--Planed Quantity Data Modal -->
<div class="modal fade" id="planedModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <h4 id="planedModalTitle">Planed</h4>
                <div class="table-responsive">
                    <!-- Required for Responsive -->
                    <table id="tblPlanedModalData" class="table  datatable">
                        <thead>
                            <tr>
                                <th>MANUFACTURING ORDER NO</th>
                                <th>CUSTOMER ORDER NO</th>
                                <th>PRODUCT ID</th>
                                <th>PRODUCT NAME</th>
                                <th>DAY QUANTITY</th>
                                <th>NIGHT QUANTITY</th>
                                <th>VIEW</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" name="cancelPlaned" id="btnCancelAddProductOrder" class="btn btn-warning" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
@endsection

<!-- Javascript -->
<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>
<!-- Prism -->
<script src="{{ url('vendors/prism/prism.js') }}"></script>
<script src="{{ Module::asset('hr:js/autocomplete2/js/autocomplete.min.js') }}?random=68902b0cb68f7"></script>
<script src="{{ url('vendors/datepicker/daterangepicker.js') }}"></script>

<script src="{{ Module::asset('pp:/js/production_plan_machine_wise.js') }}?random=68902b0cb68fb"></script>

@endsection