@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;
}

#top{
  margin-top: 10px;
}

.col-sm-2{
  margin-top:15px;
}


 .switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


  </style>


<script type="text/javascript">
$(document).ready(function(){
    var maxField = 100; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div style="width:100%; margin-top:10px;margin-bottom:10px;"><select class="form-control" name="addsubpoi[]" style="width:95%; float:left;">            <option value="">Select Sub POI</option>            @forelse($pois as $poi)            <option value="{{$poi->id}}" >{{$poi->poi_name_small}}</option>            @empty            @endforelse          </select><a class="btn btn-danger remove_button" style="float: right; " href="javascript:void(0);" ><i class="fa fa-trash"></i></a></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); // Add field html
        }
    });
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});
</script>
@section('content')
<div class="right_col" role="main">
  <div class="">
    <div class="page-title">
      <div class="col-sm-5">
       <a href="{{ url('poi') }}"> <i class="fa fa-arrow-left" style="font-size:32px;"></i> </a> 
      </div>
      <div class="col-sm-6">
        <h3>Edit Poi</h3> 
      </div>
    </div>
    <div class="clearfix"></div>
    <div class="row">
      <div class="col-md-12 col-sm-12 col-xs-12">
       

        {{-- 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 class="col-md-12"> 
          
               {{ Form::open(['route' => 'admin-save-poi', 'files' => true]) }}
          <h4 class="modal-title" id="modalLabel">Poi</h4>

          <input type="hidden" value="{{ $poi_id }}" name="poi_id">
              <input type="hidden" value="{{ $route_id }}" name="route_id">

                <select class="form-control" name="poiName" >
              <option value="">Select POI</option>
              @foreach($pois as $poi)
              <option value="{{$poi->id}}"  @if($route_community_poi->poi_id == $poi->id) selected="selected" @endif>{{$poi->poi_name_small}}</option>
              
              @endforeach
            </select> 
                   <br/>
<h4 class="modal-title" id="modalLabel">Sub Poi</h4>
          
       
@foreach($route_community_sub_poi as $this_sub_poi_value)
          <br/>
        <select class="form-control" name="addsubpoi[]">
            <option value="">Select Sub POI</option>
            @forelse($pois as $poi)
            <option value="{{$poi->id}}" @if($this_sub_poi_value->sub_poi_id == $poi->id) selected="selected" @endif >{{$poi->poi_name_small}}</option>
            @empty
            @endforelse
          </select> 

      
         @endforeach

<div class="field_wrapper">
    <div>
     

      

    </div>
</div>

    
            </div>
               <a href="javascript:void(0);" class="add_button btn btn-primary" style="float: right;" title="Add field">Add Sub Poi</a>
<br/><br/><br/><br/>
         <center>  {{ Form::submit('edit', ['class' => 'btn btn-primary','style' => 'width:200px; margin-top:100px;']) }}
                 
        </center> 

   {{ Form::close() }}
</div>

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

@endsection


<script type="text/javascript" language="javascript">
function checkfile(sender) {
    var validExts = new Array(".mp3");
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0) {
      alert("Invalid file selected, valid files are of " +
               validExts.toString() + " types.");
      return false;
    }
    else return true;
}
</script>

<script type="text/javascript">


/*function monday(){

  var smon = document.getElementById('monStartTime');
  var emon = document.getElementById('monEndTime');
  if(smon >= emon)
  {
    //alert('dd');
  }
}*/
</script>

<script type="text/javascript">
  $(document).ready(function() {
     $('input[type="radio"]').click(function() {
         if($(this).attr('id') == 'watchMe1') {
              $('#showMe1').show();           
         }
        else {
              $('#showMe1').hide();   
         }
     });
  });

    $(document).ready(function() {
     $('input[type="radio"]').click(function() {
         if($(this).attr('id') == 'watchMe') {
              $('#showMe').show();           
         }
        else {
              $('#showMe').hide();   
         }
     });
  });
</script>


<script type="text/javascript">

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


  function uploadProfileImage7(fileInput7) {
    if (fileInput7.files && fileInput7.files[0]) {
      var reader = new FileReader();
      reader.onload = function (e) {
        $('.avtar7').attr('src', e.target.result);
      };
      reader.readAsDataURL(fileInput7.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 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);
    }
  }
});


</script>