@extends('layouts.master')











<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>



 <script>

  $( function() {

    $( "#datepicker" ).datepicker();

  } );

  </script>

  <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 Route</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('PoiController@searchPoi'), '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 POI Name Small" title="Search POI Name Small ">

                  </div>

                </div>

                 <div class="col-md-6 form-group">

                    {{ Form::submit('Search', ['id' => 'searchBtn', 'class' => 'btn btn-primary']) }}

                  </div> -->

                <div class="col-md-12" align="right">

                  <a href="{{ url('admin-route') }}"  style="color:white;">

                    <div class="btn btn-primary pull-right" style="border-radius:50px; float: right;">

                       <b>+</b>

                    </div>							

                  </a>

                </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>ID.</th>                              

                <th>Route Internal Name </th>

                <th>State</th>

                <th>WB / EB</th>

                <th>Active</th>

              </tr>

              </thead>   



              @php

                  $n = "0";

               @endphp

             <tfoot>
              @if(isset($getroute))
             @foreach($getroute as $this_getroute)

              @php

                  $n ++;

               @endphp

              <tr>



                <td>{{ $n }}</td>               

                 <td>
                  @if(isset($this_getroute->route_internal_name) != '')
                   {{ $this_getroute->route_internal_name }}
                   @else(isset($this_getroute->route_name)) 
                   {{ $this_getroute->route_name }}  
                 @endif
               </td>

                 <td> @if(isset($this_getroute->states_value->state_long)) {{ $this_getroute->states_value->state_long }}@endif </td>

                 <td> @if(isset($this_getroute->wb_eb)) {{ $this_getroute->wb_eb }} @endif</td>

                 <td> <a href="?route_id={{ $this_getroute->id }}"  class="btn btn-info btn-xs edit-country"><i class="fa fa-pencil" aria-hidden="true"></i></a>


{!! html_entity_decode(link_to_route('admin-delete-route', '<i class="fa fa-times" aria-hidden="true"></i>', [$this_getroute->id], ['class' => 'btn btn-danger btn-xs', 'onclick' => 'return checkInActive()', 'title' => 'Delete'])) !!}


                 </td>

                {{-- START EDIT MODAL --}}

               @if(Request::get('route_id') == $this_getroute->id)

<script type="text/javascript">

  $(window).load(function(){        

   $('#viewroute-{{ $this_getroute->id }}').modal('show');

    }); 

</script>



               @endif

  <div class="modal fade" id="viewroute-{{$this_getroute->id}}" tabindex="-1" role="dialog" aria-labelledby="modalLabel">

    <div class="modal-dialog modal-md" role="document">

      <div class="modal-content" style=" width: 800px;">

        <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" id="modalLabel">Edit</h4>

        </div>



        <div class="modal-body">        

          

<div class="col-md-12">
 {{ Form::open(['route' => 'admin-edit-route', 'files' => true]) }}

<div class="col-md-6"> <b>Route Internal Name :</b>
    
 @if(isset($this_getroute->route_internal_name))
 <input type="text" name="route_internal_name" value="{{ $this_getroute->route_internal_name }}" class="form-control" placeholder=" "  >
@else
 <input type="text" name="route_internal_name" value="" class="form-control" placeholder=" "  >
   @endif
 </div>

  <div class="col-md-6"> <b>Route Name :</b>
     <input type="hidden" name="routeid" value="{{ $this_getroute->id }}" class="form-control" placeholder=""  >
 @if(isset($this_getroute->route_name))
 <input type="text" name="routeName" value="{{ $this_getroute->route_name }}" class="form-control" placeholder=" "  >
@else
 <input type="text" name="routeName" value="" class="form-control" placeholder=" "  >
   @endif</div>

  <div class="col-md-6"> <b>State :</b>

<select class="form-control" name="state" >
            <option value="">Select State</option>
            @forelse($states as $state)
            <option value="{{$state->id}}" @if($this_getroute->state == $state->id
            ) selected="selected" @endif >{{$state->state_long}}</option>
            @empty
            @endforelse
          </select> 

   </div>

  <div class="col-md-6"> <b>WB / EB :</b>

    <select class="form-control" name="wb" >
            <option value=""> Select </option>
            <option value="wb" @if($this_getroute->wb_eb == 'wb') selected="selected" @endif> WB </option>
            <option value="eb" @if($this_getroute->wb_eb == 'eb') selected="selected" @endif> EB </option>            
          </select> 
   </div>

  <div class="col-md-6"> <b>Description :</b>

 <textarea name="description" class="form-control" placeholder=" ">{{ $this_getroute->description }}</textarea>   
  

   </div>
<div class="col-md-12"></div>
  <div class="col-md-12"> <b>POIs (comma separated) :</b>

 <textarea name="poi_data" class="form-control" placeholder=" "  style="height: 260px;">{{ $this_getroute->route_make }}</textarea>   
  

   </div>





   <div class="col-md-6"> <b>Image Thumb :</b>

<div style="border: 1px solid #E6E9ED; margin-left: -1px;" class="uploadProfileImage" onClick="javascript:document.getElementById('browse_image').click();" align="left" title=" Browse Image"> 

          @if(is_null($this_getroute->image_thumb))

            <img src="{{  url('images/logo/plus.png') }}" alt="" class="avtar1 img-responsive" style="height: 100px; width: 100px;" />

            @else

            <img src="{{ url('storage/thumb/'.$this_getroute->image_thumb) }}" alt="" class="avtar1 img-responsive" style="height: 100px; width: 100px;" />

            @endif

       </div>

          <input type="file" name="imageThumb" value="" class="browse_image" id="browse_image" onChange="uploadProfileImage1(this);" style="height: 100px; width: 100px; margin-top: -98px; opacity: 0; cursor: pointer;">

   </div>

   <div class="col-md-6"> <b>Image Header :</b>

 <div style="border: 1px solid #E6E9ED; margin-left: -1px;" class="uploadProfileImage" onClick="javascript:document.getElementById('browse_image2').click();" align="left" title=" Browse Image"> 

          @if(is_null($this_getroute->imageHeader1))

            <img src="{{  url('images/logo/plus.png') }}" alt="" class="avtar2 img-responsive" style="height: 100px; width: 100px;" />

            @else

          <img src="{{ url('storage/header/'.$this_getroute->imageHeader1) }}" alt="" class="avtar2 img-responsive" style="height: 100px; width: 100px;" />

          @endif

       </div>

          <input type="file" name="imageHeader1" class="browse_image2" id="browse_image2" onChange="uploadProfileImage2(this);" style="height: 100px; width: 100px; margin-top: -98px; opacity: 0; cursor: pointer;">

   </div>









</div>
<center>
 {{ Form::submit('Save', ['class' => 'btn btn-primary','style' => 'width:200px; margin-top:10px;']) }}
</center>
 {{ Form::close() }}


















<div class="col-md-12"><br/><br/>



 </div>



<div style="clear: both"></div>

        </div>        

       

      </div>

    </div>

  </div>

  {{-- END EDIT MODAL --}}  

                 

                

               </tr>

               @endforeach

 @endif

           
            </table>



      </div>

    </div>

  </div>

</div>



   <script>

    $(document).ready(function() {

    var max_fields_limit      = 100; //set limit for maximum input fields

    var x = 1; //initialize counter for text box

    $('.add_more_button').click(function(e){ //click event on add more fields button having class add_more_button

        e.preventDefault();

        if(x < max_fields_limit){ //check conditions

           //counter increment

            $('.input_fields_container').append('<div><select class="form-control" name="addsubPoi[]" >            <option value="">Select Sub POI</option>            @forelse($pois as $poi)            <option value="{{$poi->id}}">{{$poi->poi_name_small}}</option>            @empty            @endforelse          </select><a href="#" class="remove_field" style="margin-left:10px;">Remove</a></div>'); //add input field

              x++;

        }

    });  

    $('.input_fields_container').on("click",".remove_field", function(e){ //user click on remove text links

        e.preventDefault(); $(this).parent('div').remove(); x--;

    })

});

</script>

<style type="text/css">

  ul.tree, ul.tree ul {

    list-style: none;

     margin: 0;

     padding: 0;

   } 

   ul.tree ul {

     margin-left: 10px;

   }

   ul.tree li {

     margin: 0;

     padding: 0 7px;

     line-height: 20px;

     color: #369;

     font-weight: bold;

     border-left:1px solid rgb(100,100,100);



   }

   ul.tree li:last-child {

       border-left:none;

   }

   ul.tree li:before {

      position:relative;

      top:-0.3em;

      height:1em;

      width:12px;

      color:white;

      border-bottom:1px solid rgb(100,100,100);

      content:"";

      display:inline-block;

      left:-7px;

   }

   ul.tree li:last-child:before {

      border-left:1px solid rgb(100,100,100);   

   }

</style>







@endsection









<script type="text/javascript">

$(document).ready(function(){

    function alignModal(){

        var modalDialog = $(this).find(".modal-dialog");

        

        // Applying the top margin on modal dialog to align it vertically center

        modalDialog.css("margin-top", Math.max(0, ($(window).height() - modalDialog.height()) / 5));

    }

    // Align modal when it is displayed

    $(".modal").on("shown.bs.modal", alignModal);

    

    // Align modal when user resize the window

    $(window).on("resize", function(){

        $(".modal:visible").each(alignModal);

    });   

});

 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]);

    }

  }   













$.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 delete?");

}



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);

    }

  }

});





</script>