@extends('layouts.app')

@section('title', 'M-Pesa Agent — Transactions')

@section('content')

<section class="content-header">
    <h1>M-Pesa Agent <small>All Transactions</small></h1>
</section>

<section class="content">

    {{-- Date Range + Filters --}}
    <div class="box box-solid" style="border-top: 3px solid #00a650;">
        <div class="box-body">
            <div class="row">
                <div class="col-md-8">
                    <form id="filterForm" class="form-inline">
                        <div class="form-group">
                            <label>From:</label>
                            <input type="date" id="filter_from" value="{{ $from }}" class="form-control input-sm" />
                        </div>
                        <div class="form-group" style="margin-left: 10px;">
                            <label>To:</label>
                            <input type="date" id="filter_to" value="{{ $to }}" class="form-control input-sm" />
                        </div>
                        <div class="form-group" style="margin-left: 10px;">
                            <label>Type:</label>
                            <select id="filter_type" class="form-control input-sm">
                                <option value="all">All Types</option>
                                <option value="deposit">Deposits</option>
                                <option value="withdrawal">Withdrawals</option>
                                <option value="float">Float Top-Ups</option>
                            </select>
                        </div>
                        <button type="button" onclick="reloadTable()" class="btn btn-success btn-sm" style="margin-left: 10px;">
                            <i class="fas fa-filter"></i> Filter
                        </button>
                    </form>
                </div>
                <div class="col-md-4 text-right">
                    <a href="{{ route('mpesa-agent.cashier') }}" class="btn btn-success btn-sm">
                        <i class="fas fa-plus"></i> New Transaction
                    </a>
                    <a href="{{ route('mpesa-agent.index') }}" class="btn btn-default btn-sm">
                        <i class="fas fa-chart-bar"></i> Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Transactions Table --}}
    <div class="box box-success">
        <div class="box-header with-border">
            <h3 class="box-title"><i class="fas fa-list"></i> Transactions</h3>
        </div>
        <div class="box-body">
            <table class="table table-striped table-condensed" id="mpesa_txn_table" style="width: 100%;">
                <thead>
                    <tr>
                        <th>Date/Time</th>
                        <th>Type</th>
                        <th>Amount (KES)</th>
                        <th>M-Pesa Code</th>
                        <th>Phone</th>
                        <th>Customer</th>
                        <th>Cashier</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

</section>

@endsection

@section('javascript')
<script>
    var txnTable;

    $(document).ready(function() {
        txnTable = $('#mpesa_txn_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route("mpesa-agent.transactions") }}',
                data: function(d) {
                    d.from = document.getElementById('filter_from').value;
                    d.to = document.getElementById('filter_to').value;
                    d.type_filter = document.getElementById('filter_type').value;
                }
            },
            columns: [
                { data: 'created_at', name: 'created_at' },
                { data: 'type_label', name: 'type', orderable: false },
                { data: 'amount_formatted', name: 'amount' },
                { data: 'mpesa_code', name: 'mpesa_code', defaultContent: '—' },
                { data: 'phone', name: 'phone', defaultContent: '—' },
                { data: 'contact_name', name: 'contact_name', orderable: false },
                { data: 'cashier_name', name: 'cashier_name', orderable: false },
                { data: 'action', name: 'action', orderable: false, searchable: false },
            ],
            order: [[0, 'desc']],
            pageLength: 25,
        });
    });

    function reloadTable() {
        txnTable.ajax.reload();
    }

    // Delete transaction
    $(document).on('click', '.delete-txn', function() {
        var id = $(this).data('id');
        if (!confirm('Delete this transaction? This cannot be undone.')) return;

        $.ajax({
            url: '/mpesa-agent/destroy/' + id,
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(response) {
                if (response.success) {
                    toastr.success(response.msg);
                    txnTable.ajax.reload();
                }
            },
            error: function() {
                toastr.error('Failed to delete transaction');
            }
        });
    });
</script>
@endsection