@extends('layouts.admin')

@section('content')

<div class="row">
  @if ($message = Session::get('success'))
  <div class="col-12">
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      <strong>{{ $message }}</strong>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  </div>
  @endif
  <div class="col-12">
    <div class="row">
      <!-- total-order -->
      <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        <div class="card-main mb-3">
          <div class="total-order">

            <div class="row">
              <div class="col-9">
                <h2>Credited </h2>
                <h3>{{ '$'.$credited }}</h3>
                <!-- <p>4.75% increase in orders last week</p> -->
              </div>
              <div class="col-3 text-center">
                <div class="t-order-icon bg-color2 color0 "><i class="fa fa-usd"></i></div>
                <!-- <h5>4.75%</h5> -->
              </div>
            </div>

          </div>
        </div>
      </div>
      <!-- total-order end -->
      <!-- total-order -->
      <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        <div class="card-main mb-3">
          <div class="total-order">
            <div class="row">
              <div class="col-9">
                <h2>Debited </h2>
                <h3>{{ '$'.$debited }}</h3>
                <!-- <p>Revenue increases this month</p> -->
              </div>
              <div class="col-3 text-center">
                <div class="t-order-icon bg-color3 color0"><i class="fa fa-usd" aria-hidden="true"></i></div>
                <!-- <h5>13.5%</h5> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- total-order end -->


      <!-- total-order -->
      <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        <div class="card-main mb-3">
          <div class="total-order">

            <div class="row">
              <div class="col-9">
                <h2>Balance </h2>
                <h3>{{ '$'.$account->amount }}</h3>
                <!-- <p>Total visitors decreased by </p> -->
              </div>
              <div class="col-3 text-center">
                <div class="t-order-icon bg-color1 color0"><i class="fa fa-usd"></i></div>
                <!-- <h5>1.25%</h5> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- total-order end -->
    </div>
    <div class="card ajax-div">
      <div>

        <!-- section-start -->
        <h2 class="iheading-man p-4 pb-2">
          <div class="row">
            <div class="col-6">{{ 'Transactions - '.$account->account_no }} </div>
            <div class="col-6 text-right action-btns">
              <!-- <a href="{{ route('accounts.create') }}" type="button" class="btn btn-primary bg-color20">
                <img src="{{ asset('imgs/plus.png') }}" /> {{ __('Add') }}
              </a> -->

              <a class="btn btn-primary bg-color20" type="button" id="filters" data-bs-toggle="dropdown"
                aria-expanded="false">
                <img src="{{ asset('imgs/filter.png') }}" />
              </a>
              <ul class="dropdown-menu" id="filter-items" aria-labelledby="filters">
                <li><a class="dropdown-item" href="javascript:void(0)" data-id="filter_col2">Date</a></li>
                <!-- <li><a class="dropdown-item" href="javascript:void(0)" data-id="filter_col3">Description</a></li> -->
              </ul>
            </div>
          </div>
        </h2>

        <div class="row px-4">
          <div class="col-2 filters">
            <div class="form-group " id="filter_col2" data-column="2">
              <label>Date</label>
              <input type="date" class="form-control column_filter" id="col2_filter" placeholder="Date">
              <i class="fa fa-remove remove-filter"></i>
            </div>
          </div>

          <!-- <div class="col-2 filters">
            <div class="form-group " id="filter_col3" data-column="3">
              <label>Description</label>
              <input type="text" class="form-control column_filter" id="col3_filter" placeholder="Description">
              <i class="fa fa-remove remove-filter"></i>
            </div>
          </div> -->
        </div>

      </div>
      <div class="customer-table-main table-container">
        <table id="jsource-table" class="table nowrap" style="width: 100%"> </table>
      </div>
      <br>
    </div>
  </div>
</div>
@endsection
@push('scripts')
<script type="text/javascript">
  listing();

  function listing() {
    var table = $('#jsource-table').DataTable({
      ajax: "{{ route('accounts.transactions',$id) }}",
      processing: true,
      serverSide: true,
      deferRender: true,
      initComplete: function() {
        // Remove the "Show entries" text from length menu
        $('#jsource-table_length label').contents().filter(function() {
          return this.nodeType === 3; // NodeType 3 is for text nodes
        }).remove();
      },
      buttons: [
        'copy', 'csv', 'excel', 'pdf', 'print'
      ],
      lengthMenu: [
        [10, 25, 50, -1],
        [10, 25, 50, "All"]
      ], // Pagination options
      order: [
        [0, 'desc']
      ],
      fixedColumns: {
        leftColumns: 2,
        rightColumns: 1
      },
      columns: [{
          title: '#',
          data: 'id',
          name: 'id',
          visible: false
        },
        {
          title: '#',
          data: 'checkbox',
          name: 'checkbox',
          orderable: false,
          searchable: false
        },
        {
          title: 'Date/Time',
          data: 'created_at',
          name: 'created_at'
        },
        {
          title: 'Description',
          data: 'comment',
          name: 'comment'
        },

        {
          title: 'Debit',
          data: 'debit',
          name: 'debit'
        },
        {
          title: 'Credit',
          data: 'credit',
          name: 'credit'
        },
        {
          title: 'Balance',
          data: 'balance',
          name: 'balance'
        }

      ]
    });

    // Create the dropdown button
    var dropdownButton = `
        <div class="btn-group">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                Export
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#" id="copy">Copy</a>
                <a class="dropdown-item" href="#" id="csv">CSV</a>
                <a class="dropdown-item" href="#" id="excel">Excel</a>
                <a class="dropdown-item" href="#" id="pdf">PDF</a>
                <a class="dropdown-item" href="#" id="print">Print</a>
            </div>
        </div>
    `;

    // Add the dropdown to the DataTables DOM
    $(dropdownButton).appendTo('#jsource-table_length');
  }
  // active
  $(document).on('click', '.record_active', function() {
    val = $(this).attr('data-value');
    name = $(this).attr('data-name');
    id = $(this).attr('data-id');
    text = name + '! You want to deactivate ?';

    if (val == 0) {
      text = name + '! You want to activate ?';
    }
    const swalWithBootstrapButtons = Swal.mixin({
      customClass: {
        confirmButton: 'btn btn-success',
        cancelButton: 'btn btn-danger'
      },
      buttonsStyling: false
    });
    swalWithBootstrapButtons
      .fire({
        title: 'Are you sure?',
        text: text,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes',
        cancelButtonText: 'No',
        reverseButtons: true
      })
      .then((result) => {
        if (result.isConfirmed) {
          $.ajax({
            url: "{{ route('accounts.updateActive') }}",
            type: 'POST',
            data: {
              id: id,
              value: val
            },
            success: function(res) {
              if (res.status == true) {
                swalWithBootstrapButtons.fire('Updated!', res.msg, 'success');
              }
            }
          });
        } else if (result.dismiss === Swal.DismissReason.cancel) {
          if (val == 0) {
            $(this).prop('checked', false);
          } else {
            $(this).prop('checked', true);
          }
          swalWithBootstrapButtons.fire('Cancelled', '', 'error');
        }
      });
  });
</script>
@endpush