@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row-fluid">
        <!-- BEGIN PAGE TITLE & BREADCRUMB-->
        <h3 class="page-title">
            Site
        </h3>
        <ul class="breadcrumb">
            <li>
                <i class="icon-home"></i>
                <a href="#">Dashboard</a> 
                <i class="icon-angle-right"></i>
            </li>
            <li><a href="#">Masters</a><i class="icon-angle-right"></i></li>
            <li><a href="#">Site</a></li>
            
        </ul>
        <!-- END PAGE TITLE & BREADCRUMB-->
    </div>
    @if(Session::has('flash_message'))
        <div class="row-fluid">
        <div class="span12">
            <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('flash_message') }}</p>
        </div> 
        </div>   
    @endif
    <div class="row-fluid">
        <div class="span12">
            <div class="portlet box green">
                <div class="portlet-title">
                    <div class="caption"><i class="icon-globe"></i>Site Records</div>
                    <div class="tools">
                        <a href="javascript:;" class="reload"></a>
                        <a href="javascript:;" class="remove"></a>
                    </div>
                </div>
                <div class="portlet-body">
                	{!! Form::open(['method' => 'POST', 'route' => 'admin.tank.store','id'=>'ownodoreadingaddform','class' => 'form-vertical', 'novalidate' => 'novalidate'])  !!}
                	<div class="row-fluid">
			            <div class="span2">
			                <div class="control-group {{ $errors->has('site') ? 'error' : ''}}">
			                    <label class="control-label">{!! Html::decode(Form::label('site', 'Site <span class="required">*</span>', ['class' => 'col-md-2 control-label'])) !!}</label>
			                    <div class="controls">
			                    	<select id="ownSiteId" class="m-wrap span12" name="site" required>
	                                    <option value="" data-location="">Select Site</option>
	                                    @foreach($page_data['own_site_locations'] as $dt)
	                                        <option value="{{$dt->id}}" data-location="{{$dt->location}}">{{$dt->site}}</option>
	                                    @endforeach
	                                </select>
			                        {!! $errors->first('site', '<p class="help-block">:message</p>') !!}
			                    </div>
			                </div>
			            </div>
			            <div class="span2 d-none">
			                <div class="control-group text-center {{ $errors->has('location') ? 'error' : ''}}" style="margin-top: 21%;">
			                	<span id="locationValSpn" class="col-md-2"></span>
			                </div>
			            </div>
			            <div class="span2">
			            	<div class="clearfix">
				            	<div class="btn-group" style="margin-top: 23%;">
		                            <a href="#" class="btn green btn-sm" title="Add" data-toggle="modal" data-target="#myModal" style="margin-top: 39%;">
		                                <i class="icon-plus" aria-hidden="true"></i> Add
		                            </a>
		                        </div>
		                    </div>
			            </div>
			        </div>
			        <div class="row-fluid">
			        	<div class="span2">
			                <div class="control-group {{ $errors->has('date') ? 'error' : ''}}">
			                    <label class="control-label">{!! Html::decode(Form::label('date', 'Date <span class="required">*</span>', ['class' => 'col-md-2 control-label'])) !!}</label>
			                    <div class="controls">
			                    	{!! Form::date('date', null, ['class' => 'm-wrap span12', 'autocomplete' => 'off', 'required' => 'true']) !!}
			                        {!! $errors->first('site', '<p class="help-block">:message</p>') !!}
			                    </div>
			                </div>
			            </div>
			            <div class="span2">
			                <div class="control-group {{ $errors->has('site_num') ? 'error' : ''}}">
			                    <label class="control-label">{!! Html::decode(Form::label('capacity', 'Capacity <span class="required">*</span>', ['class' => 'col-md-2 control-label'])) !!}</label>
			                    <div class="controls">
			                    	{!! Form::number('capacity', null, ['class' => 'm-wrap span12', 'placeholder' => 'Capacity', 'required' => 'true']) !!}
			                        {!! $errors->first('capacity', '<p class="help-block">:message</p>') !!}
			                    </div>
			                </div>
			            </div>
			            <div class="span2">
			                <div class="control-group {{ $errors->has('fuel') ? 'error' : ''}}">
			                    <label class="control-label">{!! Html::decode(Form::label('fuel', 'Fuel <span class="required">*</span>', ['class' => 'col-md-2 control-label'])) !!}</label>
			                    <div class="controls">
			                    	{!! Form::select('fuel', ['' => 'Select Fuel', 'Petrol' => 'Petrol', 'Diesel' => 'Diesel'], null, ['class' => 'm-wrap span12', 'id' => 'fuelId', 'required' => 'true']) !!}
			                        {!! $errors->first('fuel', '<p class="help-block">:message</p>') !!}
			                    </div>
			                </div>
			            </div>
			            <div class="span2">
			                <div class="control-group {{ $errors->has('pump') ? 'error' : ''}}">
			                    <label class="control-label">{!! Html::decode(Form::label('pump', 'Pump', ['class' => 'col-md-2 control-label'])) !!}</label>
			                    <div class="controls">
			                    	{!! Form::select('pump', $page_data['own_pumps']->toArray(), null, ['class' => 'm-wrap span12 js-select-type-multiple', 'id' => 'pumpId', 'name' => 'pump[]', 'multiple' => 'multiple']) !!}
			                        {!! $errors->first('pump', '<p class="help-block">:message</p>') !!}
			                    </div>
			                </div>
			            </div>
			            <div class="span2">
		                    <div class="clearfix">
		                        <div class="btn-group">
		                        	<button class="btn green btn-sm" title="Add New Site" style="margin-top:21%"><i class="icon-plus" aria-hidden="true"></i> Add New Site</button>
		                        </div>
		                    </div>
		                </div>
			        </div>
			        {!! Form::close() !!}
			        <div class="row-fluid">
				        {!! Form::open(['method' => 'POST', 'route' => 'admin.tank.change_status','class' => 'form-vertical changeStatusForm', 'id' => 'changeStatusForm', 'novalidate' => 'novalidate'])  !!}
				        <input id="recId" type="hidden" name="id" value="">
				        <input id="changeStatusId" type="hidden" name="status" value="">
	                    <table class="table table-striped table-bordered table-hover table-full-width" id="sample_2">
	                        <thead>
	                            <tr>
	                                <th>Date</th>
	                                <th>Tank #</th>
	                                <th>Site</th>
	                                <th>Location</th>
	                                <th>Capacity</th>
	                                <th>Fuel</th>
	                                <th>Stock</th>
	                                <th>Pump</th>
	                                <th>Status</th>
	                                <th class="width-10">Action</th>
	                            </tr>
	                        </thead>
	                        <tbody>
	                            @foreach($site_list as $item)
	                                <tr>
	                                    <td>{{Helper::convert_to_ddmmyy($item->date)}}</td>
	                                    <td>{{ $item->tank }}</td>
	                                    <td>{{ $item->sitelocations->site }}</td>
	                                    <td>{{ $item->sitelocations->location }}</td>
	                                    <td>{{ $item->capacity }}</td>
	                                    <td>{{ $item->fuel }}</td>
	                                    <td>{{ number_format($item->stock,2) }}</td>
	                                    <td>{{ $item->pumps->count() }} <button type="button" class="btn green editBtnClass" data-id="{{encrypt($item->id)}}" data-value="{{$item->pumps->pluck('id')}}" style="padding: 2px 8px;"><i class="icon-edit" aria-hidden="true"></i></button></td>
	                                    <td>{{ ($item->status == 1) ? 'Active' : 'Inactive' }}</td>
	                                    <td class="width-10">
	                                    	 {!! ($item->status == 1) ? '<button type="button" class="btn red btn-padding status-change-btn" data-id="'. encrypt($item->id) .'" data-value="0">Inactive</button>' : '<button type="button" class="btn blue btn-padding status-change-btn"  data-id="'. encrypt($item->id) .'" data-value="1">Active</button>' !!} &nbsp;<a class="display-log-link" href="javascript:void(0)" data-value="{{ $item->tanklogs }}"><u>Log</u></a>
	                                    </td>
	                                </tr>
	                            @endforeach
	                        </tbody>
	                    </table>
	                    {!! Form::close() !!}
			        </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="myModal" class="modal span4 hide fade">
  {!! Form::open(['method' => 'POST', 'id'=>'ownsiteloactionaddform','class' => 'form-vertical', 'novalidate' => 'novalidate'])  !!}
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    <h3>Add Site/Location</h3>
  </div>
  <div class="modal-body">
  		<div class="row-fluid">
        	<div class="span6">
                <div class="control-group {{ $errors->has('site') ? 'error' : ''}}">
                    <label class="control-label">{!! Html::decode(Form::label('site', 'Site <span class="required">*</span>', ['class' => 'col-md-6 control-label'])) !!}</label>
                    <div class="controls">
                    	{!! Form::text('site', null, ['class' => 'm-wrap span12', 'autocomplete' => 'off', 'required' => 'true']) !!}
                        {!! $errors->first('site', '<p class="help-block">:message</p>') !!}
                    </div>
                </div>
            </div>
            <div class="span6">
                <div class="control-group {{ $errors->has('location') ? 'error' : ''}}">
                    <label class="control-label">{!! Html::decode(Form::label('location', 'Location <span class="required">*</span>', ['class' => 'col-md-6 control-label'])) !!}</label>
                    <div class="controls">
                    	{!! Form::text('location', null, ['class' => 'm-wrap span12', 'autocomplete' => 'off', 'required' => 'true']) !!}
                        {!! $errors->first('location', '<p class="help-block">:message</p>') !!}
                    </div>
                </div>
            </div>
        </div>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <button type="submit" id="saveOwnSiteLocation" class="btn blue mutltiple-doc-add-btn">Save</button>
  </div>
  {!! Form::close() !!}
</div>

<div id="myModal2" class="modal span8 hide fade" style="left: 25%;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    <h3>Log</h3>
  </div>
  <div class="modal-body">
  		<div class="row-fluid">
        	<table class="table table-bordered">
        		<thead>
        			<th>Date/Time</th>
        			<th>User</th>
        			<th>Pump Activity</th>
        			<th>Status</th>
        		</thead>
        		<tbody id="logTableBody">
        			
        		</tbody>
        	</table>
        </div>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
  </div>
</div>

<div id="myModal3" class="modal span4 hide fade">
	{!! Form::open(['method' => 'POST', 'id'=>'ownsitepumpupdateform','class' => 'form-vertical', 'route' => 'admin.tank.update_pump', 'novalidate' => 'novalidate'])  !!}
	<input id="tnkId" type="hidden" name="id" value="">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    <h3>Edit</h3>
  </div>
  <div class="modal-body">
  		<div class="row-fluid">
			<div class="span6">
		        <div class="control-group {{ $errors->has('pump') ? 'error' : ''}}">
		            <label class="control-label">{!! Html::decode(Form::label('pump', 'Pump <span class="required">*</span>', ['class' => 'col-md-2 control-label'])) !!}</label>
		            <div class="controls">
		            	{!! Form::select('pumpupd', $page_data['own_pumps']->toArray(), null, ['class' => 'm-wrap span12', 'id' => 'pumpUpdateId', 'name' => 'pump[]', 'multiple' => 'multiple']) !!}
		                {!! $errors->first('pump', '<p class="help-block">:message</p>') !!}
		            </div>
		        </div>
		    </div>
		</div>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <button type="submit" id="updateOwnSitePump" class="btn blue">Update</button>
  </div>
  {!! Form::close() !!}
</div>
@endsection

@section('script')
<script type="text/javascript">
	$(document).ready(function () {
	    $('.js-select-type-multiple').select2({
            placeholder: "Select Pump"
        });

        $('#ownsiteloactionaddform').validate({
        	highlight: function(element) {
                jQuery(element).closest('.control-group').addClass('error');
                jQuery(element).closest('.control-group').addClass('error');
            },
            unhighlight: function(element) {
                jQuery(element).closest('.control-group').removeClass('error');
            },
            errorElement: 'span',
            errorClass: 'help-block',
            focusInvalid: false, // do not focus the last invalid input
            ignore: "", // validate all fields including form hidden input
            errorPlacement: function (error, element) {
                if(element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
           },
	        submitHandler: function (form, event) {
	            event.preventDefault();
	            var ownsitelocationstore_url = "{{ route('transport.tracking_status.own.site_location_store') }}";
	            $('#saveOwnSiteLocation').val('Loading...');
	            $('#saveOwnSiteLocation').prop('disabled', true);
	            $.ajax({
	                url: ownsitelocationstore_url,
	                type: 'POST',
	                data: $('#ownsiteloactionaddform').serialize(),
	                headers: {
	                    'X-CSRF-TOKEN': '{{csrf_token()}}'
	                },
	                success: function (response) {
	                    if (response.status = 'success') {
	                        $('#saveOwnSiteLocation').prop('disabled', false);
	                        $('#saveOwnSiteLocation').val('Save');
	                        $('#ownSiteId').empty();
	                        html = '<option value="" data-location="">Select Site</option>';
	                        $.each(response.data, function( index, value ) {
	                            html = html + '<option value="'+value.id+'" data-location="'+value.location+'">'+value.site+'</option>';
	                        });
	                        $('#ownSiteId').html(html);
	                        alert(response.message);
	                        $('#myModal').modal('toggle');
	                    }
	                    else {
	                        alert(response.message);
	                        $('#myModal').modal('toggle');
	                    }
	                }
	            });
	        }
	    });

	    $("#ownodoreadingaddform").validate({
	        highlight: function(element) {
                jQuery(element).closest('.control-group').addClass('error');
            },
            unhighlight: function(element) {
                jQuery(element).closest('.control-group').removeClass('error');
            },
            errorElement: 'span',
            errorClass: 'help-block',
            focusInvalid: false, // do not focus the last invalid input
            ignore: "", // validate all fields including form hidden input
            errorPlacement: function (error, element) {
                if(element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
            },
	        submitHandler: function (form, event) {
	            event.preventDefault();
	            form.submit();
	        }
	    });

	    $("#myModal" ).on('hidden.bs.modal', function(){
			$('#site').val('');
			$('#location').val('');
		});

	});

	$(document).on('change', '#ownSiteId', function() {
        var location = $(this).find(':selected').data('location');

        if (location != '') {
            $('#locationValSpn').parent().parent().removeClass('d-none');
            $('#locationValSpn').text(location);
        }
        else
        {
            $('#locationValSpn').parent().parent().addClass('d-none');
            $('#locationValSpn').text('');
        }
    });
    $(document).on('click', '.status-change-btn', function() {
    	if (confirm('Are you sure want to change status?')) {
    		var id = $(this).data('id');
    		var status = $(this).data('value');
    		$('#recId').val(id);
    		$('#changeStatusId').val(status);
    		$(this).closest("form").submit();
    	}
    });

    $(document).on('click', '.display-log-link', function() {
    	var data = $(this).data('value');
    	var html = ''
    	$.each(data, function( index, value ) {

    		var status = (value.status == '1') ? 'Active' : 'Inactive';
    		html += '<tr>';
    		html += '<td>'+moment(value.created_at).format('DD/MM/YY HH:mm:ss a')+'</td>';
    		html += '<td>'+value.username+'</td>';
    		html += '<td>'+value.activity+'</td>';
    		html += '<td>'+status+'</td>';
		});

		$('#logTableBody').html(html);
		$('#myModal2').modal('toggle'); 
    });

    $(document).on('click', '.editBtnClass', function() {
    	var id = $(this).data('id');
    	var value = $(this).data('value');
    	$('#tnkId').val(id);
    	$('#pumpUpdateId').val(value);
    	$('#myModal3').modal('toggle'); 
    });
</script>
@endsection