@extends('layouts.master')

@section('content')
<style>
  i.fa.fa-unlock-alt {
    font-size: 22px;
    cursor: pointer;
    color: #07a704;
  }

  i.fa.fa-lock {
    font-size: 22px;
    cursor: pointer;
    color: #f13636;
  }
</style>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0 text-dark">{{ trans('breadcrumbs.Blacklists') }}</h1>
        </div>
        <!-- /.col -->
        <div class="col-sm-3"></div>
        <div class="col-sm-3">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item">{{ Breadcrumbs::render('Blacklists') }}</li>
          </ol>
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
  </div>
  <!-- /.content-header -->

  <section class="content">
    <div class="card" id="filterDiv">
      <div class="card-header">
        <h3 class="card-title">{{ trans('layout.Filter') }}</h3>
        <div class="col-md-6 card-primary card-form-1">
          <div class="card-body">
            <div class="form-col-1">
              {{ Form::label('IP_ADDRESS', trans('helpdesk.IP Address')) }}
              {{ Form::text('IP_ADDRESS','', ['id' => 'IP_ADDRESS', 'class' => 'form-control', 'placeholder' => trans('helpdesk.IP Address')]) }}
            </div>
            <div class="form-col-1">
              {{ Form::label('BLOCK_TYPE',  trans('helpdesk.IP Blacklist Type'))}}
              {{ Form::select('BLOCK_TYPE', $blockType, '', ['id' => 'BLOCK_TYPE', 'class' => 'form-control select2','placeholder' => trans('reports.Select option')]) }}
            </div>
            <div class="form-col-1">
              {{ Form::label('DATE_RANGE',trans('layout.Select Date Range')) }}<br>
              <button type="button" style="width: 100%;" class="btn btn-default" id="daterange-btn">
                <span class="daterange_span pull-left">{{ trans('layout.Select Date Range') }}</span>
              </button>
              <input type="hidden" name="selected_date" id="selected_date">
              <input type="hidden" name="selected_datatime" id="selected_datatime">
            </div>
            <br> <br>
            <div class="button_sec">
              <button class="btn btn-primary" id="getReport">{{ trans('layout.Submit') }}</button>
              <button class="btn btn-default" id="reloadPage">{{ trans('layout.Clear') }}</button>
            </div>
          </div>
        </div>
      </div>
      <!-- /.card-body -->
    </div>

    <div class="card" id="report" style="display:none">
      <div class="card-header">
        <h3 class="card-title" id="report_title"></h3>
      </div>
      <div class="card-body">
        <table id="table" class="table table-bordered table-striped">
          <thead>
            <tr>
              <th class="text-center">{{ trans('helpdesk.IP Address') }}</th>
              <th class="text-center">{{ trans('helpdesk.Date and time') }}</th>
              <th class="text-center">{{ trans('helpdesk.Registration status') }}</th>
              <th class="text-center">{{ trans('helpdesk.Login status') }}</th>
            </tr>
          </thead>
        </table>
      </div>
      <!-- /.card-body -->
    </div>
  </section>

</div>
@endsection
@section('javascript')
@include('datatablejs')
<script type="text/javascript">
  var reportTable;
  $("#getReport").click(function() {
    $("#selected_datatime").val($("#selected_date").val());

    $('#report_title').html("Blacklist : " + $('.daterange_span').html());
    $('#report').show();

    reportTable = $('#table').DataTable({
      "responsive": true,
      "pagingType": "numbers",
      "processing": true,
      "bDestroy": true,
      "serverSide": true,
      "searching": false,
      "aaSorting": [],
      "lengthMenu": [
        [20, 50, 100, 200],
        [20, 50, 100, 200]
      ],
      "columnDefs": [{
        "className": 'text-center',
        "targets": [1, 2, 3]
      }],
      "ajax": {
        "url": "{{ route('blacklists.fetch') }}",
        "type": "GET",
        "data": function(d) {
          d.filter_date = $("#selected_datatime").val();
          d.filter_ip_address = $("#IP_ADDRESS").val();
          d.filter_block_type = $("#BLOCK_TYPE").val();
        },
        "error": function(e) {
          swal("{{ trans('layout.Something went wrong') }}", {
            icon: "warning",
          });
        },
      }
    });
  });

  $(document).on('click', '.register-status-change', function() {
    var ip = $(this).data('id');
    var status = $(this).data('ref');
    var type = 'Register';
    updateStatus(ip, status, type);
  });

  $(document).on('click', '.login-status-change', function() {
    var ip = $(this).data('id');
    var status = $(this).data('ref');
    var type = 'Login';
    updateStatus(ip, status, type);
  });

  // Update status
  function updateStatus(ip, status, type) {

    swal({
        title: "{{ trans('helpdesk.Alert')  }} ",
        text: "{{ trans('helpdesk.Blacklist alert message') }}",
        icon: "warning",
        buttons: true,
        dangerMode: true,
      })
      .then((willUpdate) => {
        if (willUpdate) {
          $.ajaxSetup({
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
          });
          $.ajax({
            url: "{{ route('blacklists.statusChange') }}",
            method: "GET",
            dataType: 'json',
            data: {
              ip_address: ip,
              status: status,
              type: type
            },
            success: function(response) {
              var message = response.msg;
              var status = response.status;
              if (status == 200) {
                $('select[name=table_length]').trigger('change');
                swal(message, {
                  icon: "success",
                });
              } else {
                swal(message, {
                  icon: "warning",
                });
              }
            },
            error: function() {
              swal("{{ trans('layout.Something went wrong') }}", {
                icon: "warning",
              });
            }
          });
        } else {

        }
      });
  }
</script>
@stop