@extends('layouts.user')

@section('title', 'Top Up Balance')
@section('page-title', 'Top Up Balance')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-header bg-primary text-white py-3">
                <h5 class="mb-0">Top Up Your Balance</h5>
            </div>
            <div class="card-body">
                <!-- Current Balance -->
                <div class="alert alert-info">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <strong>Current Balance:</strong>
                            <span class="text-success fs-5 ms-2">৳{{ number_format(auth()->user()->balance, 2) }}</span>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-primary" id="refreshBalance"
                                data-url="{{ route('user.balance.check') }}">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                </div>

                <!-- Payment Methods -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h6 class="mb-3">Select Payment Method</h6>
                        <div class="row g-3">
                            @foreach($paymentMethods as $method)
                            <div class="col-md-4">
                                <div class="payment-method-card">
                                    <input type="radio" name="payment_method" id="method_{{ $method->id }}" 
                                           value="{{ $method->id }}" class="payment-method-radio" 
                                           data-method="{{ $method->name }}" 
                                           {{ $loop->first ? 'checked' : '' }}>
                                    <label for="method_{{ $method->id }}" class="payment-method-label">
                                        <div class="payment-icon">
                                            <i class="{{ $method->icon }} fa-2x"></i>
                                        </div>
                                        <div class="payment-name">{{ $method->name }}</div>
                                        <div class="payment-info">{{ $method->account_info }}</div>
                                    </label>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <!-- Top Up Form -->
                <form action="{{ route('user.payments.topup.submit') }}" method="POST" enctype="multipart/form-data" id="topupForm">
                    @csrf
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="amount" class="form-label">Amount (৳) *</label>
                                <div class="input-group">
                                    <span class="input-group-text">৳</span>
                                    <input type="number" step="0.01" min="100" max="100000" 
                                           class="form-control @error('amount') is-invalid @enderror" 
                                           id="amount" name="amount" value="{{ old('amount') }}" 
                                           placeholder="Enter amount" required>
                                </div>
                                @error('amount')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-text text-muted">
                                    Minimum amount: ৳100, Maximum: ৳100,000
                                </small>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="transaction_id" class="form-label">Transaction ID *</label>
                                <input type="text" class="form-control @error('transaction_id') is-invalid @enderror" 
                                       id="transaction_id" name="transaction_id" 
                                       value="{{ old('transaction_id') }}" 
                                       placeholder="Enter transaction ID" required>
                                @error('transaction_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="screenshot" class="form-label">Payment Screenshot *</label>
                        <input type="file" class="form-control @error('screenshot') is-invalid @enderror file-upload-preview" 
                               id="screenshot" name="screenshot" accept="image/*" required
                               data-preview="#screenshotPreview">
                        @error('screenshot')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted">
                            Upload screenshot of successful payment. Max file size: 2MB. Supported formats: JPG, PNG, GIF
                        </small>
                        
                        <div class="mt-2">
                            <img src="#" id="screenshotPreview" class="img-thumbnail d-none" style="max-height: 200px;">
                        </div>
                    </div>

                    <div class="form-group mb-4">
                        <label for="notes" class="form-label">Additional Notes (Optional)</label>
                        <textarea class="form-control @error('notes') is-invalid @enderror" 
                                  id="notes" name="notes" rows="3" 
                                  placeholder="Any additional information about this transaction">{{ old('notes') }}</textarea>
                        @error('notes')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Payment Instructions -->
                    <div class="alert alert-warning" id="paymentInstructions">
                        <h6 class="alert-heading" id="instructionsTitle">Payment Instructions</h6>
                        <div id="instructionsContent">
                            @foreach($paymentMethods as $method)
                            <div class="method-instructions" id="instructions_{{ $method->id }}" 
                                 style="display: {{ $loop->first ? 'block' : 'none' }};">
                                {!! $method->instructions !!}
                            </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Processing Time:</strong> Top-up requests are usually processed within 1-2 hours during business hours (9 AM - 6 PM). For urgent processing, please contact support.
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{{ route('user.dashboard') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-2"></i>Back to Dashboard
                        </a>
                        <button type="submit" class="btn btn-primary" id="submitBtn">
                            <i class="fas fa-paper-plane me-2"></i>Submit Request
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Recent Top-ups -->
        <div class="card shadow mt-4">
            <div class="card-header bg-light py-3">
                <h5 class="mb-0">Recent Top-up Requests</h5>
            </div>
            <div class="card-body">
                @if($recentTopups->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>Date</th>
                                <th>Amount</th>
                                <th>Method</th>
                                <th>Status</th>
                                <th>Transaction ID</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentTopups as $topup)
                            <tr>
                                <td>{{ $topup->created_at->format('M j, Y H:i') }}</td>
                                <td>
                                    <strong class="text-success">৳{{ number_format($topup->amount, 2) }}</strong>
                                </td>
                                <td>{{ $topup->payment_method }}</td>
                                <td>
                                    <span class="badge bg-{{ $topup->status === 'approved' ? 'success' : ($topup->status === 'pending' ? 'warning' : 'danger') }}">
                                        {{ ucfirst($topup->status) }}
                                    </span>
                                </td>
                                <td>
                                    <code>{{ $topup->reference }}</code>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="text-center py-4">
                    <i class="fas fa-money-bill-wave fa-3x text-muted mb-3"></i>
                    <p class="text-muted">No top-up requests yet</p>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Payment method selection
    $('.payment-method-radio').change(function() {
        const methodId = $(this).val();
        const methodName = $(this).data('method');
        
        // Show/hide instructions
        $('.method-instructions').hide();
        $('#instructions_' + methodId).show();
        
        // Update instructions title
        $('#instructionsTitle').text('Payment Instructions - ' + methodName);
    });

    // File upload preview
    $('.file-upload-preview').change(function() {
        const input = $(this);
        const preview = $(this).data('preview');
        const file = input[0].files[0];
        
        if (file) {
            // Validate file size (2MB)
            if (file.size > 2 * 1024 * 1024) {
                toastr.error('File size must be less than 2MB');
                input.val('');
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(e) {
                $(preview).attr('src', e.target.result).removeClass('d-none');
            }
            reader.readAsDataURL(file);
        }
    });

    // Refresh balance
    $('#refreshBalance').click(function() {
        const $btn = $(this);
        SMSGateway.showLoading($btn);
        
        $.ajax({
            url: $(this).data('url'),
            method: 'GET',
            success: function(response) {
                $('.alert-info .text-success').text('৳' + response.balance.toFixed(2));
                SMSGateway.hideLoading($btn);
                toastr.success('Balance updated');
            },
            error: function(xhr) {
                SMSGateway.handleAjaxError(xhr);
                SMSGateway.hideLoading($btn);
            }
        });
    });

    // Form submission
    $('#topupForm').submit(function(e) {
        const amount = parseFloat($('#amount').val());
        if (amount < 100 || amount > 100000) {
            e.preventDefault();
            toastr.error('Amount must be between ৳100 and ৳100,000');
            return false;
        }
        
        $('#submitBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>Submitting...');
    });
});
</script>
@endpush

@push('styles')
<style>
.payment-method-card {
    position: relative;
}

.payment-method-radio {
    display: none;
}

.payment-method-label {
    display: block;
    padding: 20px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.payment-method-radio:checked + .payment-method-label {
    border-color: #007bff;
    background-color: #f8f9ff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.payment-icon {
    margin-bottom: 10px;
    color: #6c757d;
}

.payment-method-radio:checked + .payment-method-label .payment-icon {
    color: #007bff;
}

.payment-name {
    font-weight: bold;
    margin-bottom: 5px;
}

.payment-info {
    font-size: 12px;
    color: #6c757d;
}

.method-instructions ol,
.method-instructions ul {
    margin-bottom: 0;
    padding-left: 20px;
}

.method-instructions li {
    margin-bottom: 5px;
}
</style>
@endpush