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


@section('content')
<div class="right_col" role="main">
  <div class="">
    <div class="page-title">
      <div class="col-sm-5">
       <a href="{{ url('route') }}"> <i class="fa fa-arrow-left" style="font-size:32px;"></i> </a> 
      </div>
      <div class="col-sm-6">
        <h3>Add Route</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 --}}    


    {{ Form::open(['route' => 'admin-add-route', 'files' => true]) }}
     <div class="x_panel">
       <div class="modal-body">

        <div class="col-sm-2" >
            <label>Route Internal Name :</label>
        </div>
           <div class="col-sm-9" id="top">           
            <input type="text" name="route_internal_name" value="" class="form-control" placeholder=" "  >  
        </div>
      

        <div class="col-sm-2" >
            <label>Route Name :</label>
        </div>
           <div class="col-sm-9" id="top">           
            <input type="text" name="routeName" value="" class="form-control" placeholder=" "  >  
        </div>
      
        <div class="col-sm-2">
          <label>State :</label>
        </div> 
        <div class="col-sm-9" id="top">
          <select class="form-control" name="state" >
            <option value="">Select State</option>
            @forelse($states as $state)
            <option value="{{$state->id}}" {{ (old("state") == $state->state_long ? "selected":"") }} >{{$state->state_long}}</option>
            @empty
            @endforelse
          </select>                         
        </div> 
       
        <div class="col-sm-2">
          <label>WB / EB :</label>
        </div> 
        <div class="col-sm-9" id="top">
          <select class="form-control" name="wb" >
            <option value=""> Select </option>
            <option value="wb"> WB </option>
            <option value="eb"> EB </option>            
          </select>                   
        </div>
          <div class="col-sm-2" >
            <label>Description  :</label>
        </div>
           <div class="col-sm-9" id="top">     
           <textarea name="description" class="form-control" placeholder=" "></textarea>      
        <!--       <input type="text" name="poi_data" value="" class="form-control" placeholder="POI "  > -->          
        </div>
        <div class="col-sm-2" >
            <label>POIs (comma separated)  :</label>
        </div>
           <div class="col-sm-9" id="top">     
           <textarea name="poi_data" class="form-control" placeholder=" " style="height: 260px;"></textarea>      
        <!--       <input type="text" name="poi_data" value="" class="form-control" placeholder="POI "  > -->          
        </div>
     
  
 <br/>
 <div class="col-sm-2" >
       <label>Image Thumb</label>
</div>
 <div class="col-sm-9" >
        <div style="border: 1px solid #E6E9ED; margin-left: -1px;" class="uploadProfileImage" onClick="javascript:document.getElementById('browse_image').click();" align="left" title=" Browse Image"> 

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

       </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-sm-2" >
       <label>Image Header</label>
</div>
 <div class="col-sm-9" >
        
        <div style="border: 1px solid #E6E9ED; margin-left: -1px;" class="uploadProfileImage" onClick="javascript:document.getElementById('browse_image2').click();" align="left" title=" Browse Image"> 

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

       </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>
      </div>
     </div>

     

     
<br />
<br />
<div id="TextBoxContainer">
    <!--Textboxes will be added here -->
</div>
<!-- <input id="btnAdd" type="button" value="Add Community" onclick="AddTextBox()" class="btn btn-primary" />
 -->
   <div class="col-sm-12" align="center" ><br/><br/>
          {{ Form::submit('Save', ['class' => 'btn btn-primary','style' => 'width:200px; margin-top:10px;']) }}
        </div>     



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

    }

  }   



</script>






<script type="text/javascript">
function GetDynamicTextBox(value){
console.log('>>>',value);
    return '<a class="btn btn-danger" style="float: right; padding: 9px;margin-bottom: 0px;" onclick = "RemoveTextBox(this)"><i class="fa fa-trash"></i></a><div class="x_panel"><div class="modal-body"><div class="col-sm-2">    <label>Community :</label>    </div>         <div class="col-sm-9" id="top">          <select class="form-control" name="community['+value+'][community]" >            <option value="">Select Community </option>            @forelse($community as $com)            <option value="{{$com->id}}" {{ (old("community") == $com->name ? "selected":"") }} >{{$com->name}}</option>            @empty            @endforelse          </select>                          </div>   <div style="clear:both"></div>   <input type="button" value="Add POI" style="float: right;" onClick="changeIt('+value+')"class="btn btn-default" />         <div id="my_div'+value+'" class="col-sm-12"></div> </div>     </div>'
}
var intTextBox = 0;
function AddTextBox() {
   intTextBox++;
    var div = document.createElement('DIV');
    div.innerHTML = GetDynamicTextBox(intTextBox);
    document.getElementById("TextBoxContainer").appendChild(div);
}
 
function RemoveTextBox(div) {
    document.getElementById("TextBoxContainer").removeChild(div.parentNode);
}
 

</script>





<script language="javascript">

  var i = 0;
function changeIt(val)
{var div = document.createElement('DIV');
div.id = 'div'+val;
  console.log('asdgr',val);
i++;
//my_div.innerHTML = my_div+val.innerHTML +"<br><input type='text' name='mytext'+ i>"
div.innerHTML = '<div style="clear:both"></div> <hr/><div class="col-sm-2">          <label>POI :</label>        </div>         <div class="col-sm-9" id="top">          <select class="form-control" name="community['+val+'][poiName]['+i+'][poi_main]" >            <option value="">Select POI</option>            @forelse($pois as $poi)            <option value="{{$poi->id}}" {{ (old("poiName") == $poi->poi_name_small ? "selected":"") }} >{{$poi->poi_name_small}}</option>            @empty            @endforelse          </select>                                </div>      <a class="btn btn-danger " style="margin-top: 9px;    padding: 9px;" onClick="changeremoveIt('+val+')" ><i class="fa fa-trash"></i></a>  <div style="clear:both"></div> <hr/>  <input type="button" value="Add SUB POI"  style="float: right;" onClick="changeIt_sub('+val+','+i+')"class="btn btn-default float-right" />         <div id="my_div_sub'+i+'" class="col-sm-12"></div> </div>';
    document.getElementById("my_div"+val).appendChild(div);

}

function changeremoveIt(vals) {
 
  console.log('asdgr',vals);

   document.getElementById("div"+vals).remove();
  //   document.getElementById("my_div"+vals).removeChild(div);
}

</script>



<script language="javascript">

  var i = 0;
function changeIt_sub(vals,val)
{var div = document.createElement('DIV');
div.id = 'my_divs'+val;
  console.log('asdgr',val);
i++;
//my_div.innerHTML = my_div+val.innerHTML +"<br><input type='text' name='mytext'+ i>"
div.innerHTML = '<div class="col-sm-2">          <label>Sub POI :</label>        </div>         <div class="col-sm-9" id="top">          <select class="form-control" name="community['+vals+'][poiName]['+val+'][subpoi][]" >            <option value="">Select Sub POI</option>            @forelse($pois as $poi)            <option value="{{$poi->id}}" {{ (old("subPoi") == $poi->poi_name_small ? "selected":"") }} >{{$poi->poi_name_small}}</option>            @empty            @endforelse          </select>              </div><a class="btn btn-danger" style="margin-top: 9px;    padding: 9px;" onClick="changeremoveIt2('+val+')"><i class="fa fa-trash"></i></a>';
    document.getElementById("my_div_sub"+val).appendChild(div);

}

function changeremoveIt2(vals) {
 
  console.log('asdgr',vals);

   document.getElementById("my_divs"+vals).remove();
  //   document.getElementById("my_div"+vals).removeChild(div);
}

</script>


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

        {{ Form::close() }}















@endsection








<!-- 

 <div class="x_panel">
       <div class="modal-body">

        <div class="col-sm-2">
          <label>Community :</label>
        </div> 
        <div class="col-sm-9" id="top">
          <select class="form-control" name="community" >
            <option value="">Select Community</option>
            @forelse($community as $com)
            <option value="{{$com->id}}" {{ (old("community") == $com->name ? "selected":"") }} >{{$com->name}}</option>
            @empty
            @endforelse
          </select>                   
        </div> 

         <div class="col-sm-2">
          <label>POI :</label>
        </div> 
        <div class="col-sm-9" id="top">
          <select class="form-control" name="poiName" >
            <option value="">Select POI</option>
            @forelse($pois as $poi)
            <option value="{{$poi->id}}" {{ (old("poiName") == $poi->poi_name_small ? "selected":"") }} >{{$poi->poi_name_small}}</option>
            @empty
            @endforelse
          </select>                   
        <div  id="TextBoxContainer1" >  </div> 
        </div> 
         <a class="btn btn-blue pull-right" style="padding: 0px 6px; font-size: 28px;" id="btnAdd1">+</a>                  


         <div class="col-sm-2">
          <label>Sub POI :</label>
        </div> 
        <div class="col-sm-9" id="top">
          <select class="form-control" name="subPoi" >
            <option value="">Select Sub POI</option>
            @forelse($pois as $poi)
            <option value="{{$poi->id}}" {{ (old("subPoi") == $poi->poi_name_small ? "selected":"") }} >{{$poi->poi_name_small}}</option>
            @empty
            @endforelse
          </select>  

        <div  id="TextBoxContainer2">  </div> 
        </div>
        <a class="btn btn-blue pull-right" style="padding: 0px 6px; font-size: 28px; margin-left: 30px;" id="btnAdd2">+</a>                  

       
      </div>
     </div> -->