@extends('admin.layout.app')

@section('more-head')
<link rel="stylesheet" type="text/css" href="{{asset('admin/bower_components/select2/dist/css/select2.min.css')}}">
<link rel="stylesheet" href="{{asset('admin/dist/css/AdminLTE.min.css')}}">
@endsection

@section('main-content')

<section class="content-header">
	<h1>
		TERMINAL MANAGEMENT SYSTEM
		
	</h1>

</section>

<section class="content">
     
     
	<!-- Default box -->
	<div class="box box-primary">
		<div class="box-header with-border">
			<h3 class="box-title">Cocoa Stuffing And Equipment Request Form Details</h3> <h3 class="pull-right">{{strtoupper($equipform->ref_no)}}</h3>

			<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">
			<div class=" col-md-6">
				<div class=" table-responsive">
					
					<table id="example3"  class="table table-striped  table-bordered table-condensed" style="width: 100%;" >
						<tbody>
						 <tr><th>CONTRACT INFO</th><th>DETAILS</th></tr> 
						 <tr><th>SD NUMBER</th><td>{{strtoupper($equipform->sd_number)}}</td></tr>
						 <tr><th>MK NUMBER</th><td>{{strtoupper($equipform->mk_number)}}</td></tr>
						 <tr><th>CONTRACT NUMBER</th><td>{{strtoupper($equipform->contract_no)}}</td></tr>
						 <tr><th>VESSEL</th><td>{{strtoupper($equipform->vessel->name)}}</td></tr>
						 <tr><th>MK NUMBER</th><td>{{strtoupper($equipform->mk_number)}}</td></tr>
						 <tr><th>LOADING PORT</th><td>{{strtoupper($equipform->loading_port)}}</td></tr>
						 <tr><th>DESTINATION</th><td>{{strtoupper($equipform->destination)}}</td></tr>
						 
						</tbody>
					</table>
					</div>

				</div>
				<div class=" col-md-6">
				  <div class=" table-responsive">
					<table class="table table-striped  table-bordered table-condensed" style="width: 100%;" id="tble" >
						<tbody>
							<tr><th>EQUIPMENT REQUEST</th><th>DETAILS</th></tr> 
							<tr><th>CONTAINER SIZE</th><td>{{strtoupper($equipform->container_size)}}</td></tr>
						 	<tr><th>QUANTITY IN TONNES</th><td>{{strtoupper($equipform->quantity)}}</td></tr>
						 	<tr><th>REACH STAKER</th><td>{{strtoupper($equipform->reachstacker)}} @if($equipform->reachstacker == NULL) NO  @endif</td></tr>
						 	<tr><th>TOPLIFTER</th><td>{{strtoupper($equipform->toplifter)}} @if($equipform->toplifter == NULL) NO  @endif</td></tr>
						 	<tr><th>FORKLIFT</th><td>{{strtoupper($equipform->forklift)}} @if($equipform->forklift == NULL) NO  @endif</td></tr>
						 	<tr><th>DATE REQUIRED</th><td>{{$equipform->date_required}}</td></tr>
						 	<tr><th>SHIPPING AGENT</th><td>{{$equipform->shipping_agent_name}}</td></tr>
						 	<tr><th>DATE CREATED</th><td>{{$equipform->requested_time}}</td></tr>
						</tbody>
					</table> 
					</div>

				</div>

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

 
 <div class="col-md-6">
	<div class="box box-info">
		<div class="box-header with-border">
			<h3 class="box-title">Add Various Types of Cocoa</h3> 
			<div class="form-group pull-right">
							<button type="button" id="ct-data-{{$equipform->id}}" value="{{$equipform->id}}" class="btn btn-flat bg-navy" data-toggle="modal" data-target="#modal-default">
								<i class="fa fa-fw fa-plus-circle"></i> Add Cocoa Type(s)
							</button>
						</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>
		 @include('includes.messages')
		<form role="form" method="post" action="{{ route('equipform.updateConfirmation',$equipform) }}" enctype="multipart/form-data">
		{{csrf_field()}} {{method_field('PUT')}}
			<div class="box-body">
				
				<div class="col-md-6">
					<div class="col-md-8 table-responsive">
						<div class="form-group">
							<div class="checkbox">
								<label><input type="checkbox" name="confirm_request" value="yes" @if($equipform->confirm_request == 'yes') checked @endif> Confirm Request </label>
							</div>
						</div>

						<div class="form-group">
							<label for="quantity_to_fulfill"> Quantity to Fulfill</label>
							<input type="number" class="form-control" id="quantity_to_fulfill" name="quantity_to_fulfill" placeholder="quantity_to_fulfill" value="{{$equipform->quantity_to_fulfill}}"> <br>
						</div>
						<div class="form-group">
							<label for="eta"> Estimated Time of Arrival</label>
							<input type="date" class="form-control" id="eta" name="eta" placeholder="date required" value="{{$equipform->eta}}" > <br>
						</div>

					</div>

				</div>
				

				
			</div>

			<!-- /.box-body -->
			<div class="box-footer">
				<button type="submit" class="btn btn-primary">Submit</button>
			</div>


		</form>
		
	</div>
</div>
<div class="col-md-6">
	<div class="box box-danger">
		<div class="box-header with-border">
			<h3 class="box-title">Remove Various Types of Cocoa</h3> 

			<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="example2" class="table table-bordered table-striped">
            <thead>
                <tr>
                  <th>No.</th>
                  <th>Type of Cocoa</th>
                  <th>DELETE</th>
              </tr>
          </thead>
          <tbody>

            @foreach ($cocoa_types as $cocoa_type)
            <tr>
                <td>{{$loop->index + 1}}.</td>
                <td>{{strtoupper($cocoa_type->type_name)}}</td>
                <td><form style="display: none;" id="form-data-{{$cocoa_type->id}}" action="{{route('equipform.destroyCocoaType',$cocoa_type->id)}}" method="post">{{csrf_field()}} {{method_field('DELETE')}}</form><button class="btn btn-flat btn-danger" onclick="if(confirm('wanna delete?')){event.preventDefault(); document.getElementById('form-data-{{$cocoa_type->id}}').submit();} else{ event.preventDefault();}"><i class="fa fa-fw  fa-trash"></i> DELETE</button></td>
                
            </tr>
            @endforeach
            
        </tbody>
        <tfoot>
            <tr>
              <th>No.</th>
              <th>Type of Cocoa</th>
              <th>DELETE</th>
          </tr>
      </tfoot>
  </table>
  
</div>


 </div>
</div>

			<div class="modal modal-default fade" id="modal-default">
              <div class="modal-dialog modal-md">
                <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">Select Type of Cocoa</h4>
                    </div>
                    <div class="modal-body">
                    	
                     <div class="form-group">

                     	<label for="cocoa_type"> Select Cocoa Type</label>
                     	<select id="cocoa_type-{{$equipform->id}}" class="form-control select2 required" data-placeholder="Select Cocoa Type"
                     	style="width: 100%;" name="cocoa_type">
                     	 <option value="0">Select Cocoa Type.</option>
                     	 <option @foreach ($cocoa_types as $cocoa_type) @if ($cocoa_type->type_name == 'Normal Cocoa') disabled @endif @endforeach value="Normal Cocoa">Normal Cocoa</option>
                     	 <option @foreach ($cocoa_types as $cocoa_type) @if ($cocoa_type->type_name == 'Normal Japan') disabled @endif @endforeach value="Normal Japan">Normal Japan</option>
                     	 <option @foreach ($cocoa_types as $cocoa_type) @if ($cocoa_type->type_name == 'Special Cocoa') disabled @endif @endforeach value="Special Cocoa">Special Cocoa</option>
                     	 <option @foreach ($cocoa_types as $cocoa_type) @if ($cocoa_type->type_name == 'LBC Japan') disabled @endif @endforeach value="LBC Japan">LBC Japan</option>

                       </select>

                    </div>
                    	
                    	


                </div>	
                      
                    <div class="modal-footer">
                    	<button type="button" class="btn btn-danger pull-left" id="add">Add</button>
                    </div>
                    
                  </div>
                  <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
              </div>

</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 src="{{asset('admin/bower_components/select2/dist/js/select2.full.min.js')}}"></script>
 <script>
  $(function () {
   
    $('.select2').select2();

    $('#example1').DataTable({'paging' : false})

    $('#example2').DataTable({
      'paging'      : false,
      'lengthChange': false,
      'searching'   : false,
      'ordering'    : false,
      'info'        : true,
      'autoWidth'   : true
    })

    

    $('#add').click(function(event){

            var cocoa_type = $('#cocoa_type-{{$equipform->id}}').val();
            var token = $('input[name=_token]').val();

            //alert(cocoa_type);

            if (cocoa_type == '0') {
            	event.preventDefault();
            	alert('Kindly Select the Type of Cocoa');
            	return false;	
            }
            else {

            $.post('{{route('addCocoaType',$equipform->id) }}', {cocoa_type : cocoa_type, '_token': $('input[name=_token]').val()}, 
            function(data) {
              //console.log(data); 
              window.location.reload(true);

            }); 
            	return true;
            }
    	


            
          });
    
   
  })
</script>

@endsection