@extends('layouts.app')
@section('title', __('Notifications List'))
@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
   <h1>All Notifications</h1>
   <ol class="breadcrumb" style='margin-right:20px'>
      <div >
         <a href="{{url('/save-notification')}}" > <button type="button" class="btn btn-block btn-primary" 
            data-href=""  data-container="">
         <i class="fa fa-plus"></i> Add </button></a>
      </div>
   </ol>
</section>
<!-- Main content -->
<section class="content">
   @component('components.widget', ['class' => 'box-primary'])
   <div class="clearfix"></div>
   <div class="clearfix"></div>
 
   <div class="text-center">
      <h3 class="text-primary" style="border-bottom:2px solid blue;"></h3>
   </div>
   <div class="row">
      <div class="col-md-12" >
         <div class="tab-pane active" id="output_tax_tab">
            <table class="table table-bordered table-striped" id="notification_table" width="100%">
               <thead>
                  <!-- <th width="100px">Schedule Date/time</th> -->
                  <th width="80px">S.No.</th>
                  <th width="80px">Notification For</th>
                  <th width="80px">Type</th>
                  <th width="80px">Header</th>
                  <th width="100px">Body</th>
                  <th width="100px">Image</th>
                  <th width="100px">Image Placement</th>
                  <th width="100px">Action</th>
                  </tr>
               </thead>
               {{--
               <tfoot>
                  <tr class="bg-gray font-17 text-center footer-total">
                     <td colspan="1"><strong>@lang('sale.total'):</strong></td>
                     <td><span class="display_currency" id="purchase_total" data-currency_symbol ="true"></span></td>
                     <td class="output_payment_method_count" colspan="2"></td>
                  </tr>
               </tfoot>
               --}}
            </table>
         </div>
      </div>
   </div>
   <div id="myModal" class="modal fade" role="dialog">
   <div class="modal-dialog">
   <!-- Modal content-->
   <div class="modal-content"  style="width:300px;height:570px;">
      <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal">&times;</button>
         <h4 class="modal-title">Notification Preview</h4>
      </div>
      <input type="hidden" id ="notification_image_placement" >
      
      <div class="modal-body" id="preview_top" style='display:none;' >
         <div class="row">
            <div class="col-sm-12">
               <div class="row">
                  <div class="col-sm-12">
                     <div class="col-sm-9">
                        <div class="form-group">
                           <img src="" class="img-fluid" style="max-width: 220px; max-height: 180px;" id="notification_image" alt="Notification Image">
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-sm-12">
                  <div class="row">
                     <div class="col-sm-12 form-group">
                        <p id="notification_subject"></p>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-sm-12 form-group">
                        <p id="notification_body"></p>
                     </div>
                  </div>
                  <div class="clearfix"></div>
               
               </div>
            </div>
     
         </div>
       
      </div>

      <div class="modal-body" id="preview_bottom" style='display:none;' >
         <div class="row">
            <div class="col-sm-12">
         
               <div class="col-sm-12">
                  <div class="row">
                     <div class="col-sm-12 form-group">
                        <p id="notification_subject_bottom"></p>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-sm-12 form-group">
                        <p id="notification_body_bottom"></p>
                     </div>
                  </div>
                  <div class="row">
                  <div class="col-sm-12">
                     <div class="col-sm-9">
                        <div class="form-group">
                           <img src="" class="img-fluid" style="max-width: 220px; max-height: 180px;" id="notification_image_bottom" alt="Notification Image">
                        </div>
                     </div>
                  </div>
               </div>
                  <div class="clearfix"></div>
               
               </div>
            </div>
     
         </div>
       
      </div>

      <div class="modal-body" id="preview_before_header" style='display:none;' >
         <div class="row">
            <div class="col-sm-12">
         
               <div class="col-sm-12">
               <div class="row">
                  <div class="col-sm-12">
                     <div class="col-sm-9">
                        <div class="form-group">
                           <img src="" class="img-fluid" style="max-width: 220px; max-height: 180px;" id="notification_image_before_header" alt="Notification Image">
                        </div>
                     </div>
                  </div>
                </div>
                  <div class="row">
                     <div class="col-sm-12 form-group">
                        <p id="notification_subject_before_header"></p>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-sm-12 form-group">
                        <p id="notification_body_before_header"></p>
                     </div>
                  </div>
              
                  <div class="clearfix"></div>
               
               </div>
            </div>
     
         </div>
       
      </div>

      <div class="modal-body" id="preview_after_header" style='display:none;' >
         <div class="row">
            <div class="col-sm-12">
         
               <div class="col-sm-12">
              
                  <div class="row">
                     <div class="col-sm-12 form-group">
                        <p id="notification_subject_after_header"></p>
                     </div>
                  </div>
                  <div class="row">
                  <div class="col-sm-12">
                     <div class="col-sm-9">
                        <div class="form-group">
                           <img src="" class="img-fluid" style="max-width: 220px; max-height: 180px;" id="notification_image_after_header" alt="Notification Image">
                        </div>
                     </div>
                  </div>
                </div>
                  <div class="row">
                     <div class="col-sm-12 form-group">
                        <p id="notification_body_after_header"></p>
                     </div>
                  </div>
              
                  <div class="clearfix"></div>
               
               </div>
            </div>
     
         </div>
       
      </div>

      <div class="modal-body" id="preview_before_body_text" style='display:none;' >
         <div class="row">
            <div class="col-sm-12">
         
               <div class="col-sm-12">
              
                  <div class="row">
                     <div class="col-sm-12 form-group">
                        <p id="notification_subject_before_body_text"></p>
                     </div>
                  </div>
                  <div class="row">
                  <div class="col-sm-12">
                     <div class="col-sm-9">
                        <div class="form-group">
                           <img src="" class="img-fluid" style="max-width: 220px; max-height: 180px;" id="notification_image_before_body_text" alt="Notification Image">
                        </div>
                     </div>
                  </div>
                </div>
                  <div class="row">
                     <div class="col-sm-12 form-group">
                        <p id="notification_body_before_body_text"></p>
                     </div>
                  </div>
              
                  <div class="clearfix"></div>
               
               </div>
            </div>
     
         </div>
       
      </div>

      <div class="modal-body" id="preview_after_body_text" style='display:none;' >
         <div class="row">
            <div class="col-sm-12">
         
               <div class="col-sm-12">
              
                  <div class="row">
                     <div class="col-sm-12 form-group">
                        <p id="notification_subject_after_body_text"></p>
                     </div>
                  </div>
              
                  <div class="row">
                     <div class="col-sm-12 form-group">
                        <p id="notification_body_after_body_text"></p>
                     </div>
                  </div>

                  <div class="row">
                  <div class="col-sm-12">
                     <div class="col-sm-9">
                        <div class="form-group">
                           <img src="" class="img-fluid" style="max-width: 220px; max-height: 180px;" id="notification_image_after_body_text" alt="Notification Image">
                        </div>
                     </div>
                  </div>
                </div>
              
                  <div class="clearfix"></div>
               
               </div>
            </div>
     
         </div>
       
      </div>

   </div>
   @endcomponent
   {!! Form::close() !!}
</section>
<!-- /.content -->
@endsection
@section('javascript')
<script type="text/javascript">
   $(document).ready(function() {
         notification_table = $('#notification_table').DataTable({
       processing: true,
       serverSide: true,
       ajax: {
            url: "{{route('show-notification')}}",
          },
          columns: [
            {
               data: 'DT_Row_Index',
               name: 'DT_Row_Index',
               orderable: false,
               searchable: false
            },
            
             { data: 'notification_for', 
               name: 'notification_for' 
            },
             { data: 'notification_user_type', 
               name: 'notification_user_type',
             },
             { data: 'subject', 
               name: 'subject'
             },
             { data: 'body', 
               name: 'body'
             },
             { data: 'upload_image', 
               name: 'upload_image',
               render: function(data, type, row) {
                  return '<img src="{{ url("/uploads/notifications/") }}/' + row.upload_image + '" style="width:100px;height:100px;">';
             }
             },
             { data: 'image_placement_name', 
               name: 'image_placement_name'
             },
             {
               data: 'action',
               name: 'action',
            }
          ]
     });
   });
   
   function sendMessage(v) {
    var id = v.id;
   
    $.ajax({
        type: 'GET',
        url: "{{ route('send-notification') }}",
        data: {
            id: id,
        },
        dataType: 'json',
        success: function (dataResult) {
            console.log(dataResult);
            alert(dataResult);
        },
        error: function () {
            alert("Error");
            // Handle errors
        }
    });
   }
   
   function check_status(v) {
      var notificationId = v.id;
       console.log(notificationId);
      $.ajax({
         type: 'GET',
         url: "{{ route('change-notifications-status') }}",
         data: {
            notificationId : notificationId,
         },
         dataType: 'json',
         success: function(data) {
            if (data != '') {
               alert("Status Update Successfully");
               $('#notification_table').DataTable().ajax.reload();
            } else {
               alert('Status not Updated');
            }
   
         }
      });
   }
   
   function previewTemplate(v) {
     
      var notificationId = v.id;
     
      $.ajax({
         type: 'GET',
         url: "{{ route('open-preview-popup-notification') }}",
         data: {
            notificationId: notificationId,
         },
         dataType: 'json',
         success: function(data) {
            //console.log(data);
            $('#notification_id').val(data.id);
            $('#notification_subject').html(data.subject);
            $('#notification_body').html(data.body);
            $('#notification_image').attr('src', "{{ url('/uploads/notifications/') }}/" + data.upload_image);

            $('#notification_subject_bottom').html(data.subject);
            $('#notification_body_bottom').html(data.body);
            $('#notification_image_bottom').attr('src', "{{ url('/uploads/notifications/') }}/" + data.upload_image);

            $('#notification_subject_before_header').html(data.subject);
            $('#notification_body_before_header').html(data.body);
            $('#notification_image_before_header').attr('src', "{{ url('/uploads/notifications/') }}/" + data.upload_image);

            
            $('#notification_subject_after_header').html(data.subject);
            $('#notification_body_after_header').html(data.body);
            $('#notification_image_after_header').attr('src', "{{ url('/uploads/notifications/') }}/" + data.upload_image);

            $('#notification_subject_before_body_text').html(data.subject);
            $('#notification_body_before_body_text').html(data.body);
            $('#notification_image_before_body_text').attr('src', "{{ url('/uploads/notifications/') }}/" + data.upload_image);

            
            $('#notification_subject_after_body_text').html(data.subject);
            $('#notification_body_after_body_text').html(data.body);
            $('#notification_image_after_body_text').attr('src', "{{ url('/uploads/notifications/') }}/" + data.upload_image);


            $('#notification_image_placement').val(data.image_placement);
            var previewImagePlacement = $('#notification_image_placement').val();
            console.log(previewImagePlacement);
               if (previewImagePlacement === 'top') {
                  $('#preview_top').css('display', 'block');
                  $('#preview_bottom').css('display', 'none');
                  $('#preview_before_header').css('display', 'none');
                  $('#preview_after_header').css('display', 'none');
                  $('#preview_before_body_text').css('display', 'none');
                  $('#preview_after_body_text').css('display', 'none');
               }
               if (previewImagePlacement === 'bottom') {
                  $('#preview_top').css('display', 'none');
                  $('#preview_bottom').css('display', 'block');
                  $('#preview_before_header').css('display', 'none');
                  $('#preview_after_header').css('display', 'none');
                  $('#preview_before_body_text').css('display', 'none');
                  $('#preview_after_body_text').css('display', 'none');
               }

               if (previewImagePlacement === 'before_header') {
                  $('#preview_top').css('display', 'none');
                  $('#preview_bottom').css('display', 'none');
                  $('#preview_before_header').css('display', 'block');
                  $('#preview_after_header').css('display', 'none');
                  $('#preview_before_body_text').css('display', 'none');
                  $('#preview_after_body_text').css('display', 'none');
               }

               if (previewImagePlacement === 'after_header') {
                  $('#preview_top').css('display', 'none');
                  $('#preview_bottom').css('display', 'none');
                  $('#preview_before_header').css('display', 'none');
                  $('#preview_after_header').css('display', 'block');
                  $('#preview_before_body_text').css('display', 'none');
                  $('#preview_after_body_text').css('display', 'none');
               }
               
               if (previewImagePlacement === 'before_body_text') {
                  $('#preview_top').css('display', 'none');
                  $('#preview_bottom').css('display', 'none');
                  $('#preview_before_header').css('display', 'none');
                  $('#preview_after_header').css('display', 'none');
                  $('#preview_before_body_text').css('display', 'block');
                  $('#preview_after_body_text').css('display', 'none');
               }

               if (previewImagePlacement === 'after_body_text') {
                  $('#preview_top').css('display', 'none');
                  $('#preview_bottom').css('display', 'none');
                  $('#preview_before_header').css('display', 'none');
                  $('#preview_after_header').css('display', 'none');
                  $('#preview_before_body_text').css('display', 'none');
                  $('#preview_after_body_text').css('display', 'block');
               }
              if (data !== '') { 
                    
            } else {
             
            }
         }
      });
   }
   

   function delete_notification(v) {
   var result = confirm("Do you want to delete?");
     if (result) {
        var notificationId = v.id;
         $.ajax({
            type: 'GET',
            url: "{{ route('notification-delete') }}",
            data: {
                notificationId: notificationId
            },
            dataType: 'json',
            success: function(data) {
                if (data) {
                    alert(data.message);
                    $('#notification_table').DataTable().ajax.reload();
                } else {
                    alert('Notifications not deleted');
                }
            },
            error: function(e) {
                alert('An error occurred during the request' + e);
            }
        });
    }
}

   
</script>
@endsection