@extends('layouts.contentLayoutMaster')
{{-- page Title --}}
@section('title','Dashboard E-commerce')
{{-- vendor css --}}
@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/charts/apexcharts.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/extensions/swiper.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/tables/datatable/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/tables/datatable/responsive.bootstrap4.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/tables/datatable/buttons.bootstrap4.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/pickers/daterange/daterangepicker.css')}}">
@endsection
@section('page-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/dashboard-ecommerce.css')}}">
@endsection

@section('content')
<!-- Dashboard Ecommerce Starts -->
<section id="dashboard-ecommerce">
  <div class="row">
    <div class="col-xl-3 col-3 dashboard-users">
      <div class="card text-center">
        <div class="card-body py-1">
          <div class="badge-circle badge-circle-lg badge-circle-light-success mx-auto mb-50">
            <i class="fa fa-arrow-right-arrow-left font-medium-5"></i>
          </div>
          <div class="text-muted line-ellipsis">Total Transactions</div>
          <h3 class="mb-0">{{$successTransactions}}</h3>
        </div>
      </div>
    </div>
    <!-- <div class="col-xl-3 col-3 dashboard-users">
      <div class="card text-center">
        <div class="card-body py-1">
          <div class="badge-circle badge-circle-lg badge-circle-light-success mx-auto mb-50">
            <i class="fa fa-arrow-right-arrow-left font-medium-5"></i>
          </div>
          <div class="text-muted line-ellipsis">Countrywise Transactions</div>
          <h3 class="mb-0">{{$successTransactionCountrywise}}</h3>
        </div>
      </div>
    </div> -->
    <div class="col-xl-3 col-3 dashboard-users">
      <div class="card text-center">
        <div class="card-body py-1">
          <div class="badge-circle badge-circle-lg badge-circle-light-success mx-auto mb-50">
            <i class="fa fa-arrow-right-arrow-left font-medium-5"></i>
          </div>
          <div class="text-muted line-ellipsis">Total Failed Transactions</div>
          <h3 class="mb-0">{{$failTransactions}}</h3>
        </div>
      </div>
    </div>
    <div class="col-xl-3 col-3 dashboard-users">
      <div class="card text-center">
        <div class="card-body py-1">
          <div class="badge-circle badge-circle-lg badge-circle-light-success mx-auto mb-50">
            <i class="fa fa-users font-medium-5"></i>
          </div>
          <div class="text-muted line-ellipsis">Registrations</div>
          <h3 class="mb-0">{{$activeUserCount}}</h3>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xl-6 col-12 dashboard-marketing-campaign">
      <div class="card marketing-campaigns">
        <div class="card-header d-flex justify-content-between align-items-center pb-1">
          <h4 class="card-title">Country wise Users </h4>
        </div>
        <div class="card-body">
          <div class="table-responsive">
          <!-- table start -->
            <table id="table-marketing-campaigns" class="table table-borderless table-marketing-campaigns mb-0">
              <thead>
                <tr>
                  <th>Country</th>
                  <th>Total User</th>
                </tr>
              </thead>
              <tbody>
                @foreach($countryWiseUserArray as $key => $value)
                  <tr>
                    <td class="py-1">
                      {{$value['country_name']}}
                    </td>
                    <td class="py-1">{{$value['count']}}</td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          <!-- table ends -->
          </div>
        </div>
      </div>
    </div>
    <div class="col-xl-6 col-12 dashboard-marketing-campaign">
      <div class="card country-campaigns">
          <div class="card-header d-flex justify-content-between align-items-center pb-1">
            <h4 class="card-title">Country Wise Success Transactions </h4>
          </div>
          <div class="card-body">
            <div class="table-responsive">
            <!-- table start -->
              <table id="table-country-transactions" class="table table-borderless table-marketing-campaigns mb-0">
                <thead>
                  <tr>
                    <th>Country</th>
                    <th>Total Success Transaction</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($successTransactionCountrywiseArray as $key => $value)
                    <tr>
                      <td class="py-1 line-ellipsis">
                        {{$value['country_name']}}
                      </td>
                      <td class="py-1">
                        {{$value['count']}}
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            <!-- table ends -->
            </div>
          </div>
      </div>
    </div>
  </div>
  <div class="row">
    <!-- <div class="col-xl-5 col-12 dashboard-users">
      <div class="card text-center">
        <div class="card-header d-flex justify-content-between align-items-center pb-50">
          <h4 class="card-title">Customers</h4>
          <div class="dropdown">
            <input type="date" name="transaction_date" id="transaction_date" oninput="transactionUserWise();"/>
            <button class="btn btn-sm btn-warning glow" onclick="clearTransactionUserWise()">Clear</button>
          </div>
        </div>
        <div class="card-body py-1">
          <div class="badge-circle badge-circle-lg badge-circle-light-success mx-auto mb-50">
            <i class="fa fa-arrow-right-arrow-left font-medium-5"></i>
          </div>
          <div class="text-muted line-ellipsis">Unique Purchasing</div>
          <h3 class="mb-0" id="countTransaction">{{$successTransactionUserwise}}</h3>
        </div>
      </div>
    </div> -->
    <div class="col-xl-12 col-12 dashboard-order-summary">
      <div class="card">
            <div class="card mb-0">
              <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="card-title">Order Summary</h4>
                <div class="dropdown">
                  <div class="row">
                    <div class="col-xl-9 col-12">
                      <input type="text" class="form-control" name="transaction_date" id="transaction_date"/>
                    </div>
                    <div class="col-xl-3 col-12">
                      <button class="btn btn-sm btn-warning glow" onclick="clearTransactionUserWise()">Clear</button>
                    </div>
                  </div>
                </div>
                <!-- <div class="d-flex">
                  <button type="button" class="btn btn-sm btn-light-primary mr-1">Week</button>
                  <button type="button" class="btn btn-sm btn-primary glow">Month</button>
                </div> -->
              </div>
              <div class="card-body p-0">
                <div id="order-summary-chart"></div>
              </div>
            </div>
      </div>
    </div>
  </div>
</section>
<!-- Dashboard Ecommerce ends -->
@endsection
<style>
  .dataTables_wrapper .col-md-5, .dataTables_wrapper .col-md-7{
    max-width:  100% !important;
  }
</style>

@section('vendor-scripts')
<script src="{{asset('vendors/js/charts/apexcharts.min.js')}}"></script>
<script src="{{asset('vendors/js/extensions/swiper.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/dataTables.buttons.min.js')}}"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="{{asset('vendors/js/pickers/daterange/daterangepicker.js')}}"></script>
@endsection
@section('scripts')
<script>
  var monthName = @json($monthName);
  var graphTransactionMonth = @json($graphTransactionMonth);
  var graphPendingTransactionMonth = @json($graphPendingTransactionMonth);
  var graphFailTransactionMonth = @json($graphFailTransactionMonth);
  $('document').ready(function() {
    $("#table-marketing-campaigns").DataTable();
    $("#table-country-transactions").DataTable();

    $('#transaction_date').daterangepicker({
      locale: {
        format: 'DD-MM-YYYY',
        separator: ' to '
      },
      onSelect: function() {
        transactionUserWise();
      }
    }).on("change",function (){ 
      // console.log('inp changed');
      transactionUserWise();
    });

    // $('#country').on('change', function () {
    //   var selectVal = $("#country option:selected").val();
    //   // console.log(selectVal);
    //   var formData = new FormData();
    //   formData.append('country',selectVal);
    //   formData.append('_token',"{{ csrf_token() }}");
    //   $.ajax({
    //       url:"{{ route('dashboard-countrywiseuserlist') }}",
    //       type: 'POST',
    //       data:formData,
    //       dataType: 'json',
    //       contentType: false,
    //       processData: false,
    //       cache: false,
    //   }).done(function(response){
    //       $("#table-marketing-campaigns tbody").html(response.html);
    //       setInterval( function () {
    //         $("#table-marketing-campaigns").DataTable();
    //       }, 30000 );
          
    //   });
    // });
  });

  // function clearCountry(){
  //   $("#country").val("");
  //   var formData = new FormData();
  //   formData.append('country','');
  //   formData.append('_token',"{{ csrf_token() }}");
  //   $.ajax({
  //       url:"{{ route('dashboard-countrywiseuserlist') }}",
  //       type: 'POST',
  //       data:formData,
  //       dataType: 'json',
  //       contentType: false,
  //       processData: false,
  //       cache: false,
  //   }).done(function(response){
  //       $("#table-marketing-campaigns tbody").html(response.html);
  //       setInterval( function () {
  //         $("#table-marketing-campaigns").DataTable();
  //       }, 30000 );
  //   });
  // }

  var lineChartOptions = {
    chart: {
      height: 300,
      type: 'line',
      zoom: {
        enabled: false
      },
      toolbar: {
        show: false
      }
    },
    colors: ["#5A8DEE", "#00CFDD","#FF5B5C"],
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'smooth'
    },
    series: [
      {
        name: "Total Success Transactions",
        data: graphTransactionMonth,
      },
      {
        name: "Total Pending Transactions",
        data: graphPendingTransactionMonth,
      },
      {
        name: "Total Fail Transactions",
        data: graphFailTransactionMonth,
      }
  ],
    title: {
      text: 'Transactions by Month',
      align: 'left'
    },
    grid: {
      row: {
        colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
        opacity: 0.5
      },
    },
    xaxis: {
      categories: monthName,
      title: {
        text: 'Month'
      }
    },
    yaxis: {
      // tickAmount: 5,
      title: {
        text: 'Transactions'
      },
    }
  }
  var lineChart = new ApexCharts(
    document.querySelector("#order-summary-chart"),
    lineChartOptions
  );
  lineChart.render();

  // $("#transaction_date").on("change",function(){
    
  //   transactionUserWise();
  // });

  function transactionUserWise(){
    var date = $("#transaction_date").val();
      // console.log(selectVal);
      var formData = new FormData();
      formData.append('transaction_date',date);
      formData.append('_token',"{{ csrf_token() }}");
      $.ajax({
          url:"{{ route('dashboard-datewisetransactioncount') }}",
          type: 'POST',
          data:formData,
          dataType: 'json',
          contentType: false,
          processData: false,
          cache: false,
      }).done(function(response){
          // console.log(response);
          lineChart.updateOptions({
            xaxis: {
              categories: response.monthName,
            }
          });
          lineChart.updateSeries([
            {
              name: "Total Success Transactions",
              data: response.graphTransactionMonth,
            },
            {
              name: "Total Pending Transactions",
              data: response.graphPendingTransactionMonth,
            },
            {
              name: "Total Fail Transactions",
              data: response.graphFailTransactionMonth,
            }
          ]);
      });
  }

  function clearTransactionUserWise(){
    $("#transaction_date").val("");
    var formData = new FormData();
      formData.append('transaction_date','');
      formData.append('_token',"{{ csrf_token() }}");
      $.ajax({
          url:"{{ route('dashboard-datewisetransactioncount') }}",
          type: 'POST',
          data:formData,
          dataType: 'json',
          contentType: false,
          processData: false,
          cache: false,
      }).done(function(response){
        $("#transaction_date").val(response.tranaction_date);
        lineChart.updateOptions({
          xaxis: {
            categories: response.monthName,
          }
        });
        lineChart.updateSeries([
          {
            name: "Total Success Transactions",
            data: response.graphTransactionMonth,
          },
          {
            name: "Total Pending Transactions",
            data: response.graphPendingTransactionMonth,
          },
          {
            name: "Total Fail Transactions",
            data: response.graphFailTransactionMonth,
          }
        ])
      });
  }
</script>
@endsection

@section('page-scripts')
<!-- <script src="{{asset('js/scripts/pages/dashboard-ecommerce.js')}}"></script> -->
@endsection