@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">

@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">Order Form</h6>

                    <form method="POST" id="orderForm" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <div class="row">
                            <div class="col-md-12">

                                <div class="form-row">
                                    <div class="col-md-6 mb-3">
                                        <i class="fa fa-pencil text-info" aria-hidden="true"></i>
                                        <label for="txtName">1. Customer Name</label>
                                        <input type="hidden" id="hidOrderID" name="hidOrderID" value="">
                                        <input type="text" class="form-control" id="txtName" name="name"
                                            placeholder="Customer Name" required="" AutoComplete="off">
                                        <div class="valid-feedback">
                                            Looks good!
                                        </div>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <i class="fa fa-pencil text-info" aria-hidden="true"></i>
                                        <label for="txtPurchase">2. Customer Purchase Order #</label>
                                        <input type="text" class="form-control" id="txtPurchase" name="txtPurchase"
                                            placeholder="RBMX-20110601 (Agrico-3210)" 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-pencil text-info" aria-hidden="true"></i>
                                        <label for="txtProductName">3. Product Name</label>
                                        <input type="text" class="form-control" id="txtProductName" name="txtProductName"
                                            placeholder="Product Name" AutoComplete="off">
                                        <div class="valid-feedback">
                                            Looks good!
                                        </div>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="col-md-12">
                                        <div class="form-row">
                                            <div class="col-md-12 mb-3">
                                                <i class="fa fa-address-book-o text-info" aria-hidden="true"></i>
                                                <label for="txtBillAddress">4. Customer Bill To Address</label>
                                                <textarea class="form-control" id="txtBillAddress"
                                                    name="txtBillAddress"></textarea>
                                                <div class="valid-feedback">
                                                    Looks good!
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="col-md-12">
                                        <div class="form-row">
                                            <div class="col-md-12 mb-3">
                                                <i class="fa fa-address-book-o text-info" aria-hidden="true"></i>
                                                <label for="txtDeliveryAddress">5. Customer Delivery Address &
                                                    Contact</label>
                                                <textarea class="form-control" id="txtDeliveryAddress"
                                                    name="txtDeliveryAddress"></textarea>
                                                <div class="valid-feedback">
                                                    Looks good!
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="col-md-12">
                                        <div class="form-row">
                                            <div class="col-md-12 mb-3">
                                                <i class="fa fa-address-book-o text-info" aria-hidden="true"></i>
                                                <label for="txtCosigneeDetails">6. Consignee Name, Address, Contact </label>
                                                <textarea class="form-control" id="txtCosigneeDetails"
                                                    name="txtCosigneeDetails"></textarea>
                                                <div class="valid-feedback">
                                                    Looks good!
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="col-md-12">
                                        <div class="form-row">
                                            <div class="col-md-12 mb-3">
                                                <i class="fa fa-address-book-o text-info" aria-hidden="true"></i>
                                                <label for="txtPartyDetails">7. Notify Party Name, Address, Contact (If in
                                                    USA leave blank)</label>
                                                <textarea class="form-control" id="txtPartyDetails"
                                                    name="txtPartyDetails"></textarea>
                                                <div class="valid-feedback">
                                                    Looks good!
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="col-md-6 mb-3">
                                        <i class="fa fa-calendar text-info" aria-hidden="true"></i>
                                        <label for="Date">8. Date</label>
                                        <input type="text" name="dteDate" class="form-control" id="dteDate"
                                            placeholder="YYYY-MM-DD">
                                        <div class="valid-feedback">
                                            Looks good!
                                        </div>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <i class="fa fa-calendar text-info" aria-hidden="true"></i>
                                        <label for="DeliveryDate">9. Requested Delivery Date</label>
                                        <input type="text" name="dteDeliveryDate" class="form-control" id="dteDeliveryDate"
                                            placeholder="YYYY-MM-DD">
                                        <div class="valid-feedback">
                                            Looks good!
                                        </div>
                                    </div>
                                </div>


                                <div class="form-row">
                                    <div class="col-md-4 mb-3">
                                        <i class="fa fa-pencil text-info" aria-hidden="true"></i>
                                        <label for="txtQtyPieces">10. Quantity of Pieces</label>
                                        <input type="text" class="form-control" id="txtQtyPieces" name="txtQtyPieces"
                                            placeholder="48,300" required="">
                                        <div class="valid-feedback">
                                            Looks good!
                                        </div>
                                    </div>

                                    <div class="col-md-4 mb-3">
                                        <i class="fa fa-pencil text-info" aria-hidden="true"></i>
                                        <label for="txtProductCode">11. Product Code</label>
                                        <input type="text" class="form-control" id="txtProductCode" name="txtProductCode"
                                            placeholder="GB300-030-F" required="" AutoComplete="off">
                                        <div class="valid-feedback">
                                            Looks good!
                                        </div>
                                    </div>


                                    <div class="col-md-4 mb-3">
                                        <i class="fa fa-pencil text-info" aria-hidden="true"></i>
                                        <label for="txtDimensions">12. Product Dimensions</label>
                                        <input type="text" class="form-control" id="txtDimensions" name="txtDimensions"
                                            placeholder="50X20X12" required="" AutoComplete="off">
                                        <div class="valid-feedback">
                                            Looks good!
                                        </div>
                                    </div>

                                </div>

                                <div class="form-row">
                                    <div class="col-md-4 mb-3">
                                        <i class="fa fa-angle-down text-info" aria-hidden="true"></i>
                                        <label for="selcShippingTerms">13. Shipping Terms</label>
                                        <select class="form-control" id="selcShippingTerms"
                                            name="selcShippingTerms"></select>
                                        <div class="valid-feedback">
                                            Looks good!
                                        </div>
                                    </div>

                                    <div class="col-md-4 mb-3">
                                        <i class="fa fa-angle-down text-info" aria-hidden="true"></i>
                                        <label for="selcProductMix">14. Product Mix</label>
                                        <select class="form-control" id="selcProductMix" name="selcProductMix"></select>
                                        <div class="valid-feedback">
                                            Looks good!
                                        </div>
                                    </div>

                                    <div class="col-md-4 mb-3">
                                        <i class="fa fa-angle-down text-info" aria-hidden="true"></i>
                                        <label for="selcWashedLevel">15. Washed Level</label>
                                        <select class="form-control" id="selcWashedLevel" name="selcWashedLevel">
                                        </select>
                                        <div class="valid-feedback">
                                            Looks good!
                                        </div>
                                    </div>
                                </div>



                                <div class="form-row">
                                    <div class="col-md-12 mb-3">
                                        <div class="form-row">
                                            <div class="col-md-4 mb-3">
                                                <i class="fa fa-dot-circle-o text-info" aria-hidden="true"></i>
                                                <label for="txtName">16. Is this product a naked plank?</label>
                                            </div>
                                            <div class="col-md-2 mb-3">
                                                <fieldset id="group1" name="properties[group1]">
                                                    <div class="form-check form-check-inline">
                                                        <input id="group11" type="radio" value="Yes" name="group1">
                                                        <label class="form-check-label" for="inlineRadio1">Yes</label>
                                                    </div>
                                                    <div class="form-check form-check-inline">
                                                        <input id="group12" type="radio" value="No" name="group1">
                                                        <label class="form-check-label" for="inlineRadio2">No</label>
                                                    </div>
                                                </fieldset>
                                            </div>
                                            <div class="col-md-4 mb-3">
                                                <label class="text-danger"> (If no please continue to answer #17 -
                                                    21)</label>
                                            </div>
                                            <div class="valid-feedback">
                                                Looks good!
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <fieldset>
                                    <div class="form-row">
                                        <div class="col-md-12 mb-3">
                                            <div class="form-row">
                                                <div class="col-md-3 mb-3">
                                                    <i class="fa fa-dot-circle-o text-info" aria-hidden="true"></i>
                                                    <label class="mr-4" for="txtName">17. Slab Upside Down</label>
                                                </div>
                                                <div class="col-md-4 mb-3">
                                                    <fieldset id="group2" name="properties[group2]">
                                                        <div class="form-check form-check-inline">
                                                            <input id="group21" type="radio" value="Yes" name="group2">
                                                            <label class="form-check-label" for="inlineRadio1">Yes</label>
                                                        </div>
                                                        <div class="form-check form-check-inline">
                                                            <input id="group22" type="radio" value="No" name="group2">
                                                            <label class="form-check-label" for="inlineRadio2">No</label>
                                                        </div>
                                                    </fieldset>
                                                </div>
                                                <div class="valid-feedback">
                                                    Looks good!
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        <div class="col-md-12 mb-3">
                                            <div class="form-row">
                                                <div class="col-md-3 mb-3">
                                                    <i class="fa fa-dot-circle-o text-info" aria-hidden="true"></i>
                                                    <label class="mr-5" for="txtName">18. Drain Holes</label>
                                                </div>
                                                <div class="col-md-4 mb-3">
                                                    <fieldset id="group3" name="properties[group3]">
                                                        <div class="form-check form-check-inline">
                                                            <input id="group31" type="radio" value="Yes" name="group3">
                                                            <label class="form-check-label" for="inlineRadio1">Yes</label>
                                                        </div>
                                                        <div class="form-check form-check-inline">
                                                            <input id="group32" type="radio" value="No" name="group3">
                                                            <label class="form-check-label" for="inlineRadio2">No</label>
                                                        </div>
                                                    </fieldset>
                                                </div>
                                                <div class="valid-feedback">
                                                    Looks good!
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        <div class="col-md-12 mb-3">
                                            <div class="form-row">
                                                <div class="col-md-3 mb-3">
                                                    <i class="fa fa-dot-circle-o text-info" aria-hidden="true"></i>
                                                    <label class="mr-5" for="txtName">19. Dripper Holes</label>
                                                </div>
                                                <div class="col-md-4 mb-3">
                                                    <fieldset id="group4" name="properties[group4]">
                                                        <div class="form-check form-check-inline">
                                                            <input id="group41" type="radio" value="Yes" name="group4">
                                                            <label class="form-check-label" for="inlineRadio1">Yes</label>
                                                        </div>
                                                        <div class="form-check form-check-inline">
                                                            <input id="group42" type="radio" value="No" name="group4">
                                                            <label class="form-check-label" for="inlineRadio2">No</label>
                                                        </div>
                                                    </fieldset>
                                                </div>
                                                <div class="valid-feedback">
                                                    Looks good!
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="form-row">
                                        <div class="col-lg-12 mb-3">
                                            <div class="form-row">
                                                <div class="col-md-12 mb-3">
                                                    <i class="fa fa-angle-down text-info" aria-hidden="true"></i>
                                                    <label for="selcPlantHole">20. Plant Hole Size</label>
                                                    <select class="form-control" id="selcPlantHole" name="selcPlantHole">
                                                    </select>
                                                    <div class="valid-feedback">
                                                        Looks good!
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="form-row">
                                        <div class="col-lg-12 mb-3">
                                            <div class="form-row">
                                                <div class="col-md-3 mb-3">
                                                    <i class="fa fa-check-square-o text-info" aria-hidden="true"></i>
                                                    <label for="txtName">21. If 10X15</label>
                                                </div>
                                                <div class="col-md-4 mb-3">
                                                    <li id="checkboxlist" class="list-group-item card">
                                                        <div class="checkbox checkbox-inline">
                                                            <input class="" id="stand" type="checkbox" value="standing"
                                                                name="standing">
                                                            <label class="form-check-label" for=""> Standing</label>
                                                            <input class="" id="lying" type="checkbox" value="lying"
                                                                name="lying">
                                                            <label class="form-check-label" for=""> Lying</label>
                                                        </div>
                                                    </li>
                                                </div>
                                                <div class="valid-feedback">
                                                    Looks good!
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>


                                <div class="form-row">
                                    <div class="col-md-12 mb-3">
                                        <i class="fa fa-user-o text-info" aria-hidden="true"></i>
                                        <label for="txtFillName">22. Name of person filling out form</label>
                                        <input type="text" class="form-control" id="txtFillName" name="txtFillName"
                                            placeholder="" required="" AutoComplete="off">
                                        <div class="valid-feedback">
                                            Looks good!
                                        </div>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="col-md-12 mb-3">
                                        <button type="button" class="btn btn-warning" id="btnResetOrder">Reset</button>
                                        <button type="button" class="btn btn-primary" id="btnSaveOrder">Save</button>
                                    </div>
                                </div>


                            </div>
                        </div>

                    </form>

                    <br>

                    <div class="row" id='rowAtachmentTable'>
                        <div class="col-md-12">
                            <div class="table-responsive">
                                <!-- Required for Responsive -->
                                <table id="myTable" class="table table-striped  datatable">
                                    <thead>
                                        <tr>
                                            <th class="thTitle">Title</th>
                                            <th class="thView">View</th>
                                            <th class="thDownload">Down</th>
                                            <th class="thDelete" id="thDelete">Delete</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </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>
    <!-- Javascript -->
    <script src="{{ url('vendors/datepicker/daterangepicker.js') }}"></script>
    <script src="{{ Module::asset('pp:js/order.js') }}"></script>

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