@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1">Currency Stock</h1>
        <p class="text-muted mb-0">Live stock quantity and average buy rate per currency.</p>
    </div>
</div>

<form class="row g-2 mb-4 ajax-filter" method="GET" action="{{ route('stock.dashboard') }}" data-ajax-target="#stock-results">
    <div class="col-md-9">
        <input class="form-control" name="search" value="{{ $filters['search'] ?? '' }}" placeholder="Search currency">
    </div>
    <div class="col-md-3">
        <button class="btn btn-primary" type="submit">Search</button>
    </div>
</form>

<div id="stock-results">
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped align-middle">
                <thead>
                    <tr>
                        <th>Currency</th>
                        <th>Name</th>
                        <th class="text-end">Available Quantity</th>
                        <th class="text-end">Avg Buy Rate</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($currencies as $currency)
                        <tr>
                            <td class="fw-semibold">{{ $currency->code }}</td>
                            <td>{{ $currency->name }}</td>
                            <td class="text-end">{{ number_format($currency->stock, 4) }} {{ $currency->code }}</td>
                            <td class="text-end">{{ $currency->avg_buy_rate !== null ? number_format($currency->avg_buy_rate, 4) : 'N/A' }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td class="text-muted text-center" colspan="4">No currencies added yet.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>
@endsection