@extends('layouts.admin')

@section('content')
<div class="container-fluid px-4">
    <h1 class="mt-4">Transactions</h1>
    
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-filter me-1"></i>
            Filter Transactions
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.transactions.index') }}" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Status</label>
                    <select name="status" class="form-select">
                        <option value="">All</option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="verified" {{ request('status') == 'verified' ? 'selected' : '' }}>Verified</option>
                        <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Package</label>
                    <select name="package_id" class="form-select">
                        <option value="">All Packages</option>
                        @foreach($packages as $package)
                            <option value="{{ $package->id }}" {{ request('package_id') == $package->id ? 'selected' : '' }}>
                                {{ $package->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Date Range</label>
                    <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label">&nbsp;</label>
                    <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}">
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">Apply Filters</button>
                    <a href="{{ route('admin.transactions.index') }}" class="btn btn-secondary">Reset</a>
                </div>
            </form>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-table me-1"></i>
            Transaction List
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Package</th>
                            <th>Amount</th>
                            <th>Sender</th>
                            <th>TrxID</th>
                            <th>Status</th>
                            <th>Created</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($transactions as $transaction)
                            <tr>
                                <td>{{ $transaction->id }}</td>
                                <td>{{ $transaction->package->name }}</td>
                                <td>{{ number_format($transaction->amount, 2) }} Tk</td>
                                <td>{{ $transaction->sender_number }}</td>
                                <td>{{ $transaction->transaction_id }}</td>
                                <td>
                                    <span class="badge bg-{{ $transaction->status_color }}">{{ $transaction->status }}</span>
                                </td>
                                <td>{{ $transaction->created_at->format('Y-m-d H:i') }}</td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#viewModal{{ $transaction->id }}">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        @if($transaction->status === 'pending')
                                            <button type="button" class="btn btn-sm btn-success" onclick="verifyTransaction({{ $transaction->id }})">
                                                <i class="fas fa-check"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#rejectModal{{ $transaction->id }}">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        @endif
                                    </div>

                                    <!-- View Modal -->
                                    <div class="modal fade" id="viewModal{{ $transaction->id }}" tabindex="-1">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Transaction Details</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <p><strong>Package:</strong> {{ $transaction->package->name }}</p>
                                                            <p><strong>Amount:</strong> {{ number_format($transaction->amount, 2) }} Tk</p>
                                                            <p><strong>Sender:</strong> {{ $transaction->sender_number }}</p>
                                                            <p><strong>TrxID:</strong> {{ $transaction->transaction_id }}</p>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <p><strong>Status:</strong> 
                                                                <span class="badge bg-{{ $transaction->status_color }}">{{ $transaction->status }}</span>
                                                            </p>
                                                            <p><strong>Created:</strong> {{ $transaction->created_at->format('Y-m-d H:i:s') }}</p>
                                                            @if($transaction->verified_at)
                                                                <p><strong>Verified:</strong> {{ $transaction->verified_at->format('Y-m-d H:i:s') }}</p>
                                                            @endif
                                                            @if($transaction->wifi_username)
                                                                <p><strong>WiFi Username:</strong> {{ $transaction->wifi_username }}</p>
                                                                <p><strong>WiFi Password:</strong> {{ $transaction->wifi_password }}</p>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    @if($transaction->screenshot_path)
                                                        <div class="mt-3">
                                                            <p><strong>Payment Screenshot:</strong></p>
                                                            <img src="{{ asset($transaction->screenshot_path) }}" class="img-fluid" alt="Payment Screenshot">
                                                        </div>
                                                    @endif
                                                    @if($transaction->admin_note)
                                                        <div class="mt-3">
                                                            <p><strong>Admin Note:</strong></p>
                                                            <p>{{ $transaction->admin_note }}</p>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Reject Modal -->
                                    @if($transaction->status === 'pending')
                                        <div class="modal fade" id="rejectModal{{ $transaction->id }}" tabindex="-1">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">Reject Transaction</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form id="rejectForm{{ $transaction->id }}">
                                                            <div class="mb-3">
                                                                <label class="form-label">Rejection Reason</label>
                                                                <textarea class="form-control" name="reason" rows="3" required></textarea>
                                                            </div>
                                                            <button type="button" class="btn btn-danger" onclick="rejectTransaction({{ $transaction->id }})">
                                                                Confirm Rejection
                                                            </button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center">No transactions found</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            {{ $transactions->links() }}
        </div>
    </div>
</div>

@push('scripts')
<script>
function verifyTransaction(id) {
    if (confirm('Are you sure you want to verify this transaction?')) {
        axios.post(`/admin/transactions/${id}/verify`)
            .then(response => {
                if (response.data.success) {
                    location.reload();
                }
            })
            .catch(error => {
                alert('Error verifying transaction');
                console.error(error);
            });
    }
}

function rejectTransaction(id) {
    const reason = document.querySelector(`#rejectForm${id} textarea[name="reason"]`).value;
    if (!reason) {
        alert('Please provide a rejection reason');
        return;
    }

    axios.post(`/admin/transactions/${id}/reject`, { reason })
        .then(response => {
            if (response.data.success) {
                location.reload();
            }
        })
        .catch(error => {
            alert('Error rejecting transaction');
            console.error(error);
        });
}
</script>
@endpush
@endsection