@extends('layouts.master')


<style type="text/css">

.uploadProfileImage{
/*background: rgba(170, 201, 177, .7);*/
    height: 100px;
    width: 100px;
    margin: 0px auto;
    background-size: cover;
   /* border-radius: 50%;*/
    z-index: 2;
    overflow: hidden;
    border: 2px solid #fff;
    cursor: pointer;
}

  </style>


@section('content')
        <div class="right_col" role="main">
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>Manage Highway</h3>
              </div>
            </div>

            <div class="clearfix"></div>

            <div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <div class="clearfix"></div>
                      <div class="row">
                          {{ Form::open( array('url' => action('HighwayController@getHighway'), 'method'=>'post', 'id' => 'searchForm') ) }} 
                        <div class="col-md-4 form-group">
                          <div class="input-group" style="display:block;">
                          <input type="text" name="search_by" value="{{ Request::input('search_by') }}" class="form-control filters" placeholder="Search Highway Name" title="Search Highway Name ">
                          </div>
                        </div>
                         <div class="col-md-6 form-group">
                            {{ Form::submit('Search', ['id' => 'searchBtn', 'class' => 'btn btn-primary']) }}
                          </div>
                        <div class="col-md-2" align="right">
                            <div class="btn btn-primary pull-right" data-toggle = 'modal' data-target = '#addNew' style="border-radius:50px;"> <b>+</b> </div>							
                            <!-- <i class="fa fa-user-plus" style="cursor:pointer; font-size:30px;" data-toggle="modal" data-target="#addUser"> </i> -->
                        </div>
                        {{ Form::close() }}
                      </div>


                      {{-- START ALERT BLOCK --}}
					@if(Session::has('successMessage'))
						<div class="alert alert-success" role="alert">
							<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
							{!! html_entity_decode(session('successMessage')) !!}
						</div>
					@endif
					@if(Session::has('dangerMessage') || count($errors))
						<div class="alert alert-danger" role="alert">
							<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
							{!! html_entity_decode(session('dangerMessage')) !!}
							{{ $errors->first() }}
						</div>
					@endif
					{{-- END ALERT BLOCK --}}




                  </div>               
                </div>

            <table class="table table-striped" style=" font-size: 14px;">
              <thead>
              <tr>
                <th>Uid.</th>                              
                <th>Highway Name </th>               
                <th>Exit WB </th>               
                <th>Exit EB </th>               
                <th>Highway Image </th>               
                <th>Exit WB Image</th>
                <th>Exit EB Image</th>
                <th>Active</th>
              </tr>
              </thead>      
         
        
                @php
                  $n = "0";
               @endphp

            <tfoot>
            	@forelse($highWay as $hw)
            	<tr>
                <td> {{ ++$n }}</td>               
                 <td>{{ $hw->highway_name }}</td>
                 <td>{{ $hw->exit_wb }}</td>
                 <td>{{ $hw->exit_eb }}</td>
                 <td>
                  @if($hw->highway_image != '')
                 	<img src="{{ url('/storage/highway/'.$hw->highway_image) }}" style="width:70px; height: 45px;">
                  @else
  <img src="{{ url('images/logo/highway-route-66.png') }}" style="width:70px; height: 45px;">
                  @endif
                 </td>
                 <td>
                    @if($hw->exit_wb_image != '')
                 	<img src="{{ url('/storage/highway/'.$hw->exit_wb_image) }}" style="width:70px; height: 45px;">
                    @else
  <img src="{{ url('images/logo/highway-route-66.png') }}" style="width:70px; height: 45px;">
                  @endif
                 </td> 

                 <td>
                   @if($hw->exit_eb_image != '')
                 	<img src="{{ url('/storage/highway/'.$hw->exit_eb_image) }}" style="width:70px; height: 45px;">
                    @else
  <img src="{{ url('images/logo/highway-route-66.png') }}" style="width:70px; height: 45px;">
                  @endif
                 </td>
                 
                 <td>   

					<i class="fa fa-edit btn-success btn-sm" aria-hidden="true" title="Edit" data-toggle="modal" data-target="#editHighway-{{ $hw->id}}"></i>
					{!! html_entity_decode(link_to_route('admin-del-highway', '<i style="  margin-bottom: 3px; margin-right: 0px;" class="fa fa-trash-o btn btn-danger btn-sm" aria-hidden="true"></i>', [$hw->id], ['onclick' => 'return checkDelete()', 'title' => 'Delete'])) !!}  
                
          <!-- <i style="  margin-bottom: 3px; margin-right: 0px;" class="fa fa-trash-o btn btn-danger btn-sm" aria-hidden="true" title="Delete" onclick="checkDelete()"></i> -->
				
         
            @if($hw->status == 1)
                {!! html_entity_decode(link_to_route('admin-active-highway', '<i style=" margin-bottom: 2px;" class="fa fa-check btn btn-success btn-sm" aria-hidden="true"></i>', [$hw->id], [ 'onclick' => 'return checkInActive()', 'title' => 'Activate'])) !!}
            @elseif($hw->status == 0)
                {!! html_entity_decode(link_to_route('admin-inactive-highway', '<i style=" margin-bottom: 2px;" class="fa fa-times btn btn-danger btn-sm" aria-hidden="true"></i>', [$hw->id], [ 'onclick' => 'return checkActive()', 'title' => 'Deactivate'])) !!}                      
            @endif 
          <!-- <i style=" margin-bottom: 2px;" class="fa fa-check btn btn-success btn-sm" aria-hidden="true" title="Activate" onclick="checkInActive()"></i>                 -->
                 </td>  
                 </tr>




            
  {{-- START EDIT MODAL --}}
  <div class="modal fade" id="editHighway-{{$hw->id}}" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
    <div class="modal-dialog modal-md" role="document">
      <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>
          <center> <h4 class="modal-title" id="modalLabel">Edit Highway</h4>  </center>
        </div>
       
       <div class="modal-body">
        {{ Form::open(['route' => 'admin-edit-highway', 'files' => true]) }}

        <input type="hidden" name="hwId" value="{{ $hw->id}}">
        <div class="col-sm-4" style="margin-top:-6px;">  
          <label>Highway Name : </label>
        </div>
        <div class="col-sm-8" style="margin-top:-10px;">
            <input type="text" name="highwayName" value="{{ $hw->highway_name}}" class="form-control" placeholder=" Highway Name">             
        </div> 

        <div class="col-sm-4" style="margin-top:14px;">  
          <label>Exit WB : </label>
        </div>
        <div class="col-sm-8" style="margin-top:10px;">
            <input type="text" name="exitWB" value="{{ $hw->exit_wb}}" class="form-control" placeholder=" Exit WB">             
        </div>

        <div class="col-sm-4" style="margin-top:14px;">  
          <label>Exit EB : </label>
        </div>
        <div class="col-sm-8" style="margin-top:10px; margin-bottom:10px;">
            <input type="text" name="exitEB" value="{{ $hw->exit_eb}}" class="form-control" placeholder=" Exit EB">             
        </div>

         <div class="col-sm-4"  style="margin-top:14px;">  
          <label>Highway Image : </label>
        </div>            
    
        <div style="width:63.5%; margin-top:20px;" class="uploadProfileImage " onClick="javascript:document.getElementById('browse_image4').click();" align="left" title=" Browse Image"> 
        <img src="{{ url('/storage/highway/'.$hw->highway_image) }}" alt="" class="avtar4 img-responsive" style="height: 100px; width: 100px;" />
        </div>
        <input type="file" name="highwayImage" onChange="uploadProfileImage4(this);" style="height: 100px; width: 100px; margin-top: -98px; opacity: 0; cursor: pointer;">

        <div class="col-sm-4"  style="margin-top:14px;">  
          <label>Exit WB Image : </label>
        </div>
      
        <div style="width:63.5%; margin-top:10px;" class="uploadProfileImage" onClick="javascript:document.getElementById('browse_image5').click();" align="left" title=" Browse Image"> 
        <img src="{{ url('/storage/highway/'.$hw->exit_wb_image) }}" alt="" class="avtar5 img-responsive" style="height: 100px; width: 100px;" >
        </div>
        <input type="file" name="exitWBImage" onChange="uploadProfileImage5(this);" style="height: 100px; width: 100px; margin-top: -98px; opacity: 0; cursor: pointer;">

        <div class="col-sm-4"  style="margin-top:14px;">  
          <label>Exit EB Image : </label>
        </div>
       
        <div style="width:63.5%; margin-top:10px;" class="uploadProfileImage" onClick="javascript:document.getElementById('browse_image6').click();" align="left" title=" Browse Image"> 
        <img src="{{ url('/storage/highway/'.$hw->exit_eb_image) }}" alt="" class="avtar6 img-responsive" style="height: 100px; width: 100px;" />
        </div>
      <input type="file" name="exitEBImage" onChange="uploadProfileImage6(this);" style="height: 100px; width: 100px; margin-top: -98px; opacity: 0; cursor: pointer;">

        <div class="col-sm-10" align="center">
          {{ Form::submit('Save', ['class' => 'btn btn-primary', 'style' => 'width:14.5%; margin-top:10px;']) }}
        </div>        
        {{ Form::close() }}
        <br><br>
      </div>
      </div>
    </div>
  </div>
  {{-- END EDIT MODAL --}}  



                 @empty
                  <tr>  
                    <tr> <td colspan="8" class="text-center">No Records Found.</td> </tr>
                 </tr>
                 @endforelse            
                          
            </tfoot> 


    </table>


              </div>
            </div>
          </div>
        </div>





{{-- START ADD NEW LOAN MODAL --}}

  <!-- Modal -->
  <div class="modal fade" id="addNew" role="dialog">
    <div class="modal-dialog">    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
         <center> <h4 class="modal-title">Add Highway </h4>  </center>
        </div>
        
         <div class="modal-body" style="margin-bottom:-20px;">
        {{ Form::open(['route' => 'admin-add-highway', 'files' => true]) }}

        <div class="col-sm-4" style="margin-top:14px;">  
        	<label>Highway Name : </label>
        </div>
        <div class="col-sm-8" style="margin-top:10px;">
            <input type="text"  value="{{ old('highwayName') }}" name="highwayName" class="form-control" placeholder=" Highway Name" >             
        </div> 

        <div class="col-sm-4" style="margin-top:14px;">  
        	<label>Exit WB : </label>
        </div>
        <div class="col-sm-8" style="margin-top:10px;">
            <input type="text" value="{{ old('exitWB') }}"  name="exitWB" class="form-control" placeholder=" Exit WB" >             
        </div>

        <div class="col-sm-4" style="margin-top:14px;">  
        	<label>Exit EB : </label>
        </div>
        <div class="col-sm-8" style="margin-top:10px; margin-bottom:10px;">
            <input type="text" value="{{ old('exitEB') }}"  name="exitEB" class="form-control" placeholder=" Exit EB" >             
        </div>

        <div class="col-sm-4"  style="margin-top:14px;">  
        	<label>Highway Image : </label>
        </div>
          
       <div class="col-md-8">     
        <div style="width:63.5%; margin-left:-1px;" class="uploadProfileImage " onClick="javascript:document.getElementById('browse_image').click();" align="left" title=" Browse Image"> 
          <img src="{{ url('images/logo/highway-route-66.png') }}" alt="" class="avtar1 img-responsive" style="height: 100px; width: 100px;" />
        </div>
        <input type="file" name="highwayImage" value="{{ old('highwayImage') }}" onChange="uploadProfileImage1(this);" style="height: 100px; width: 100px; margin-top: -98px; opacity: 0; cursor: pointer;">

        </div>

        <div class="col-sm-4"  style="margin-top:14px;">  
        	<label>Exit WB Image : </label>
        </div>

        <div class="col-md-8">     
       <div style="width:63.5%; margin-left:-1px;" class="uploadProfileImage" onClick="javascript:document.getElementById('browse_image2').click();" align="left" title=" Browse Image"> 
          <img src="{{ url('images/logo/highway-route-66.png') }}" alt="" class="avtar2 img-responsive" style="height: 100px; width: 100px;" >
       </div>
          <input type="file" name="exitWBImage" onChange="uploadProfileImage2(this);" style="height: 100px; width: 100px; margin-top: -98px; opacity: 0; cursor: pointer;" >

       </div>

       <div class="col-sm-4"  style="margin-top:14px;">  
        	<label>Exit EB Image : </label>
        </div>

         <div class="col-md-8"> 
       <div style="width:63.5%; margin-left:-1px;" class="uploadProfileImage" onClick="javascript:document.getElementById('browse_image3').click();" align="left" title=" Browse Image"> 
          <img src="{{ url('images/logo/highway-route-66.png') }}" alt="" class="avtar3 img-responsive" style="height: 100px; width: 100px;" />
       </div>
          <input type="file" name="exitEBImage" onChange="uploadProfileImage3(this);" style="height: 100px; width: 100px; margin-top: -98px; opacity: 0; cursor: pointer;" >
       </div>

        <div class="col-sm-10" align="center">
          {{ Form::submit('Save', ['class' => 'btn btn-primary', 'style' => 'width:14.5%; margin-top:10px;']) }}
        </div>        
        {{ Form::close() }}
      </div>
    </div>
      
    </div>
  </div>
{{-- END ADD NEW LOAN MODAL --}}



@endsection



@push('jsCode')
<script type="text/javascript">


$.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
      }
    });

$(document).on('click', '.pagination li a', function(e){
  e.preventDefault();
  var url = $(this).attr('href');
  $('#searchForm').attr('action', url);
  console.log($('#searchForm').attr('action'));
  $('#searchForm').submit();
});

function checkInActive(){
  return confirm("Are you sure you want to Deactivate?");
}

function checkActive(){
  return confirm("Are you sure you want to Activate?");
}

function checkDelete(){
  return confirm("Are you sure you want to delete?");
}

$(document).ready(function(){
  disabledSearchBtn();
  
  $(document).on('change', '#searchForm select', function(){
    disabledSearchBtn();
  });
  
  $(document).on('keyup', '#searchForm input', function(){
    disabledSearchBtn();
  });
  
  function disabledSearchBtn(){
    var searchBtn = false;
    $('.filters').each(function(){
      if($(this).val() != ''){
        searchBtn = true;
        return true;
      }
    });
    
    if(searchBtn){
      $('#searchBtn').removeAttr('disabled');
    }
    else{
      $('#searchBtn').attr('disabled', true);
    }
  }
});


 function uploadProfileImage1(fileInput) {
    if (fileInput.files && fileInput.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $('.avtar1').attr('src', e.target.result);
      };
      reader.readAsDataURL(fileInput.files[0]);
    }
  }   


 function uploadProfileImage2(fileInput2) {
    if (fileInput2.files && fileInput2.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $('.avtar2').attr('src', e.target.result);
      };
      reader.readAsDataURL(fileInput2.files[0]);
    }
  }   


 function uploadProfileImage3(fileInput3) {
    if (fileInput3.files && fileInput3.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $('.avtar3').attr('src', e.target.result);
      };
      reader.readAsDataURL(fileInput3.files[0]);
    }
  }   


 function uploadProfileImage4(fileInput4) {
    if (fileInput4.files && fileInput4.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $('.avtar4').attr('src', e.target.result);
      };
      reader.readAsDataURL(fileInput4.files[0]);
    }
  }   

 function uploadProfileImage5(fileInput5) {
    if (fileInput5.files && fileInput5.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $('.avtar5').attr('src', e.target.result);
      };
      reader.readAsDataURL(fileInput5.files[0]);
    }
  }   

 function uploadProfileImage6(fileInput6) {
    if (fileInput6.files && fileInput6.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $('.avtar6').attr('src', e.target.result);
      };
      reader.readAsDataURL(fileInput6.files[0]);
    }
  }   




</script>
@endpush