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

@section('head')
<!-- DataTable -->
<link rel="stylesheet" href="{{ url('vendors/dataTable/datatables.min.css') }}" type="text/css">
<!-- Prism -->
<link rel="stylesheet" href="{{ url('vendors/prism/prism.css') }}" type="text/css">
<link rel="stylesheet" href="{{ Module::asset('sd:css/settings.css') }}" type="text/css">
<link rel="stylesheet" href="{{ url('vendors/dropzone/dropzone.css') }}" type="text/css">
<link rel="stylesheet" href="{{ url('vendors/datepicker/daterangepicker.css') }}" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.70/pdfmake.js" integrity="sha512-rn5JpU98RtYVMtZeQJfzmJ67rl4/dqDpGZ393z5f9WMYHXEU4+8Stm/PQAma2gbsLbpClmUHJzT0DaG32OmEyQ==" crossorigin="anonymous"></script>
<!-- AutoComplete -->
<link rel="stylesheet" href="{{ Module::asset('sd:js/autocomplete2/css/autocomplete.min.css') }}" type="text/css">
<meta name="csrf-token" content="{{ csrf_token() }}">
{{-- <script>
        var user_type = "{{ Auth::user()->user_type }}";

var status_permission = "{{ Auth::user()->can('pp_order_list_status') }} ";
var edit_permission = "{{ Auth::user()->can('pp_order_list_edit') }} ";
var view_permission = "{{ Auth::user()->can('pp_order_list_view') }} ";
var delete_permission = "{{ Auth::user()->can('pp_order_list_delete') }} ";
</script> --}}
<style>
    .modal-body {
        overflow-y: auto;
    }
</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">Shipment Record List</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card ">
            <div class="card-body">
                <h6 class="card-title">Shipment</h6>

                <div class="row">
                    <div class="col-md-12 mb-3">
                        <button type="button" id="btnAttachment" class="btn btn-primary"><i class="fa fa-plus" aria-hidden="true"></i></button>
                    </div>
                </div>

                {{ csrf_field() }}
                <table id="myTable" class="table table-striped table-bordered dataTable dtr-inline collapsed" role="grid" aria-describedby="example1_info">
                    <thead>
                        <tr>
                            <th class="id">Shipment no</th>
                            <th>Shipment type</th>
                            <th>Loading date</th>
                            <th>Customer order</th>
                            <th>Factory order</th>
                            <th>Freight by</th>
                            <th>No of Container</th>
                            <th>Container type</th>
                            <th>Action</th>
                            <th>View</th>
                            <th>Edit</th>
                            <th>Delete</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!--Attachment-->
<div class="modal fade" id="attachmentAddModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="attachmentAddModalTitle">Add Shipment Records</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i class="ti-close"></i>
                </button>
            </div>
            <div class="modal-body" id="attachmentAddModalBody">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form" id="formShipment">
                            <div class="form-group row">
                                <label for="shipment no" class="col-sm-3 col-form-label">Shipment No</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="txtShipmentNo" disabled>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="shipment type" class="col-sm-3 col-form-label">Shipment type</label>
                                <div class="col-sm-9">
                                    <select id="shipment_type" name="shipment_type" class="form-control">
                                        <option value="">--Select Shipment type--</option>
                                        <option value="1">Finished Goods</option>
                                        <option value="2">Sample</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="loading date" class="col-sm-3 col-form-label">Loading Date</label>
                                <div class="col-sm-9">
                                    <input type="date" class="form-control" id="loading_date">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="customer_order_id" class="col-sm-3 col-form-label">Customer Order</label>
                                <div class="col-sm-9">
                                    <input type="text" name="customer_order_id" id="customer_order_id" class="form-control auto-complete">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="freight by" class="col-sm-3 col-form-label">Freight by</label>
                                <div class="col-sm-9">
                                    <select id="freight_by" name="freight_by" class="form-control">
                                        <option value="">--Select Freight by--</option>
                                        <option value="1">Sea Freight</option>
                                        <option value="2">Air Fraight</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="no of container" class="col-sm-3 col-form-label">No of container</label>
                                <div class="col-sm-9">
                                    <input type="number" class="form-control" id="no_of_container" min="0" required>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="container type" class="col-sm-3 col-form-label">Container type</label>
                                <div class="col-sm-9">
                                    <select id="container_type" name="container_type" class="form-control" required>
                                        <option value="">--Select Container type--</option>
                                        <option value="1">20FT General</option>
                                        <option value="2">40FT General</option>
                                        <option value="3">20FT High Cube</option>
                                        <option value="4">40FT High Cube</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="status" class="col-sm-3 col-form-label">Status</label>
                                <div class="col-sm-9">
                                    <select id="status" name="status" class="form-control">
                                        <option>--Select Status--</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="2">3</option>
                                        <option value="2">4</option>
                                    </select>
                                </div>
                            </div>
                            {{-- <div class="form-group row">
                                <label for="customer_order_plan_data_id" class="col-sm-3 col-form-label">Manufacturing Order</label>
                                <div class="col-sm-9">
                                    <select id="customer_order_plan_data_id" name="customer_order_plan_data_id" class="form-control">
                                        <option>--Select Manufacturing Order No--</option>
                                    </select>
                                </div>
                            </div>                    --}}
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" id="btnShipmentSave" data-dismiss="modal" data-dismiss="false">Save</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.70/vfs_fonts.js" integrity="sha512-vv3EN6dNaQeEWDcxrKPFYSFba/kgm//IUnvLPMPadaUf5+ylZyx4cKxuc4HdBf0PPAlM7560DV63ZcolRJFPqA==" crossorigin="anonymous"></script>
<script type="application/octet-stream" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.70/fonts/Roboto/Roboto-Medium.ttf"></script>
<script src="{{ Module::asset('pd:js/pdf/Page.js') }}?random=67db65b122880"></script>
<script src="{{ Module::asset('pd:js/pdf/PDFViewer.js') }}?random=67db65b122882"></script>
<!-- DataTable -->
<script src="{{ url('vendors/dataTable/datatables.min.js') }}"></script>
<script src="{{ url('assets/js/examples/datatable.js') }}"></script>

<script src="{{ url('vendors/dropzone/dropzone.js') }}"></script>
<script src="{{ url('vendors/datepicker/daterangepicker.js') }}"></script>
<!-- AutoComplete -->
<script src="{{ Module::asset('sd:js/autocomplete2/js/autocomplete.min.js') }}?random=67db65b122883"></script>
<script src="{{ Module::asset('sd:js/validator/validator.js') }}?random=67db65b122884"></script>
<script src="{{ Module::asset('sd:js/svr.js') }}?random=67db65b122885"></script>
<script src="{{ Module::asset('sd:js/shipment_genarate_external_id.js') }}?random=67db65b122886"></script>

<script src="{{ Module::asset('sd:js/shipment.js') }}?random=67db65b122887"></script>
<!-- Prism -->
<script src="{{ url('vendors/prism/prism.js') }}"></script>
<!-- Sweet alert -->
<script src="{{ url('assets/js/examples/sweet-alert.js') }}"></script>
@endsection