@extends('admin.layout.app')

@section('more-head')
 <link rel="stylesheet" href="{{ asset('admin/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css') }}">
 <script src="{{ asset('admin/bower_components/jquery/dist/jquery.js') }}"></script>
@endsection

@section('main-content')
 <section class="content-header">
  <h1>
   Warehouse

  </h1>

 </section>

 <section class="content">

  <!-- Default box -->
  <div class="box">
   <div class="box-header with-border">
    <h3 class="box-title">warehouses</h3>
    <div class="col-lg-offset-5"><a href="{{ route('warehouse.create') }}" class="btn btn-success">Add warehouses</a></div>
    <div class="box-tools pull-right">
     <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
      <i class="fa fa-minus"></i></button>

    </div>
   </div>

   <div class="box-body table-responsive">
    <table id="example1" class="table-bordered table-striped table">
     <thead>
      <tr>
       <th>No.</th>
       <th>warehouse Name</th>
       <th>warehouse Code</th>
       <th>Traveling Time (in minutes)</th>
       <th>Take Over Center</th>
       <th>EDIT</th>
       {{-- <th>DELETE</th> --}}
       <th>VIEW MAP</th>
      </tr>
     </thead>
     <tbody>

      @foreach ($warehouses as $warehouse)
       <tr>
        <td>{{ $loop->index + 1 }}</td>
        <td>{{ strtoupper($warehouse->name) }}</td>
        <td>{{ strtoupper($warehouse->wcode) }}</td>
        <td>{{ strtoupper($warehouse->traveling_time) }}</td>
        <td>{{ strtoupper(optional($warehouse->port)->name) }}</td>
        <td><a href="{{ route('warehouse.edit', $warehouse) }}" class="btn btn-primary">EDIT</a></td>
        {{-- <td>
         <form style="display: none;" id="form-data-{{ $warehouse->id }}"
          action="{{ route('warehouse.destroy', $warehouse) }}" method="post">{{ csrf_field() }}
          {{ method_field('DELETE') }}</form><button class="btn btn-danger"
          onclick="if(confirm('wanna delete?')){event.preventDefault(); document.getElementById('form-data-{{ $warehouse->id }}').submit();} else{ event.preventDefault();}">DELETE</button>
        </td> --}}
        <td>
         {{ csrf_field() }}
         <button type="button" id="map-data-{{ $warehouse->id }}" value="{{ $warehouse->id }}" class="btn btn-info"
          data-toggle="modal" data-target="#modal-default"
          onclick="

                    var map_data = $('#map-data-{{ $warehouse->id }}').val();
                    var token = $('input[name=_token]').val();
                    //alert(map_data)
                         $.ajax({
                          type: 'POST',
                          url: '{{ route('get.image', $warehouse) }}',
                          data: {map_data: map_data, '_token': token},
                          success : function(data){
                           console.log(data);

                            $('#map_img').attr('src', data);
                          },
                          dataType: 'text'
                        });
                    ">
          View Map
         </button>
        </td>
       </tr>
      @endforeach

     </tbody>
     <tfoot>
      <tr>
       <th>No.</th>
       <th>warehouse Name</th>
       <th>warehouse Code</th>
       <th>Traveling Time (in minutes)</th>
       <th>Take Over Center</th>
       <th>EDIT</th>
       {{-- <th>DELETE</th> --}}
       <th>VIEW MAP</th>
      </tr>
     </tfoot>
    </table>

   </div>

   <!-- /.box-body -->
   <div class="box-footer">

    <div class="modal modal-default fade" id="modal-default">
     <div class="modal-dialog modal-lg">
      <div class="modal-content">
       <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
         <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">View Map</h4>
       </div>
       <div class="modal-body">
        <div class="col-md-offset-2"></div>
        <img src="" id="map_img" alt="Warehouse Plan" style="width: 1000px; height: 740px;max-width:100%; ">

       </div>
       <div class="modal-footer">
        <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Close</button>

       </div>

      </div>
      <!-- /.modal-content -->
     </div>
     <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
   </div>

  </div>

  </div>
  <!-- /.box -->

 </section>
@endsection

@section('more-scripts')
 <script src="{{ asset('admin/bower_components/datatables.net/js/jquery.dataTables.min.js') }}"></script>
 <script src="{{ asset('admin/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js') }}"></script>
 <script>
  $(function() {
   $('#example1').DataTable()

   //<img src="http://localhost:8000/storage/warehouses/AEntg91Fci15Moxbrkg7L0eadvQI63CC2qc8CiV3.png" style="width: 650px; height: 440px;max-width:100%; ">

  })
 </script>
@endsection