@extends('layouts.master')

@push('cssCode')
<style>
.clientTable{
  margin:20px auto;
  font-size:15px;
  font-weight: bold;
}

.clientTable tr td{
  padding: 4px;
  /* text-align: center; */
}
.nav-tabs li.active a{
  background-color: #41B3AB !important;
  color: #ffffff !important;
}
table td .btn{
  margin-right: 0px !important;
}
.text-right-width{
  text-align: right;
  width: 50%; 
}
.profile-img{
  width: 150px;
    margin: 20px auto;
    border: 3px solid #000000;
    height: 150px;
}
</style>

@endpush 

@section('content')
        <div class="right_col" role="main">
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>Notification</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="col-md-9"><!-- .top_search -->



                     </div>

                  <div class="x_title">
          <div class="title_right">
           

         

           <button type="button" class="btn1 btn btn-success" data-toggle="modal" data-target="#myModal">Send Notification</button>
           <button type="button" class="btn2 btn btn-success " data-toggle="modal" data-target="#myModalLocation">Send Notification Location</button>
              
            </div>
          </div>

           <div class="col-md-2"></div>

          <div class="col-md-8" id="n_n" style="display: none">
        {{ Form::open(['route' => 'add_notification', 'files' => true]) }}

        <div class="form-group">
          {{ Form::label('name', 'Subject*', ['class' => 'control-label']) }}
          <div class="form-group">
            {{ Form::text('subject', null, ['class' => 'form-control', 'placeholder' => 'Fill Subject']) }}
          </div>
        </div>

        <div class="form-group">
         
          {{ Form::label('name', 'Message*', ['class' => 'control-label']) }}
          <div class="form-group">
            {{ Form::textarea('message', null, ['class' => 'form-control', 'placeholder' => 'Fill Message','maxlength'=>'1024']) }}
          </div>
        </div>
        
        <div class="form-group">
          {{ Form::submit('Send', ['class' => 'btn btn-primary btn-block']) }}
        </div>
        {{ Form::close() }}
      </div>   





      <div class="col-md-8" id="n_n_l" style="display: none">
        {{ Form::open(['route' => 'add_location_notification', 'files' => true]) }}
 
         <div class="form-group">
         <label class="control-label">Location*</label>
          <div class="form-group">
               <div id="locationField">
                  <input id="txtPlaces1" type="text" name="serach_value" placeholder="Search Placements..." class="searchbox form-control" maxlength="128" autocomplete="off">
                  <input type="hidden" id="latitude" name="latitude">   
                  <input type="hidden" id="longitude" name="longitude">     
              </div>
          </div>
        </div>
      
       <center> Or</center>
       
          <div class="form-group col-md-12">
     <div class="col-md-6">    
       <input type="text" id="latitude" placeholder="Latitude"  class="form-control" name="latitude1">  
        </div>
          <div class="col-md-6">  
          <input type="text" id="longitude" placeholder="Longitude"  class="form-control" name="longitude1">    
          </div> 
        </div>


         <div class="form-group">
          {{ Form::label('name', 'Radius*', ['class' => 'control-label']) }}
          <div class="form-group">
            {{ Form::text('radius', null, ['class' => 'form-control', 'placeholder' => 'Fill Radius']) }}
          </div>
        </div>

        <div class="form-group">
          {{ Form::label('name', 'Subject*', ['class' => 'control-label']) }}
          <div class="form-group">
            {{ Form::text('subject', null, ['class' => 'form-control', 'placeholder' => 'Fill Subject']) }}
          </div>
        </div>

     

        <div class="form-group">
          {{ Form::label('name', 'Message*', ['class' => 'control-label']) }}
          <div class="form-group">
            {{ Form::textarea('message', null, ['class' => 'form-control', 'placeholder' => 'Fill Message','maxlength'=>'1024']) }}

          </div>
        </div>
        
        <div class="form-group">
          {{ Form::submit('Send', ['class' => 'btn btn-primary btn-block']) }}
        </div>
        {{ Form::close() }}
      </div>

      <div class="col-md-2"></div>





     <div class="clearfix"></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 class="x_content">
          <div class="table-responsive">
            
              <table class="table table-striped">
              <thead>
              <tr>
                <th>S No.</th>
                <th>Subject</th>
                <th>Notification</th>
              <!--   <th>Icon</th> -->
                <th>Date</th>
              </tr>
              </thead>
              
              <tfoot>
                @php
                $i=1;
                @endphp
             @forelse($notification_msg as $get_notification_msg)
              <tr>
                
                <td>{{ $i++ }}</td>
                 <td>  {{ $get_notification_msg->subject }}</td>
 <td>  {{ $get_notification_msg->message }}</td>
  <td>  {{ $get_notification_msg->created_at }}</td>

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

             
            </tfoot>
            </table>

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




@endsection


@push('jsCode')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".btn1").click(function(){
        $("#n_n_l").hide();
    });
    $(".btn2").click(function(){
        $("#n_n_l").show();
    });

     $(".btn2").click(function(){
        $("#n_n").hide();
    });
    $(".btn1").click(function(){
        $("#n_n").show();
    });
});
</script>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDFw-cnDKcAeWVBF32N6xXRdN1Bd3tez_Y&libraries=places"></script>
    <script type="text/javascript">
        google.maps.event.addDomListener(window, 'load', function () {
            var places = new google.maps.places.Autocomplete(document.getElementById('txtPlaces'));
            var places = new google.maps.places.Autocomplete(document.getElementById('txtPlaces1'));
            google.maps.event.addListener(places, 'place_changed', function () {
                var place = places.getPlace();
                console.log('>>>',place.adr_address);
                var address = place.formatted_address;
                var latitude = place.geometry.location.lat();
                var longitude = place.geometry.location.lng();
                document.getElementById('latitude').value = latitude;
                document.getElementById('longitude').value = longitude;
                var mesg = "Address: " + address;
                mesg += "\nLatitude: " + latitude;
                mesg += "\nLongitude: " + longitude;
                //alert(mesg);
            });
        });




    </script>


@endpush