@extends('layouts.app')

@section('title', 'Add Funds - SecureSoftPay')

@push('styles')
<style>
    /* আপনার অরিজিনাল ফাইলে থাকা হুবহু CSS */
    @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
    
    body { background-color: #f8f9fa; }
    
    .page-wrapper { 
        display: flex; 
        max-width: 1400px; 
        margin: 120px auto 50px; 
        gap: 40px; 
        padding: 0 15px;
        align-items: flex-start;
    }

    .page-sidebar { 
        width: 280px; 
        flex-shrink: 0; 
    }
    
    /* Freeze Alert */
    .freeze-alert {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
        padding: 12px;
        border-radius: 6px;
        margin-bottom: 15px;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .credit-balance-card {
        background-color: #0d6efd;
        color: white;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 30px;
        position: relative;
    }
    .credit-balance-card h4 {
        font-size: 14px;
        font-weight: 500;
        margin: 0 0 5px 0;
        opacity: 0.9;
    }
    .credit-balance-card .balance {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 5px;
    }
    .available-balance {
        font-size: 13px;
        opacity: 0.9;
        margin-bottom: 15px;
        display: block;
    }
    .credit-balance-card ul {
        list-style: none;
        padding: 0;
        margin: 0 0 15px 0;
        font-size: 13px;
        border-top: 1px solid rgba(255,255,255,0.2);
        padding-top: 15px;
    }
    .credit-balance-card ul li {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
    }
    .credit-balance-card .notice {
        background-color: rgba(255, 255, 255, 0.15);
        padding: 10px;
        border-radius: 5px;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Sidebar & Main Content Styles */
    .sidebar-widget h3 { font-size: 18px; font-weight: 700; margin-bottom: 15px; color: #333; }
    .sidebar-widget ul { list-style: none; padding: 0; }
    .sidebar-widget ul li a { display: flex; align-items: center; gap: 10px; padding: 12px; text-decoration: none; color: #333; font-weight: 500; font-size: 14px; border-radius: 6px; transition: all 0.2s; }
    .sidebar-widget ul li a .fa-solid { background-color: #e9ecef; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 5px; }
    .sidebar-widget ul li a.active, .sidebar-widget ul li a:hover { background-color: #eef2ff; color: #0052cc; }
    .sidebar-widget ul li a.active .fa-solid, .sidebar-widget ul li a:hover .fa-solid { background-color: #0d6efd; color: white; }

    .page-main-content { flex-grow: 1; min-width: 0; background: #fff; border: 1px solid #dee2e6; border-radius: 8px; padding: 30px; }
    .page-header h1 { font-size: 28px; font-weight: 700; color: #212529; margin-bottom: 5px; }
    .breadcrumb { color: #6c757d; font-size: 14px; margin-bottom: 25px; }
    .form-section p { font-size: 15px; color: #555; margin-bottom: 25px; }
    .form-group { margin-bottom: 20px; }
    .form-group label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px; }
    .form-control { width: 100%; padding: 10px 15px; border: 1px solid #ced4da; border-radius: 4px; }
    
    .amount-options { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
    .amount-btn { padding: 10px 20px; border: 1px solid #ced4da; border-radius: 4px; background-color: #fff; cursor: pointer; font-weight: 600; transition: all 0.2s; }
    .amount-btn:hover, .amount-btn.selected { background-color: #0d6efd; color: white; border-color: #0d6efd; }
    .btn-primary { background-color: #0d6efd; color: white; padding: 12px 25px; border: none; border-radius: 5px; font-size: 16px; font-weight: 600; cursor: pointer; width: 100%; transition: background-color 0.3s; }
    .btn-primary:hover { background-color: #0b5ed7; }
    .alert-danger { padding: 15px; background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; border-radius: 5px; text-align: center; margin-bottom: 20px; }

    @media (max-width: 992px) { .page-wrapper { flex-direction: column; } .page-sidebar { width: 100%; } }
</style>
@endpush

@section('content')
<div class="page-wrapper">
    <aside class="page-sidebar">
        
        <!-- Freeze Alert -->
        @if ($user->frozen_balance > 0)
            <div class="freeze-alert">
                <i class="fas fa-exclamation-triangle"></i>
                <strong>Notice:</strong> &nbsp; Your amount is frozen (৳{{ number_format($user->frozen_balance, 2) }})
            </div>
        @endif

        <div class="credit-balance-card">
            <h4>Your credit balance is</h4>
            <div class="balance">৳{{ number_format($user->balance, 2) }}BDT</div>
            
            @if ($user->frozen_balance > 0)
                <span class="available-balance">Available: ৳{{ number_format($user->balance - $user->frozen_balance, 2) }}</span>
            @endif

            <ul>
                <li><span>Minimum Deposit</span> <span>৳{{ number_format($min_deposit, 2) }}BDT</span></li>
                <li><span>Maximum Deposit</span> <span>৳{{ number_format($max_deposit, 2) }}BDT</span></li>
                <li><span>Maximum Balance</span> <span>৳{{ number_format($max_balance, 2) }}BDT</span></li>
            </ul>
            <div class="notice">
                <i class="fas fa-info-circle"></i> All deposits are non-refundable
            </div>
        </div>

        <div class="sidebar-widget">
            <h3>Billing</h3>
            <ul>
                <li><a href="{{ route('my-invoices') }}"><i class="fa-solid fa-file-invoice"></i> My Invoices</a></li>
                <li><a href="{{ route('add-funds') }}" class="active"><i class="fa-solid fa-plus"></i> Add Funds</a></li>
            </ul>
        </div>
    </aside>

    <main class="page-main-content">
        <div class="page-header">
            <h1>Add Funds</h1>
            <div class="breadcrumb">Portal Home / Client Area / Add Funds</div>
        </div>
        
        <form class="form-section" method="POST" action="{{ route('add-funds.store') }}">
            @csrf
            
            @if (session('flash_error'))
                <div class="alert-danger">
                    {{ session('flash_error') }}
                </div>
            @endif

            <p>Add funds to your account with us to avoid lots of small transactions and to automatically take care of any new invoices that are generated.</p>

            <div class="form-group">
                <label for="payment_method">Payment Method:</label>
                <select id="payment_method" name="payment_method" class="form-control">
                    <option value="securesoftpay">securesoftpay</option>
                </select>
            </div>

            <div class="form-group">
                <label>Amount to Add:</label>
                <div class="amount-options">
                    <button type="button" class="amount-btn" data-amount="10">৳10</button>
                    <button type="button" class="amount-btn" data-amount="25">৳25</button>
                    <button type="button" class="amount-btn" data-amount="50">৳50</button>
                    <button type="button" class="amount-btn" data-amount="75">৳75</button>
                    <button type="button" class="amount-btn" data-amount="100">৳100</button>
                </div>
                <input type="number" id="amount_input" name="amount" class="form-control" placeholder="{{ number_format($min_deposit, 2) }}" step="0.01" required>
            </div>

            <button type="submit" class="btn-primary">Add Funds</button>
        </form>
    </main>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const amountButtons = document.querySelectorAll('.amount-btn');
    const amountInput = document.getElementById('amount_input');
    amountButtons.forEach(button => {
        button.addEventListener('click', function() {
            amountButtons.forEach(btn => btn.classList.remove('selected'));
            this.classList.add('selected');
            amountInput.value = this.dataset.amount;
        });
    });
    amountInput.addEventListener('input', function() {
        amountButtons.forEach(btn => btn.classList.remove('selected'));
    });
});
</script>
@endpush