@extends('layouts.admin')

@section('title') Invoices @endsection

@section('page_title') Invoices @endsection
@push('page_style')
@include('include.dataTableStyles')
@endpush

@section('content')
<!-- Main content -->
@push('page_style')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endpush
<section class="mainAdds">
  <!-- Content Header (Page header) -->
  <div class="content-header">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0">Invoices</h1>
      </div>

    </div>
  </div>
  <!-- /.content-header -->

  <div class="row">
    <div class="col-12">
      <div class="card data-table">
        <div class="filterheader invoiceheader">
          <div class="headingfilter">
            <h3 class="card-title">List of all Invoices</h3>
          </div>
          <div class="rightrangeBox_">
            <input type="text" name="daterange" id="daterangepicker" class="form-control daterangeBox" />
            <form action="{{route('download.multiple.invoice')}}">
              <input type="hidden" id="range" name="range">
              <button type="submit" id="invoiceBtn" class="SubscriptionBtn btn-commom downloadButton"><a>Download Invoice</a></button>
            </form>


          </div>
        </div>

        <div class="card-body">
          <div class="table-responsive">
            <table id="brandTable" class="table table-bordered table-hover">
              <thead>
                <tr>
                  <th>S.No</th>
                  <th>User</th>
                  <th>Subscription</th>
                  <th>Advertisment ID</th>
                  <th>Advertisment</th>
                  <th>Created At</th>
                  <th data-orderable="false">Action</th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
      <!-- /.card -->
    </div>
  </div>
  <!-- /.container-fluid -->
</section>



@push('page_script')

@include('include.dataTableScripts')
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
  $(document).ready(function() {
    $('input[name="daterange"]').daterangepicker({
      timePicker: false,
      // autoUpdateInput: false,

      startDate: moment().startOf('hour'),
      endDate: moment().startOf('hour').add(600, 'hour'),
      ranges: {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
      },
      locale: {
        format: 'YYYY-MM-DD',
      }
    });

    $('input[name="daterange"]').val('');

  });
  $(document).ready(function() {
    // $("#pageloader").removeClass("pageloader");
    // $("#invoiceBtn").click(function() {
    //   $("#pageloader").addClass("pageloader");
    // });
  });
</script>

<script src="{{ asset('js/pages/transaction/index.js') }}"></script>
@endpush


@endsection