@extends('layouts.master')

@section('content')
<style type="text/css">
  .show-unique-user,
  .show-FTD-user {
    cursor: pointer;
  }

  .ranges li:nth-child(5) {
    display: none;
  }
</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.Campaign Report') }}</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('Campaign Report') }}</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('CAMPAIGN_TYPE',  trans('reports.Campaign Type'))}}
              {{ Form::select('CAMPAIGN_TYPE', ['REGISTRATION' => 'REGISTRATION'], '', ['class' => 'form-control','placeholder' => trans('reports.Select option'),'id' => 'CAMPAIGN_TYPE']) }}
            </div>
            <div class="form-col-1">
              {{ Form::label('CAMPAIGN_NAME', trans('reports.Campaign Name')) }}
              {{ Form::text('CAMPAIGN_NAME','', ['id' => 'CAMPAIGN_NAME', 'class' => 'form-control', 'placeholder' => trans('reports.Campaign Name')]) }}
            </div>
            <div class="form-col-1">
              {{ Form::label('CAMPAIGN_CODE', trans('reports.Campaign Code')) }}
              {{ Form::text('CAMPAIGN_CODE','', ['id' => 'CAMPAIGN_CODE', 'class' => 'form-control', 'placeholder' => trans('reports.Campaign Code')]) }}
            </div>
            <div class="form-col-1">
              {{ Form::label('PARTNER_NAME',  trans('reports.Choose Partner'))}}
              {{ Form::select('PARTNER_NAME', $partnerName, '', ['class' => 'form-control select2','placeholder' => trans('reports.Partner'),'id' => 'PARTNER_NAME']) }}
            </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-btn1">
                <span class="daterange_span pull-left">{{ trans('layout.Select Date Range') }}</span>
              </button>
              <input type="hidden" name="selected_datatime" id="selected_datatime">
            </div>
            <div class="form-col-1">
              {{ Form::label('FTD_DATE_RANGE',trans('reports.FTD Date Range')) }}<br>
              <button type="button" style="width: 100%;" class="btn btn-default" id="daterange-btn2">
                <span class="daterange_span pull-left">{{ trans('layout.Select Date Range') }}</span>
              </button>
              <input type="hidden" name="FTD_datatime" id="FTD_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="clear">{{ 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">
        <div class="dt-buttons" onClick="post()"><button class="dt-button buttons-excel buttons-html5" tabindex="0" type="button" title="Excel"><span><i class="fa fa-file-excel-o"></i></span></button> </div>
        <table id="table" class="table table-bordered table-striped">
          <thead>
            <tr>
              <th class="text-center">{{ trans('reports.Partner') }}</th>
              <th class="text-center">{{ trans('reports.Campaign Type') }}</th>
              <th class="text-center">{{ trans('reports.Campaign Name') }}</th>
              <th class="text-center">{{ trans('reports.No of Use') }}</th>
              <th class="text-center">{{ trans('reports.Unique Users') }}</th>
              <th class="text-center">{{ trans('reports.Deposit') }}</th>
              <th class="text-center">{{ trans('reports.Withdraw') }}</th>
              <th class="text-center">{{ trans('reports.GRC') }}</th>
              <th class="text-center">{{ trans('reports.BRC') }}</th>
              <th class="text-center">{{ trans('reports.GST') }}</th>
              <th class="text-center">{{ trans('reports.NRC') }}</th>
              <th class="text-center">{{ trans('reports.FTD') }}</th>
            </tr>
          </thead>
        </table>
      </div>
      <!-- /.card-body -->
    </div>
  </section>


  <!-- USER INFORMATION POPUP -->

  <div class="modal fade" id="msg_detail" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title" id="msg_title"></h4>
        </div>
        <div class="modal-body" id="msg_body">

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

  <!-- USER INFORMATION POPUP -->


</div>
@endsection
@section('javascript')
@include('datatablejs')
<script type="text/javascript">
  var date = new Date();
  var time = date.toTimeString().split(' ')[0].split(':');

  var start = moment().startOf('month');
  var end = moment().endOf('month');

  function setDate(start, end) {
    $('#daterange-btn1 span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
    var selected_datatime = start.format('DD-MM-YYYY') + ' 00:00:00&' + end.format('DD-MM-YYYY') + ' ' + time[0] + ':' + time[1] + ':' + time[2];
    $("#selected_datatime").val(selected_datatime);
  }

  $('#daterange-btn1').daterangepicker({
    opens: 'right',
    showDropdowns: true,
    linkedCalendars: false,
    maxDate: moment().add(1, 'days'),
    ranges: {
      'Today': [moment(), moment()],
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'This Week': [moment().startOf('week').add(1, 'days'), moment().endOf('week').add(1, 'days')],
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
      'This Month': [moment().startOf('month'), moment().endOf('month')]
    },
    startDate: start,
    endDate: end
  }, setDate);


  function setDate2(start, end) {
    $('#daterange-btn2 span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
    var selected_datatime = start.format('DD-MM-YYYY') + ' 00:00:00&' + end.format('DD-MM-YYYY') + ' ' + time[0] + ':' + time[1] + ':' + time[2];
    $("#FTD_datatime").val(selected_datatime);
  }
  $('#daterange-btn2').daterangepicker({
    opens: 'right',
    showDropdowns: true,
    linkedCalendars: false,
    maxDate: moment().add(1, 'days'),
    ranges: {
      'Today': [moment(), moment()],
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'This Week': [moment().startOf('week').add(1, 'days'), moment().endOf('week').add(1, 'days')],
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
      'This Month': [moment().startOf('month'), moment().endOf('month')]
    },
    startDate: start,
    endDate: end
  }, setDate2);

  $("#clear").click(function() {
    window.location.reload();
  });

  $("#CAMPAIGN_TYPE, #CAMPAIGN_NAME, #CAMPAIGN_CODE, #PARTNER_NAME").change(function() {
    $('#report').hide();
  });

  var reportTable;
  $("#getReport").click(function() {

    $('#report_title').html("Campaign Report");
    $('#report').show();

    reportTable = $('#table').DataTable({
      "responsive": true,
      "pagingType": "numbers",
      "processing": true,
      "bDestroy": true,
      "serverSide": true,
      "searching": false,
      "ordering": false,
      "aaSorting": [],
      "lengthMenu": [
        [20, 50, 100, 200],
        [20, 50, 100, 200]
      ],
      "columnDefs": [{
          "orderable": false,
          "targets": [3]
        },
        {
          "className": 'text-right',
          "targets": [5, 6, 7, 8, 9, 10]
        },
        {
          "className": 'text-center',
          "targets": [3, 4, 11]
        }
      ],
      "ajax": {
        "url": "{{ route('campaignReport.fetch') }}",
        "type": "GET",
        "data": function(d) {
          d.filter_campaign_type = $("#CAMPAIGN_TYPE").val();
          d.filter_campaign_name = $("#CAMPAIGN_NAME").val();
          d.filter_campaign_code = $("#CAMPAIGN_CODE").val();
          d.filter_partner = $("#PARTNER_NAME").val();
          d.filter_date = $("#selected_datatime").val();
          d.filter_FTD_date = $("#FTD_datatime").val();
        },
        "error": function(e) {
          swal("{{ trans('layout.Something went wrong') }}", {
            icon: "warning",
          });
        },
      },
      "drawCallback": function(response, settings) {
        var api = this.api();
        var rows = api.rows({
          page: 'current'
        }).nodes();
        if (rows.length > 0) {
          $('.dt-buttons').show();
        } else {
          $('.dt-buttons').hide();
        }
      }
    });
  });

  function post() {
    const form = document.createElement('form');
    form.method = 'get';
    form.action = "{{ route('campaignReport.download') }}";

    const hiddenField = document.createElement('input');
    hiddenField.type = 'hidden';
    hiddenField.name = 'filter_campaign_type';
    hiddenField.value = $("#CAMPAIGN_TYPE").val();

    form.appendChild(hiddenField);

    const hiddenField3 = document.createElement('input');
    hiddenField3.type = 'hidden';
    hiddenField3.name = 'filter_campaign_name';
    hiddenField3.value = $("#CAMPAIGN_NAME").val();

    form.appendChild(hiddenField3);

    const hiddenField4 = document.createElement('input');
    hiddenField4.type = 'hidden';
    hiddenField4.name = 'filter_campaign_code';
    hiddenField4.value = $("#CAMPAIGN_CODE").val();

    form.appendChild(hiddenField4);

    const hiddenField5 = document.createElement('input');
    hiddenField5.type = 'hidden';
    hiddenField5.name = 'filter_partner';
    hiddenField5.value = $("#PARTNER_NAME").val();

    form.appendChild(hiddenField5);

    const hiddenField6 = document.createElement('input');
    hiddenField6.type = 'hidden';
    hiddenField6.name = 'filter_date';
    hiddenField6.value = $("#selected_datatime").val();

    form.appendChild(hiddenField6);

    const hiddenField7 = document.createElement('input');
    hiddenField7.type = 'hidden';
    hiddenField7.name = 'filter_FTD_date';
    hiddenField7.value = $("#FTD_datatime").val();

    form.appendChild(hiddenField7);

    document.body.appendChild(form);
    form.submit();
  }
</script>
<script type="text/javascript">
  $(document).on('click', '.show-unique-user', function() {
    var partner = $(this).data('partner');
    var code = $(this).data('code');

    var data = new FormData();
    data.append('partner', partner);
    data.append('code', code);
    data.append('filter_date', $("#selected_datatime").val());
    data.append('filter_FTD_date', $("#FTD_datatime").val());
    data.append('_token', '{{ csrf_token() }}');

    $.ajax({
      type: 'POST',
      url: "{{ route('campaignReport.getUniqueUser') }}",
      data: data,
      dataType: 'JSON',
      contentType: false,
      processData: false,
      beforeSend: function() {},
      success: function(response) {
        var message = response.msg;
        var status = response.status;
        if (status == 200) {
          $('#msg_title').html("{{ trans('reports.Unique Users') }}");
          $('#msg_body').html(message);
          $('#msg_detail').modal('show');
        } else {
          swal("{{ trans('layout.Something went wrong') }}", {
            icon: "warning",
          });
        }
      },
      error: function() {
        swal("{{ trans('layout.Something went wrong') }}", {
          icon: "warning",
        });
      },
      complete: function() {}
    });
  });

  $(document).on('click', '.show-FTD-user', function() {
    var partner = $(this).data('partner');
    var code = $(this).data('code');

    var data = new FormData();
    data.append('partner', partner);
    data.append('code', code);
    data.append('filter_date', $("#selected_datatime").val());
    data.append('filter_FTD_date', $("#FTD_datatime").val());
    data.append('_token', '{{ csrf_token() }}');

    $.ajax({
      type: 'POST',
      url: "{{ route('campaignReport.getFTDUser') }}",
      data: data,
      dataType: 'JSON',
      contentType: false,
      processData: false,
      beforeSend: function() {},
      success: function(response) {
        var message = response.msg;
        var status = response.status;
        if (status == 200) {
          $('#msg_title').html("{{ trans('reports.FTD') }} {{ trans('reports.Unique Users') }}");
          $('#msg_body').html(message);
          $('#msg_detail').modal('show');
        } else {
          swal("{{ trans('layout.Something went wrong') }}", {
            icon: "warning",
          });
        }
      },
      error: function() {
        swal("{{ trans('layout.Something went wrong') }}", {
          icon: "warning",
        });
      },
      complete: function() {}
    });
  });
</script>
@stop