@extends('frontend.layouts.app')
@section('title', 'My Transactions')
@section('link')
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>

<!-- Font Awesome -->
<link rel="stylesheet" href="{{asset('backend/')}}/plugins/fontawesome-free/css/all.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="{{asset('backend/')}}/ionicons/2.0.1/css/ionicons.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="{{asset('backend/')}}/plugins/datatables-bs4/css/dataTables.bootstrap4.css">
<!-- Theme style -->
<link rel="stylesheet" href="{{asset('backend/')}}/dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
@endsection
@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
  <div class="container">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>My Transactions</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item active">My Transactions</li>
        </ol>
      </div>
    </div>
  </div><!-- /.container -->
</section>

<!-- Main content -->
<section class="content">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">My Transactions</h3>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <div class="table-responsive">

                <!-- Data Table -->
                <table id="transactions-table" class="table table-bordered table-striped table-sm">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Date</th>
                            <th>Note</th>
                            <th>Credit</th>
                            <th>Debit</th>
                            <th>Blance</th>
                        </tr>
                    </thead>
                    <tbody>
                    <!-- Data will be loaded via AJAX -->
                    </tbody>
                </table>
            </div>
          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container-fluid -->
</section>
<!-- /.content -->
@endsection
@section('script')
<!-- jQuery -->
<script src="{{asset('backend/')}}/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="{{asset('backend/')}}/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables -->
<script src="{{asset('backend/')}}/plugins/datatables/jquery.dataTables.js"></script>
<script src="{{asset('backend/')}}/plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>
<!-- AdminLTE App -->
<script src="{{asset('backend/')}}/dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="{{asset('backend/')}}/dist/js/demo.js"></script>
<!-- page script -->
<script>
$(document).ready(function () {
    var table = $('#transactions-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("user.transaction.history") }}', // Add the route to fetch data
        columns: [
            {data: 'id', name: 'id'},
            {
                data: 'result_date',
                name: 'result_date',
                render: function(data) {
                    return moment(data).format('h:mm A DD-MM-YYYY');
                }
            },
            {data: 'note', name: 'note'},
            {data: 'credit', name: 'credit'},
            {data: 'debit', name: 'debit'},
            {data: 'balance', name: 'balance'}
        ],
        order: [[0, 'desc']]
    });
});
</script>
@endsection