@extends('layout')

@section('css')
<style type="text/css">
    .datatable-column-width {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }
</style>
@endsection

@section('content')

<!-- Page header -->
<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">Expedition -</span> Data</h3>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
		</div>
	</div>
<!-- /page header -->

<!-- Content area -->
<div class="content">

    {{-- @if(Auth::user()->role==1) --}}
    @if(in_array(Auth::user()->role,[1,2,8,9]))
    <div class="card">
        <div class="card-body">
            <h4>COLOAD</h4>
            <div class="form-group row">
                <div class="col-md-4">
                    <select id="select_coload" name="coload_id" class="form-control form-control-select2"
                    data-container-css-class="border-teal" data-dropdown-css-class="border-teal" required>
                        @if(!$coload_id)
                            <option value="" selected>- COLOAD -</option>
                        @endif
                        @foreach($coload as $col)
                        <option value="{{$col->id}}" {{ $coload_id == $col->id ? 'selected' : null }}>{{$col->nama}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md">
                    <a id="btn_coload" href="#" class="btn btn-primary text-uppercase">Submit</a>
                    <a href="{{ route('ekspedisi.index') }}" class="btn btn-light ml-1 text-uppercase"  data-popup="tooltip" title="Reset" data-placement="right"><i class="icon-spinner11"></i></a>
                </div>
            </div>
        </div>
    </div>
    @endif

    @if($ekspedisis)
        <div class="card">
            <div class="card-body">
                <div class="mb-5">
                    <form id="form" class="form-validate-jquery" action="{{ route('ekspedisi.store') }}" method="post">
                        @csrf
                        <input type="hidden" name="_method" id="method" value="post">
                        <h4>Input Ekspedisi</h4>
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label>Tipe Barang</label>
                                <input id="tipe_barang" name="tipe_barang" type="text" placeholder="Tipe Barang" class="form-control" required>
                            </div>
                            <div class="col-md-3">
                                <label>Tipe Ekspedisi</label>
                                <input id="tipe_ekspedisi" name="tipe_ekspedisi" type="text" placeholder="Tipe Ekspedisi" class="form-control" required>
                            </div>
                            {{-- <div class="col-md-3">
                                <label>Harga</label>
                                <input id="harga" name="harga" type="number" placeholder="Harga" class="form-control" required>
                            </div> --}}
                            <div class="col-md-3">
                                <label>Satuan</label>
                                <select name="satuan" id="satuan" class="form-control form-control-select2">
                                    <option value="cbm">cbm</option>
                                    <option value="kg">kg</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label>Negara</label>
                                <select name="negara" id="negara" class="form-control form-control-select2">
                                    @foreach(config('custom.list_negara') as $key => $value)
                                        <option value="{{$value}}">{{$value}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        {{-- <div class="row mb-3">
                            <div class="col-md-3">
                                <label>Negara</label>
                                <select name="negara" id="negara" class="form-control form-control-select2">
                                    @foreach(config('custom.list_negara') as $key => $value)
                                        <option value="{{$value}}">{{$value}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div> --}}
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label>Dari</label>
                                <input id="dari" name="dari[]" type="number" placeholder="Dari" class="form-control" value="0" readonly>
                            </div>
                            <div class="col-md-3">
                                <label>Sampai</label>
                                <input id="sampai" name="sampai[]" type="number" placeholder="Sampai" class="form-control" required>
                            </div>
                            <div class="col-md-3">
                                <label>Harga</label>
                                <input id="harga" name="harga[]" type="number" placeholder="Harga" class="form-control" required>
                            </div>
                            <div class="col" style="margin-top: auto">
                                <button type="button" class="btn btn-success" id="tambah_harga"><i class="icon-plus3"></i></button>
                            </div>
                        </div>

                        <input type="hidden" id="countertambahan" value="1">
                        <div id="divtambahanharga">

                        </div>
                        <hr>
                        <div class="text-right">
                            <input type="hidden" name="coload_id" value="{{ $coload_id }}">
                            <button type="button" class="btn btn-light ml-1 resetbutton">
                                Reset <i class="icon-undo ml-2"></i>
                            </button>
                            <button id="btn_submit" type="submit" class="btn btn-primary">
                                Tambah <i class="icon-plus2 ml-2"></i>
                            </button>
                        </div>
                    </form>
                </div>
                <h4>Data Ekspedisi</h4>
                <table class="table table-hover datatable-basic">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Tipe Barang</th>
                            <th>Tipe Ekspedisi</th>
                            {{-- <th>Harga</th> --}}
                            <th>Range - Harga</th>
                            <th>Satuan</th>
                            <th>Negara</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    @if(!$ekspedisis->isEmpty())
                        @foreach($ekspedisis as $ekspedisi)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $ekspedisi->tipe_barang }}</td>
                            <td>{{ $ekspedisi->tipe_ekspedisi }}</td>
                            {{-- <td>{{ $ekspedisi->harga }}</td> --}}
                            <td>
                                @foreach ($ekspedisi->ekspedisidetail as $eksdetail)
                                    @if (!$loop->first)
                                        <br>
                                    @endif
                                    {{$eksdetail->start_cbm}} - {{$eksdetail->end_cbm}} : Rp {{ribuan($eksdetail->harga)}}
                                @endforeach
                            </td>
                            <td>{{ $ekspedisi->satuan }}</td>
                            <td>{{ isset($ekspedisi->negara)?$ekspedisi->negara:'-' }}</td>
                            <td align="center">
                                <button type="button" class="btn btn-primary btn-icon editbutton"
                                    data-uri="{{ route('ekspedisi.update', $ekspedisi->id) }}"
                                    data-idekspedisi="{{ $ekspedisi->id }}"
                                    data-tipe_barang="{{ $ekspedisi->tipe_barang }}"
                                    data-tipe_ekspedisi="{{ $ekspedisi->tipe_ekspedisi }}"
                                    data-harga="{{ $ekspedisi->harga }}"
                                    data-satuan="{{ $ekspedisi->satuan }}"
                                    data-negara="{{ $ekspedisi->negara }}"
                                >
                                    <i class="icon-pencil7" title="Edit"></i>
                                </button>
                                <a class="delbutton" data-toggle="modal" data-target="#modal_theme_danger" data-uri="{{ route('ekspedisi.destroy', $ekspedisi->id)}}">
                                    <button type="button" class="btn btn-danger btn-icon"><i class="icon-x" title="Delete"></i></button>
                                </a>
                                @if ($ekspedisi->status == 1)
                                    {{-- hide --}}
                                    <a class="btn btn-warning btn-icon" href="{{url('handleekspedisi/'.$ekspedisi->id.'/0')}}"><i class="icon-archive" data-popup="tooltip" title="Hide for Mobile"></i></a>
                                @else
                                    {{-- show --}}
                                    <a class="btn btn-success btn-icon" href="{{url('handleekspedisi/'.$ekspedisi->id.'/1')}}"><i class="icon-archive" data-popup="tooltip" title="Show for Mobile"></i></a>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    @else
                        <tr>
                            <td class="text-center" colspan="6">Data Kosong</td>
                        </tr>
                    @endif
                    </tbody>
                </table>
            </div>
        </div>
    @endif

</div>
<!-- /content area -->

<!-- Danger modal -->
<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>
<!-- /default modal -->

@endsection

@section('js')
<!-- Theme JS files -->
<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/notifications/bootbox.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/validation/validate.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/buttons/spin.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>

<script src="{{asset('assets/js/app.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
<script>

    $(document).on('click','#tambah_harga', function() {
        var no = $('#countertambahan').val()
        var html = ''

        html += `
        <div class="row mb-3" id="divharga${no}">
            <div class="col-md-3">
                <input id="dari" name="dari[]" type="number" placeholder="Dari" class="form-control" required>
            </div>
            <div class="col-md-3">
                <input id="sampai" name="sampai[]" type="number" placeholder="Sampai" class="form-control" required>
            </div>
            <div class="col-md-3">
                <input id="harga" name="harga[]" type="number" placeholder="Harga" class="form-control" required>
            </div>
            <div class="col" style="margin-top: auto">
                <button type="button" class="btn btn-danger" data-idno="${no}" id="del_harga"><i class="icon-cross2"></i></button>
            </div>
        </div>
        `

        var newno = Number(no) + 1

        $('#divtambahanharga').append(html)
        $('#countertambahan').val(newno)
    })

    $(document).on('click','#del_harga', function() {
        var no = $(this).data('idno')

        $('#divharga'+no).remove()
    })
    
    //modal delete
		$(document).on("click", ".delbutton", function () {
		     var url = $(this).data('uri');
		     $("#delform").attr("action", url);
		});

        $("#select_coload").on("change", function() {
            let $coload_id = $(this).val();
            let href = `?coload=${$coload_id}`;
            $('#btn_coload').prop('href', href);
            $('#btn_coload').removeAttr('disabled');
        });

        $('.editbutton').on('click', function(){
            $('#divtambahanharga').empty()
            
            var idekspedisi = $(this).data('idekspedisi');
            var tipe_barang = $(this).data('tipe_barang');
            var tipe_ekspedisi = $(this).data('tipe_ekspedisi');
            var harga = $(this).data('harga');
            var satuan = $(this).data('satuan');
            var negara = $(this).data('negara');
            var uri = $(this).data('uri');

            $.ajax({
				type: 'GET',
				url: "{{ url('/getekspedisidetail/')}}?id="+idekspedisi,
				success: function (data) {
                    if (data.length > 0) {
                        var no = $('#countertambahan').val()
                        var edithtml = ''
                        
                        console.log(data)
                        for (let i = 0; i < data.length; i++) {
                            var start = data[i].start_cbm;
                            var end = data[i].end_cbm;
                            var harga = data[i].harga;

                            // iterasi pertama
                            if (i == 0) {
                                $('#dari').val(start)
                                $('#sampai').val(end)
                                $('#harga').val(harga)
                                
                            // iterasi selanjutnya
                            } else {
                                edithtml = `
                                <div class="row mb-3" id="divharga${no}">
                                    <div class="col-md-3">
                                        <input id="dari" name="dari[]" type="number" placeholder="Dari" class="form-control" value="${start}" required>
                                    </div>
                                    <div class="col-md-3">
                                        <input id="sampai" name="sampai[]" type="number" placeholder="Sampai" class="form-control" value="${end}" required>
                                    </div>
                                    <div class="col-md-3">
                                        <input id="harga" name="harga[]" type="number" placeholder="Harga" class="form-control" value="${harga}" required>
                                    </div>
                                    <div class="col" style="margin-top: auto">
                                        <button type="button" class="btn btn-danger" data-idno="${no}" id="del_harga"><i class="icon-cross2"></i></button>
                                    </div>
                                </div>
                                `
                                var newno = Number(no) + 1

                                $('#divtambahanharga').append(edithtml)
                                $('#countertambahan').val(newno)
                            }

                        }
                    }
				}
			});
            
            $('#form').attr("action", uri);
            $('#method').val("put");
            $('#tipe_barang').val(tipe_barang);
            $('#tipe_ekspedisi').val(tipe_ekspedisi);
            $('#harga').val(harga);
            $('#satuan').val(satuan).select2().trigger('change');
            $('#negara').val(negara).select2().trigger('change');
            $('#btn_submit').html('Edit <i class="icon-pencil ml-2"></i>');
            
        });

        $('.resetbutton').on('click', function(e){
            e.preventDefault();

            $('#dari').val(0)
            $('#sampai').val('')
            $('#harga').val('')
            $('#divtambahanharga').empty()
            

            $('#form').attr("action", "{{ route('ekspedisi.store')}}");
            $('#method').val("post");
            $('#tipe_barang').val('');
            $('#tipe_ekspedisi').val('');
            $('#harga').val('');
            $('#satuan').val('cbm').select2().trigger('change');
            $('#negara').val('China').select2().trigger('change');
            $('#btn_submit').html('Tambah <i class="icon-plus2 ml-2"></i>');
        });

		var DatatableBasic = function() {

		    // Basic Datatable examples
		    var _componentDatatableBasic = function() {
		        if (!$().DataTable) {
		            console.warn('Warning - datatables.min.js is not loaded.');
		            return;
		        }

		        // Setting datatable defaults
		        $.extend( $.fn.dataTable.defaults, {
		            autoWidth: false,
		            columnDefs: [{ 
		                orderable: false,
		                width: 150,
		                targets: [ 5 ]
		            }],
		            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;' }
		            }
		        });

		        // Basic datatable
		        $('.datatable-basic').DataTable();

		        // Alternative pagination
		        $('.datatable-pagination').DataTable({
		            pagingType: "simple",
		            language: {
		                paginate: {'next': $('html').attr('dir') == 'rtl' ? 'Next &larr;' : 'Next &rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr; Prev' : '&larr; Prev'}
		            }
		        });

		        // Datatable with saving state
		        $('.datatable-save-state').DataTable({
		            stateSave: true
		        });

		        // Scrollable datatable
		        var table = $('.datatable-scroll-y').DataTable({
		            autoWidth: true,
		            scrollY: 300
		        });

		        // Resize scrollable table when sidebar width changes
		        $('.sidebar-control').on('click', function() {
		            table.columns.adjust().draw();
		        });
		    };

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

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


		    //
		    // Return objects assigned to module
		    //

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

        var FormValidation = function() {

		    // Validation config
		    var _componentValidation = function() {
		        if (!$().validate) {
		            console.warn('Warning - validate.min.js is not loaded.');
		            return;
		        }

		        // Initialize
		        var validator = $('.form-validate-jquery').validate({
		            ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
		            errorClass: 'validation-invalid-label',
		            //successClass: 'validation-valid-label',
		            validClass: 'validation-valid-label',
		            highlight: function(element, errorClass) {
		                $(element).removeClass(errorClass);
		            },
		            unhighlight: function(element, errorClass) {
		                $(element).removeClass(errorClass);
		            },
		            // success: function(label) {
		            //    label.addClass('validation-valid-label').text('Success.'); // remove to hide Success message
		            //},

		            // Different components require proper error label placement
		            errorPlacement: function(error, element) {

		                // Unstyled checkboxes, radios
		                if (element.parents().hasClass('form-check')) {
		                    error.appendTo( element.parents('.form-check').parent() );
		                }

		                // Input with icons and Select2
		                else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
		                    error.appendTo( element.parent() );
		                }

		                // Input group, styled file input
		                else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
		                    error.appendTo( element.parent().parent() );
		                }

		                // Other elements
		                else {
		                    error.insertAfter(element);
		                }
		            },
                    message: {
                        'tipe_barang': {
                            required: 'Tipe barang wajib diisi!'
                        },
                        'tipe_ekspedisi': {
                            required: 'Tipe ekspedisi wajib diisi!'
                        },
                        'harga': {
                            required: 'Harga wajib diisi!'
                        },
                        'satuan': {
                            required: 'Satuan wajib diisi!'
                        },
                    }
		        });

		        // Reset form
		        $('#reset').on('click', function() {
		            validator.resetForm();
		        });
		    };

		    // Return objects assigned to module
		    return {
		        init: function() {
		            _componentValidation();
		        }
		    }
		}();


		// Initialize module
		// ------------------------------

		document.addEventListener('DOMContentLoaded', function() {
		    FormValidation.init();
		    DatatableBasic.init();
		});
</script>
<script type="text/javascript">
    var $select = $('.form-control-select2').select2();

    $( document ).ready(function() {
	        // Default style
	        @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