@extends('layouts.admin')
@section('title', 'Markets')
@section('content')
<div class="page-header"><h1>Manage Markets</h1><p>Add, edit, and simulate price movements</p></div>

<div class="md-card" style="margin-bottom:1.5rem">
    <div class="md-card-header">Add New Market</div>
    <div class="md-card-body">
        <form method="POST" action="{{ route('admin.markets.store') }}" class="form-grid">
            @csrf
            <div class="form-field"><label>Name</label><input name="name" class="md-input" required></div>
            <div class="form-field"><label>Symbol</label><input name="symbol" class="md-input" required></div>
            <div class="form-field"><label>Price</label><input name="price" type="number" step="0.00000001" class="md-input" required></div>
            <div class="form-field"><label>24h Change %</label><input name="change_24h" type="number" step="0.01" class="md-input" value="0"></div>
            <div class="form-field"><label>Type</label>
                <select name="type" class="md-select"><option value="crypto">Crypto (Coins)</option><option value="commodity">Commodity</option><option value="metal">Metal</option></select>
            </div>
            <div class="form-field"><label>Volatility %</label><input name="volatility" type="number" step="0.01" class="md-input" value="0"></div>
            <div class="form-field"><label>TradingView Symbol</label><input name="tv_symbol" class="md-input" placeholder="BINANCE:BTCUSDT"></div>
            <div class="form-field" style="display:flex;align-items:flex-end"><button class="md-btn md-btn-filled">Add Market</button></div>
        </form>
    </div>
</div>

<div class="md-card" style="margin-bottom:1.5rem">
    <div class="md-card-header">Price Wave / Volatility Control</div>
    <div class="md-card-body">
        <form method="POST" action="{{ route('admin.markets.wave') }}" class="form-grid">
            @csrf
            <div class="form-field"><label>Market</label>
                <select name="market_id" class="md-select" required>
                    @foreach($markets as $m)<option value="{{ $m->id }}">{{ $m->name }} ({{ $m->symbol }})</option>@endforeach
                </select>
            </div>
            <div class="form-field"><label>Direction</label>
                <select name="direction" class="md-select"><option value="up">Up</option><option value="down">Down</option></select>
            </div>
            <div class="form-field"><label>Percent %</label><input name="percent" type="number" step="0.01" class="md-input" required></div>
            <div class="form-field" style="display:flex;align-items:flex-end"><button class="md-btn md-btn-tonal">Apply Wave</button></div>
        </form>
    </div>
</div>

<div class="md-card">
    <div class="table-wrap">
        <table class="md-table">
            <thead><tr><th>ID</th><th>Name</th><th>Symbol</th><th>Price</th><th>24h</th><th>Type</th><th>Vol%</th><th>Actions</th></tr></thead>
            <tbody>
                @foreach($markets as $market)
                <tr>
                    <td>{{ $market->id }}</td>
                    <td>{{ $market->name }}</td>
                    <td>{{ $market->symbol }}</td>
                    <td>${{ number_format($market->price, 2) }}</td>
                    <td style="color:{{ $market->change_24h >= 0 ? 'var(--md-success)' : 'var(--md-error)' }}">{{ $market->change_24h }}%</td>
                    <td>{{ ucfirst($market->type) }}</td>
                    <td>{{ $market->volatility }}%</td>
                    <td class="action-group">
                        <button type="button" class="md-btn md-btn-warning md-btn-sm" onclick="document.getElementById('edit-{{ $market->id }}').showModal()">Edit</button>
                        <form action="{{ route('admin.markets.destroy', $market) }}" method="POST" onsubmit="return confirm('Delete market?')">@csrf @method('DELETE')
                            <button class="md-btn md-btn-danger md-btn-sm">Delete</button>
                        </form>
                    </td>
                </tr>
                <dialog id="edit-{{ $market->id }}" style="border:none;border-radius:12px;padding:0;max-width:480px;background:var(--md-surface-container);color:var(--md-on-surface)">
                    <form method="POST" action="{{ route('admin.markets.update', $market) }}" style="padding:1.5rem">@csrf @method('PUT')
                        <h3 style="margin-bottom:1rem">Edit {{ $market->symbol }}</h3>
                        <div class="form-field"><label>Name</label><input name="name" class="md-input" value="{{ $market->name }}" required></div>
                        <div class="form-field"><label>Symbol</label><input name="symbol" class="md-input" value="{{ $market->symbol }}" required></div>
                        <div class="form-field"><label>Price</label><input name="price" type="number" step="0.00000001" class="md-input" value="{{ $market->price }}" required></div>
                        <div class="form-field"><label>24h Change</label><input name="change_24h" type="number" step="0.01" class="md-input" value="{{ $market->change_24h }}"></div>
                        <div class="form-field"><label>Type</label>
                            <select name="type" class="md-select">
                                @foreach(['crypto'=>'Crypto (Coins)','commodity'=>'Commodity','metal'=>'Metal'] as $val => $label)
                                <option value="{{ $val }}" @selected($market->type===$val)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-field"><label>Volatility</label><input name="volatility" type="number" step="0.01" class="md-input" value="{{ $market->volatility }}"></div>
                        <div style="display:flex;gap:0.5rem;margin-top:1rem">
                            <button type="submit" class="md-btn md-btn-filled">Save</button>
                            <button type="button" class="md-btn md-btn-outline" onclick="this.closest('dialog').close()">Cancel</button>
                        </div>
                    </form>
                </dialog>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection