@php($link = route($routePrefix . '.create'))
@if($tour_details)
  @php($link = route($routePrefix . '.create',['tour'=>base64_encode($tour_details->id)]))
@endif
@php ($headerOption = [
  'title' => $module.(($tour_details)?' - '.$tour_details->file_name:''),
  'header_button' => $permission['create'] ? '
  <div class="row">
    <a class="btn bg-teal waves-effect choose-template-btn" style="padding-top: 12px;" href="javascript:;" data-toggle="tooltip" data-cruise-id="" data-original-title="Choose Template"><span>Choose Template</span></a>
    <a class="btn bg-teal waves-effect" href="'. $link .'" data-toggle="tooltip" data-original-title="Send Notification"><i class="material-icons">add</i> <span>Send Notification</span></a>
    <button data-toggle="tooltip" data-original-title="Filter Record" class="btn btn-primary waves-effect show-panel" data-id="filter-panel"><i class="material-icons">search</i></button></div>' : ''
])
@extends('admin.layouts.layout', $headerOption)
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">

@section('main')
<div class="body">
  <div class="row clearfix" id="filter-panel" style="display: none;">
    <form method="get">
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
        <div class="form-group form-float">
            <div class="form-line">
                <input type="text" class="form-control" name="unique_id" value="{!! (is_array($srch_params) && array_key_exists('unique_id',$srch_params))?$srch_params['unique_id']:'' !!}">
                <label class="form-label">SL. No.</label>
            </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
        <div class="form-group form-float">
            <div class="form-line">
                <input type="text" class="form-control" name="cruise_name" value="{!! (is_array($srch_params) && array_key_exists('cruise_name',$srch_params))?$srch_params['cruise_name']:'' !!}">
                <label class="form-label">Ship Name</label>
            </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
        <div class="form-group form-float">
        <div class="form-line">
                <input type="text" class="form-control" name="user_email" value="{!! (is_array($srch_params) && array_key_exists('user_email',$srch_params))?$srch_params['user_email']:'' !!}">
                <label class="form-label">User Email</label>
            </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 text-right">
        <button type="submit" class="btn btn-primary btn-lg m-l-15 waves-effect">Filter</button>
      </div>
    </form>
      
  </div>
  <div class="table-responsive">
    <table class="table table-bordered table-hover table-striped table-condensed">
      <thead>
        <tr>
         <th>Ship</th>
         <th>Cruise</th>
         <th>Message</th>
         <th>Link</th>
         <th>Send Number Of User</th>
         <th>Status</th>
         <th>Schedule Time (Port Time Zone)</th>
         <th>Created By</th>
         @if($permission['edit'] || $permission['destroy'])
         <th style="text-align: right;">Action</th>
         @endif
        </tr>
      </thead>
      <tbody>
        @if(count($data) != 0)
          @foreach ($data as $key => $noti)
          <tr>
            <td>{{isset($noti->cruise->name)?$noti->cruise->name:''}}</td>
            <td>{{isset($noti->tour->file_name)?$noti->tour->file_name:''}}</td>
            <td style="word-break: break-word;">{!! $noti->message !!}</td>
            <td style="word-break: break-word;"><a href="{{$noti->link}}" target="_blank">{{$noti->link}}</a></td>
            <td>{{$noti->send_number_of_user}}</td>
            <td>{!! ($noti->status == 1) ? '<span class="label label-success">Sent</span>' : '<span class="label label-info">Scheduled</span>' !!}</td>
            {{-- <td>{{\App\Helpers\Helper::dateTimeConvert($noti->sending_date_time)}}</td> --}}

            @if($noti->time_zone_hour == 0)
              <td> {{ \App\Helpers\Helper::dateTimeConvert($noti->sending_date_time).' (EST)' }}</td>
            @else
              <td> {{ \App\Helpers\Helper::dateTimeConvert($noti->view_sending_date_time_text).' (EST)' }}<br>
                  {{ \App\Helpers\Helper::dateTimeConvert($noti->sending_date_time).' (Port Time)' }}</td>
            @endif
            
            {{--@if($noti->status == 1)
            <td>{{\App\Helpers\Helper::dateTimeConvert($noti->updated_at)}}</td>  
            @else
              <td>{{\App\Helpers\Helper::dateTimeConvert($noti->schedule_date.' '.$noti->schedule_time)}}</td> 
            @endif    
            --}}  
            <td>
              {{($noti->createByDetails) ? ($noti->createByDetails->first_name . " ". $noti->createByDetails->last_name) : 'NA'}}
            </td>   
            @if(($permission['destroy'] || $permission['edit']) && ($noti->status != 1))
            <td class="text-right">
              @if($permission['edit'])
                @if(isset($noti->uniq_ID) && isset($noti->tour_id))
                  <a href="{{ route($routePrefix . '.edit',[$noti->uniq_ID, 'tour' => base64_encode($noti->tour_id)]) }}" class="btn btn-default btn-circle waves-effect waves-circle waves-float" data-toggle="tooltip" title="" data-original-title="Edit"><i class="material-icons">create</i></a>
                @endif
              @endif
              @if($permission['destroy'] && ($noti->status != 1))
                @if(isset($noti->uniq_ID))
                  <a class="btn bg-red btn-circle waves-effect waves-circle waves-float" data-toggle="tooltip" title="" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="event.preventDefault();
                    document.getElementById('delete-form-{{$noti->uniq_ID}}').submit();" data-original-title="Delete"><i class="material-icons">delete</i></a>
                    {!! Form::open([
                      'method' => 'DELETE',
                      'route' => [
                        $routePrefix . '.destroy', 
                        $noti->uniq_ID
                      ], 
                      'style'=>'display:inline', 
                      'id' => 'delete-form-' . $noti->uniq_ID
                      ]) !!}
                    {!! Form::close() !!} 
                @endif
              @endif
            </td>
            @endif
          </tr>
          @endforeach
        @else 
        <tr><td colspan="25"><div class="alert alert-danger">No Data</div></td></tr>
        @endif
      </tbody>    
    </table>
  </div>
  {!! $data->appends(request()->input())->links() !!}
</div>
<div class="modal fade" id="templateModal" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header custom-modal-header">
                <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close"><span aia-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="fileModalLabel">Notification Templates</h4>
            </div>
            {!! Form::open(array('method'=>'POST', 'enctype'=>'multipart/form-data','id'=>'templateAssignForm')) !!}
              <div class="modal-body" id="assign_template_body_div">
                  
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-default modal-close" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary" id="assign-template-btn">Save</button>
              </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
$(document).ready(function () {
  
    $('body').on('click','.copy_to_clipboard',function(){
      var id= $(this).attr('data-id');
      //copyToClipboard(document.getElementById("copy_text_"+id));
      copyToClipboard("copy_text_"+id);
    });

    var tour_details = '';
    
    if(tour_details == ''){
      $('.choose-template-btn').css('display', 'none');
    } else {
      var tour_id = ''
      $('.choose-template-btn').attr('data-cruise-id', tour_id); 
    }

    $('body').on('click', '.choose-template-btn', function() {      
      var tour_id = $(this).attr('data-cruise-id');
      $.ajax({
          url: "{{url('admin/get-notification-templates')}}",
          data: {tour_id: tour_id},
          type: 'GET',
          beforeSend: function() {
              $('.loader').show();
          },
          success: function(data) {
              $('.loader').hide();
              if (data.success) {                 
                $('#assign_template_body_div').html(data.html);
                $('#templateModal').modal('show');
                var checked = $('input[name="template_ids[]"]:checked');
                var checkbox_no = $('input[name="template_ids[]"]');
                var checked2 = [];
                $('input[name="assign_time_zones[]"]:checked').each(function() {
                  checked2.push(this.value);
                })
                var checkbox_no2 = $('input[name="assign_time_zones[]"]');
                
                // if (checkbox_no.length == checked.length) {
                //   $('#all-templates').prop('checked', true);
                // } 
                checkedSelectedCheckbox();
                checkedSelectedAssignTimezones(checked2, tour_id);
                checkedSelectedCheckboxAssignedTimeZone();
                //$(".select2").select2({ width: '60%',dropdownParent: $("#templateModal") }); 
              }
          },
          error: function() {
              
          }
      });  
    });

    $('body').on('click','.template-all-check',function(){
        if($(this).prop("checked") == true){
            $('.category-chk').prop("checked", true);
            $('.all-templates').each(function () {
                $(this).prop("checked",true);
            });
            $('#all-assign-time-zones').attr('disabled', false);
            $('.all-assign-time-zones').each(function () {
              $('.all-assign-time-zones').attr('disabled', false);
            });
        }
        else{
            $('.category-chk').prop("checked", false);
            $('.all-templates').each(function () {
                $(this).prop("checked",false);
            });
            $('#all-assign-time-zones').attr('disabled', true);
            $('#all-assign-time-zones').prop("checked",false);
            $('.all-assign-time-zones').each(function () {
              $(this).attr('disabled', true);
              $(this).prop("checked",false);
              $('.adjust_time_zone').html('');
            });
        }
    });
    $('body').on('click','.all-templates',function(){
        if($(this).prop("checked") == false){
          $('#assign-time-'+$(this).attr('template-id')).prop("checked",false);
          $('#assign-time-'+$(this).attr('template-id')).attr('disabled', true);
          $('#adjust_time_zone_'+$(this).attr('template-id')).html('');
        } else {
          $('#assign-time-'+$(this).attr('template-id')).attr('disabled', false);
        }
        var all_chk = true;
        var cat_check = true;
        $('.category-chk').each(function () {
          var cat_id = $(this).attr('data-id');
          var cat_check = ($('.cat-class-'+cat_id).length > 0) ? true : false;
          $('.cat-class-'+cat_id).each(function () {         
              if($(this).prop("checked") == false){
                cat_check = false;
              } 
          });
          if(cat_check){
            $('#category-chk-'+cat_id).prop("checked",true);
            $('#assign-timezones-chk-'+cat_id).prop("disabled",false);
          }
          else{
            all_chk = false;
            $('#category-chk-'+cat_id).prop("checked",false);
            $('#assign-timezones-chk-'+cat_id).prop("disabled",true);
          }
        });
        if(all_chk){
            $('#all-templates').prop("checked",true);
            $('#all-assign-time-zones').attr("disabled",false);
        }
        else{
            $('#all-templates').prop("checked",false);
            $('#all-assign-time-zones').attr("disabled",true);
        }
    });
    $('body').on('click','.category-chk', function(){
      var data_id = $(this).attr('data-id');
      console.log(data_id);
      if($(this).prop("checked") == true){
          $('.cat-class-'+data_id).each(function () {
              $(this).prop("checked",true);
          });
          $('#assign-timezones-chk-'+data_id).attr('disabled', false);
          $('.cat2-class-'+data_id).each(function () {
              $(this).attr('disabled', false);
          });
      }
      else{
          $('.cat-class-'+data_id).each(function () {
            $(this).prop("checked",false);
          });
          $('#assign-timezones-chk-'+data_id).attr('disabled', true);
          $('#assign-timezones-chk-'+data_id).prop("checked",false);
          $('.cat2-class-'+data_id).each(function () {
              $(this).attr('disabled', true);
              $(this).prop("checked",false);
              $('#adjust_time_zone_'+$(this).val()).html('');
          });
      }
      var all_chk = 1;
      $('.category-chk').each(function () {
        if($(this).prop("checked") == false){
          all_chk = 0;
        }
      });
      if(all_chk == 1){
        $('#all-templates').prop("checked",true);
      }
      else{
        $('#all-templates').prop("checked",false);
      }
    });
    $('body').on('click','.assign-time-zones-all-check',function(){
        if($(this).prop("checked") == true){
            $('.all-assign-time-zones').each(function () {
                $(this).prop("checked",true);
                var tour_id = $(this).attr('tour-id');
                var template_id = $(this).val();
                var is_checked = 1;
                $.ajax({
                  url: PATH + "/get-adjust-time-zone-from-template",
                  data: {tour_id : tour_id,is_checked:is_checked, template_id: template_id},
                  type:'GET',
                  beforeSend: function(){
                      //$('.loader').show();
                  },
                  success: function(data){
                      $('.loader').hide();   
                      
                      if(is_checked == 1){
                        $('#adjust_time_zone_'+template_id).html(data.sending_date_time);
                      }
                      else{
                        $('#adjust_time_zone_'+template_id).html('');
                      }
                  },
                  error:function(){
                      $('.loader').hide();
                  }
                });
            });
        }
        else{
            $('.all-assign-time-zones').each(function () {
                $(this).prop("checked",false);
                $('#adjust_time_zone_'+$(this).val()).html('');
            });
        }
    });
    
    $('body').on('click','.all-assign-time-zones',function(){
        var tour_id = $(this).attr('tour-id');
        var template_id = $(this).val();
        var is_checked = 0;
        if($(this).prop("checked") ==  true) {
          is_checked = 1;
          $.ajax({
            url: PATH + "/get-adjust-time-zone-from-template",
            data: {tour_id : tour_id,is_checked:is_checked, template_id: template_id},
            type:'GET',
            beforeSend: function(){
                //$('.loader').show();
            },
            success: function(data){
                $('.loader').hide();   
                
                if(is_checked == 1){
                  $('#adjust_time_zone_'+template_id).html(data.sending_date_time);
                }
                else{
                  $('#adjust_time_zone_'+template_id).html('');
                }
            },
            error:function(){
                $('.loader').hide();
            }
          });
        } else {
          $('#adjust_time_zone_'+template_id).html('');
        }
        
        var all_chk = true;
        $('.assign-timezones-chk').each(function () {
          var cat_id = $(this).attr('data-id');
          var cat_check = ($('.cat2-class-'+cat_id).length > 0) ? true : false;
          $('.cat2-class-'+cat_id).each(function () {
              if($(this).prop("checked") == false){
                cat_check = false;
              }
          });
          if(cat_check){
            $('#assign-timezones-chk-'+cat_id).prop('checked', true);
          }
          else{
            all_chk = false;
            $('#assign-timezones-chk-'+cat_id).prop('checked', false);
          }
        });
        if(all_chk){
            $('#all-assign-time-zones').prop("checked",true);
            $('#all-assign-time-zones').attr("disabled",false);
        }
        else{
            $('#all-assign-time-zones').prop("checked",false);
            $('#all-assign-time-zones').attr("disabled",true);
        }
    });

    $('body').on('click','.assign-timezones-chk', function(){
      var data_id = $(this).attr('data-id');
      console.log(data_id);
      if($(this).prop("checked") == true){
          $('.cat2-class-'+data_id).each(function () {
              $(this).prop("checked",true);
              var tour_id = $(this).attr('tour-id');
              var template_id = $(this).val();
              var is_checked = 1;
              $.ajax({
                url: PATH + "/get-adjust-time-zone-from-template",
                data: {tour_id : tour_id,is_checked:is_checked, template_id: template_id},
                type:'GET',
                beforeSend: function(){
                    //$('.loader').show();
                },
                success: function(data){
                    $('.loader').hide();   
                    
                    if(is_checked == 1){
                      $('#adjust_time_zone_'+template_id).html(data.sending_date_time);
                    }
                    else{
                      $('#adjust_time_zone_'+template_id).html('');
                    }
                },
                error:function(){
                    $('.loader').hide();
                }
              });
          });
      }
      else{
          $('.cat2-class-'+data_id).each(function () {
            $(this).prop("checked",false);
            $('#adjust_time_zone_'+$(this).val()).html('');
          });
      }
      var all_chk = 1;
      $('.assign-timezones-chk').each(function () {
        if($(this).prop("checked") == false){
          all_chk = 0;
        }
      });
      if(all_chk == 1){
        $('#all-assign-time-zones').prop("checked",true);
      }
      else{
        $('#all-assign-time-zones').prop("checked",false);
      }
    });

    $('body').on('click', '#assign-template-btn', function() {
      var redirection_url = "{{url('admin/cruises')}}";
      var tour_id = $('#template_tour_id').val();
      var ids = [];
      var assign_timezone_ids = [];
      $('.all-templates').each(function () {
          if($(this).prop("checked") == true){
              ids.push($(this).val());
              console.log(ids.length);
          }
      });
      $('.all-assign-time-zones').each(function () {
          if($(this).prop("checked") == true){
              assign_timezone_ids.push($(this).val());
              console.log(assign_timezone_ids.length);
          }
      });
      $.ajax({
          url: "{{url('admin/assign-template-to-cruise')}}",
          data: {ids: ids, tour_id: tour_id, assign_timezone_ids: assign_timezone_ids},
          type: 'POST',
          beforeSend: function() {
              $('.loader').show();
          },
          success: function(data) {
              $('.loader').hide();
              if (data.success) { 
                $('#templateAssignForm').submit();
                toastr.success(data.msg,"Assign Template");
                //window.location.href = redirection_url;
                window.location.reload();
              }
              else {
                toastr.error(data.msg,"Assign Template");
                // window.location.href = redirection_url;
                event.preventDefault();
              }
          },
          error: function() {
              
          }
      });  
    });
});

function checkedSelectedAssignTimezones(checked, tour_id) {
  var tour_id = tour_id;
  $.each ( checked, function (indexes, values){
    var template_id = values;
    var is_checked = 1;
    $.ajax({
      url: PATH + "/get-adjust-time-zone-from-template",
      data: {tour_id : tour_id,is_checked:is_checked, template_id: template_id},
      type:'GET',
      beforeSend: function(){
          //$('.loader').show();
      },
      success: function(data){
          $('.loader').hide();   
          
          if(is_checked == 1){
            $('#adjust_time_zone_'+template_id).html(data.sending_date_time);
          }
          else{
            $('#adjust_time_zone_'+template_id).html('');
          }
      },
      error:function(){
          $('.loader').hide();
      }
    });
  });
}

function checkedSelectedCheckbox(){
  var all_check = 1;
  $('.category-chk').each(function () { //category
    var data_id = $(this).attr('data-id'); 
    var is_checked = ($('.cat-class-'+data_id).length > 0) ? 1 : 0;
    $('.cat-class-'+data_id).each(function () { //templates
      if($(this).prop("checked") == false){
        is_checked = 0;
        
      }
    });
    if(is_checked == 1){
      $('#category-chk-'+data_id).prop("checked",true);
    }
    else{
      all_check = 0;
      $('#category-chk-'+data_id).prop("checked",false);
    }
  });
  if(all_check == 1){
    $('#all-templates').prop("checked",true);
  }
  else{
    $('#all-templates').prop("checked",false);
  }
  
}

function checkedSelectedCheckboxAssignedTimeZone(){
  var all_check = 1;
  $('.assign-timezones-chk').each(function () {
    var data_id = $(this).attr('data-id'); 
    var is_checked = ($('.cat2-class-'+data_id).length > 0) ? 1 : 0; 
    $('.cat2-class-'+data_id).each(function () {
      if($(this).prop("checked") == false){
        is_checked = 0;
        
      }
    });
    if(is_checked == 1){
      $('#assign-timezones-chk-'+data_id).prop("checked",true);
      $('#assign-timezones-chk-'+data_id).attr("disabled",false);
    }
    else{
      all_check = 0;
      $('#assign-timezones-chk-'+data_id).prop("checked",false);
    }
  });
  if(all_check == 1){
    $('#all-assign-time-zones').prop("checked",true);
    $('#all-assign-time-zones').attr("disabled",false);
  }
  else{
    $('#all-assign-time-zones').prop("checked",false);
  }
  
}
function copyToClipboard(elem) {
	var str = document.getElementById(elem).value;
	var el = document.createElement('textarea');
	el.value = str;
	el.setAttribute('readonly', '');
	el.style.position = 'absolute';
	el.style.left = '-9999px';
	document.body.appendChild(el);
	el.select();
	document.execCommand('copy');
	document.body.removeChild(el);

}
</script>
@endsection