@extends('dashlayouts.app')

@section('content')
    <style>
        /* For small screens, make the table scrollable */
        @media screen and (max-width: 768px) {
            td {
                font-size: 0.8rem;
            }
        }

        /* For extra small screens, stack the columns */
        @media screen and (max-width: 576px) {
            td {
                font-size: 0.8rem;
            }
        }
    </style>

    <div class="pagetitle">
        <h1>Transaction History</h1>
        <nav>
            <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
            <li class="breadcrumb-item active">Transaction History</li>
            </ol>
        </nav>
    </div>

    <div class="card-body overflow-auto">
        <div class="fdb-box py-3 mb-3">
            <div class="row justify-content">
                <div class="col my-0 py-0 table-responsive">
                    <table class="table table-striped table-bordered table-hover">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col" class="text-left">No.</th>
                                <th scope="col" class="text-left">Date</th>
                                <th scope="col" class="text-left">Transaction Description</th>
                                <th scope="col" class="text-center">Transaction Amount</th>
                                <th scope="col" class="text-center">Payment Method</th>
                                <th scope="col" class="text-center">Payer's Name</th>
                                <th scope="col" class="text-center">FPX Transaction ID</th>
                                <th scope="col" class="text-center">Transaction Reference Number</th>
                                <th scope="col" class="text-center">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($transactions as $transaction)
                                    <tr>
                                        <td class="text-center">{{ $loop->iteration }}</td>
                                        <td class="text-left">
                                            <a href="{{ route('transaction.details', $transaction->trx_ref) }}" class="text-dark">
                                                {{ $transaction->trx_transaction_time }}
                                            </a>
                                        </td>
                                        <td class="text-left">
                                            <a href="{{ route('transaction.details', $transaction->trx_ref) }}" class="text-dark">
                                                {{ $transaction->trx_description }}
                                            </a>
                                        </td>
                                        <td class="text-center">
                                            <a href="{{ route('transaction.details', $transaction->trx_ref) }}" class="text-dark">
                                                RM {{ $transaction->trx_amount }}
                                            </a>
                                        </td>
                                        <td class="text-left">{{ $transaction->payment_method }}</td>
                                        <td class="text-center">{{ $transaction->user_name }}</td>
                                        <td class="text-center">{{ $transaction->fpx_trx_id }}</td>
                                        <td class="text-center">
                                            <a href="{{ route('transaction.details', $transaction->trx_ref) }}" class="text-dark">
                                                {{ $transaction->trx_ref }}
                                            </a>
                                        </td>
                                        <td class="text-center 
                                            @if($transaction->transaction_status === 'SUCCESS') text-success 
                                            @elseif($transaction->transaction_status === 'FAILED' || $transaction->transaction_status === 'CANCEL') text-danger 
                                            @else text-warning 
                                            @endif" style="font-weight: bold">
                                            {{ $transaction->transaction_status }}
                                        </td>
                                    </tr>
                            @empty
                                <tr>
                                    <td colspan="9" class="text-center py-3">No records found</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection