@extends('layouts.admin')
@section('css')
    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
    <style>
        /* Make Select2 match Bootstrap form-control style */
        .select2-container .select2-selection--single {
            height: 38px;
            padding: 5px 12px;
            font-size: 1rem;
            line-height: 1.5;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }

        /* Match focus state */
        .select2-container--focus .select2-selection--single {
            border-color: #86b7fe;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }
    </style>

    <style>
        .pagination {
            margin-bottom: 0;
        }

        .page-item.active .page-link {
            background-color: #7266ba;
            border-color: #7266ba;
        }

        .page-link {
            color: #7266ba;
            padding: 0.5rem 0.75rem;
        }

        .page-link:hover {
            color: #564aa3;
        }

        .pagination-rounded .page-link {
            border-radius: 30px !important;
            margin: 0 3px;
        }
    </style>
@endsection
@section('admin')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">Transfer Approvals</h4>
            </div>
        </div>
        </div>

        <div class="card">
            <div class="card-header bg-white pt-3">
                <h4 class="card-title">Pending Coin Transfers</h4>
                <p class="text-muted">Review and approve user-to-user coin transfers.</p>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>Date</th>
                                <th>Sender Details</th>
                                <th>Amount</th>
                                <th>Receiver Details</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($transfers as $transfer)
                                <tr>
                                    <td>
                                        {{ $transfer->created_at->format('d M, Y') }}<br>
                                        <small class="text-muted">{{ $transfer->created_at->format('h:i A') }}</small>
                                    </td>
                                    <td>
                                        <div class="fw-bold">{{ $transfer->sender->name }}</div>
                                        <code class="text-primary">#{{ $transfer->sender->user_id }}</code><br>
                                        <small class="badge bg-light text-dark">Bal:
                                            {{ number_format($transfer->sender->seller_coin) }}</small>
                                    </td>
                                    <td class="text-center">
                                        <span
                                            class="fs-5 fw-bold text-dark">{{ number_format($transfer->coin_amount) }}</span>
                                        <div class="text-muted small">Coins</div>
                                    </td>
                                    <td>
                                        <div class="fw-bold">{{ $transfer->receiver->name }}</div>
                                        <code class="text-success">#{{ $transfer->receiver->user_id }}</code>
                                    </td>
                                    <td>
                                        <div class="d-flex justify-content-center gap-2">
                                            <form action="{{ route('admin.transfers.process', $transfer->id) }}"
                                                method="POST">
                                                @csrf
                                                <input type="hidden" name="action" value="approve">
                                                <button type="submit" class="btn btn-sm btn-success px-3"
                                                    onclick="return confirm('Approve this transfer?')">Approve</button>
                                            </form>

                                            <button type="button" class="btn btn-sm btn-outline-danger"
                                                data-bs-toggle="modal" data-bs-target="#rejectModal{{ $transfer->id }}">
                                                Reject
                                            </button>
                                        </div>

                                        <div class="modal fade" id="rejectModal{{ $transfer->id }}" tabindex="-1">
                                            <div class="modal-dialog">
                                                <form action="{{ route('admin.transfers.process', $transfer->id) }}"
                                                    method="POST">
                                                    @csrf
                                                    <input type="hidden" name="action" value="reject">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title">Reject Transfer #{{ $transfer->id }}
                                                            </h5>
                                                            <button type="button" class="btn-close"
                                                                data-bs-dismiss="modal"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <label>Reason for Rejection</label>
                                                            <textarea name="notes" class="form-control" placeholder="e.g. Suspicious activity"></textarea>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="submit" class="btn btn-danger">Confirm
                                                                Rejection</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-5 text-muted">
                                        <i class="fas fa-check-circle fa-3x mb-3 text-light"></i>
                                        <p>No pending transfers to approve.</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">
                    {{ $transfers->links() }}
                </div>
            </div>
        </div>
    @endsection