@extends('layout')

@section('css')
<style>
    .loading-plan-tracking-table-wrap {
        overflow-x: auto;
    }

    .loading-plan-tracking-action {
        white-space: nowrap;
        min-width: 110px;
    }
</style>
@endsection

@section('content')

<div class="page-header page-header-light">
    <div class="page-header-content header-elements-md-inline">
        <div class="page-title d-flex">
            <h3 class="font-weight-bold"><span class="font-weight-light">LOADING PLAN TRACKING -</span> Data</h3>
            <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
        </div>
        <div class="header-elements">
            <a href="{{ route('loadingplantracking.create') }}" class="btn btn-primary font-weight-bold font-size-lg">
                NEW LOADING PLAN TRACKING <i class="icon-plus2 ml-2"></i>
            </a>
        </div>
    </div>
</div>

<div class="content">
    <div class="card">
        <div class="card-body">
            <div class="loading-plan-tracking-table-wrap">
                <table class="table datatable-basic table-hover">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>No. Loading Plan</th>
                            <th>Gudang</th>
                            <th>Shipping To</th>
                            <th>Berat Container</th>
                            <th>Total CBM</th>
                            <th>Total Berat</th>
                            <th>Dibuat</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div id="modal_theme_danger" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger" align="center">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <form action="" method="post" id="delform">
                @csrf
                @method('DELETE')
                <div class="modal-body" align="center">
                    <h2> Hapus Data? </h2>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn bg-danger">Hapus</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/ui/moment/moment.min.js')}}"></script>
<script src="{{asset('assets/js/app.js')}}"></script>

<script>
    var DatatableBasic = function() {
        var _componentDatatableBasic = function() {
            if (!$().DataTable) {
                console.warn('Warning - datatables.min.js is not loaded.');
                return;
            }

            $.extend($.fn.dataTable.defaults, {
                autoWidth: false,
                scrollX: true,
                dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
                language: {
                    search: '<span>Filter:</span> _INPUT_',
                    searchPlaceholder: 'Type to filter...',
                    lengthMenu: '<span>Show:</span> _MENU_',
                    paginate: {
                        'first': 'First',
                        'last': 'Last',
                        'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;',
                        'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;'
                    }
                }
            });

            $('.datatable-basic').DataTable({
                processing: true,
                serverSide: true,
                order: [[7, 'desc']],
                ajax: "{{ route('loadingplantracking-datatable') }}",
                columns: [
                    {data: 'DT_RowIndex', name: 'no'},
                    {data: 'no_loading_plan', name: 'no_loading_plan'},
                    {data: 'gudang', name: 'gudang'},
                    {data: 'shipping_to', name: 'shipping_to'},
                    {data: 'berat_container', name: 'berat_container', render: function(data) {
                        return data ? data : '-';
                    }},
                    {data: 'total_cbm', name: 'total_cbm'},
                    {data: 'total_berat', name: 'total_berat'},
                    {data: 'created_at', name: 'created_at', render: function(data) {
                        return data ? moment(data, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY HH:mm') : '-';
                    }},
                    {data: null, orderable: false, searchable: false, className: 'text-center loading-plan-tracking-action', render: function(data) {
                        let html = '';
                        html += `<a href="{{ url('loadingplantracking') }}/${data.id}" class="btn btn-light btn-icon mr-1"><i class="icon-eye" title="Show"></i></a>`;
                        html += `<a class="delbutton" data-toggle="modal" data-target="#modal_theme_danger" data-uri="{{ url('loadingplantracking') }}/${data.id}"><button type="button" class="btn btn-danger btn-icon"><i class="icon-x" title="Delete"></i></button></a>`;
                        return html;
                    }}
                ]
            });
        };

        var _componentSelect2 = function() {
            if (!$().select2) {
                console.warn('Warning - select2.min.js is not loaded.');
                return;
            }

            $('.dataTables_length select').select2({
                minimumResultsForSearch: Infinity,
                dropdownAutoWidth: true,
                width: 'auto'
            });
        };

        return {
            init: function() {
                _componentDatatableBasic();
                _componentSelect2();
            }
        }
    }();

    document.addEventListener('DOMContentLoaded', function() {
        DatatableBasic.init();
    });
</script>

<script>
    $(document).ready(function() {
        $(document).on('click', '.delbutton', function () {
            var url = $(this).data('uri');
            $('#delform').attr('action', url);
        });

        @if(session('error'))
            new PNotify({
                title: 'Error',
                text: '{{ session('error') }}.',
                icon: 'icon-blocked',
                type: 'error'
            });
        @endif

        @if(session('success'))
            new PNotify({
                title: 'Success',
                text: '{{ session('success') }}.',
                icon: 'icon-checkmark3',
                type: 'success'
            });
        @endif
    });
</script>
@endsection