@extends('Admin.layout')
@section('content')
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">Transaction</h4>
    </div>
    <div class="card p-4">
        <!-- Table -->
        <div class="table-responsive">
         <table id="Transaction" class="table table-bordered align-middle">
    <thead>
        <tr>
            <th>SNO</th>
            <th>Date</th>
            <th>Phone</th>
            <th>Transaction ID</th>
            <th>Amount</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
        </div>
    </div>

<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content text-center p-8">
            <h4>Are you sure?</h4>
            <p class="text-muted">Do you really want to delete this customer?</p>
            <input type="hidden" id="deleteCustomerrId">
            <div class="d-flex justify-content-center gap-3 mt-3">
                <button class="btn btn-outline-primary w-100 px-5 p-5" data-bs-dismiss="modal">Cancel</button>
                <button id="confirmDelete" class="btn btn-danger  px-5 p-5 w-100">Yes, Delete</button>
            </div>
        </div>
    </div>
</div>
<!-- Toast container for JS -->
<div class="position-fixed top-0 end-0 p-3" style="z-index: 9999">
    <div id="customToast" class="toast text-white border-0" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body" id="customToastBody"></div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    </div>
</div>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script>
$(function () {
    var table = $('#Transaction').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('transaction_data') }}",
        columns: [
            { data: 'DT_RowIndex', orderable:false, searchable:false },
            { data: 'created_at' }, // ❌ comma missing → ✅ added
            { data: 'phone', name:'user.phone_number' },
            { data: 'transaction_id' },
            { data: 'amount' },
            { data: 'status' }
        ],
        pageLength: 10,
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search Transaction"
        }
    });
});
</script>
@endsection