@extends('layouts.app')
@section('content')

<style>
  .date-div {
    width: 300px;
  }

  .datepicker {
    width: 100%;
    border: 1px solid #aaa;
    height: 37px;
    padding: 6px 12px;
    font-size: 14px;
  }

  .content_parent {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
  }

  .content-section {
    width: 40%;
    margin-bottom: 18%;
  }

  .daterangepicker {
    z-index: 1050 !important;
  }

  .daterangepicker .calendar-table th,
  .daterangepicker .calendar-table td {
    min-width: 18px;
    width: 18px;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
    font-family: "Montserrat";
  }

  .client-div,
  .report-div {
    width: 300px;
  }

  .fs-wrap,
  .fs-dropdown {
    width: 300px !important;
  }

  .fs-label-wrap .fs-label {
    padding: 10px 22px 10px 8px !important;
  }

  #downloadReportBtn:focus,
  select:focus {
    outline: none;
    box-shadow: none;
  }

  .submit-btn {
    margin-top: 15px;
  }
</style>

<div class="container">

  <div>
    <h1 style="margin-bottom: 2%;">API Usage Report</h1>
  </div>


  <div id="apiusagereport" class="content-section mc-col">
    <div class="content_parent">
      <label class="form-group-label col-md-4"><b>Select Partner:</b></label>
      <div class="client-div">
        <select class="apiusagereport-client-detail fselect-client" id="client_id">

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

    <div class="content_parent">
      <label class="form-group-label col-md-4"><b>Select Report:</b></label>
      <div class="report-div">
        <select class="apiusagereport-report-detail fselect-report" id="report_type">
          <option value="1">Contact Credits</option>
          <option value="2">Manage Numbers</option>
        </select>
      </div>
    </div>

    <div class="content_parent">
      <label class="form-group-label col-md-4"><b>Select Date:</b></label>
      <div class="date-div">
        <input
          type="text"
          class="datepicker"
          id="date_range"
          name="datetimes"
          placeholder="YYYY-MM-DD - YYYY-MM-DD" />
      </div>
    </div>
    <button type="button" class="submit-btn button" id="downloadReportBtn">SUBMIT</button>
  </div>

  <div id="loaderModal" class="modal">
    <img class="loader-img" src="../images/ajax-spinner.gif">
    <span class="loader-text">Please wait ...</span>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="{{ asset('css/fselect.css') }}">
<script src="{{ asset('js/fselect.js') }}"></script>

<script>
  var baseURL = "{{ URL::to('/') }}" + "/";
  var downloadBillingReportUrl = baseURL + 'downloadBillingReport';
  var getPartnersUrl = baseURL + 'getPartners';
  $(document).ready(function() {
    getPartners();

    $('.fselect-client').fSelect({
      placeholder: 'Select Partner',
      showSearch: true
    });

    $('.fselect-report').fSelect({
      placeholder: 'Select Report',
      showSearch: true
    });

    var d = new Date();
    $('input[name="datetimes"]').daterangepicker({
      startDate: moment().startOf('month'),
      endDate: moment().startOf('hour'),
      locale: {
        format: 'YYYY-MM-DD'
      },
      maxDate: d,
    });

    $(document).on('click', '#downloadReportBtn', function(e) {
      e.preventDefault();
      jQuery("#loaderModal").show();
      const clientId = $('#client_id').val();
      const reportType = $('#report_type').val();
      const dateRange = $('#date_range').val();

      if (!clientId || !reportType || !dateRange) {
        alert('Please select Client, Report Type, and Date Range');
        jQuery("#loaderModal").hide();
        return;
      }

      const dates = dateRange.split(' - ');

      var xhr = jQuery.ajax({
        url: downloadBillingReportUrl,
        type: 'GET',
        data: {
          user_id: clientId,
          report: reportType,
          from: dates[0],
          to: dates[1]
        },
        success: function(res) {
          jQuery("#loaderModal").hide();
          var blob = new Blob([res], {
            type: 'text/csv'
          });
          var filename = "";
          if (xhr.getAllResponseHeaders().indexOf("Content-Disposition") >= 0) {
            console.log("header:", xhr.getResponseHeader('Content-Disposition'));
          }
          var disposition = xhr.getResponseHeader('Content-Disposition');
          if (disposition && disposition.indexOf('attachment') !== -1) {
            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
            var matches = filenameRegex.exec(disposition);
            if (matches != null && matches[1]) {
              filename = matches[1].replace(/['"]/g, '');
            }
          }
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = filename;
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        },
        error: function(xhr, status, error) {
          $("#loaderModal").hide();
          console.error('Download failed:', error);
          alert('Failed to download Report. Please try again.');
        },
      });
    });
  });

  function getPartners() {
    jQuery("#loaderModal").show();
    jQuery.ajax({
      url: getPartnersUrl,
      type: 'GET',
      success: function(response) {
        if (response.status == 'success') {
          jQuery("#loaderModal").hide();
          let options = '';
          response.data.forEach((partner) => {
            options += `
              <option value="${partner.user_referance_id}">
                ${partner.account_name}
              </option>
            `;
          });
          $('#client_id').html('');
          $('#client_id').append(options);
          $('#client_id').fSelect('reload');
        }
      },
      error: function(error) {
        console.error('Failed to fetch partners', error);
      }
    });
  }
</script>

@endsection