@extends('layouts.app')
@section('title', __('Notification'))
@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
   <h1>Notification</h1>
  
</section>
<!-- Main content -->
<section class="content">
   @component('components.widget', ['class' => 'box-primary'])
   <div class="row">
   <form id="user_notification" enctype="multipart/form-data">
      @csrf
      <div class="clearfix"></div>
      <div class="row">
      <div class="col-sm-12 ">
      <div class="form-group">
         <label for="share">Notification For :</label>
         <input type="checkbox" style='margin-left:70px' name="all" id="all" value="all" onchange="checkAll();"> All
         <input type="checkbox" style='margin-left:70px'  name="web"  id="web" value="web" > Web
         <input type="checkbox" style='margin-left:70px'  name="app"  id="app" value="app"> App 
         <input type="checkbox" style='margin-left:70px;' name="whatsapp" id="whatsapp" value="whatsapp" >  What's App 
         <input type="checkbox" style='margin-left:70px;' name="sms" id="sms" value="sms" > SMS
         <input type="checkbox" style='margin-left:70px;' name="email" id="email"  value="email" > E-mail
         <div>
         </div>
      </div>
      <div class="text-center">
         <h3 class="text-primary" style="border-bottom:2px solid blue;"></h3>
      </div>
      <div class="row">
         <div class="col-sm-12 ">
         <div class="col-sm-3">
            <div class="form-group">
                  <label for="share">Type:</label>
                  <select class='form-control' id="type" name="type" onchange="selectType()">
                        <option value='0'>--- Select Type ---</option>
                        <option value='both'> Both </option>
                        <option value='all_customers'> All Customers </option>
                        <option value='all_prime_members'> All Prime Members </option>
                  </select>
               </div>
            </div>
            <div class="col-sm-3" style="display:none;" id="dd_all_customers" >
               <div class="form-group">
                  <label for="share">All Customers:</label>
                  <select class='form-control select2' id="all_customers" name="all_customers[]" style="width:300px;" multiple >
                  <option value='all'> All Customers</option> 
                     @foreach($allCustomers as $allCustomer)
                     <option value='{{$allCustomer->id}}'>{{$allCustomer->f_name}} {{$allCustomer->l_name}} </option>
                     @endforeach
                  </select>
               </div>
            </div>
            <!-- <div class="col-sm-3" >
               <div class="form-group">
                  <label for="share">Prime Member:</label>
                  <select class='form-control' id="prime_member" name="prime_member" >
                   
                     @foreach($allPrimeMembers as $allPrimeMember)
                     <option value='{{$allPrimeMember->id}}'>{{$allPrimeMember->f_name}} {{$allPrimeMember->l_name}} </option>
                     @endforeach
                  </select>
               </div>
            </div> -->
            <div class="col-sm-3" style="display:none;"  id="dd_all_prime_members"  >
               <div class="form-group">
                 <label for="share">All Prime Members</label>
                  <select class='form-control select2' id="all_prime_members" name="all_prime_members[]" style="width:300px;" multiple>
                     <option value='all'>All Prime Members</option>
                     @foreach($allPrimeMembers as $allPrimeMember)
                     <option value='{{$allPrimeMember->id}}'>{{$allPrimeMember->f_name}} {{$allPrimeMember->l_name}} </option>
                     @endforeach
                  </select>
               </div>
            </div>
         </div>
      </div>
      <div class="text-center">
         <h3 class="text-primary" style="border-bottom:2px solid blue;"></h3>
      </div>
      <div class="row">
         <div class="col-sm-12 ">
            <div class="tab-pane  active " id="cn_send_ledger">
               <div class="row">
                  <div class="col-md-12 mt-10">
                     <div class="form-group">
                     {!! Form::label('subject', __('Header').':') !!}
                        {!! Form::textarea('subject', $notification_template['subject'], ['class' => 'form-control', 'placeholder' => __('Subject'), 'rows' => 1]); !!}
                     </div>
                  </div>
                  <div class="col-md-12">
                     <div class="form-group">
                        {!! Form::label('email_body', __('Body Message').':') !!}
                        {!! Form::textarea('email_body', $notification_template['email_body'], ['class' => 'form-control', 'placeholder' => __('Body Message'), 'rows' => 4]); !!}
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="text-center">
         <h3 class="text-primary" style="border-bottom:2px solid blue;"></h3>
      </div>

      <div class="row">
         <div class="col-sm-12 ">
            <div class="col-sm-4 text-center">
            <img id="img_preview" src="{{url('img/default.png')}}" alt="image"  style="height:150px;width:150px"  />
            </div>
            <div class="col-sm-4">
               <div class="form-group">
               <label for="share">Upload & Replace Image (Size 100X100):</label><br/>
                <input type="file" multiple="false" accept="image/*" id="upload_image"  name="upload_image" onchange="upload()">
                </div>
            </div>

            <div class="col-sm-4">
               <div class="form-group">
                  <label for="share">Image Placement:</label>
                  <select class="form-control"  name="image_placement"  id="image_placement" >
                  <option value="top">--Select Image Placement--</option>
                     <option value="top">Top</option>
                     <option value="bottom">Bottom</option>
                     <option value="before_header">Before Header</option>
                     <option value="after_header">After Header</option>
                     <option value="before_body_text">Before Body Text</option>
                     <option value="after_body_text">After Body Text</option>
                  </select>
               </div>
            </div>
           
      </div>
      
      <div class="row">
         
         <div class="col-sm-12 ">
         <div class="text-center">
         <h3 class="text-primary" style="border-bottom:2px solid blue;"></h3>
      </div>
         <div class="col-sm-4">
               <div class="form-group">
                  <label for="share">Schedule:</label>
                  <select class="form-control"  name="schedule"  id="schedule" onchange="selectSchedule()" >
                     <option value="">--Select Schedule--</option>
                     <option value="daily">Daily</option>
                     <option value="weekly">Weekly</option>
                     <option value="fornightly">Fornightly</option>
                     <option value="monthly">Monthly</option>
                     <option value="yearly">Yearly</option>
                  </select>
               </div>
            </div>
            <div class="col-sm-4" id="dd_start_from" style="display:none;" >
               <div class="form-group">
                   <label for="share">Start From:</label>
                  <input type="datetime-local" name="start_from" class="form-control" >
             </div>
          </div>
         </div>
      </div>   

      <div class="row">
      <div class="col-md-12 text-center">
         
            <button type="button" class="btn btn-secondary btn-big">Cancel</button>
            <button type="submit" class="btn btn-primary btn-big">Save</button>
            <button type="button" class="btn btn-success btn-big">Save & Send</button>
        </div>
      </div>

   </form>
   <div class="clearfix"></div>
   <div class="clearfix"></div>

   @endcomponent
   {!! Form::close() !!}
</section>
<!-- /.content -->
@endsection
@section('javascript')
<script type="text/javascript">
      
     if (_.isNull(tinyMCE.activeEditor)) {
           tinymce.init({
               selector: 'textarea#email_body',
           });
       }

       if (_.isNull(tinyMCE.activeEditor)) {
           tinymce.init({
               selector: 'textarea#subject',
           });
       }
        
     $(document).ready(function(){
       //initialize iCheck
       $('input[type="checkbox"].input-icheck, input[type="radio"].input-icheck').iCheck({
         checkboxClass: 'icheckbox_square-blue',
         radioClass: 'iradio_square-blue'
       });
     });
   
     $(document).on('ifChanged', '.notification_type', function(){
       var notification_type = $(this).val();
       console.log(notification_type);
       if (notification_type == 'email') {
         if ($(this).is(':checked')) {
           $('div#email_div').removeClass('hide');
         } else {
           $('div#email_div').addClass('hide');
         }
       } else if(notification_type == 'sms'){
         if ($(this).is(':checked')) {
           $('div#sms_div').removeClass('hide');
         } else {
           $('div#sms_div').addClass('hide');
         }
       } else if(notification_type == 'whatsapp'){
         if ($(this).is(':checked')) {
           $('div#whatsapp_div').removeClass('hide');
         } else {
           $('div#whatsapp_div').addClass('hide');
         }
       }
     });
     $('#send_notification_form').submit(function(e){
       e.preventDefault();
       tinyMCE.triggerSave();
       var data = $(this).serialize();
       var btn = $('#send_notification_btn');
       btn.text("@lang('lang_v1.sending')...");
       btn.attr('disabled', 'disabled');
       $.ajax({
         method: "POST",
         url: $(this).attr("action"),
         dataType: "json",
         data: $(this).serialize(),
         beforeSend: function(xhr) {
             __disable_submit_button(btn);
         },
         success: function(result){
           if(result.success == true){
             if (result.whatsapp_link) {
               window.open(result.whatsapp_link);
             }
             $('div.view_modal').modal('hide');
             toastr.success(result.msg);
           } else {
             toastr.error(result.msg);
           }
           $('#send_notification_btn').text("@lang('lang_v1.send')");
           $('#send_notification_btn').removeAttr('disabled');
         }
       });
     });
</script>



<!-- Your existing HTML code -->

<script>
  $(document).ready(function() {
    $('#user_notification').on('submit', function(e) {
      e.preventDefault();

      var upload_image = '';
      var FormRequest = new FormData(this);
      FormRequest.append('upload_image', upload_image);
      
      $.ajax({
        url: "{{ route('submit.notification') }}",
        type: "POST",
        data: FormRequest,
        processData: false,
        contentType: false,
        dataType: 'json',
        success: function(dataResult) {
          console.log(dataResult);
          alert(dataResult);
        },
        error: function() {
         alert("Error");
          // Handle errors
        }
      });
    });
  });
</script>


<script>

upload_image.onchange = evt => {
  const [file] = upload_image.files
  if (file) {
    img_preview.src = URL.createObjectURL(file)
  }
}


function checkAll() {
    var allCheckbox = document.getElementById('all');
    var checkboxes = ['web', 'app', 'whatsapp', 'sms', 'email'];

    if (allCheckbox.checked) {
        checkboxes.forEach(function(checkboxId) {
            document.getElementById(checkboxId).checked = true;
        });
    }

    if (allCheckbox.checked == false) {
        checkboxes.forEach(function(checkboxId) {
            document.getElementById(checkboxId).checked = false;
        });
    }
}


function selectType() {
        var type = document.getElementById("type").value;
        if (type == 'both') {
            document.getElementById("dd_all_customers").style.display = 'block';
            document.getElementById("dd_all_prime_members").style.display = 'block';
        }
        if (type == 'all_customers') {
            document.getElementById("dd_all_customers").style.display = 'block';
            document.getElementById("dd_all_prime_members").style.display = 'none';
        }
        if (type == 'all_prime_members') {
            document.getElementById("dd_all_customers").style.display = 'none';
            document.getElementById("dd_all_prime_members").style.display = 'block';
        }
        if (type == '0') {
            document.getElementById("dd_all_customers").style.display = 'none';
            document.getElementById("dd_all_prime_members").style.display = 'none';
        }
    }
    function selectSchedule() {
        var schedule = document.getElementById("schedule").value;
        if (schedule == 0) {
            document.getElementById("dd_start_from").style.display = 'none';
        }else{
         document.getElementById("dd_start_from").style.display = 'block';
        }
        
    }
  
</script>

<!-- select 2 -->
<script>
    $(document).ready(function () {
        $('#prime_id').select2();
    });
</script>
@endsection