@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_poi_owner', '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" style="display: none;">
       
          <div class="form-group">
          <label>Mandatory</label>
          <input type="checkbox"  name="Mandatory" value="Mandatory">
          </div>
        </div>

        

          <div class="form-group" style="display: none;">
            {{ Form::label('name', 'Type of Notification', ['class' => 'control-label']) }}
          <div class="form-group">
           <select name="subject_type" class="form-control">
            <option value="">None</option>
            <option value="Travel_Warning">Travel Warning</option>
            <option value="Travel_Advisory">Travel Advisory</option>
            <option value="Breaking_News">Breaking News</option>
            <option value="Promotion">Promotion</option>
            </select>
          </div>
        </div>

        <!-- <div class="form-group">
       
          <div class="form-group">
          <label>Travel Mode</label>
          <input type="checkbox"  name="travel_mode" value="travel_mode">
          </div>
        </div> -->
        <div class="form-group">
            {{ Form::label('name', 'Scheduled:', ['class' => 'control-label']) }}
          <div class="form-group">
           <select name="scheduled" class="form-control" onchange="ShowDatetime()" id="scheduled">
           
            <option value="send_immediately">Send Immediately</option>
            <option value="Scheduled">Scheduled</option>
           
            </select>
          </div>
        </div>

        <div class=" hidden" id="schedule_date">
         <div class="form-group">
          
          {{ Form::label('name', 'Date', ['class' => 'control-label']) }}
          <div class="form-group">
           <input type="date" name="date_of_schedule" class="form-control"  min="2025-08-22">
         </div>
       </div>

       <div class="form-group">

        {{ Form::label('name', 'Time', ['class' => 'control-label']) }}
        <div class="form-group">
         <input type="time" name="time_of_schedule" class="form-control" >
       </div>
     </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::label('name', 'POIS*', ['class' => 'control-label']) }}
          <div class="form-group">
            {{ Form::textarea('pois', null, ['class' => 'form-control', 'placeholder' => '']) }}
          </div>
        </div>
        
        <div class="form-group " id="input_row">
          {{ Form::submit('Send', ['class' => 'btn btn-primary btn-block','onclick'=>'showloading()']) }}
        </div>

<div id="loadingimage" style="display: none;">

  <center>   <img src="https://66.media.tumblr.com/695ce9a82c8974ccbbfc7cad40020c62/tumblr_o9c9rnRZNY1qbmm1co1_1280.gif" width = "100" height = "100" />

  </center> 
      </div>

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


<script language='javascript' type='text/javascript'>
function showloading(){
var loadingdiv = document.getElementById('loadingimage');
loadingdiv.style.display = "block";

//execute the code below after the ajax request is complete
var loadingdiv = document.getElementById('input_row');
loadingdiv.style.display = "none";
}

</script>





      <div class="col-md-8" id="n_n_l" style="display: none">
        {{ Form::open(['route' => 'add_poi_location_notification', 'files' => true]) }}
 
      
      
       <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' => 'Subject']) }}
          </div>
        </div>

        <div class="form-group" style="display: none;">
            {{ Form::label('name', 'Type of Notification', ['class' => 'control-label']) }}
          <div class="form-group">
           <select name="subject_type" class="form-control">
            <option value="">None</option>
            <option value="Travel_Warning">Travel Warning</option>
            <option value="Travel_Advisory">Travel Advisory</option>
            <option value="Breaking_News">Breaking News</option>
            <option value="Promotion">Promotion</option>
            </select>
          </div>
        </div>


        <div class="form-group" style="display: none;">
       
          <div class="form-group">
          <label>Mandatory</label>
          <input type="checkbox"  name="Mandatory" value="Mandatory">
          </div>
        </div>
<!-- <div class="form-group">
       
          <div class="form-group">
          <label>Travel Mode</label>
          <input type="checkbox"  name="travel_mode" value="travel_mode">
          </div>
        </div> -->

 <div class="form-group">
            {{ Form::label('name', 'Scheduled:', ['class' => 'control-label']) }}
          <div class="form-group">
           <select name="scheduled" class="form-control" onchange="ShowDatetime1()" id="scheduled1">
           
            <option value="send_immediately">Send Immediately</option>
            <option value="Scheduled">Scheduled</option>
           
            </select>
          </div>
        </div>

        <div class=" hidden" id="schedule_date_1">
         <div class="form-group">

          {{ Form::label('name', 'Date', ['class' => 'control-label']) }}
          <div class="form-group">
           <input type="date" name="date_of_schedule" class="form-control">
         </div>
       </div>

       <div class="form-group">

        {{ Form::label('name', 'Time', ['class' => 'control-label']) }}
        <div class="form-group">
         <input type="time" name="time_of_schedule" class="form-control">
       </div>
     </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::label('name', 'POIS*', ['class' => 'control-label']) }}
          <div class="form-group">
            {{ Form::textarea('pois', null, ['class' => 'form-control', 'placeholder' => '']) }}
          </div>
        </div>

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


<div id="loadingimage2" style="display: none;">

  <center>   <img src="https://66.media.tumblr.com/695ce9a82c8974ccbbfc7cad40020c62/tumblr_o9c9rnRZNY1qbmm1co1_1280.gif" width = "100" height = "100" />

  </center> 
      </div>



<script language='javascript' type='text/javascript'>
function showloading2(){
var loadingdiv = document.getElementById('loadingimage2');
loadingdiv.style.display = "block";

//execute the code below after the ajax request is complete
var loadingdiv = document.getElementById('input_row2');
loadingdiv.style.display = "none";
}

</script>


        {{ 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">
                    {{ $notification_msg->links() }}
          <div class="table-responsive">
            
              <table class="table table-striped">
              <thead>
                <tr>
                  <th>UID</th>
                  <th>Date</th>
                  <th>Type</th>
                  <th>Pois</th>
                  <th>Subject</th>
                  <th>Lat</th>
                  <th>Long</th>
                  <th>Radius</th>
                   <th>Duplicate</th>
                   <th>View</th>
                </tr>
              </thead>              
              <tfoot>
                @php
                $i=1;
                @endphp
                @forelse($notification_msg as $get_notification_msg)
                <tr>           



                  <td>{{ $get_notification_msg->id }}</td>
                  <td> @if(!empty($get_notification_msg->date_of_schedule && $get_notification_msg->time_of_schedule))
                   {{ date("d-m-Y" ,strtotime($get_notification_msg->date_of_schedule)) }} - {{ date("h:i a",strtotime($get_notification_msg->time_of_schedule)) }}
                   @else
                   {{date("d-m-Y - h:i a", strtotime($get_notification_msg->created_at)) }}
                   @endif
                 </td>

                 <td>@if(!empty($get_notification_msg->radius)) Location @else -- @endif</td>
                 <td>{{ $get_notification_msg->pois}}</td>

                 @php    $subject1= str_replace("_"," ",$get_notification_msg->subject);@endphp
                 <td>  {{ $subject1}}</td>
                 <td>  {{ $get_notification_msg->latitude }}</td>
                 <td>  {{ $get_notification_msg->longitude }}</td>
                 <td>  {{ $get_notification_msg->radius }}</td>

                 <td> <button type="button" class=" btn btn-success" onclick="Duplicate({{ $get_notification_msg->id }})">Duplicate</button></td>

                  <td>    <button type="button" class=" btn btn-success" data-toggle="modal" data-target="#MyNotification{{$get_notification_msg->id}}">View</button>


 <div class="modal fade" id="MyNotification{{$get_notification_msg->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
         <h5 class="modal-title">View Notification Details</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         @if(!empty($get_notification_msg->subject))
     <b> Subject:</b> {{ $get_notification_msg->subject }}
       <br>
       @endif
     
         @if(!empty($get_notification_msg->date_of_schedule))
     <b> Date of Schedule:</b> {{ $get_notification_msg->date_of_schedule }}
       <br>
       @endif
     
         @if(!empty($get_notification_msg->time_of_schedule))
    <b>Time of Schedule: </b>{{ $get_notification_msg->time_of_schedule }}
       <br>
       @endif
     
        @if(!empty($get_notification_msg->latitude))
      <b> Latitude:</b> {{ $get_notification_msg->latitude }}
       <br>
       @endif
       
        @if(!empty($get_notification_msg->longitude))
   <b> Longitude:</b> {{ $get_notification_msg->longitude }}
     <br>
       @endif
      
          @if(!empty($get_notification_msg->radius))
    <b> Radius:</b> {{ $get_notification_msg->radius }}
       <br>
       @endif
     
    @if(!empty($get_notification_msg->message))
    <b>  Message:</b> {{ $get_notification_msg->message }}
    <br>
       @endif
       
    <b>Pois:</b>
 {{ $get_notification_msg->pois }}
     
      </div>
    
    </div>
  </div>
</div>


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

function  Duplicate(id){
	$("#loadingimage2").show();
	$("#n_n_l,#n_n").hide();
  $.get("https://rt66ug.com/admin/public/api/get_notification_detail/"+id, function(data, status){
  		$("#loadingimage2").hide();
   let radius=data.data.radius;
   if(radius!=null){
   
   $(".btn2").click();
$('#n_n_l form input[name="subject"]').val(data.data.subject);
$('#n_n_l form textarea[name="message"]').html(data.data.message);
$('#n_n_l form input[name="latitude1"]').val(data.data.latitude);
$('#n_n_l form input[name="longitude1"]').val(data.data.longitude);
$('#n_n_l form input[name="radius"]').val(data.data.radius);
$('#n_n_l form  select[name="subject_type"]').val(data.data.type_of_notification).change();
$("#n_n_l form  #scheduled1").val(data.data.scheduled).change();
$('#n_n_l form input[name="Mandatory"]').prop('checked', data.data.mandatory);
$('#n_n_l form input[name="travel_mode"]').prop('checked', data.data.travel_mode);
$('#n_n_l form textarea[name="pois"]').val(data.data.pois);
   }else{
   	  $("#n_n,#n_n_l").hide();
      $(".btn1").click();
      $('#n_n form input[name="subject"]').val(data.data.subject);
$('#n_n form textarea[name="message"]').html(data.data.message);
$('#n_n form  select[name="subject_type"]').val(data.data.type_of_notification).change();
$('#n_n form textarea[name="pois"]').val(data.data.pois);
   }
  });
}
$(document).ready(function(){
    $(".btn1").click(function(){
         $("#n_n").show();
           // $('#n_n_l form input[type=text], textarea"').val("");
        
        $("#n_n_l").hide();

    });
    $(".btn2").click(function(){
        $("#n_n_l").show();
         $("#n_n").hide();
        // $('#n_n form input[type=text], textarea"').val("");
    });
});
</script>

 
  <script type="text/javascript" src="https://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;
    
            });
        });

function ShowDatetime()
{
var x = document.getElementById("scheduled").value;
if(x=="Scheduled"){

jQuery("#schedule_date").removeClass("hidden");
}
else{
  jQuery("#schedule_date").addClass("hidden");

}

}

function ShowDatetime1()
{
var x = document.getElementById("scheduled1").value;
if(x=="Scheduled"){

jQuery("#schedule_date_1").removeClass("hidden");
}
else{
  jQuery("#schedule_date_1").addClass("hidden");

}

}


    </script>


@endpush