@extends('layouts.admin')

@section('title') User Wallets @endsection

@section('page_title') User Wallets @endsection

@push('page_style')
@include('include.dataTableStyles')
@endpush

@section('content')
<section class="mainAdds">
  <div class="content-header">
    <div class="d-flex justify-content-between">
      <div class="">
        <h1 class="m-0">User Wallets</h1>
      </div>
    </div>
  </div>


  <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 User Wallets</h3>
          </div>
          <div class="mb-3 d-flex gap-2">
            <a href="{{ route('wallet.transaction') }}" class="btn btn_ mr-2 mt-2 newBtn">Transactions</a>
            <a href="{{ route('wallets.export.csv') }}" 
               class="btn btn_ mr-2 mt-2 newBtn d-inline-flex align-items-center">
                <i class="fas fa-file-download me-1"></i>
                (CSV)
            </a>

            <a href="{{ route('wallets.export.pdf') }}" class="btn btn_ mr-2 mt-2 newBtn d-inline-flex align-items-center">
              <i class="fas fa-file-download me-1"></i>
                 (PDF)
            </a>
        </div>

        </div>

        <div class="card-body">
          <div class="table-responsive">
            <table id="walletTable" class="table table-bordered table-hover">
              <thead>
                <tr>
                  <th>S.No</th>
                  <th>Wallet User</th>
                  <th>Wallet Balance</th>
                  <th data-orderable="false">Action</th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection






<!-- Add/Sub Fund Modal -->
<div class="modal fade" id="fundModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <form id="fundForm" method="POST">
      @csrf
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="fundModalTitle">Update Wallet</h5>
        
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        </div>

        <div class="modal-body">
          <p><strong>User:</strong> <span id="modalUserName"></span></p>
          <p><strong>Current Balance:</strong> $<span id="modalUserBalance"></span></p>
          <input type="hidden" name="user_id" id="modalUserId">
          <input type="hidden" name="action_type" id="modalActionType">

          <div class="form-group mt-2">
            <label>Enter Amount</label>
            <input type="number" name="amount" class="form-control" required min="0.01" step="0.01">
          </div>
          <div class="form-group mt-2">
            <label>Reason (Optional)</label>
            <textarea name="description" class="form-control" rows="2"></textarea>
          </div>
        </div>

        <div class="modal-footer">
          <button type="submit" class="btn btn_ mr-2 approveReject text-white ">Submit</button>
        </div>
      </div>
    </form>
  </div>
</div>
@push('page_script')
@include('include.dataTableScripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
  $(document).ready(function () {
    let modal = new bootstrap.Modal(document.getElementById('fundModal'));

    $(document).on('click', '.add-fund-btn, .sub-fund-btn', function () {
      const userId = $(this).data('user-id');
      const userName = $(this).data('user-name');
      const balance = $(this).data('balance');
      const isAdd = $(this).hasClass('add-fund-btn');

      $('#modalUserName').text(userName);
      $('#modalUserBalance').text(parseFloat(balance).toFixed(2));
      $('#modalUserId').val(userId);
      $('#modalActionType').val(isAdd ? 'add' : 'sub');
      $('#fundModalTitle').text(isAdd ? 'Add Funds' : 'Subtract Funds');
      $('#fundForm')[0].reset();

      const modal = new bootstrap.Modal(document.getElementById('fundModal'));
      modal.show();
    });


    $('#fundForm').on('submit', function (e) {
      e.preventDefault();
      const form = $(this);

      $.ajax({
        url: '{{ route("admin.wallets.manualUpdate") }}',
        type: 'POST',
        data: form.serialize(),
        success: function (res) {
          // $('#fundModal').hide();
          $('#fundModal').removeClass('show').hide();

          setTimeout(() => {
            $('.modal-backdrop').remove();
            $('body').removeClass('modal-open');
            $('body').css('padding-right', '');
          }, 300);
          $('#walletTable').DataTable().ajax.reload(null, false);
          Swal.fire({
              text: res.message,
              icon: 'info'
          });
        },
        error: function (xhr) {
          alert('Error: ' + (xhr.responseJSON?.message || 'Something went wrong.'));
        }
      });
    });
  });
</script>

<script>
  $(document).ready(function() {
    $('#walletTable').DataTable({
      processing: true,
      serverSide: true,
      ajax: '{{ route("wallets.data") }}',
      columns: [
        { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
        { data: 'user', name: 'user' },
        { data: 'balance', name: 'balance' },
        { data: 'action', name: 'action', orderable: false, searchable: false },
      ]
    });
  });
</script>

@endpush