@extends('layouts.authenticated')
@section('order','active')
@section('style')
    <style>
        hr {
            margin-top: 1rem;
            margin-bottom: 1rem;
            border: 0;
            border-top: 1px solid rgba(0, 0, 0, .1);
        }

        .page-header .page-tools {
            -ms-flex-item-align: end;
            align-self: flex-end;
        }

    </style>
@endsection

@section('content')

    <div class="panel panel-info">
        <div class="panel-heading">
            Order Inquiry
            <a class="fa pull-right" style="cursor: pointer" id="btn-get-tlogs"><i class="fa fa-refresh"></i></a>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-xs-12 col-md-5 col-sm-6">

                </div>
            </div>
            <div id="output" style="margin-top:.5cm">
                <div class="employerecords dataTable_wrapper table-responsive" id="tablelist">
                    <table class="table table-striped  table-hover" id="order-table">
                        <thead>
                        <tr>
                            <th>Shipment ID</th>
                            <th>Order Number</th>
                            <th>Type</th>
                            <th>Location Code</th>
                            <th>Transaction Date</th>
                        </tr>
                        </thead>
                        <tbody>
                        <td colspan="5" style="text-align: center">Processing</td>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="modal-get-tlogs" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span style="color: red;font-size: 25px">&times;</span>
                    </button>
                    <h4 class="modal-title" name="modal" id="exampleModalLabel"><i class="fa fa-refresh"
                                                                                   style="font-size: 25px; color: orange"></i>
                        Transaction Logs Sync</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <form id="form-get-tlogs">
                            <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                            <div class="form-group col-sm-12">
                                <p>We are generating a manual trigger of pulling transaction logs from trunc, Please
                                    specify the <strong>Transaction Date</strong></p>
                                {{-- <label for="date">Transaction Date</label>--}}
                                <input type="date" name="tlog_transaction_date" id="tlog_transaction_date"
                                       class="form-control"
                                       placeholder="dd-mm-yyyy" value="{{date('Y-m-d')}}" required
                                       value="{{ old('tlog_transaction_date') }}">
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-get-tlogs">Generate</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="shipmentModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document" style="width:90%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span style="color: red;font-size: 25px">&times;</span>
                    </button>
                    <h4 class="modal-title" name="modal" id="exampleModalLabel"><i class="fa fa-shopping-cart"
                                                                                   style="font-size: 25px; color: blue"></i>
                        SHIPMENT INFORMATION</h4>
                </div>
                <div class="modal-body" id="modal-content">

                </div>
                {{--<div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                </div>--}}
            </div>
        </div>
    </div>

@endsection

@section('customjs')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            document.getElementById('tlog_transaction_date').max = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString().split("T")[0];
            toastr.options = {
                "closeButton": false,
                "debug": false,
                "newestOnTop": true,
                "progressBar": false,
                "positionClass": "toast-top-right",
                "preventDuplicates": false,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "5000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut"
            }

            $('#btn-get-tlogs').click(function (e) {
                $('#modal-get-tlogs').modal('show')
            })
            $('.btn-get-tlogs').click(function (e) {
                getTLOGS();
            })

            load()

            function getTLOGS() {
                $('#order-table').DataTable().clear().draw();
                $.ajax({
                    url: 'api/get-tlog/' + $('#tlog_transaction_date').val(),
                    type: 'GET',
                    beforeSend: function () {
                        $('#modal-get-tlogs').modal('hide')
                        $('#btn-get-tlogs').addClass('fa-spin ')
                    },
                    success: function (response) {
                        if (response.status == 200) {
                            Command: toastr["success"](new Date($('#tlog_transaction_date').val()), "Success")
                        } else {
                            Command: toastr["error"](response.message, "Failed")
                        }
                    },
                    complete: function () {
                        $('#btn-get-tlogs').removeClass('fa-spin ')
                        $('#order-table').DataTable().ajax.reload();
                    },
                });
            }

            $(document).on('click', '.btn-submit', function (e) {
                var shipment = $(this).data('shipment_id');
                $.ajax({
                    url: 'shipment-details',
                    type: "GET",
                    data: {shipment_id: shipment},
                    dataType: 'html',
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    beforeSend: function (response) {
                        $('#modal-content').html()
                    },
                    success: function (response) {
                        // $('#modal-content').html(response)
                    },
                    complete: function (response) {
                        $('#modal-content').html(response.responseText)
                    },
                });
            });

        })

        function load() {
            $('#order-table').dataTable({
                serverSide: true,
                destroy: true,
                scrollY: "500px",
                scrollCollapse: true,
                columnDefs: [
                    {
                        targets: [5, 6, 7, 8],
                        visible: false,
                    }
                ],
                ajax: {
                    url: "{{ url('get-orders') }}",
                    dataType: "json",
                    type: "GET",
                },
                columns: [
                    {
                        data: "shipment_id",
                        render: function (data, type, row) {
                            return '<a class="btn-submit" data-toggle="modal" data-target="#shipmentModal" data-id=' + row['id'] + ' data-shipment_id=' + row['shipment_id'] + ' style="cursor: pointer;">' + row['shipment_id'] + '</a';
                        }
                    },
                    {data: "order_number"},
                    {data: "type"},
                    {data: "location"},
                    {
                        data: "time",
                        render: function (data, type, row) {
                            return type === 'sort' ? data : row['transaction_datetime'];
                        }
                    },
                    {data: "l_transaction_datetime"},
                    {data: "transaction_datetime"},
                    {data: "l_type"},
                    {data: "l_shipment_id"},
                ],
                order: [[4, 'desc']],
            });
        }
    </script>
@endsection