@extends('root')
@section('title', 'Transaksi Topup')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Transaksi Topup',
        'links' => [
            ['url' => route('admin.dashboard'), 'label' => 'Dashboard'],
            ['url' => route('admin.payment-gateway.index'), 'label' => 'Payment Gateway'],
        ],
        'current' => 'Transaksi'
    ])

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="ti ti-list-details me-2"></i>Semua Transaksi Topup</h5>
            <div class="d-flex gap-2">
                <select id="filter-status" class="form-select form-select-sm" style="width: 150px;">
                    <option value="">Semua Status</option>
                    <option value="PENDING">Pending</option>
                    <option value="SUCCESS">Success</option>
                    <option value="FAILED">Failed</option>
                    <option value="EXPIRED">Expired</option>
                </select>
                <select id="filter-gateway" class="form-select form-select-sm" style="width: 150px;">
                    <option value="">Semua Gateway</option>
                    <option value="pakar_digital">Pakar Digital</option>
                    <option value="midtrans">Midtrans</option>
                </select>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped" id="datatable-transactions">
                    <thead>
                        <tr>
                            <th>Order ID</th>
                            <th>Client</th>
                            <th>Gateway</th>
                            <th>Channel</th>
                            <th>Amount</th>
                            <th>Total</th>
                            <th>Status</th>
                            <th>Dibuat</th>
                            <th>Dibayar</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <div class="modal fade" id="approveModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Approve Transaksi (Manual)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="approveForm" enctype="multipart/form-data">
                    <div class="modal-body">
                        <input type="hidden" id="approve_transaction_id" name="transaction_id">
                        <div class="alert alert-info">
                            <i class="ti ti-info-circle me-1"></i>
                            Aksi ini akan menandai transaksi sebagai <strong>SUCCESS/PAID</strong> secara manual. Saldo client akan bertambah sesuai nominal transaksi dikurangi biaya admin/layanan.
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Bukti Transfer (Opsional)</label>
                            <input type="file" class="form-control" name="proof_file" accept=".jpg,.jpeg,.png,.pdf">
                            <small class="text-muted">Max 2MB. Format: JPG, PNG, PDF</small>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-success">
                            <i class="ti ti-check me-1"></i> Approve & Paid
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
    const table = $('#datatable-transactions').DataTable({
        processing: true,
        serverSide: false,
        autoWidth: false,
        order: [[0, 'desc']], // Timestamp column hidden
        columnDefs: [
             { orderable: false, targets: 10 } // Action column
        ],
        ajax: {
            url: '{{ route('admin.payment-gateway.transactions.data') }}',
            dataSrc: 'data',
            data: function(d) {
                d.status = $('#filter-status').val();
                d.gateway = $('#filter-gateway').val();
            }
        },
        columns: [
            {
                data: 'created_at_timestamp',
                visible: false,
                orderable: true
            },
            { data: 'order_id', name: 'order_id' },
            { data: 'client_name', name: 'client_name' },
            { 
                data: 'gateway', 
                name: 'gateway',
                render: function(data) {
                    if (data === 'pakar_digital') {
                        return '<span class="badge bg-primary">Pakar Digital</span>';
                    }
                    return '<span class="badge bg-success">Midtrans</span>';
                }
            },
            { data: 'payment_channel', name: 'payment_channel' },
            { data: 'amount', name: 'amount' },
            { data: 'total_amount', name: 'total_amount' },
            { 
                data: 'status', 
                name: 'status',
                render: function(data, type, row) {
                    return '<span class="badge ' + row.status_badge_class + '">' + data + '</span>';
                }
            },
            { data: 'created_at', name: 'created_at' },
            { 
                data: 'paid_at', 
                name: 'paid_at',
                render: function(data) {
                    return data || '-';
                }
            },
            {
                data: null,
                className: 'text-center',
                render: function(data, type, row) {
                    if (row.status === 'PENDING' || row.status === 'EXPIRED') {
                        return `
                            <button onclick="openApproveModal(${row.id})" class="btn btn-sm btn-success" title="Mark as Paid (Manual) ${row.status === 'EXPIRED' ? '(Expired)' : ''}">
                                <i class="ti ti-check"></i>
                            </button>
                        `;
                    }
                    return '-';
                }
            }
        ]
    });

    $('#filter-status, #filter-gateway').on('change', function() {
        table.ajax.reload();
    });

    // Modal Logic
    window.openApproveModal = function(id) {
        $('#approve_transaction_id').val(id);
        $('#approveForm')[0].reset();
        $('#approveModal').modal('show');
    };

    $('#approveForm').on('submit', function(e) {
        e.preventDefault();
        
        var id = $('#approve_transaction_id').val();
        var formData = new FormData(this);

        Swal.fire({
            title: 'Konfirmasi Approval',
            text: "Pastikan dana sudah diterima. Aksi ini tidak dapat dibatalkan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ya, Approve!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                // Show loading
                Swal.fire({ title: 'Processing...', allowOutsideClick: false, didOpen: () => Swal.showLoading() });

                $.ajax({
                    url: '{{ url("admin/payment-gateway/transactions") }}/' + id + '/approve',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    success: function(res) {
                        $('#approveModal').modal('hide');
                        Swal.fire('Berhasil', res.meta.message, 'success');
                        table.ajax.reload();
                    },
                    error: function(err) {
                        var msg = err.responseJSON?.meta?.message || 'Terjadi kesalahan sistem';
                        Swal.fire('Error', msg, 'error');
                    }
                });
            }
        });
    });
});
</script>
@endpush