@extends('layouts.master')

 <style type="text/css">
body
{
  background-color:white !important;
}

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



  </style>
@section('content')
<div class="right_col" role="main">
  <div class="">
    <div class="page-title">
      <div class="col-sm-5">
       <a href="{{ url('show_travel_routes') }}"> <i class="fa fa-arrow-left" style="font-size:32px;"></i> </a> 
     </div>
     <div class="col-sm-6">
       @if(isset($data))
       <h3>Edit Travel Guide Route</h3> 
@else
      <h3>Add Travel Guide Route</h3> 
      @endif
    </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="x_panel">
 {{ Form::open(['route' => 'save_travel_guide', 'files' => true]) }}
 @php if(isset($data)){
 $travel_route_name=$data->travel_route_name;
 $state_selected=$data->state;
 $wb_eb=$data->wb_eb;
 $type=$data->type;
 $id=$data->id;
 $description=$data->description;
 $pois=$data->pois;
 $internal_name=$data->internal_name;
 $image_thumb=$data->image_thumb;
 $image_header=$data->image_header;
 $active=$data->active;
  $order_number=$data->order_number;
} else{
$travel_route_name="";
$state_selected="";
$wb_eb="";
$type="";
$id="";
$active=0;
$description="";
$pois="";
$internal_name="";
$image_header="";
$image_thumb="";
  $order_number="";
}

@endphp
<div class="col-sm-12" id="top">
  <div class="col-sm-2">

  </div>
   <div class="col-sm-1">
       <label class="form-check-label" for="active">Active:</label>
   </div>
 <div class="col-sm-5">

 <div class="form-check">
   
 
     <input type="checkbox" class="form-check-input" id="active" name="active" {{ ($active == "1" ? "checked":"") }}>
  </div>
</div>

</div>
<div class="col-sm-12" id="top">

  <div class="col-sm-2">

  </div>
  <div class="col-sm-1">
    <label>Type :</label>
  </div>

  <div class="col-sm-6">
    <select class="form-control" name="type" >

      <option value="1" {{ ($type == "1" ? "selected":"") }}> Route 66 </option>
      <option value="2" {{ ($type == "2" ? "selected":"") }}>  Side-Trip </option>    
      <option value="3" {{ ($type == "3" ? "selected":"") }}> Walking Tour</option>         
    </select>     
  </div>   
  <div class="col-sm-2">

  </div>           

</div>

<div class="col-sm-12" id="top">
 <div class="col-sm-1">

 </div>
 <div class="col-sm-2">
   <label>Travel Route Name :</label>
 </div>
 <div class="col-sm-9">
  <input type="hidden" name="id" value="{{$id}}">           
  <input type="text" name="travel_route_name" value="" class="form-control" placeholder=" "  >  

</div>
</div>
  
<div class="col-sm-12" id="top">
   <div class="col-sm-1">

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



        <div class="col-sm-12" id="top">
            <div class="col-sm-3">
          <label>State :</label>
         
       </div>
         <div class="col-sm-9">
          <select class="form-control" name="state" >
            <option value="">Select State</option>
            @forelse($states as $state)
            <option value="{{$state->id}}" {{ ($state_selected == $state->id ? "selected":"") }} >{{$state->state_long}}</option>
            @empty
            @endforelse
          </select> 
          </div>                        
     
      </div>

       <div class="col-sm-12" id="top">
           <div class="col-sm-3">
          <label>WB / EB :</label>
        </div>
          <div class="col-sm-9">
          <select class="form-control" name="wb_eb" >
            <option value=""> Select </option>
            <option value="wb"  {{ ($wb_eb == "wb" ? "selected":"") }}> WB </option>
            <option value="eb" {{ ($wb_eb == "eb" ? "selected":"") }}> EB </option>            
          </select>   
          </div>                
        </div>
   
 <div class="col-sm-12" id="top">
   <div class="col-sm-3">
<label >Order:</label>
 </div>
 
 <div class="col-sm-9">
 <input type="number" name="order_number" class="form-control" placeholder="" value="">
 </div>
 </div>
       

    <div class="col-sm-12" id="top">
          <div class="col-sm-3">
 <label > Description:</label>
</div>
 <div class="col-sm-9">
 <div class="form-group">
 <textarea name="description" class="form-control"></textarea>
 </div>
 </div>
</div>

   <div class="col-sm-12" id="top">
          <div class="col-sm-3">
 <label > POIs(Comma Seperated):</label>
</div>
 <div class="col-sm-9">
 <div class="form-group">
 <textarea name="pois" class="form-control" rows="10"></textarea>
 </div>
 </div>
</div>
  <div class="col-sm-12" id="top">
  <div class="col-sm-3" >
       <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>
  <div class="col-sm-12" id="top">
<div class="col-sm-3" >
       <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="imageHeader" class="browse_image2" id="browse_image2" onChange="uploadProfileImage2(this);" style="height: 100px; width: 100px; margin-top: -98px; opacity: 0; cursor: pointer;">
</div>

        

      </div>
 

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


{{ Form::close() }}

   </div>
  </div>
</div>
</div>
</div>
@endsection
@push('js')
<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>



@endpush