@extends('layouts.app')
@section('title','New Exchange')
@section('header-left')
<h3 class="text-lg font-bold">New Exchange</h3>
<p class="text-xs text-slate-500 ml-2">Convert your assets to NGN instantly</p>
@endsection
@section('content')
<div class="max-w-2xl mx-auto">
<div class="glass-card rounded-3xl overflow-hidden relative">
    <div class="absolute -top-20 -right-20 w-48 h-48 bg-primary/20 blur-[80px] rounded-full pointer-events-none"></div>
    <div class="absolute -bottom-20 -left-20 w-48 h-48 bg-primary/10 blur-[80px] rounded-full pointer-events-none"></div>

    {{-- Header --}}
    <div class="px-8 pt-8 pb-6 border-b border-white/5">
        <h2 class="text-2xl font-black text-white">Start New Exchange</h2>
        <p class="text-slate-400 mt-1 text-sm">Convert your digital assets to local currency instantly.</p>

        {{-- Type Toggle --}}
        <div class="mt-6 p-1.5 bg-background-dark rounded-2xl flex items-center gap-1 border border-white/5" id="typeToggle">
            <button type="button" onclick="setType('crypto_to_cash')"
                    id="btn-crypto" class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-primary text-white font-bold text-sm transition-all shadow-lg shadow-primary/20">
                <span class="material-symbols-outlined text-lg">currency_bitcoin</span> Crypto to Cash
            </button>
            <button type="button" onclick="setType('giftcard_to_cash')"
                    id="btn-giftcard" class="flex-1 flex items-center justify-center gap-2 py-3 rounded-xl text-slate-400 font-bold text-sm hover:text-white transition-all">
                <span class="material-symbols-outlined text-lg">featured_play_list</span> Gift Card to Cash
            </button>
        </div>
    </div>

    {{-- Form --}}
    <form method="POST" action="{{ url('/exchange/new') }}" enctype="multipart/form-data" class="p-8 space-y-6">
        @csrf
        <input type="hidden" name="order_type" id="order_type" value="crypto_to_cash"/>

        {{-- Asset Selector --}}
        <div>
            <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-3">Select Asset</label>
            <div class="grid grid-cols-3 sm:grid-cols-5 gap-2" id="assetGrid">
                @foreach($rates as $rate)
                <button type="button" onclick="selectAsset('{{ $rate->asset_type }}', '{{ $rate->category }}')"
                        data-category="{{ $rate->category }}" data-asset="{{ $rate->asset_type }}"
                        class="asset-btn p-3 rounded-xl border border-white/10 bg-white/5 hover:border-primary/50 hover:bg-primary/10 transition-all flex flex-col items-center gap-1 {{ $loop->first ? 'border-primary bg-primary/10' : '' }}">
                    <span class="material-symbols-outlined text-primary text-lg">{{ $rate->category === 'crypto' ? 'currency_bitcoin' : 'featured_play_list' }}</span>
                    <span class="text-xs font-bold">{{ $rate->asset_type }}</span>
                    <span class="text-[9px] text-slate-500">₦{{ number_format($rate->rate, 0) }}</span>
                </button>
                @endforeach
            </div>
            <input type="hidden" name="asset_type" id="asset_type" value="{{ $rates->first()?->asset_type }}"/>
        </div>

        {{-- You Send --}}
        <div class="p-5 bg-white/5 rounded-2xl border border-white/10 focus-within:border-primary/50 transition-colors">
            <div class="flex justify-between items-center mb-2">
                <span class="text-xs font-bold uppercase tracking-wider text-slate-500">You Send</span>
                <span class="text-xs text-slate-400" id="currentRate">Rate: Loading…</span>
            </div>
            <div class="flex items-center gap-4">
                <input type="number" name="amount" id="amount" step="any" min="0" placeholder="0.00" value="{{ old('amount') }}"
                       class="bg-transparent border-none p-0 text-3xl font-bold text-white focus:ring-0 w-full placeholder:text-slate-700"
                       oninput="calculatePayout()"/>
                <span class="font-bold text-sm text-slate-300 shrink-0" id="assetLabel">{{ $rates->first()?->asset_type }}</span>
            </div>
        </div>

        <div class="flex justify-center -my-3 relative z-10">
            <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center shadow-lg shadow-primary/30 border-4 border-background-dark">
                <span class="material-symbols-outlined text-white text-lg">arrow_downward</span>
            </div>
        </div>

        {{-- You Receive --}}
        <div class="p-5 bg-white/5 rounded-2xl border border-white/10">
            <div class="flex justify-between items-center mb-2">
                <span class="text-xs font-bold uppercase tracking-wider text-slate-500">You Receive (Estimated)</span>
                <div class="flex items-center gap-1.5">
                    <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
                    <span class="text-[10px] font-bold text-green-500 uppercase">Live Rate</span>
                </div>
            </div>
            <div class="text-3xl font-black text-primary" id="payoutDisplay">₦0.00</div>
        </div>

        {{-- Crypto: TX Hash, Giftcard: Card details --}}
        <div id="cryptoFields">
            <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-2">Transaction Hash (optional)</label>
            <input type="text" name="transaction_hash" placeholder="0x..." value="{{ old('transaction_hash') }}"
                   class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder:text-slate-600 focus:border-primary/50 focus:outline-none focus:ring-0"/>
        </div>
        <div id="giftcardFields" class="hidden space-y-3">
            <div>
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-2">Card Number</label>
                <input type="text" name="card_number" placeholder="XXXX-XXXX-XXXX-XXXX" value="{{ old('card_number') }}"
                       class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder:text-slate-600 focus:border-primary/50 focus:outline-none focus:ring-0"/>
            </div>
            <div>
                <label class="block text-xs font-bold uppercase tracking-wider text-slate-400 mb-2">Card PIN</label>
                <input type="text" name="card_pin" placeholder="Card PIN" value="{{ old('card_pin') }}"
                       class="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder:text-slate-600 focus:border-primary/50 focus:outline-none focus:ring-0"/>
            </div>
        </div>

        {{-- Proof Upload --}}
        <div>
            <label class="block text-sm font-bold text-slate-300 mb-2">Upload Proof of Transfer</label>
            <label class="flex flex-col items-center justify-center gap-3 p-8 rounded-2xl cursor-pointer border-2 border-dashed border-primary/20 bg-white/3 hover:border-primary/40 hover:bg-primary/5 transition-all">
                <span class="material-symbols-outlined text-primary text-4xl">cloud_upload</span>
                <div class="text-center">
                    <p class="text-white font-bold text-sm">Drag & Drop or click to upload</p>
                    <p class="text-slate-500 text-xs mt-0.5">PNG, JPG or PDF — max 5MB</p>
                </div>
                <input type="file" name="proof_file" accept=".jpg,.jpeg,.png,.pdf" class="hidden" onchange="showFileName(this)"/>
            </label>
            <p class="text-xs text-primary mt-1.5 font-medium" id="fileNameDisplay"></p>
        </div>

        {{-- Security badges --}}
        <div class="flex items-center justify-center gap-6 text-[10px] font-bold uppercase tracking-widest text-slate-500">
            <div class="flex items-center gap-1.5"><span class="material-symbols-outlined text-primary text-base">verified_user</span>SSL Secured</div>
            <div class="flex items-center gap-1.5"><span class="material-symbols-outlined text-primary text-base">lock</span>Encrypted</div>
            <div class="flex items-center gap-1.5"><span class="material-symbols-outlined text-primary text-base">history</span>Instant Payout</div>
        </div>

        <button type="submit" class="w-full py-5 rounded-2xl bg-primary text-white font-black text-base uppercase tracking-wider hover:bg-primary/90 transition-all shadow-xl shadow-primary/20 flex items-center justify-center gap-3">
            Initialize Exchange <span class="material-symbols-outlined">rocket_launch</span>
        </button>
    </form>
    <div class="bg-black/20 p-4 border-t border-white/5 text-center">
        <p class="text-xs text-slate-500">By clicking "Initialize Exchange", you agree to Vicdan's <a href="#" class="text-primary hover:underline">Terms</a> and <a href="#" class="text-primary hover:underline">Privacy Policy</a>.</p>
    </div>
</div>
</div>
@endsection
@push('scripts')
<script>
const rates = @json($rates->keyBy('asset_type'));
let currentAsset = '{{ $rates->first()?->asset_type }}';

function setType(type) {
    document.getElementById('order_type').value = type;
    const isCrypto = type === 'crypto_to_cash';
    document.getElementById('btn-crypto').className = isCrypto
        ? 'flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-primary text-white font-bold text-sm transition-all shadow-lg shadow-primary/20'
        : 'flex-1 flex items-center justify-center gap-2 py-3 rounded-xl text-slate-400 font-bold text-sm hover:text-white transition-all';
    document.getElementById('btn-giftcard').className = !isCrypto
        ? 'flex-1 flex items-center justify-center gap-2 py-3 rounded-xl bg-primary text-white font-bold text-sm transition-all shadow-lg shadow-primary/20'
        : 'flex-1 flex items-center justify-center gap-2 py-3 rounded-xl text-slate-400 font-bold text-sm hover:text-white transition-all';
    document.getElementById('cryptoFields').classList.toggle('hidden', !isCrypto);
    document.getElementById('giftcardFields').classList.toggle('hidden', isCrypto);
    // Filter asset buttons
    document.querySelectorAll('.asset-btn').forEach(btn => {
        const show = (isCrypto && btn.dataset.category === 'crypto') || (!isCrypto && btn.dataset.category === 'giftcard');
        btn.style.display = show ? '' : 'none';
    });
    // Auto-select first visible
    const first = Array.from(document.querySelectorAll('.asset-btn')).find(b => b.style.display !== 'none');
    if (first) selectAsset(first.dataset.asset, first.dataset.category);
}

function selectAsset(assetType, category) {
    currentAsset = assetType;
    document.getElementById('asset_type').value = assetType;
    document.getElementById('assetLabel').textContent = assetType;
    document.querySelectorAll('.asset-btn').forEach(b => {
        const active = b.dataset.asset === assetType;
        b.className = b.className.replace(/ border-primary| bg-primary\/10/g,'') + (active ? ' border-primary bg-primary/10' : '');
    });
    const rate = rates[assetType];
    document.getElementById('currentRate').textContent = rate ? `Rate: ₦${Number(rate.rate).toLocaleString()}` : '';
    calculatePayout();
}

function calculatePayout() {
    const amount = parseFloat(document.getElementById('amount').value) || 0;
    const rate = rates[currentAsset];
    if (rate && amount > 0) {
        const payout = (amount * parseFloat(rate.rate)).toFixed(2);
        document.getElementById('payoutDisplay').textContent = '₦' + Number(payout).toLocaleString('en-NG', {minimumFractionDigits:2});
    } else {
        document.getElementById('payoutDisplay').textContent = '₦0.00';
    }
}

function showFileName(input) {
    const name = input.files[0]?.name || '';
    document.getElementById('fileNameDisplay').textContent = name ? `✓ ${name} selected` : '';
}
</script>
@endpush