@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">
   <input type="hidden" value="{{$editedNotification->id}}" id="notification_id" name="notification_id"  >
      @csrf
      <div class="clearfix"></div>
      <div class="row">
      <div class="col-sm-12 ">
      <div class="form-group">
    <label for="share">Notification For :</label>
    @php
        $notification = explode(',', $editedNotification->notification_for);
        $checkedAll = in_array('all', $notification) ? 'checked' : '';
        $checkedWeb = in_array('web', $notification) ? 'checked' : '';
        $checkedApp = in_array('app', $notification) ? 'checked' : '';
        $checkedWhatsapp = in_array('whatsapp', $notification) ? 'checked' : '';
        $checkedSms = in_array('sms', $notification) ? 'checked' : '';
        $checkedEmail = in_array('email', $notification) ? 'checked' : '';
    @endphp

    <input type="checkbox" style="margin-left:70px" {{ $checkedAll }} name="all" id="all" value="all" onchange="checkAll();"> All
    <input type="checkbox" style="margin-left:70px" {{ $checkedWeb }} name="web" id="web" value="web"> Web
    <input type="checkbox" style="margin-left:70px" {{ $checkedApp }} name="app" id="app" value="app"> App
    <input type="checkbox" style="margin-left:70px" {{ $checkedWhatsapp }} name="whatsapp" id="whatsapp" value="whatsapp"> What's App
    <input type="checkbox" style="margin-left:70px" {{ $checkedSms }} name="sms" id="sms" value="sms"> SMS
    <input type="checkbox" style="margin-left:70px" {{ $checkedEmail }} 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()">
                    @php
                        $notification = $editedNotification->type;
                        $selectedBoth = ($notification == 'both') ? 'selected' : '';
                        $selectedAllCustomers = ($notification == 'all_customers') ? 'selected' : '';
                        $selectedAllPrimeMembers = ($notification == 'all_prime_members') ? 'selected' : '';
                    @endphp
                    <option value='0'>--- Select Type ---</option>
                    <option value='both' {{ $selectedBoth }}> Both </option>
                    <option value='all_customers' {{ $selectedAllCustomers }}> All Customers </option>
                    <option value='all_prime_members' {{ $selectedAllPrimeMembers }}> 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' id="all_customers" name="all_customers" >
                  <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' id="all_prime_members" name="all_prime_members" >
                     <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', $editedNotification->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', $editedNotification->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('/uploads/notifications/' . $editedNotification->upload_image) }}" 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>
                  @php
                        $imagePlacement = $editedNotification->image_placement;
                        $selectedTop = ($imagePlacement == 'top') ? 'selected' : '';
                        $selectedBottom = ($imagePlacement == 'bottom') ? 'selected' : '';
                        $selectedBeforeHeader = ($imagePlacement == 'before_header') ? 'selected' : '';
                        $selectedAfterHeader = ($imagePlacement == 'after_header') ? 'selected' : '';
                        $selectedBeforeBodyText = ($imagePlacement == 'before_body_text') ? 'selected' : '';
                        $selectedAfterBodyText = ($imagePlacement == 'after_body_text') ? 'selected' : '';
                    @endphp
                  <select class="form-control"  name="image_placement"  id="image_placement" >
                  <option value="top">--Select Image Placement--</option>
                     <option value="top" {{ $selectedTop }}  >Top</option>
                     <option value="bottom" {{ $selectedBottom }}>Bottom</option>
                     <option value="before_header" {{ $selectedBeforeHeader }} >Before Header</option>
                     <option value="after_header" {{ $selectedAfterHeader }} >After Header</option>
                     <option value="before_body_text" {{ $selectedBeforeBodyText }} >Before Body Text</option>
                     <option value="after_body_text" {{ $selectedAfterBodyText }} >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>
                  @php
                        $schedule = $editedNotification->schedule;
                        $selectedDaily = ($schedule == 'daily') ? 'selected' : '';
                        $selectedWeekly = ($schedule == 'weekly') ? 'selected' : '';
                        $selectedFornighly = ($schedule == 'fornightly') ? 'selected' : '';
                        $selectedMonthly = ($schedule == 'monthly') ? 'selected' : '';
                        $selectedYearly = ($schedule == 'yearly') ? 'selected' : '';
                      
                    @endphp
                  <select class="form-control"  name="schedule"  id="schedule" onchange="selectSchedule()" >
                     <option value="">--Select Schedule--</option>
                     <option value="daily" {{ $selectedDaily }} >Daily</option>
                     <option value="weekly" {{ $selectedWeekly }} >Weekly</option>
                     <option value="fornightly" {{ $selectedFornighly }} >Fornightly</option>
                     <option value="monthly" {{ $selectedMonthly }} >Monthly</option>
                     <option value="yearly" {{ $selectedYearly }} >Yearly</option>
                  </select>
               </div>
            </div>
            <div class="col-sm-4" id="dd_start_from"  >
               <div class="form-group">
                   <label for="share">Start From:</label>
                  <input type="datetime-local" name="start_from" value="{{ $editedNotification->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('update.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>


@endsection