@extends('user.layouts.main')
@push('style')
<style>
    /* Make table text smaller and cells compact */
#dataTables {
    font-size: 0.75rem;
}

#dataTables th, #dataTables td {
    padding: 3px 5px;
    vertical-align: middle;
    white-space: nowrap;
}

</style>
    
@endpush

@section('contents')
<div class="dashboard_wrapper border_start p-3">
    <div class="listings_wrap">
        <div class="mb-4 d-flex justify-content-between align-items-center">
            <h4 class="page_title">Transactions</h4>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table id="dataTables" class="table table-hover text-nowrap table-bordered jsgrid-table">
                    <thead>
                        <tr>
                            <th>Transaction ID</th>
                            <th>Ad / Plan</th>
                            <th>Type</th>
                            <th>Amount</th>
                            <th>Method</th>
                            <th>Status</th>
                            <th>Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($transactions as $transaction)
                        <tr>
                            <td>{{ $transaction->order_id }}</td>
                            
                            <td>
                                @if($transaction->ad)
                                    <span class="d-block">{{ $transaction->ad->title ?? 'N/A' }}</span>
                                @else
                                <span>{{ $transaction->plan->name ?? 'N/A' }}</span>
                                @endif
                            </td>

                            <td>
                                @if($transaction->transaction_type == 1)
                                    Promoted
                                @else
                                    Plan
                                @endif
                            </td>

                            <td>{{ $transaction->amount }} {{ $transaction->currency_symbol }}</td>
                            <td>{{ strtoupper($transaction->payment_provider) }}</td>
                            <td>
                                <span class="badge bg-{{ $transaction->payment_status == 'paid' ? 'success' : 'danger' }}">
                                    {{ $transaction->payment_status }}
                                </span>
                            </td>
                            <td>{{ $transaction->created_at ? $transaction->created_at->format('d-m-Y h:i:s a') : '-' }}</td>
                            <td>
                                <a href="{{ route('user.transaction.invoice.view', $transaction->id) }}" class="btn btn-info btn-sm">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('user.transaction.invoice.download', $transaction->id) }}" class="btn btn-success btn-sm">
                                    <i class="fas fa-download"></i>
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>Transaction ID</th>
                            <th>Ad / Plan</th>
                            <th>Type</th>
                            <th>Amount</th>
                            <th>Method</th>
                            <th>Status</th>
                            <th>Date</th>
                            <th>Action</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

</div>
@endsection
@push('scripts')
<!-- Bootstrap 5 CSS (for DataTables styling) -->
<link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- DataTables JS with Bootstrap 5 integration -->
<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>
$(document).ready(function() {
    $('#dataTables').DataTable({
        "paging": true,
        "searching": true,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "order": [[0, "desc"]], // Order by first visible column (Transaction ID)
        "columnDefs": [
            { "orderable": false, "targets": [7] } // Disable ordering for Action column
        ],
        "lengthMenu": [10, 25, 50, 100],
        "responsive": true,
        "language": {
            "search": "_INPUT_",
            "searchPlaceholder": "Search transactions..."
        }
    });
});
</script>

<style>
/* Compact table for Bootstrap look */
#dataTables {
    font-size: 0.85rem;
}

#dataTables th, #dataTables td {
    padding: 0.45rem 0.5rem;
    vertical-align: middle;
    white-space: nowrap;
}

.dataTables_wrapper .dataTables_filter input {
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
}
</style>
@endpush