@extends('admin.layouts.app')

@section('title', 'Deposit Requests')

@section('content')
    <div class="container-fluid">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="text-warning">
                <i class="fas fa-money-bill-wave me-2"></i>Deposit Requests
            </h2>
        </div>

        <!-- Search Input -->
        <div class="mb-4">
            <label for="searchInput" class="form-label text-warning"><span>Search</span> Deposits</label>
            <input type="text" id="searchInput" class="form-control bg-dark text-white border-warning"
                placeholder="<span>Search</span> by ID, User, Amount, Package, Payment Method, or Status..."
                style="max-width: 300px;">
        </div>

        <div class="card bg-dark border-warning">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-dark table-hover" id="depositsTable">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>User</th>
                                <th>Amount</th>
                                <th>Package</th>
                                <th>Payment Method</th>
                                <th>Proof</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($deposits as $deposit)
                                <tr>
                                    <td>{{ $deposit->id }}</td>
                                    <td>
                                        <a href="{{ route('admin.users.details', $deposit->user_id) }}"
                                            class="text-warning">
                                            {{ $deposit->user->name }}
                                        </a>
                                    </td>
                                    <td>${{ number_format($deposit->amount, 2) }}</td>
                                    <td>
                                        {{ $deposit->package ? $deposit->package->name : 'No Package' }}
                                    </td>
                                    <td>{{ ucfirst($deposit->payment_method) }}</td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-warning" data-bs-toggle="modal"
                                            data-bs-target="#proofModal{{ $deposit->id }}">
                                            <i class="fas fa-eye"></i> View Proof
                                        </button>
                                    </td>
                                    <td>{{ $deposit->status }}</td>
                                    <td>{{ $deposit->created_at->format('Y-m-d H:i') }}</td>
                                    <td>
                                        @if ($deposit->status === 'pending')
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-sm btn-success" data-bs-toggle="modal"
                                                    data-bs-target="#approveModal{{ $deposit->id }}">
                                                    <i class="fas fa-check"></i> Approve
                                                </button>
                                                <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal"
                                                    data-bs-target="#rejectModal{{ $deposit->id }}">
                                                    <i class="fas fa-times"></i> Reject
                                                </button>
                                            </div>
                                        @endif
                                    </td>
                                </tr>

                                <!-- Proof Modal -->
                                <div class="modal fade" id="proofModal{{ $deposit->id }}" tabindex="-1">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content bg-dark border-warning">
                                            <div class="modal-header border-warning">
                                                <h5 class="modal-title text-warning">Transaction Proof</h5>
                                                <button type="button" class="btn-close btn-close-white"
                                                    data-bs-dismiss="modal"></button>
                                            </div>
                                            <div class="modal-body">
                                                <img src="{{ asset('storage/' . $deposit->transaction_proof) }}"
                                                    class="img-fluid" alt="Transaction Proof">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Approve Modal -->
                                <div class="modal fade" id="approveModal{{ $deposit->id }}" tabindex="-1">
                                    <div class="modal-dialog">
                                        <div class="modal-content bg-dark border-warning">
                                            <div class="modal-header border-warning">
                                                <h5 class="modal-title text-warning">Approve Deposit</h5>
                                                <button type="button" class="btn-close btn-close-white"
                                                    data-bs-dismiss="modal"></button>
                                            </div>
                                            <form action="{{ route('admin.deposits.approve', $deposit->id) }}"
                                                method="POST">
                                                @csrf
                                                <div class="modal-body">
                                                    <div class="mb-3">
                                                        <label class="form-label text-warning">Amount Received</label>
                                                        <input type="number" step="0.01"
                                                            class="form-control bg-dark text-white border-warning"
                                                            name="received_amount" value="{{ $deposit->amount }}" required>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label class="form-label text-warning">Notes (Optional)</label>
                                                        <textarea class="form-control bg-dark text-white border-warning" name="notes" rows="3"></textarea>
                                                    </div>
                                                </div>
                                                <div class="modal-footer border-warning">
                                                    <button type="button" class="btn btn-secondary"
                                                        data-bs-dismiss="modal">Cancel</button>
                                                    <button type="submit" class="btn btn-warning">Approve Deposit</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <!-- Reject Modal -->
                                <div class="modal fade" id="rejectModal{{ $deposit->id }}" tabindex="-1">
                                    <div class="modal-dialog">
                                        <div class="modal-content bg-dark border-danger">
                                            <div class="modal-header border-danger">
                                                <h5 class="modal-title text-danger">Reject Deposit</h5>
                                                <button type="button" class="btn-close btn-close-white"
                                                    data-bs-dismiss="modal"></button>
                                            </div>
                                            <form action="{{ route('admin.deposits.reject', $deposit->id) }}"
                                                method="POST">
                                                @csrf
                                                <div class="modal-body">
                                                    <div class="mb-3">
                                                        <label class="form-label text-danger">Reason for Rejection</label>
                                                        <textarea class="form-control bg-dark text-white border-danger" name="notes" rows="3" required></textarea>
                                                    </div>
                                                </div>
                                                <div class="modal-footer border-danger">
                                                    <button type="button" class="btn btn-secondary"
                                                        data-bs-dismiss="modal">Cancel</button>
                                                    <button type="submit" class="btn btn-danger">Reject Deposit</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="d-flex justify-content-center mt-4">
                    {{ $deposits->links() }}
                </div>
            </div>
        </div>
    </div>

@section('scripts')
    <script>
        document.getElementById('searchInput').addEventListener('input', function() {
            const searchValue = this.value.toLowerCase();
            const table = document.getElementById('depositsTable');
            const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');

            for (let row of rows) {
                const cells = row.getElementsByTagName('td');
                let match = false;

                // Check columns: ID (0), User (1), Amount (2), Package (3), Payment Method (4), Status (6)
                for (let i of [0, 1, 2, 3, 4, 6]) {
                    if (cells[i] && cells[i].textContent.toLowerCase().includes(searchValue)) {
                        match = true;
                        break;
                    }
                }

                row.style.display = match ? '' : 'none';
            }
        });
    </script>
@endsection
@endsection