@extends('frontend.layout.dash')
@section('title', $title)
@section('content')

<div class="upgrade-wrap">
    <div class="upgrade-card card">
        <div class="upgrade-icon"><i class="ti ti-star"></i></div>
        <h2 class="upgrade-title">Become a Seller</h2>
        <p class="upgrade-desc">Pay the one-time upgrade fee to unlock seller access. Once approved by admin, you can upload and sell account credentials on the marketplace and earn money.</p>

        <div class="upgrade-fee-box">
            <span class="upgrade-fee-label">Upgrade Fee</span>
            <span class="upgrade-fee-amount">{{ optional($settings)->website_currency ?? '' }}{{ number_format($settings->seller_upgrade_fee ?? 0, 2) }}</span>
        </div>

        <div class="upgrade-perks">
            <div class="upgrade-perk"><i class="ti ti-check"></i> Upload unlimited account products</div>
            <div class="upgrade-perk"><i class="ti ti-check"></i> Earn on every sale (minus platform fee)</div>
            <div class="upgrade-perk"><i class="ti ti-check"></i> Withdraw earnings anytime</div>
            <div class="upgrade-perk"><i class="ti ti-check"></i> Seller dashboard with earnings overview</div>
        </div>

        @if(Auth::user()->is_seller)
            <div class="upgrade-status success"><i class="ti ti-circle-check"></i> You are already a seller. <a href="{{ route('user.marketplace.seller.dashboard') }}">Go to dashboard →</a></div>
        @elseif($pending)
            <div class="upgrade-status pending"><i class="ti ti-clock"></i> Your upgrade request is pending admin approval.</div>
        @else
            <form method="POST" action="{{ route('user.marketplace.upgrade.submit') }}" enctype="multipart/form-data" class="upgrade-form">
                @csrf

                {{-- Payment method tabs --}}
                <div class="upgrade-tabs">
                    <button type="button" class="upgrade-tab active" data-tab="wallet">
                        <i class="ti ti-wallet"></i> Pay from Wallet
                        <small>Balance: {{ optional($settings)->website_currency ?? '' }}{{ number_format(Auth::user()->balance, 2) }}</small>
                    </button>
                    <button type="button" class="upgrade-tab" data-tab="manual">
                        <i class="ti ti-building-bank"></i> Manual Deposit
                        <small>Pay via bank/transfer</small>
                    </button>
                </div>

                <input type="hidden" name="payment_method" id="payment_method" value="wallet">

                {{-- Wallet panel --}}
                <div class="upgrade-panel" id="panel-wallet">
                    @if(Auth::user()->balance >= ($settings->seller_upgrade_fee ?? 0))
                        <div class="upgrade-status success" style="margin-bottom:16px;"><i class="ti ti-circle-check"></i> Your wallet has sufficient balance to pay the upgrade fee.</div>
                    @else
                        <div class="upgrade-status" style="background:#fef2f2;color:#dc2626;margin-bottom:16px;"><i class="ti ti-alert-circle"></i> Insufficient wallet balance. <a href="{{ route('user.payment.index') }}" style="color:#dc2626;font-weight:700;">Fund wallet →</a></div>
                    @endif
                </div>

                {{-- Manual deposit panel --}}
                <div class="upgrade-panel" id="panel-manual" style="display:none;">
                    @if(optional($settings)->seller_deposit_info)
                    <div class="upgrade-deposit-info">
                        <div class="upgrade-deposit-title"><i class="ti ti-building-bank"></i> Payment Details</div>
                        <div class="upgrade-deposit-body">{{ $settings->seller_deposit_info }}</div>
                    </div>
                    @endif
                    <div class="form-group" style="margin-bottom:16px;">
                        <label class="form-label">Payment Proof <span class="required">*</span></label>
                        <input type="file" name="payment_proof" id="payment_proof" class="form-control" accept="image/*">
                        <small style="color:var(--text-secondary);font-size:12px;margin-top:4px;display:block;">Upload screenshot of your payment</small>
                    </div>
                </div>

                {{-- Contact info (always shown) --}}
                <div class="upgrade-divider">Contact Information</div>

                <div class="form-grid" style="margin-bottom:16px;">
                    <div class="form-group">
                        <label class="form-label">Full Name <span class="required">*</span></label>
                        <input type="text" name="contact_name" class="form-control" value="{{ old('contact_name', Auth::user()->fname . ' ' . Auth::user()->lname) }}" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Email <span class="required">*</span></label>
                        <input type="email" name="contact_email" class="form-control" value="{{ old('contact_email', Auth::user()->email) }}" required>
                    </div>
                </div>
                <div class="form-group" style="margin-bottom:20px;">
                    <label class="form-label">Phone Number</label>
                    <input type="tel" name="contact_phone" class="form-control" value="{{ old('contact_phone', Auth::user()->phone ?? '') }}" placeholder="Optional">
                </div>

                <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;">
                    <i class="ti ti-send"></i> Submit Upgrade Request
                </button>
            </form>
        @endif
    </div>
</div>

@endsection
@push('style')
<style>
.upgrade-wrap { max-width:560px; margin:0 auto; }
.upgrade-card { padding:36px 32px; }
.upgrade-icon { width:64px; height:64px; border-radius:16px; background:linear-gradient(135deg,#f59e0b,#d97706); display:flex; align-items:center; justify-content:center; font-size:28px; color:#fff; margin:0 auto 20px; }
.upgrade-title { font-size:22px; font-weight:700; color:var(--text-primary); margin:0 0 10px; text-align:center; }
.upgrade-desc { font-size:14px; color:var(--text-secondary); line-height:1.7; margin:0 0 24px; text-align:center; }
.upgrade-fee-box { background:var(--bg-secondary); border-radius:12px; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.upgrade-fee-label { font-size:14px; color:var(--text-secondary); }
.upgrade-fee-amount { font-size:24px; font-weight:800; color:var(--primary-color); }
.upgrade-perks { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.upgrade-perk { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-primary); }
.upgrade-perk i { color:#16a34a; font-size:16px; }
.upgrade-status { padding:14px 18px; border-radius:10px; font-size:14px; font-weight:500; display:flex; align-items:center; gap:10px; }
.upgrade-status.success { background:#dcfce7; color:#16a34a; }
.upgrade-status.pending { background:#fef9c3; color:#854d0e; }
.upgrade-status a { color:inherit; font-weight:700; }
.upgrade-tabs { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.upgrade-tab { display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 12px; border:2px solid var(--border-color); border-radius:12px; background:var(--bg-primary); cursor:pointer; font-size:14px; font-weight:600; color:var(--text-secondary); transition:all .2s; }
.upgrade-tab i { font-size:22px; }
.upgrade-tab small { font-size:11px; font-weight:400; }
.upgrade-tab.active { border-color:var(--primary-color); color:var(--primary-color); background:rgba(255,132,50,.06); }
.upgrade-deposit-info { background:var(--bg-secondary); border-radius:10px; padding:16px; margin-bottom:16px; }
.upgrade-deposit-title { font-size:13px; font-weight:700; color:var(--text-primary); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.upgrade-deposit-body { font-size:13px; color:var(--text-secondary); white-space:pre-line; line-height:1.7; }
.upgrade-divider { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-secondary); border-top:var(--border); padding-top:16px; margin-bottom:16px; }
</style>
@endpush
@push('script')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const tabs = document.querySelectorAll('.upgrade-tab');
    const methodInput = document.getElementById('payment_method');
    const proofInput = document.getElementById('payment_proof');

    tabs.forEach(tab => {
        tab.addEventListener('click', function () {
            tabs.forEach(t => t.classList.remove('active'));
            this.classList.add('active');
            const method = this.dataset.tab;
            methodInput.value = method;
            document.getElementById('panel-wallet').style.display = method === 'wallet' ? 'block' : 'none';
            document.getElementById('panel-manual').style.display = method === 'manual' ? 'block' : 'none';
            if (proofInput) proofInput.required = method === 'manual';
        });
    });
});
</script>
@endpush
