@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">Delivery To Indonesia -</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">
    <div class="card">
      <div class="card-body">
        <div class="map-container" id="map_kapal" style="height:60vh"></div>
      </div>
    </div>
		<div class="card">
			<div class="card-body">
        @if (!in_array(\Auth::user()->role,[15,30,99]))
        {{-- @if (in_array(\Auth::user()->role,[1])) --}}

          <legend>Download Data Berdasar Container</legend>
          <form action="{{url('downloaddatabycontainer')}}" method="POST" id="downdatacontainer">
            @csrf
            <div class="row">
              <div class="col-md-4">
                <select class="form-control form-control-select2" name="no_container" id="data_no_container">
                      <option value="">--Pilih Container--</option>
                  @foreach ($containers as $container)
                      <option value="{{$container->no_container}}">{{$container->no_container}}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-2">
                <button class="btn btn-success" type="submit" id="btndataconsubmit"><i class="icon-download mr-1"></i> Download Data</button>
              </div>
            </div>
          </form>

        @endif

				<form action="{{ route('deliver.container.china') }}" method="post" id="form1a">
					<input name="containercinaurl" id="containercinaurl" type="hidden" value="{{route('deliver.container.china')}}">
          @csrf
          @method('put')
					<table class="table datatable-basic table-hover" id="table_warehouse">
						<thead>
							<tr>
								@if (!in_array(\Auth::user()->role, [15]))
								<th align="center" id="checkbox_field">
									<input type="checkbox" id="all_deliver">
								</th>
								@endif
								<th>No</th>
								<th>Logo Container</th>
								<th id="no_container_field">No. Container</th>
								<th>Jumlah Karton</th>
								<th>Lokasi Awal</th>
								<th>Lokasi Tujuan</th>
								<th>Status Container</th>
								<th>Status</th>
								<th>Destination</th>
                {{-- @if (\Auth::user()->role != 20) --}}
								<th class="text-center">Action</th>
                {{-- @endif --}}
							</tr>
						</thead>
						<tbody>
							

						</tbody>
					</table>

					@if (!in_array(\Auth::user()->role, [10,15]))
          
					<div class="row mt-2">
						<div class="col">
							<button type="submit" id="btn-port" class="btn btn-success float-left" disabled><i class="icon-office mr-1"></i> Status update : Sampai Di Port Indonesia</button>
							<input type="hidden" id="hrefport" value="{{url('delivercinaport')}}">
						</div>
					</div>

					<div class="row mt-2">
						<div class="col">
							<button type="submit" id="btn-undoport" class="btn btn-warning float-left" disabled><i class="icon-undo mr-1"></i> Status undo : Deliveries to Indonesia</button>
							<input type="hidden" id="undohrefport" value="{{url('undodelivercinaport')}}">
						</div>
					</div>
					<div class="row mt-2">
						<div class="col-md-1">
							<button id="btn-delay" class="btn btn-danger float-left" disabled><i class="icon-alarm mr-1"></i> Delay</button>
							<input type="hidden" id="hrefdelay" value="{{url('delaydeliverycina')}}">
						</div>
						{{-- <div id="formdelay" style="display:none"> --}}
							<div class="col-md-1 formdelay" style="line-height: 36px; vertical-align: middle; display:none">
								Keterangan Delay :
							</div>
							<div class="col-md-2 formdelay" style="display:none">
								<input type="text" name="keterangan_status" id="keterangan_status" class="form-control">
							</div>
							<div class="col-md-2 formdelay form-group form-inline" style="display:none">
								ETA:&nbsp;<input type="text" name="eta" id="eta" placeholder="ETA" class="form-control">
							</div>
							<div class="col formdelay" style="display:none">
								<button id="btn-delay-cancel" class="btn btn-light float-left" style="margin-right: 12px;"><i class="icon-cross mr-1"></i> Batal</button>
								<button id="btn-delay-submit" type="submit" class="btn btn-primary float-left"><i class="icon-paperplane mr-1"></i> Simpan</button>
							</div>
						{{-- </div> --}}
					</div>
					<hr>
					<div class="row mt-1">
						<div class="col">
							<button type="submit" id="btn-deliver" class="btn btn-primary float-left" disabled><i class="icon-ship mr-1"></i> Status update : Unstuffing Indonesia</button>
						</div>
            
            <div class="col text-right">
              <button type="submit" id="btn-backwarecina" class="btn btn-info" disabled><i class="icon-home5 mr-1"></i> Kembalikan ke Warehouse China</button>
              <input type="hidden" id="hrefbackwarecina" value="{{url('delivercinabackwarecina')}}">
            </div>
  
					</div>
					@endif
				</form>

        <form action="{{route('update-containerimage')}}"
              method="POST"
              id="frm_container_image"
              enctype="multipart/form-data"
        >
          @csrf
          <input type="hidden"
                 name="container_number_image"
                 id="container_number_image"
                 value=""
          >
          <input type="file"
                 name="container_image"
                 id="container_image"
                 style="display:none"
          >
          <!-- <input type="submit" id="submit_gambar" name="simpan" style="display:none"> -->
        </form>

        <!-- Hapus Container Image -->
        <form action="{{route('delete-containerimage')}}"
              method="POST"
              id="frm_delete_logo"
              enctype="multipart/form-data"
        >
          @csrf
          <input type="hidden"
                 name="id_delete_logo"
                 id="id_delete_logo"
                 value=""
          >
        </form>

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

	<!-- UPDATE SCAC -->
	<div id="modal_scac" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-warning" align="center">
					Edit Sealine / SCAC | Container &nbsp; <span id="container_name"></span> <button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="{{route('deliver.edit_scac')}}" method="post">
			    @csrf
					<div class="modal-body" align="center">
            <div class="form-group">
              <input type="hidden" name="container_number" id="container_number">
              <select name="scac" id="scac" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal">
                @foreach(config('custom.sealines') as $key => $value)
                <option value="{{$key}}">{{$value}}</option>
                @endforeach
              </select>
            </div>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
						<button type="submit" class="btn bg-warning">Simpan</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /UPDATE SCAC -->

  <!-- UPDATE CONTAINER INFO -->
  <div id="modal_container_info" class="modal fade">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header bg-warning" align="center">
          <i class="icon-ship mr-1"></i>Update Info Container &nbsp;
          <span id="container_name"></span>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <form action="{{route('update-containerinfo')}}" method="post">
          @csrf
          <div class="modal-body">

            <div class="row mb-2">
              <div class="col-4 input-group">
                <span class="input-group-prepend">
                  <button type="button" class="btn btn-light btn-icon"><span class="font-weight-semibold">ETA</span> <i class="icon-calendar3 ml-3"></i></button>
                </span>
                <input type="text" name="eta" class="form-control daterange-single " id="etaupdateinfo" placeholder="Select a date">
              </div>
            </div>

            <div class="row">
              <!-- LOKASI AWAL -->
              <div class="col-6">
                <div class="form-group">
                  <input type="hidden" name="container_number_json" id="container_number_json">
                  <input type="hidden" name="scac_json" id="scac_json">
                  <label for="lokasi_awal">Lokasi Awal</label>
                  <input type="text"
                         class="form-control mb-1"
                         name="lokasi_awal_pelabuhan"
                         id="lokasi_awal_pelabuhan"
                         placeholder="Nama Pelabuhan"
                  >
                  <input type="text"
                         class="form-control mb-1"
                         name="lokasi_awal_kota"
                         id="lokasi_awal_kota"
                         placeholder="Nama Kota"
                  >
                  <input type="text"
                         class="form-control"
                         name="lokasi_awal_negara"
                         id="lokasi_awal_negara"
                         placeholder="Nama Negara"
                  >
                  <div class="container">
                    <div class="row mt-1">
                      <input type="text" class="col-6 form-control" name="lat_awal" id="lat_awal" placeholder="Latitude">
                      <input type="text" class="col-6 form-control" name="long_awal" id="long_awal" placeholder="Longitude">
                    </div>
                  </div>
                </div>
              </div>

              <!-- LOKASI TUJUAN -->
              <div class="col-6">
                <div class="form-group">
                  <label for="lokasi_tujuan_pelabuhan">Lokasi Tujuan</label>
                  <input type="text"
                         class="form-control mb-1"
                         name="lokasi_tujuan_pelabuhan"
                         id="lokasi_tujuan_pelabuhan"
                         placeholder="Nama Pelabuhan"
                  >
                  <input type="text"
                         class="form-control mb-1"
                         name="lokasi_tujuan_kota"
                         id="lokasi_tujuan_kota"
                         placeholder="Nama Kota"
                  >
                  <input type="text"
                         class="form-control"
                         name="lokasi_tujuan_negara"
                         id="lokasi_tujuan_negara"
                         placeholder="Nama Negara"
                  >
                  <div class="container">
                    <div class="row mt-1">
                      <input type="text" class="col-6 form-control" name="lat_tujuan" id="lat_tujuan" placeholder="Latitude">
                      <input type="text" class="col-6 form-control" name="long_tujuan" id="long_tujuan" placeholder="Longitude">
                    </div>
                  </div>
                </div>
              </div>

            </div>

            <!-- STATUS CONTAINER -->
            <div class="form-group">
              <div class="row">
                <div class="col-4"><label for="tanggal_status">Tanggal</label></div>
                <div class="col-4"><label for="status_container">Status Container</label></div>
                <div class="col-4"><label for="lokasi_status">Lokasi Status</label></div>
              </div>
              <div id="input_status">

              </div>
              <div class="row">
                {{-- <div class="col-4">
                  <input type="text"
                         name="tgl_selesai[]"
                         class="form-control daterange-single"
                         value="{{ date('Y-m-d H:i:s') }}"
                  >
                </div> --}}
                {{-- <div class="col-4 input-group">
                  <span class="input-group-prepend">
                    <button type="button" class="btn btn-light btn-icon ButtonCreationDemoButton"><i class="icon-calendar3"></i></button>
                  </span>
                  <input type="text" name="tgl_selesai[]" class="form-control" id="ButtonCreationDemoInput" placeholder="Select a date">
                </div> --}}
                <div class="col-4 input-group">
                  <input type="date" name="tgl_selesai_date[]" class="form-control" placeholder="Select a date">
                  <input type="time" name="tgl_selesai_time[]" class="form-control" placeholder="Select a date">
                </div>

                <div class="col-4">
                  <!-- <input type="hidden" name="text_status_container" id="text_status_container"> -->
                  <select name="status_container[]"
                          class="form-control form-control-select2"
                  >
                    <option value="">Pilih Status Container</option>
                    @foreach(config('custom.container_statuses') as $key => $value)
                    @if ($loop->first)
                      <optgroup label="General Status"></optgroup>
                    @endif

                    @if ($key == 'STC')
                      <optgroup label="Semarang Status"></optgroup>
                    @endif

                    @if ($key == 'PCC')
                      <optgroup label="Portklang Status"></optgroup>
                    @endif

                    <option value="{{$key}}">{{$value}}</option>
                    @endforeach

                  </select>
                </div>
                <div class="col-4">
                  <select name="lokasi_container[]" id="lokasi_container" class="form-control ceklatlong">
                    <option value="">Pilih Lokasi Container</option>
                    {{-- <option value="0">Ocean</option>
                    <option value="1">Lokasi Awal</option>
                    <option value="2">Lokasi Tujuan</option> --}}
                    <option value="3" data-latlong="23.3391945 , 113.1818344"> Waktu Loading Pick Up Warehouse</option>
                    <option value="4" data-latlong="22.6728735 , 113.57918"> 4 hari setelah loading</option>
                    <option value="5" data-latlong="18.239766 , 109.493064"> 8 hari setelah loading</option>
                    <option value="6" data-latlong="6.081354 , 107.694911"> 14 hari setelah loading</option>
                    <option value="7" data-latlong="-1.862565 , 107.488129"> 20 hari setelah loading ( kalau delay vessel ) </option>
                    <option value="8" data-latlong="-6.940633 , 110.426676"> Port Indonesia ( Semarang, Surabaya, Cikarang)</option>
                  </select>
                  {{-- <input type="text" name="latitudelongitude" id="latitudelongitude"> --}}
                </div>
              </div>
            </div>

             <!-- POSISI CONTAINER TERKINI -->
             <div class="form-group">
              <label for="posisi_container">Posisi Container Terkini</label>
              <div class="row">
                <div class="col-6">
                  <input type="text" class="form-control" name="lat_container" id="lat_container" placeholder="Latitude">
                </div>
                <div class="col-6">
                  <input type="text" class="form-control" name="long_container" id="long_container" placeholder="Longitude">
                </div>
              </div>
            </div>

          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
            <button type="submit" class="btn bg-warning">Simpan</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- /UPDATE CONTAINER INFO -->
@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/ui/moment/moment.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/daterangepicker.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/anytime.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key={{ env('G_API_KEY', 'error')}}"></script>

	<script src="{{asset('assets/js/app.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
	<script>
    /*#########################*/
    /*## Edit Info Container ##*/
    /*#########################*/
    //Data Container
    var data_lokasi = {!! json_encode($container_location) !!};
    var container_positions = {!! json_encode($container_positions) !!};
    var container_statuses = {!! json_encode($all_status) !!};
    // Assign text status_container
    // $('#status_container').on('change', function(){
    //   var text = $('#status_container option:selected').text();
    //   $("#text_status_container").val(text);
    // });

      // assign latlong
      $(document).on('change', '.ceklatlong', function() {
        var datalatlong = $(this).find(':selected').data('latlong')
        var texts = datalatlong.split(" ")
        $('#lat_container').val(texts[0])
        $('#long_container').val(texts[2])
        console.log(texts)
        // $('#latitudelongitude').val(datalatlong) 
    })

    //Tambah container image
    function uploadLogo(no_container){
      $("#container_number_image").val(no_container)
      $("#container_image").click();
    }

    function deleteLogo(no_container){
      $("#id_delete_logo").val(no_container);
      $("#frm_delete_logo").submit();
    }

    $("#container_image").on('change', function(){
      $("#frm_container_image").submit();
    });

    //Menampilkan Form Update Info Container
    function updateInfo(no_container, scac, eta){
      $("#container_number_json").val('');
      $("#scac_json").val('');
      $("#etaupdateinfo").val('')

      $("#container_number_json").val(no_container);
      $("#scac_json").val(scac);
      $("#etaupdateinfo").val(eta)

      if (data_lokasi[no_container] != null) {
          //Edit Lokasi Awal
          $("#lokasi_awal_pelabuhan").val(data_lokasi[no_container]['prepol']['name']);
          $("#lokasi_awal_kota").val(data_lokasi[no_container]['prepol']['state']);
          $("#lokasi_awal_negara").val(data_lokasi[no_container]['prepol']['country']);
          $("#lat_awal").val(data_lokasi[no_container]['prepol']['lat']);
          $("#long_awal").val(data_lokasi[no_container]['prepol']['lng']);

          //Edit Lokasi Tujuan
          $("#lokasi_tujuan_pelabuhan").val(data_lokasi[no_container]['postpod']['name']);
          $("#lokasi_tujuan_kota").val(data_lokasi[no_container]['postpod']['state']);
          $("#lokasi_tujuan_negara").val(data_lokasi[no_container]['postpod']['country']);
          $("#lat_tujuan").val(data_lokasi[no_container]['postpod']['lat']);
          $("#long_tujuan").val(data_lokasi[no_container]['postpod']['lng']);

          //Edit Lat Long
          $("#lat_container").val(container_positions[no_container]['lat']);
          $("#long_container").val(container_positions[no_container]['long']);

          var html='';
          var id_row = 1;

          $.each( container_statuses[no_container], function( key, value ) {
            //Status Container

            // <div class="col-4 input-group">
            //   <span class="input-group-prepend">
            //     <button type="button" class="btn btn-light btn-icon ButtonCreationLoop" id="btndemo${id_row}" onclick="buttondatetime(${id_row})"><i class="icon-calendar3"></i></button>
            //   </span>
            //   <input type="text" name="tgl_selesai[]" class="form-control" id="ButtonCreationDemoInput${id_row}" placeholder="Select a date" value="${value.date}">
            // </div>
            let date = moment(value.date).format('YYYY-MM-DD')
            let time = moment(value.date).format('HH:mm')
            // console.log(value.date, time)
            html +=`
            <div class="row mb-2" id="${'row_'+id_row}">
              <div class="col-4 input-group">
                <input type="date" name="tgl_selesai_date[]" class="form-control" placeholder="Select a date" value="${date}">
                <input type="time" name="tgl_selesai_time[]" class="form-control" placeholder="Select a date" value="${time}">
              </div>

              <div class="col-4">
                <select name="status_container[]"
                        class="form-control form-control-select2"
                >
                  @foreach(config('custom.container_statuses') as $key => $value)
                  <option value="{{$key}}" ${value.status == '{{$key}}' ? 'selected' : ''}>{{$value}}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-3">
                <select name="lokasi_container[]" id="lokasi_container" class="form-control ceklatlong">
                  
                  <option value="3" ${value.location.id == 3 ? 'selected' : ''} data-latlong="23.3391945 , 113.1818344"> Waktu Loading Pick Up Warehouse</option>
                  <option value="4" ${value.location.id == 4 ? 'selected' : ''} data-latlong="22.6728735 , 113.57918"> 4 hari setelah loading</option>
                  <option value="5" ${value.location.id == 5 ? 'selected' : ''} data-latlong="18.239766 , 109.493064"> 8 hari setelah loading</option>
                  <option value="6" ${value.location.id == 6 ? 'selected' : ''} data-latlong="6.081354 , 107.694911"> 14 hari setelah loading</option>
                  <option value="7" ${value.location.id == 7 ? 'selected' : ''} data-latlong="-1.862565 , 107.488129"> 20 hari setelah loading ( Kalau delay vessel ) </option>
                  <option value="8" ${value.location.id == 8 ? 'selected' : ''} data-latlong="-6.940633 , 110.426676"> Port Indonesia ( Semarang, Surabaya, Cikarang)</option>
                </select>
              </div>
              <div class="col-1 pr-0">
                <button class="btn btn-danger btn-sm" onclick="removeContainerStatus('${id_row}')"><i class="icon-x"></i></button>
              </div>
            </div>
            `;
                // backup options
                // <option value="0" ${value.location.id == 0 ? 'selected' : ''}>Ocean</option>
                // <option value="1" ${value.location.id == 1 ? 'selected' : ''}>Lokasi Awal</option>
                // <option value="2" ${value.location.id == 2 ? 'selected' : ''}>Lokasi Tujuan</option>
                

                // Single picker
                // $('.daterange-single').daterangepicker({
                //   singleDatePicker: true,
                //   timePicker: true,
                //   locale: {
                //     format:'YYYY-MM-DD HH:II:SS'
                //   }
                // });

                // Single picker
              $('.daterange-single').daterangepicker({
                  singleDatePicker: true,
                  locale: {
                      format: 'YYYY-MM-DD'
                  }
              })

              // document.getElementById("btndemo"+id_row).addEventListener("click", buttondatetime, false);

              id_row++;
          });

          $("#input_status").html(html);
          var $select = $('.form-control-select2').select2();
      } else {

          $("#lokasi_awal_pelabuhan").val('');
          $("#lokasi_awal_kota").val('');
          $("#lokasi_awal_negara").val('');
          $("#lat_awal").val('');
          $("#long_awal").val('');

          //Edit Lokasi Tujuan
          $("#lokasi_tujuan_pelabuhan").val('');
          $("#lokasi_tujuan_kota").val('');
          $("#lokasi_tujuan_negara").val('');
          $("#lat_tujuan").val('');
          $("#long_tujuan").val('');

          //Edit Lat Long
          $("#lat_container").val('');
          $("#long_container").val('');

          $("#input_status").html('');
      }

    }

    function buttondatetime(idrow){
      console.log(idrow)
      $('#ButtonCreationDemoInput'+idrow).AnyTime_noPicker().AnyTime_picker().focus();
    }

    function removeContainerStatus(id_row){
      $("#row_"+id_row).remove();
    }

    /*##################*/
    /*## Edit Sealine ##*/
    /*##################*/
    function editSCAC(no_container, scac){
      $("#container_name").html(no_container);
      $("#container_number").val(no_container);
      $("#scac").val(scac).trigger('change');
      // $("#scac").select2().select2('val', scac);
      // $('#scac').select2('destroy').val(scac);
    }

    /*##########################*/
    /*## MAP Posisi Container ##*/
    /*##########################*/
    $(document).ready(function(){

      var $select = $('.form-control-select2').select2();

      //Element Map
      var infowindow;
      var map_kapal = document.getElementById('map_kapal');

      //Set Posisi Tengah
      var center_position = new google.maps.LatLng(14.057510, 114.134881);

      // Options
    	var mapOptions = {
    		zoom: 4,
    		center: center_position
    	};

      var locations = [
    		@foreach($container_positions as $container_position)
    			[ '{{$container_position['container_name']}}', {{$container_position['lat']}}, {{$container_position['long']}} ],
    		@endforeach
    	];

      // Apply options
    	var map = new google.maps.Map(map_kapal, mapOptions);
    	var contentString = 'Eva Track';

    	// Add info window
    	infowindow = new google.maps.InfoWindow({
    		content: contentString
    	});

      // Add marker
    	var i;

    	for (i = 0; i < locations.length; i++) {

        var iconImage = {
          url: "https://maps.google.com/mapfiles/ms/micons/sailing.png"
        }

    		var marker = new google.maps.Marker({
    			position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    			map: map,
    			icon: iconImage,
          title: locations[i][0]
    		});

        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);

    		google.maps.event.addListener(marker, 'click', (function(marker, i) {
    			return function() {
      			infowindow.setContent(locations[i][0]);
      			infowindow.open(map, marker);
    			}
    		})(marker, i));

    	}

    });

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

		// check all item in datatable
        $('#all_deliver').on("change", function(){
            let check = $(this).is(":checked");
            let $deliver = $('.checked_deliver');

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

		$('#btn-backwarecina').on('click', function(e) {
			var form = document.getElementById('form1a');
			var url1 = $('#containercinaurl').val();
			var url2 = $("#hrefbackwarecina").val();
			let len = 0;
			let allcheck =$('#all_deliver');
            $('.checked_deliver:checked').each(function () {
                len = len+1;
            });

            if(len == 0){
				e.preventDefault()
				new PNotify({
	                title: 'Error',
	                text: 'Silahkan cek container terlebih dahulu.',
	                icon: 'icon-blocked',
	                type: 'error'
	            });
            } else {
				console.log(url2)
				$("#form1a").attr("action", url2);
				$('#btn-backwarecina').attr('disabled', 'disabled')
				$('#btn-deliver').attr('disabled', 'disabled')
				$('#btn-port').attr('disabled', 'disabled')
				$('#btn-undoport').attr('disabled', 'disabled')
				$('#btn-delay').attr('disabled', 'disabled')
				// return false;
				form.submit()
            }
		})

		$('#btn-port').on('click', function(e) {
			var form = document.getElementById('form1a');
			var url1 = $('#containercinaurl').val();
			var url2 = $("#hrefport").val();
			let len = 0;
			let allcheck =$('#all_deliver');
            $('.checked_deliver:checked').each(function () {
                len = len+1;
            });

            if(len == 0){
				e.preventDefault()
				new PNotify({
	                title: 'Error',
	                text: 'Silahkan cek container terlebih dahulu.',
	                icon: 'icon-blocked',
	                type: 'error'
	            });
            } else {
				console.log(url2)
				$("#form1a").attr("action", url2);
				$('#btn-backwarecina').attr('disabled', 'disabled')
				$('#btn-deliver').attr('disabled', 'disabled')
				$('#btn-undoport').attr('disabled', 'disabled')
				$('#btn-delay').attr('disabled', 'disabled')
				// return false;
				form.submit()
            }
		})

		$('#btn-undoport').on('click', function(e) {
			var form = document.getElementById('form1a');
			var url1 = $('#containercinaurl').val();
			var url3 = $("#undohrefport").val();
			let len = 0;
			let allcheck =$('#all_deliver');
            $('.checked_deliver:checked').each(function () {
                len = len+1;
            });

            if(len == 0){
				e.preventDefault()
				new PNotify({
	                title: 'Error',
	                text: 'Silahkan cek container terlebih dahulu.',
	                icon: 'icon-blocked',
	                type: 'error'
	            });
            } else {
				console.log(url3)
				$("#form1a").attr("action", url3);
				$('#btn-backwarecina').attr('disabled', 'disabled')
				$('#btn-port').attr('disabled', 'disabled')
				$('#btn-deliver').attr('disabled', 'disabled')
				$('#btn-delay').attr('disabled', 'disabled')
				// return false;
				form.submit()
            }
		})

		$('#btn-delay').on('click', function(e) {
			e.preventDefault()
			var form = document.getElementById('form1a');
			var url1 = $('#containercinaurl').val();
			var url2 = $("#hrefdelay").val();
			let len = 0;
			let allcheck =$('#all_deliver');
            $('.checked_deliver:checked').each(function () {
                len = len+1;
            });

            if(len == 0){

				new PNotify({
	                title: 'Error',
	                text: 'Silahkan cek container terlebih dahulu.',
	                icon: 'icon-blocked',
	                type: 'error'
	            });
            } else {
				console.log(url2)
				$("#form1a").attr("action", url2);
				$('#btn-backwarecina').attr('disabled', 'disabled')
				$('#btn-deliver').attr('disabled', 'disabled')
				$('#btn-undoport').attr('disabled', 'disabled')
				$('#btn-port').attr('disabled', 'disabled')
				$('.formdelay').show()
				// return false;
				// form.submit()
            }
		})

		$('#btn-delay-cancel').on('click', function(e) {
			e.preventDefault()
			$('.formdelay').hide()
			var url1 = $('#containercinaurl').val();
			$("#form1a").attr("action", url1);

			$('#btn-delay').attr('disabled', 'disabled')
			$('#all_deliver').prop('checked', false);
			$('.checked_deliver').prop('checked', false);
		})

		// PREVENT NULL CHECKBOX
        $(document).on('change', '#all_deliver, .checked_deliver', function() {
            let len = 0;
			// console.log(hrefport)
			let allcheck =$('#all_deliver');
            $('.checked_deliver:checked').each(function () {
                len = len+1;
            });

            if(len > 0){
                $('#btn-backwarecina').removeAttr('disabled')
                $('#btn-port').removeAttr('disabled')
                $('#btn-undoport').removeAttr('disabled')
                $('#btn-deliver').removeAttr('disabled')
				$('#btn-delay').removeAttr('disabled')
            } else {
				allcheck.prop('checked', false);
                $('#btn-backwarecina').attr('disabled', 'disabled')
                $('#btn-port').attr('disabled', 'disabled')
                $('#btn-undoport').attr('disabled', 'disabled')
                $('#btn-deliver').attr('disabled', 'disabled')
				$('#btn-delay').attr('disabled', 'disabled')
				$('.formdelay').hide()
            }
        })

		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: 150,
		                targets: [ 0,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();
		        }
		    }
		}();

    //Komponen Datetime Picker
    var DateTimePickers = function() {

    		var _componentDaterange = function() {
    			if (!$().daterangepicker) {
    				console.warn('Warning - daterangepicker.js is not loaded.');
    				return;
    			}
    			// // Single picker
    			// $('.daterange-single').daterangepicker({
          //   timePicker : true,
          //   singleDatePicker: true,
    			// 	locale: {
          //               format:'YYYY-MM-DD HH:MM:SS'
          //           }
    			// });

          // Single picker
          $('.daterange-single').daterangepicker({
                singleDatePicker: true,
                locale: {
                    format: 'YYYY-MM-DD'
                }
            })

    		};

            // Anytime picker
            var _componentAnytime = function() {
                if (!$().AnyTime_picker) {
                    console.warn('Warning - anytime.min.js is not loaded.');
                    return;
                }

                // Basic usage
                $('#anytime-date').AnyTime_picker({
                    format: '%W, %M %D in the Year %z %E',
                    firstDOW: 1
                });

                // On demand picker
                $('.ButtonCreationDemoButton').on('click', function (e) {
                    $('#ButtonCreationDemoInput').AnyTime_noPicker().AnyTime_picker().focus();
                    e.preventDefault();
                });


            };

    		return {
    			init: function() {
    				_componentDaterange();
    				// _componentPickadate();
    				// _componentPickatime();
    				_componentAnytime();
    			}
    		}
    	}();

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

		document.addEventListener('DOMContentLoaded', function() {
		    DatatableBasic.init();
		});
	</script>
	<script type="text/javascript">
		$( document ).ready(function() {

			var warehouseTable = $('#table_warehouse').DataTable({
        serverside: true,
        processing: true,
        scrollX: true,
        ajax: {
          url: "/delivercina",
          method: "GET",
          beforeSend: function () {
							$('.datatable-basic > tbody').html(
								'<tr class="odd">' +
								'<td valign="top" colspan="100%" class="dataTables_empty"><div class="spinner-border text-success" role="status"><span class="sr-only">Loading...</span></div></td>' +
								'</tr>'
							);
						},
        },
        columns: [
          {
            data: "checkbox",
            name: "checkbox"
          },
          {
            data:'DT_RowIndex', 
            name:'no',
          },
          {
            data: "logo_container",
            name: "logo_container"
          },
          {
            data: "number_container",
            name: "number_container",
          },
          {
            data: "jumlah",
            name: "jumlah"
          },
          {
            data: "first_location",
            name: "first_location"
          },
          {
            data: "destination",
            name: "destination"
          },
          {
            data: "status_container",
            name: "status_container"
          },
          {
            data: "status",
            name: "status"
          },
          {
            data: "shipping_to",
            name: "shipping_to"
          },
          {
            data: null,
            name: null,
            render: (data, type, row) => {
              const role = '{{in_array(\Auth::user()->role,[12,15])}}'
              if(data?.no_container){
                let buttonGroup = '<div class="btn-group" role="group">';
                if(!role){
                  buttonGroup = buttonGroup + `<a href="#" onclick="updateInfo('${data?.no_container}', '${data?.sealine}', '${data?.eta}')"
                                  data-toggle="modal"
                                  data-target="#modal_container_info"
                                  class="mr-1"
                                >
                                  <button type="button" class="btn btn-light btn-icon">
                                    <i class="icon-pencil" title="Edit"></i>
                                  </button>
                                </a>`
                }
                return buttonGroup + `<a href="/delivercina/id?q=${encodeURI(data?.no_container)}">
                                <button type="button" class="btn btn-light btn-icon"><i class="icon-eye" title="Show"></i></button>
                              </a>
                </div>`;
              }else{
                return '<p>No. Container Kosong!</p><br/> <a class="btn btn-warning" href="{{url('backtostuffcina')}}"><i class="icon-undo mr-1"></i> Kembalikan ke Stuffing China</a>'
              }
            }
          }
        ]
      });

            $('#form1a').on('submit', function(){
                var form = this;

                // Iterate over all checkboxes in the table
                warehouseTable.$('input[type="checkbox"]').each(function(){
                    // If checkbox doesn't exist in DOM
                    if(!$.contains(document, this)){
                        // If checkbox is checked
                        if(this.checked){
                            // Create a hidden element
                            $(form).append(
                            $('<input>')
                                .attr('type', 'hidden')
                                .attr('name', this.name)
                                .val(this.value)
                            );
                        }
                    }
                });

            });

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

            $("#checkbox_field").css({"width":"10px"});
		});
	</script>

  <script>

document.addEventListener('DOMContentLoaded', function() {
    DateTimePickers.init();
});

</script>
@endsection