@extends('layout')

@section('css')
<style>
    h4{
        margin:0;
        font-size: 1.2em;
    }
</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">Create Invoice</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">
        <div class="card">
            <div class="card-body">
				<input type="hidden" id="userrole" value="{{\Auth::user()->role}}">
				<div class="row">
					<div class="col-md-4">
						<div class="form-group">
							<label>Coload</label>
							<div class="p-0">
								@if (\Auth::user()->role == 10)
								<input id="coloadteks" name="coloadteks" class="form-control border-teal border-1" type="text" value="{{\Auth::user()->coload->nama}}" readonly>
								<input id="coloadinput" name="coloadinput" class="form-control border-teal border-1" type="hidden" value="{{\Auth::user()->coload_id}}">
								@else
								<select name="currency_code" id="select_coload" class="form-control form-control-select2">
									<option value="">-- Choose Coload --</option>
									@foreach($coloads as $coload)
									<option value="{{$coload->id}}" {{ app('request')->input('c') == $coload->id ? 'selected' : null }}>{{ $coload->nama }}</option>
									@endforeach
								</select>
								@endif
							</div>
						</div>
					</div>
                    <div class="col-md-4">
						<div class="form-group">
							<label>No Container</label>
							<div class="p-0">
								<select name="currency_code" id="select_container" class="form-control form-control-select2">
									<option value="">-- Choose Container --</option>
									@foreach($containers as $cont)
										<option value="{{$cont->no_container}}" {{ app('request')->input('n') == $cont->no_container ? 'selected' : null }}>{{ $cont->no_container }}</option>
									@endforeach
								</select>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="form-group">
							<label>Customer</label>
							<div class="p-0">
								@if (\Auth::user()->role == 10)
								<select name="currency_code" id="select_customer" class="form-control form-control-select2">
									<option value="">-- Choose Customer --</option>
									@foreach($customers as $customer)
									<option value="{{$customer->id}}" {{ app('request')->input('i') == $customer->id ? 'selected' : null }}>{{ ucwords($customer->nama) }} - {{$customer->shipping_mark}}</option>
									@endforeach
								</select>
								@else
								<select name="currency_code" id="select_customer" class="form-control form-control-select2">
									<option value="">-- Choose Customer --</option>
									@foreach($customers as $customer)
										<option value="{{$customer->id}}" {{ app('request')->input('i') == $customer->id ? 'selected' : null }}>{{ ucwords($customer->nama) }} - {{$customer->shipping_mark}}</option>
									@endforeach
								</select>

								@endif
							</div>
						</div>
					</div>
				</div>
                <a id="btn_submit" href="{{ route('invoice.create').'?c='.app('request')->input('c').'&i='.app('request')->input('i').'&n='.app('request')->input('n') }}" data-uri="{{ route('invoice.create') }}" class="btn btn-primary text-uppercase">Submit  <i class="icon-paperplane ml-2"></i></a>
                <a href="{{ route('invoice.create') }}" class="btn btn-light ml-1 text-uppercase"  data-popup="tooltip" title="Reset" data-placement="right"><i class="icon-spinner11"></i></a>
            </div>
        </div>

        @if($submit)
            <div class="card">
                <div class="card-body">
                <form action="{{route('invoice.draft')}}" method="post" id="form2">
                    @csrf
					<input type="hidden" name="coload_id" value="{{ app('request')->input('c') }}">
					<input type="hidden" name="customer_id" value="{{ app('request')->input('i') }}">
					<input type="hidden" name="container" value="{{ app('request')->input('n') }}">
                    <table class="table datatable-basic table-hover" id="table_carton">
                        <thead>
                            <tr>
                                {{-- <th class="text-center">
                                    <input type="checkbox" id="all_detail">									
								</th> --}}
								<th></th>
                                <th>No. Resi</th>
                                <th>Tipe Barang</th>
                                <th>Jml Karton</th>
                                <th>Total Volume (m3)</th>
                                <th>Total Berat (kg)</th>
                                <th>Biaya cbm/kg</th>
                                <th>Total Biaya</th>
                            </tr>
                        </thead>
                        <tbody>

                            @if(count($details))
                                @foreach($details as $detail)
									@php
										$lblvolume = (($detail->panjang * $detail->lebar * $detail->tinggi)/1000000) * $detail->carton_count;
									@endphp

                                  @if(is_object(@$detail->detail_barang->first()->ekspedisi))
								  
								  @php
									$biayacbmkg = 0;
									$cekbiayacbmkg = cekbiayaekspedisicreate($detail);
									if ($cekbiayacbmkg != null) {
										$ekspedisi_detail_id = $cekbiayacbmkg->id;
										$harga_ekspedisi = $cekbiayacbmkg->harga;
										$biayacbmkg = $cekbiayacbmkg->harga;
									}

									// cek harga per user
									if ($biayacbmkg != 0 && $ekspedisi_detail_id != null) {
										$cekhargauser = cekhargauser(app('request')->input('i'), $ekspedisi_detail_id);
										if ($cekhargauser != null) {
											$biayacbmkg = $cekhargauser->harga;
										}
									}
									// $biayacbmkg = $detail->detail_barang->first()->ekspedisi->harga;
									$finbiayacbmkg = $biayacbmkg;
								  @endphp

                                    <!-- Jika tipe ekspedisi udara -->
                                    @if(strtolower(@$detail->detail_barang->first()->ekspedisi->tipe_ekspedisi) == "udara")
                                      @php
                                      $volume = (($detail->panjang * $detail->lebar * $detail->tinggi)/6000) * $detail->carton_count;
                                      @endphp

                                      <!-- Jika Berat Volume Lebih Besar dari Berat Utama -->
                                      @if($volume > ($detail->berat * $detail->carton_count))
                                        @php
                                        // $total = (($detail->berat * $detail->carton_count) * @$detail->detail_barang->first()->ekspedisi->harga) + (($volume - ($detail->berat * $detail->carton_count)) * (@$detail->detail_barang->first()->ekspedisi->harga/2))
                                        $total = (($detail->berat * $detail->carton_count) * @$finbiayacbmkg) + (($volume - ($detail->berat * $detail->carton_count)) * (@$detail->detail_barang->first()->ekspedisi->harga/2))
                                        @endphp
                                      @else
                                        @php
                                        // $total = @$detail->detail_barang->first()->ekspedisi->harga * $detail->carton_count * $detail->berat;
                                        $total = @$finbiayacbmkg * $detail->carton_count * $detail->berat;
                                        @endphp
                                      @endif

                                      {{-- <!-- Volume: {{$volume}} <br>
                                      Berat: {{$detail->berat}} -->
                                    <!-- Jika tipe ekspedisi laut --> --}}
                                    @else
                                      @php
                                      $volume = (($detail->panjang * $detail->lebar * $detail->tinggi)/1000000) * $detail->carton_count;
                                      $total = 0;
                                    //   $total = @$detail->detail_barang->first()->ekspedisi->harga * round($volume, 2) ;
                                      $total = @$finbiayacbmkg * round($volume, 2) ;
                                      @endphp
                                    @endif
                                  @else
                                    @php
                                    $volume = (($detail->panjang * $detail->lebar * $detail->tinggi)/1000000) * $detail->carton_count;
                                    $total = 0;
                                    $total = @$finbiayacbmkg * $volume;
                                    @endphp
                                  @endif

                                    <tr id="tr{{$detail->id}}">
                                        {{-- <td align="center">
                                            <input type="checkbox" class="checked_detail" name="detail[]" value={{ $detail->id }}>
                                        </td> --}}
										<td>{{$detail->id}}</td>
                                        <td>{{ @$detail->receipt->no_resi }}</td>
                                        <td>{{ @$detail->detail_barang->first()->ekspedisi->tipe_barang }}</td>
                                        <td>{{ $detail->carton_count }}</td>
                                        <td>{{ number_format($detail->total_volume, 3, ',', '.') }}</td>
                                        {{-- <td>{{ number_format($lblvolume, 3, ',', '.') }}</td> --}}
                                        <td>{{ $detail->total_berat }}</td>
                                        {{-- <td>{{ $detail->carton_count * $detail->berat }}</td> --}}
                                        {{-- <td>{{ ribuan(@$detail->detail_barang->first()->ekspedisi->harga) }}</td> --}}
                                        <td>{{ ribuan(@$finbiayacbmkg) }}</td>
                                        <td>{{ ribuan($total) }}</td>
                                    </tr>
                                @endforeach
                            @endif

                        </tbody>
                    </table>
                    <div class="d-flex @if(count($details)) offset @endif">
                        <button type="submit" id="btn-detail" style="margin-right:15px" class="btn btn-warning float-left " disabled>Create Invoice</button>
                    </div>
                </form>
                </div>
            </div>
        @endif
	</div>

	<!-- 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" disabled>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/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>
    {{-- JS CHECKBOX --}}
    <link type="text/css" href="{{asset('global_assets/jquery_datatables_checkboxes/css/dataTables.checkboxes.css')}}" rel="stylesheet" />
    <script type="text/javascript" src="{{asset('global_assets/jquery_datatables_checkboxes/js/dataTables.checkboxes.min.js')}}"></script>
	<script>
		//modal delete
		$(document).on("click", ".delbutton", function () {
		     var url = $(this).data('uri');
		     $("#delform").attr("action", url);
		});

		//pilih Coload
		//$(document).on("change", "#coload_id", function () {
		//	var id = $(this).find(':selected').val();
        //    selectCustomer(id);
		//});

		function selectCustomer(id_coload, id){
			//urlencode
			encodeId = encodeURIComponent(id)
			$.ajax({
				type: 'GET',
				url: "{{ url('/getcustomercoload2/')}}?id_coload="+id_coload+"&q="+encodeId,
				success: function (data) {
					$('#select_customer').html(data);
				}
			});
		}

		function selectContainer(id){
			$.ajax({
				type: 'GET',
				url: "{{ url('/getcontainer/')}}/"+id,
				success: function (data) {
					$('#select_container').html(data);
				}
			});
		}

    $('#select_coload').change(function(){
        let uri = $('#btn_submit').data('uri');
        let val = $(this).val();
        let href = `${uri}?c=${val}`;

        $('#btn_submit').attr('href', href);
	      // selectCustomer(val);
	      selectContainer(val);
    })

        $('#select_customer').change(function(){
    			let userrole = $('#userrole').val();
                let uri = $('#btn_submit').data('uri');
    			if (userrole == 10) {
                	var val1 = $('#coloadinput').val();
    			}else{
                	var val1 = $('#select_coload').find(":selected").val();
    			}
                let val2 = $('#select_container').find(":selected").val();
                let val3 = $(this).val();
                let href = `${uri}?c=${val1}&n=${val2}&i=${val3}`;

                $('#btn_submit').attr('href', href);
    			// selectContainer(val2);
      })

        $('#select_container').change(function(){
    		let userrole = $('#userrole').val();
            let uri = $('#btn_submit').data('uri');
    		if (userrole == 10) {
            	var val1 = $('#coloadinput').val();
    		}else{
            	var val1 = $('#select_coload').find(":selected").val();
    		}
          // let val2 = $('#select_customer').find(":selected").val();
          let val2 = $(this).val();
          let href = `${uri}?c=${val1}&n=${val2}`;

          $('#btn_submit').attr('href', href);
          selectCustomer(val1, val2);
        })

        // CHECK BARANG DI carton
        $('#all_detail').on("change", function(){
            let check = $(this).is(":checked");
            let $detail = $('.checked_detail');

            if(check){
                $detail.prop('checked', true);
            } else {
                $detail.prop('checked', false);
            }
        })

        $(document).on("change", ".dt-checkboxes-select-all input[type='checkbox']", function () {
        // $('#all_detail, .checked_detail').change(function() {
            let len = 0;
            $('.dt-checkboxes:checked').each(function () {
                len = len+1;
            });

            if(len > 0){
                $('#btn-detail').removeAttr('disabled')
            } else {
                $('#btn-detail').attr('disabled', 'disabled')
            }
        })

		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,
                    order: [[1, 'asc']],
		            columnDefs: [{
		                orderable: false,
		                width: 100,
		                targets: [ 0 ]
		            },{
                        targets: 0,
						orderable: false,
		                width: 100,
                        checkboxes: {
                            selectRow: true,
							selectAll: true,
                        }
                    },
					],
                    select: {
                        style: 'multi'
                    }
                    ,
		            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();
		        }
		    }
		}();


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

		document.addEventListener('DOMContentLoaded', function() {
		    DatatableBasic.init();
		});
	</script>
	<script type="text/javascript">
		window.addEventListener('pageshow', function(event) {
			if (event.persisted) {
				console.log('Page restored from bfcache. Reloading the page.');
				location.reload();  // Reload the page if it was restored from the back/forward cache
			}
		});

		// Optionally, keep the popstate event for browsers that don't use bfcache
		window.addEventListener('popstate', function(event) {
			console.log('Back button navigation detected. Reloading the page.');
			location.reload();  // Reload the page when back button is detected
		});
		
		$('#form2').on('submit', function(){
			
			var table = $('.datatable-basic').DataTable();
			var rows_selected = table.column(0).checkboxes.selected();
			var form = this;

			console.log(rows_selected)
			// Iterate over all selected checkboxes
			$.each(rows_selected, function(index, rowId){
				console.log(index, rowId)
				// Create a hidden element
				$(form).append(
					$('<input>')
						.attr('type', 'hidden')
						.attr('name', 'detail[]')
						.val(rowId)
						// .val(this.value)

				);
			});
		});

		$( document ).ready(function() {
            var $select = $('.form-control-select2').select2();
			
			$(document).on('change','.dt-checkboxes', function() {
				var table = $('.datatable-basic').DataTable();
				var rows_selected = table.column(0).checkboxes.selected();
				if (rows_selected.length > 0) {
					$('#btn-detail').prop('disabled', false)
				} else {
					$('#btn-detail').prop('disabled', true)
				}
			})

	        // 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