@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 Coload</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>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('container') == $cont->no_container ? 'selected' : null }}
                    >
                      {{ $cont->no_container }}
                    </option>
									@endforeach
								</select>
							</div>
						</div>
					</div>
					<div class="col-md-4">
						<div class="form-group">
							<label>Coload</label>
							<div class="p-0">
                <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('coload') == $coload->id ? 'selected' : null }}>{{ $coload->nama }}</option>
									@endforeach
								</select>
							</div>
						</div>
					</div>
				</div>
        <a id="btn_submit"
           href="{{ route('invoicecoload.create').'?container='.app('request')->input('container').'&coload='.app('request')->input('coload') }}"
           data-uri="{{ route('invoicecoload.create') }}"
           class="btn btn-primary text-uppercase"
        >
          Submit  <i class="icon-paperplane ml-2"></i>
        </a>
        <a href="{{ route('invoicecoload.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('invoicecoload.draft')}}" method="post" id="form2">
          @csrf
          <input type="hidden"
                 name="container"
                 value="{{ app('request')->input('container') }}">
    			<input type="hidden"
                 name="coload_id"
                 value="{{ app('request')->input('coload') }}">
          <table class="table datatable-basic table-hover" id="table_carton">
            <thead>
              <tr>
                  <th class="text-center">
                      <input type="checkbox" id="all_detail">
                  </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) > 0)
              @foreach($details as $detail)
                @if(is_object($detail->detail_barang->first()->ekspedisi))
                  <!-- 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))
                      @endphp
                    @else
                      @php
                      $total = @$detail->detail_barang->first()->ekspedisi->harga * $detail->carton_count * $detail->berat;
                      @endphp
                    @endif
                  @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) ;
                    @endphp
                  @endif
                @else
                  @php
                    // $volume = ($detail->panjang * $detail->lebar * $detail->tinggi)/1000000;
                    $volume = (($detail->panjang * $detail->lebar * $detail->tinggi)/1000000) * $detail->carton_count;
                    $total = 0;
                    $total = @$detail->detail_barang->first()->ekspedisi->harga * $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->receipt->no_resi }}</td>
                    <td>{{ @$detail->detail_barang->first()->ekspedisi->tipe_barang }}</td>
                    <td>{{ $detail->carton_count }}</td>
                    <td>{{ number_format($volume, 3, '.', ',') }}</td>
                    <td>{{ ($detail->carton_count * $detail->berat) }}</td>
                    <td>{{ ribuan(@$detail->detail_barang->first()->ekspedisi->harga) }}</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>
	<script>
		//modal delete
		$(document).on("click", ".delbutton", function () {
		     var url = $(this).data('uri');
		     $("#delform").attr("action", url);
		});

		function selectCoload(no_container){
			$.ajax({
				type: 'GET',
				url: "{{ url('getcoloadbycontainer')}}/"+no_container,
				success: function (data) {
					$('#select_coload').html(data);
				}
			});
		}

    $('#select_container').change(function(){
			let uri = $('#btn_submit').data('uri');

      let container = $(this).val();
      let href = `${uri}?container=${container}`;

      $('#btn_submit').attr('href', href);
      selectCoload(container);
    });

    $('#select_coload').change(function(){
      let uri = $('#btn_submit').data('uri');

      let container = $('#select_container').val();
      let coload = $(this).val();

      let href = `${uri}?container=${container}&coload=${coload}`;
      $('#btn_submit').attr('href', href);
    });

    // 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", "#all_detail, .checked_detail", function () {
    // $('#all_detail, .checked_detail').change(function() {
        let len = 0;
        $('.checked_detail: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 ]
              }],
              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">
		$( document ).ready(function() {
      var $select = $('.form-control-select2').select2();
      // 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