@extends('layouts.layout')

@section('content')
<style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 300px;
        
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        //height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
       // position: absolute;
        //top: 10px;
        //left: 25%;
        z-index: 5;
        background-color: #fff;
       //padding: 5px;
        //border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        //line-height: 30px;
       // padding-left: 10px;
      }
      #floating-panel {
        //position: absolute;
       // top: 5px;
       // left: 50%;
       // margin-left: -180px;
        width: 350px;
        z-index: 5;
        background-color: #fff;
       // padding: 5px;
        //border: 1px solid #999;
      }
      #latlng {
        width: 225px;
      }
    </style>
 <!-- morris.css CHARTS -->
<link href="{{ URL::asset('bower_components/morris.js/morris.css') }}" type="text/css" rel="stylesheet"/>

 <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
          <a href="/display/{{ $url }}">
	        {{ ucwords(str_replace('_', ' ', $url)) }}
	      </a>
        <small>Version 2.0</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> SysManager</a></li>
        <li class="active"><a href="{{ route('display.url', ['url' => $url]) }}">{{ ucwords(str_replace('_', ' ', $url)) }}</a></li>
      </ol>
    </section>
 

<!-- Main content -->
    <section class="content">
        
        <div class="btn-group">
            <!--<a href="{{ route('form.url', ['url' => $url]) }}"><button type="button" class="btn bg-maroon btn-flat margin">Add</button></a>
            <a href=""><button type="button" class="btn bg-purple btn-flat margin">Export</button></a>-->
        <!--     <button type="button" class="btn bg-navy btn-flat margin">.btn.bg-navy.btn-flat</button>
                <button type="button" class="btn bg-orange btn-flat margin">.btn.bg-orange.btn-flat</button>
                <button type="button" class="btn bg-olive btn-flat margin">.btn.bg-olive.btn-flat</button> -->
        </div>
      <!-- /.row -->
      
      
      
      
      <div class="row">
        <div class="col-md-12">
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">Advance Search - Reporting </h3>
              
              <!-- MODULE ADD BUTTON -->
               @if($moduleaddButton == '1') 
               <a href="{{ route('form.url', ['url' => $url]) }}"><button type="button" class="btn btn-xs bg-maroon btn-flat margin">Add</button></a>
               @endif
                <!-- END OF MODULE ADD BUTTON -->
                
                
                
             <!-- DROP DOWN FOR ADMIN ONLY -->   
             <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <div class="btn-group">
                  <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-wrench"></i></button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a target="_blank"  href="{{ route('form.edit', ['url' => 'site_modules', 'id' => $module_id] ) }}">Setup</a></li>
                    <li><a href="#">Another action</a></li>
                    <li class="divider"></li>
                    <li><a href="#"></a></li>
                  </ul>
                </div>
                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
              </div>
                 <!-- END OF DROP DOWN FOR ADMIN ONLY -->
                
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <div class="row">
                <div class="col-md-12">
                  <p class="text-left">
                    <!--<strong>Advance Search</strong>-->
                  </p>
                  <div class="advance">
                      
                      
                      
                      <!-- BEGINNING OF SEARCH FORM -->
                      <form action="" method="GET" name="formGet">
                                          
                  </form>
                      
                   <!-- END OF SEARCH FORM -->    
                      
                      
                  </div>
                </div>
              
              </div>
              <!-- /.row -->
            </div>
            
           
      </div>
      <!-- /.row -->
      
      
    <form name="processPost"  id="processPost" action="{{ route('modules.push', ['url' => $url]) }}" method="POST"/>
      <div class="row">
        <div class="col-xs-12">
          <div class="box" style="padding:10px">
           
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
               
              <table id="example1" class="table table-bordered table-hover">
                   <thead style="background-color: darkslategray;color: azure;font-size: 14px;">
                <tr>
			  <th><input value="" type="checkbox" name="select_all" id="select_all"/> ID</th> <th></th> <th>Action</th>               
                   
                </tr>
               
                 </thead>
                        
                       <tbody id="contract_list">
 			  			  
			  
              <!--</tbody>-->
                
               
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
      </div>
             <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
             <input type="hidden" name="url" id="url" value="{{ $url }}">
             
               <button id="download_button" name="download_button" class="btn btn-sm btn-info">Download Report</button>&nbsp;&nbsp;<button id="moduleAppr" name="moduleAppr" class="btn btn-sm btn-primary">Verify</button>&nbsp;&nbsp;<button id="moduleUnitappr" name="moduleUnitappr" class="btn btn-sm btn-warning">Approve</button>&nbsp;&nbsp;<button id="update_items_in_bulk" name="update_items_in_bulk" class="btn btn-sm btn-warning">Update Bulk</button>&nbsp;&nbsp;<button id="modulePayment" name="modulePayment" class="btn btn-sm btn-danger">Confirm Payment</button>&nbsp;&nbsp;<button id="moduleConfirm" name="moduleConfirm" class="btn btn-sm btn-danger">Confirm</button>&nbsp;&nbsp;<button id="module_expense_pro" name="module_expense_pro" class="btn btn-sm btn-danger">Push For Payment</button>&nbsp;&nbsp;<button id="modulecancel" name="modulecancel" class="btn btn-sm btn-warning">Cancel</button>&nbsp;&nbsp;<button id="module_requisition" name="module_requisition" class="btn btn-sm btn-info">Create Requisition</button>&nbsp;&nbsp;<input class="datepicker" type="date" name="invoice_date" id="invoice_date" value=""> <button id="module_invoice_item" name="module_invoice_item" class="btn btn-sm btn-info">Invoice Items</button>&nbsp;&nbsp;<button id="module_reversal" name="module_reversal" class="btn btn-sm btn-danger">Reverse</button>&nbsp;&nbsp; 
      
    </form>
      
      
    </section>


<script src="{{ URL::asset('js/global.js') }}"></script>
<!--<script src="{{ URL::asset('js/search.js') }}"></script>-->
<!-- morris.js CHARTS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="{{ URL::asset('bower_components/morris.js/morris.js' ) }}"></script>
 <script type="text/javascript">
  $(function () {
    "use strict";

    // AREA CHART
/*
    var area = new Morris.Area({
      element: 'revenue-chart',
      resize: true,
      data: [
        {y: '2011 Q1', item1: 2666, item2: 2666},
        {y: '2011 Q2', item1: 2778, item2: 2294},
        {y: '2011 Q3', item1: 4912, item2: 1969},
        {y: '2011 Q4', item1: 3767, item2: 3597},
        {y: '2012 Q1', item1: 6810, item2: 1914},
        {y: '2012 Q2', item1: 5670, item2: 4293},
        {y: '2012 Q3', item1: 4820, item2: 3795},
        {y: '2012 Q4', item1: 15073, item2: 5967},
        {y: '2013 Q1', item1: 10687, item2: 4460},
        {y: '2013 Q2', item1: 8432, item2: 5713}
      ],
      xkey: 'y',
      ykeys: ['item1', 'item2'],
      labels: ['Item 1', 'Item 2'],
      lineColors: ['#a0d0e0', '#3c8dbc'],
      hideHover: 'auto'
    });
*/

    // LINE CHART
/*
    var line = new Morris.Line({
      element: 'line-chart',
      resize: true,
      data: [
        {y: '2011 Q1', item1: 2666},
        {y: '2011 Q2', item1: 2778},
        {y: '2011 Q3', item1: 4912},
        {y: '2011 Q4', item1: 3767},
        {y: '2012 Q1', item1: 6810},
        {y: '2012 Q2', item1: 5670},
        {y: '2012 Q3', item1: 4820},
        {y: '2012 Q4', item1: 15073},
        {y: '2013 Q1', item1: 10687},
        {y: '2013 Q2', item1: 8432}
      ],
      xkey: 'y',
      ykeys: ['item1'],
      labels: ['Item 1'],
      lineColors: ['#3c8dbc'],
      hideHover: 'auto'
    });
*/

    //DONUT CHART
/*
    var donut = new Morris.Donut({
      element: 'sales-chart',
      resize: true,
      colors: ["#3c8dbc", "#f56954", "#00a65a"],
      data: [
        {label: "Download Sales", value: 12},
        {label: "In-Store Sales", value: 30},
        {label: "Mail-Order Sales", value: 20}
      ],
      hideHover: 'auto'
    });
*/
    
    //BAR CHART
    var bar = new Morris.Bar({
      element: 'bar-chart',
      resize: true,
      data: {{ preg_replace('/`([^`]+)`\s*:\s*/', '$1:', str_replace('"', '`', json_encode($barchartData))) }},
      barColors: ['#00a65a', '#f56954'],
      xkey: 'y',
      ykeys: ['a', 'b'],
      labels: ['{{ $barchart_titles_1 }}', '{{ $barchart_titles_2 }}'],
      hideHover: 'auto'
    });
  });
  
  
  $('form#processPost').submit(function() {
      
      $('#update_items_in_bulk').click(function(){ 
        //update_items_in_bulk check
            var c = '';
            if($('.checkbox').is(":checked") && $('#update_items_in_bulk').prop( "name" ) == 'update_items_in_bulk'){
                var c = '';
                var update_items = '';
                //alert(' change boxes for '+ update_items);
                var selectedItems = [];
                $.each($(".checkbox:checked"), function(){
                    selectedItems.push($(this).val());
                });
                //alert("selected items: " + selectedItems.join(", "));
                
                var update_itemsArr = update_items.split(',');
                //alert(selectedItems.length);
                for(irr = 0; irr <= selectedItems.length; irr++){
                      //alert(selectedItems[irr]);
                    $.each(update_itemsArr, function( index, value ) {
                       
                            //chkval = $('.'+$.trim(value)).closest("tr").find(".checkbox:checked").val();
                            chkval = selectedItems[irr];
                            var curVal  = $('#'+$.trim(value)+chkval).html();
                            
                            $('#'+$.trim(value)+chkval).html('<input style="width:100px" name="'+$.trim(value)+chkval+'" value="'+curVal+'" class="'+$.trim(value)+'"  />');
                       
                    });
                }
                $('#update_items_in_bulk').attr( "name", 'save_update_items_in_bulk');
                $("#update_items_in_bulk").html("Save Changes");
                //$('#update_items_in_bulk').hide();
                
                return false;
            }
            else{
                var c = '';
                //alert('submit boxes');
                //return false;
            }
        });
    
        var c = confirm("Are you sure?");
        return c;
    });

 //select all checkboxes
$("#select_all").change(function(){  //"select all" change
    var status = this.checked; // "select all" checked status
    $('.checkbox').each(function(){ //iterate all listed checkbox items
        this.checked = status; //change ".checkbox" checked status
    });
});

//uncheck "select all", if one of the listed checkbox item is unchecked
$('.checkbox').change(function(){ //".checkbox" change
    if(this.checked == false){ //if this item is unchecked
        $("#select_all")[0].checked = false; //change "select all" checked status to false
    }
});

</script>



<script>
   var actionStartpricecon =   GLOBALS.appRoot + "confirm/firstvehiclesub";
//BEGINNING OF MODAL FOR ACCOUNT PAYABLE
$('.confirmTrip').click(function (e) {
     var dataid = $(this).attr('id');
    
    if(dataid == ""){
         toastr.error("Important Variable to process request missing, Contact IT");
         return;
    }else{
        
       $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });

          $.post(actionStartpricecon, {dataid: dataid}, function (data) {
             if(data.status === 200){
                 toastr.success("Vehicle Successfully Confirmed");
                  setTimeout(function () { window.location.reload(1); });
             }else{
                 toastr.error("Error Confirming Request");
            
             }
          })
   
      
    }
	
});

</script>


  <script type="text/javascript" language="javascript">

              /*      
              
                  $(function () {
          $('#example1').DataTable()
         
    });
              $(function () {
                     var url = document.querySelector('#url').value;
                    
                    let server_side_model = GLOBALS.appRoot + "index/vessel_data"+ url;
                            load_data();
                            function load_data(data){
                            var dataTable = $('#example2').DataTable({
                                    "processing" : true,
                                    "serverSide" : true,
                                    "order" : [],
                                    "ajax" : {
                                    url: server_side_model,
                                            type : "GET",
                                            data : {data : data}

                                    },
                                    "columnDefs" : [{
                                    "targets" : [2],
                                            "orderable" : false,
                                    }]

                            });
                            }
                    });    
                    */
      </script>    
<script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: , lng: }
        });
        var geocoder = new google.maps.Geocoder;
        var infowindow = new google.maps.InfoWindow;

        //document.getElementById('submit').addEventListener('click', function() {
          geocodeLatLng(geocoder, map, infowindow);
        //});
      }

      function geocodeLatLng(geocoder, map, infowindow) {
        //var input = ,;//document.getElementById('latlng').value
        //var latlngStr = input.split(',', 2);
        var latlng = {lat: , lng: };
        geocoder.geocode({'location': latlng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {
              map.setZoom(11);
              var marker = new google.maps.Marker({
                position: latlng,
                map: map
              });
              infowindow.setContent(results[0].formatted_address);
              infowindow.open(map, marker);
            } else {
              window.alert('No results found');
            }
          } else {
            window.alert('Geocoder failed due to: ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9qVoW7xO0AVyQwMry3w3tikKpCoNILjA&callback=initMap">
    </script>
    
@endsection