@extends('admin.layouts.masterlayout')
@section('styles')

<link href="{{asset('new_theme/assets/plugins/datatable/css/dataTables.bootstrap5.min.css')}}" rel="stylesheet" />
@endsection
@section('content')
<div class="main-content">

  <div class="row">
    <div class="col-12">
      <div class="card" data-aos="fade-up">
        <div class="card-header">
          <h4>Activity Reports</h4>

        </div>
        <div class="card-body">
            <div class="basic-form">
                @php
                    $start_date = $_GET['start_date'] ?? '';
                    $end_date = $_GET['end_date'] ?? '';
                    $currnet_date = (new DateTime())->format('Y-m-d');
                @endphp

                <div class="d-flex align-items-center flex-wrap gap-2">
                    <div class="form-group me-2 mb-0">
                        <input type="text" name="start_date" id="start_date_input"
                               class="form-control datetimepickerget" autocomplete="off"
                               value="{{ $start_date ?: date('Y-m-01') }}"
                               placeholder="Start date" required>
                    </div>

                    <div class="form-group me-2 mb-0">
                        <input type="text" name="end_date" id="end_date_input"
                               class="form-control datetimepickerget" autocomplete="off"
                               value="{{ $end_date ?: $currnet_date }}"
                               placeholder="End Date" required>
                    </div>

                    <div class="form-group me-2 mb-0">
                        <button type="button" id="filter_date_button"
                                onclick="filter_date_button()"
                                class="btn btn-primary">Submit</button>
                    </div>

                    <div class="form-group mb-0">
                        <a class="btn btn-secondary reset-data">Reset</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-body">
          <div class="table-responsive">
            <table id="dataList" class="table table-striped table-bordered"  style="width:100%">
              <thead>
                <tr>
                  <th>S No.</th>
                  <th>Sub Admin</th>
                  <th>Match Launch</th>
                  <th>Match declare</th>
                  <th>Pan Request Verifed</th>
                  <th>Pan Request Rejected</th>
                  <th>Bank Request Verifed</th>
                  <th>Bank Request Rejected</th>
                  <th>Withdraw Approved</th>
                  <th>Withdraw Rejected </th>

                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection
@section('scripts')
<script src="{{asset('new_theme/assets/plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('new_theme/assets/plugins/datatable/js/dataTables.bootstrap5.min.js')}}"></script>
<!---Show Ajax---------->
<script type="text/javascript">

  var fieldname = '';

  var filtercolums = {

  }

  function cancelEvent() {
    event.stopPropagation();
  }


  function filterData(event, fieldname) {

    var value = event.target.value;

    var url = window.location.href.split('?')[0];
    history.pushState('', '', url + "?filter=1");

    $('#dataList').DataTable().clear().destroy(); //clear table data Table

    $('#dataList').DataTable({
      "processing": true,
      "serverSide": true,
      "ajax": {
        url: "{{route($modelName.'.view_admin_kyc_activity')}}",
        type: "POST",
        data: {
          "_token": "{{ csrf_token() }}",
          "filter_columns": filtercolums
        }
      },
      "columns": [{
          data: 'DT_RowIndex',
          name: 'DT_RowIndex'
        },
        {
          data: 'matchlaunch',
          name: 'matchlaunch'
        },
        {
          data: 'matchdeclared',
          name: 'matchdeclared'
        },
        {
          data: 'panverify',
          name: 'panverify'
        },
        {
          data: 'panrejected',
          name: 'panrejected'
        },
        {
          data: 'bankverify',
          name: 'bankverify'
        },
        {
          data: 'bankrejected',
          name: 'bankrejected'
        },
        {
          data: 'withdrawapproved',
          name: 'withdrawapproved'
        },
        {
          data: 'withdrawRejectedCount',
          name: 'withdrawRejectedCount'
        },



      ]
    });

    document.getElementById(fieldname).focus();

  }
  $('#start_date_input').datetimepicker({
    timepicker: false,
    format: 'Y-m-d'
  });
  $('#end_date_input').datetimepicker({
    timepicker: false,
    format: 'Y-m-d'
  });

  function filter_date_button() {
    var startDate = $("#start_date_input").val();
    var endDate = $("#end_date_input").val();

    if (startDate == '') {
        alert("Please insert Start Date");
        return;
    }
    if (endDate == '') {
        alert("Please insert End Date");
        return;
    }

    // Destroy existing DataTable instance if exists
    if ( $.fn.dataTable.isDataTable('#dataList') ) {
        $('#dataList').DataTable().clear().destroy();
    }

    // Initialize DataTable with export buttons
    var table = $('#dataList').DataTable({
        processing: true,
        serverSide: true,
        lengthChange: false,
        dom: 'Bfrtip',  // Important for buttons
        buttons: ['copy', 'excel', 'pdf', 'print'],
        ajax: {
            url: "{{route($modelName.'.all_users_activity_reports')}}",
            type: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                "start_date": startDate,
                "end_date": endDate
            }
        },
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex' },
            { data: 'name', name: 'name' },
            { data: 'matchlaunch', name: 'matchlaunch' },
            { data: 'matchdeclared', name: 'matchdeclared' },
            { data: 'panverify', name: 'panverify' },
            { data: 'panrejected', name: 'panrejected' },
            { data: 'bankverify', name: 'bankverify' },
            { data: 'bankrejected', name: 'bankrejected' },
            { data: 'withdrawapproved', name: 'withdrawapproved' },
            { data: 'withdrawRejectedCount', name: 'withdrawRejectedCount' }
        ]
    });

    // Append buttons to correct place in layout
    table.buttons().container().appendTo('#dataList_wrapper .col-md-6:eq(0)');
}


  $(document).ready(function() {
    var startDate = $("#start_date_input").val() + " 00:00:00";
    var endDate = $("#end_date_input").val() + " 24:00:00";
    $('#dataList').DataTable({
      "processing": true,
      "serverSide": true,
      "ajax": {
        url: "{{route($modelName.'.all_users_activity_reports' )}}",
        type: "POST",
        data: {
          "_token": "{{ csrf_token() }}",
          "start_date": startDate,
          "end_date": endDate
        }
      },
      "columns": [{
          data: 'DT_RowIndex',
          name: 'DT_RowIndex'
        },
        {
          data: 'name',
          name: 'name'
        },
        {
          data: 'matchlaunch',
          name: 'matchlaunch'
        },
        {
          data: 'matchdeclared',
          name: 'matchdeclared'
        },
        {
          data: 'panverify',
          name: 'panverify'
        },
        {
          data: 'panrejected',
          name: 'panrejected'
        },
        {
          data: 'bankverify',
          name: 'bankverify'
        },
        {
          data: 'bankrejected',
          name: 'bankrejected'
        },
        {
          data: 'withdrawapproved',
          name: 'withdrawapproved'
        },
        {
          data: 'withdrawRejectedCount',
          name: 'withdrawRejectedCount'
        },
      ]
    });
  });
</script>

@endsection