@extends('layouts.main')

@section('title', 'Topup Transaction Details')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Topup Transaction Details</h1>
        <a href="{{ route('admin.topup-transactions.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Back to List
        </a>
    </div>

    <div class="row">
        <!-- Transaction Details -->
        <div class="col-lg-8">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Transaction Information</h6>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>Transaction ID:</strong></td>
                                    <td>{{ $transaction->transaction_id }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Amount:</strong></td>
                                    <td><span class="text-success h5">{{ $transaction->formatted_amount }}</span></td>
                                </tr>
                                <tr>
                                    <td><strong>Payment Method:</strong></td>
                                    <td>{{ ucfirst(str_replace('_', ' ', $transaction->payment_method)) }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Status:</strong></td>
                                    <td>
                                        @if($transaction->status == 'pending')
                                            <span class="badge badge-warning badge-lg">Pending</span>
                                        @elseif($transaction->status == 'confirmed')
                                            <span class="badge badge-success badge-lg">Confirmed</span>
                                        @else
                                            <span class="badge badge-danger badge-lg">Rejected</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Created At:</strong></td>
                                    <td>{{ $transaction->created_at->format('d F Y, H:i') }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>User Name:</strong></td>
                                    <td>{{ $transaction->user->name }}</td>
                                </tr>
                                <tr>
                                    <td><strong>User Email:</strong></td>
                                    <td>{{ $transaction->user->email }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Bank Name:</strong></td>
                                    <td>{{ $transaction->bank_name }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Account Number:</strong></td>
                                    <td>{{ $transaction->account_number }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Account Name:</strong></td>
                                    <td>{{ $transaction->account_name }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    @if($transaction->notes)
                        <div class="mt-3">
                            <strong>Admin Notes:</strong>
                            <div class="alert alert-info mt-2">
                                {{ $transaction->notes }}
                            </div>
                        </div>
                    @endif

                    @if($transaction->confirmed_at)
                        <div class="mt-3">
                            <strong>Processed Information:</strong>
                            <div class="mt-2">
                                <small class="text-muted">
                                    Processed on {{ $transaction->confirmed_at->format('d F Y, H:i') }}
                                    @if($transaction->confirmedBy)
                                        by {{ $transaction->confirmedBy->name }}
                                    @endif
                                </small>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Actions & Bukti Transfer -->
        <div class="col-lg-4">
            <!-- Bukti Transfer -->
            @if($transaction->bukti_transfer)
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Bukti Transfer</h6>
                    </div>
                    <div class="card-body text-center">
                        <img src="{{ Storage::url($transaction->bukti_transfer) }}" 
                             alt="Bukti Transfer" 
                             class="img-fluid mb-3"
                             style="max-height: 300px; border: 1px solid #ddd; border-radius: 8px;">
                        <br>
                        <a href="{{ route('admin.topup-transactions.download-bukti', $transaction->id) }}" 
                           class="btn btn-secondary btn-sm">
                            <i class="fas fa-download"></i> Download
                        </a>
                    </div>
                </div>
            @endif

            <!-- Actions -->
            @if($transaction->status == 'pending')
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">Actions</h6>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('admin.topup-transactions.confirm', $transaction->id) }}" method="POST">
                            @csrf
                            <div class="form-group">
                                <label for="action">Action</label>
                                <select name="action" id="action" class="form-control" required>
                                    <option value="">Select Action</option>
                                    <option value="confirm">Confirm</option>
                                    <option value="reject">Reject</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="notes">Notes (Optional)</label>
                                <textarea name="notes" id="notes" class="form-control" rows="3" 
                                          placeholder="Add any notes or remarks..."></textarea>
                            </div>

                            <button type="submit" class="btn btn-primary btn-block" 
                                    onclick="return confirm('Are you sure you want to process this transaction?')">
                                Process Transaction
                            </button>
                        </form>
                    </div>
                </div>
            @endif

            <!-- User Balance Info -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">User Balance</h6>
                </div>
                <div class="card-body">
                    <div class="text-center">
                        <h5 class="text-success">Rp {{ number_format($transaction->user->saldo ?? 0, 0, ',', '.') }}</h5>
                        <small class="text-muted">Current Balance</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.badge-lg {
    font-size: 0.9em;
    padding: 0.5em 0.8em;
}
</style>
@endpush