@extends('layouts.campaign')
@section('title', 'List')
@section('new_button')
<a href="{!! URL::to('/campaign_lists/create') !!}" class="btn btn-info btn-Rcircle-iconic waves-effect waves-light"><i
    class="material-icons left">add</i> Create List</a>
@endsection
@section('content')
<style>
  tr>td {
    width: 12% !important;
  }
  
  .btn-warning, .btn-warning:hover, .btn-warning:focus {
    background: #ff971b !important;
    color: #fff !important;
    position: relative;
    top: -23px;
    right: -23px;
}
</style>
<div class="table-responsive table-xAuto">
  <table class="table table-show table-bordered table-hover" id="table_id" width="100%">
    <thead>
      <tr>
        <th style="width: 5% !important;">
          <label class="custom-control overflow-checkbox" style="top:10px;"> 
            <input type="checkbox" class="overflow-control-input" id="selectAll">
            <span class="overflow-control-indicator"></span>
          </label>
          <button class="btn btn-xs btn-warning" id="deleteBtn" onclick="deleteAll()"> <i class="fa fa-trash"></i> Delete
          </button>
        </th>
        <th  width="30%"> List Name </th>
        <th  width="25%"> Subscribers </th>
        <th  width="20%"> Add New </th>
        <th  width="20%"> Actions </th>
      </tr>
    </thead>
    <tbody id="data_div"></tbody>
  </table>
</div>
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Adding New Contact</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        {!! Form::open(['id' => 'form-create-subscribers', 'url'=> '/campaign_contacts' , 'role' => 'form']) !!}
        <div class="modal-body">
          <div class="row">
            {!! Form::textGroup('name', 'Name', null, []) !!}
            {!! Form::textGroup('email', 'Email', null, ['required'=>'required']) !!}
            {!! Form::textGroup('phone', 'Phone', null, ['onkeyup'=>'return isNumberKey(event)', 'maxlength'=>'12'])
            !!}
          </div>
          <input id="list_hidden" type="hidden" name="list_id" value='+ listid +'>
        </div>
        <div class="modal-footer">
          <div class="pull-left">
            <button class="btn btn-primary" style="display: none;" id="loaderDiv">
              <div class="lds-dual-ring"></div>
            </button>
            {!! Form::button('<span class="fa fa-save"></span> Save', ['type' => 'submit',
            'id' =>'button-create-subscribers', 'class' => 'btn btn-success']) !!}
            <button type="button" class="btn btn-default" data-dismiss="modal"><span class="fa fa-times-circle"></span>Cancel</button>
            <button type="button" id="modelCloseBtn" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>
        </div>
        {!! Form::close() !!}
      </div>

    </div>
  </div>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="display: none;"
  id="modelBtn"></button>
<script>
  $("#deleteBtn").hide();
    $("#selectAll").on('change', function() {
      if($(this).prop('checked') == true) {
        $('.allLists').prop('checked', true);
        $("#deleteBtn").show();

      }else{
        $('.allLists').prop('checked', false);
        $("#deleteBtn").hide();
      }
    });

    $(".allLists").on('change', function() {
      if($(this).prop('checked') == true) {
        $("#deleteBtn").fadeIn();

      }else{
        var lists = [];

        $('input:checkbox.allLists').each(function () {
          if ($(this).prop('checked') == true) {
            lists.push($(this).val());
          }
        });

        if (lists.length == 0) {
          $("#selectAll").prop('checked', false);
          $("#deleteBtn").hide('fast');
        } else {
          $("#deleteBtn").show('fast');
        }
      }
      var lists = [];
    });

    function deleteAll() {
      if (confirm('Are sure ?')) {
        var lists = [];

        $('input:checkbox.allLists').each(function () {
            if ($(this).prop('checked') == true) { lists.push($(this).val()); }
        });

        $.ajax({
          url: '{{ url("/campaign/lists-delete") }}',
          type: 'POST',
          data: {
              "_token": "{{ csrf_token() }}",
              lists: lists
            },
          success: function() {
            window.location.reload();
          }
        });
      }  
    }

    /*Add Subscriber to a list*/      
    function addSubscriber(listid){
      $("#list_hidden").val(listid);
      $("#modelBtn").click();
    }

    $(document).on('submit #form-create-subscribers',function(e){
      e.preventDefault(); 
      $("#loaderDiv").show('fast');
      
      $('#modal-create-subscribers .modal-header').before('<div id="span-loader"><span class="span-loader"><img src="{{ url('acs/custom/images/loader.gif') }}" class="span-loader-img"  style="position:relative;top:150px;left:180px; height:100px"></span></div>');

      var lid = $("#list_hidden").val();

      $.ajax({
        url: '{{ url("/campaign_contacts") }}',
        type: 'POST',
        data: $('#form-create-subscribers').serialize(),
        success: function(data) {
          $('#span-loading').remove();
          $("#div_"+lid).html( +($("#div_"+lid).html()) + +1 );   
          $("#modelCloseBtn").click();
          $("#loaderDiv").hide('fast');
        }
      });
    });
</script>
{{ Form::hidden('page_id', 1, ['id'=>'page_id']) }}
<script>
  $(document).ready(function(){
		$("#page_id").val(1);
		getdata();
	});
	
	function getdata() {
		var page_id = $("#page_id").val();
		var search = $("#search").val();

		$.ajax({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            dataType: 'html',
            url: "/campaign_lists?page="+page_id,
            data: "",
			      async: false,
            success: function(result){
                $("#data_div").append(result);
                var pg = $("#page_id").val();
                $("#page_id").val(+pg+1);
            }
        });
	}

	$("#search").on('keyup', function(e) {
		var regex = new RegExp("^[a-zA-Z0-9]+$");
		var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
		if (regex.test(str)) {
			dataChange();
		}

		if(e.keyCode == 13){
			dataChange();
		}
	});

	function dataChange() {
		$("#page_id").val(1);
		$("#data_div").html('');
		getdata();
	}

	$(window).scroll(function(){
		if($(document).height()==$(window).scrollTop()+$(window).height()){
			if(+$("#last_page").val() >= +$("#page_id").val()) {
				getdata();
			}
		}
	});
</script>
@endsection