{{-- resources/views/settings/currencies.blade.php --}}
@extends('layouts.app')
@section('title', 'Currencies')
@section('page_title', 'Currencies')
@section('page_subtitle', 'Manage accepted currencies and exchange rates')

@section('content')

@include('settings.partials.nav')

<div class="row g-3">

    {{-- Current currencies --}}
    <div class="col-xl-8">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-currency-exchange me-2" style="color:var(--clay)"></i>
                    Active Currencies
                </span>
            </div>

            @if($currencies->isEmpty())
                <div class="card-body text-center py-4">
                    <p class="text-muted mb-0" style="font-size:.8rem;">
                        No currencies configured
                    </p>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Code</th>
                                <th>Name</th>
                                <th>Symbol</th>
                                <th>Exchange Rate</th>
                                <th>Base</th>
                                <th>Active</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($currencies as $currency)
                                <tr>
                                    <td>
                                        <span class="fw-bold"
                                              style="font-size:.88rem;">
                                            {{ $currency->code }}
                                        </span>
                                    </td>
                                    <td style="font-size:.8rem;">
                                        {{ $currency->name }}
                                    </td>
                                    <td style="font-size:.82rem;font-weight:600;">
                                        {{ $currency->symbol }}
                                    </td>
                                    <td>
                                        <form method="POST"
                                              action="{{ tenant_route('settings.currencies.update', ['currency' => $currency->id]) }}"
                                              class="d-flex align-items-center gap-2">
                                            @csrf @method('PUT')
                                            <input type="number"
                                                   name="exchange_rate"
                                                   class="form-control form-control-sm"
                                                   style="width:100px;"
                                                   value="{{ $currency->exchange_rate }}"
                                                   min="0.0001" step="0.0001"
                                                   {{ $currency->is_base ? 'readonly' : '' }}>
                                            <input type="hidden" name="is_active"
                                                   value="{{ $currency->is_active ? 1 : 0 }}">
                                            @if(!$currency->is_base)
                                                <button class="btn btn-xs btn-outline-secondary"
                                                        type="submit">
                                                    Save
                                                </button>
                                            @endif
                                        </form>
                                    </td>
                                    <td>
                                        @if($currency->is_base)
                                            <span style="font-size:.72rem;background:#d1fae5;
                                                         color:#065f46;padding:2px 8px;
                                                         border-radius:20px;font-weight:600;">
                                                Base
                                            </span>
                                        @else
                                            <form method="POST"
                                                  action="{{ tenant_route('settings.currencies.base', ['currency' => $currency->id]) }}"
                                                  onsubmit="return confirm('Set {{ $currency->code }} as base currency?')">
                                                @csrf @method('PUT')
                                                <button class="btn btn-xs btn-outline-secondary"
                                                        type="submit">
                                                    Set Base
                                                </button>
                                            </form>
                                        @endif
                                    </td>
                                    <td>
                                        @if($currency->is_active)
                                            <i class="bi bi-check-circle-fill"
                                               style="color:var(--success)"></i>
                                        @else
                                            <i class="bi bi-x-circle"
                                               style="color:var(--muted)"></i>
                                        @endif
                                    </td>
                                    <td>
                                        @if(!$currency->is_base)
                                            <form method="POST"
                                                  action="{{ tenant_route('settings.currencies.destroy', ['currency' => $currency->id]) }}"
                                                  onsubmit="return confirm('Remove this currency?')">
                                                @csrf @method('DELETE')
                                                <button class="btn btn-xs btn-outline-danger"
                                                        type="submit">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>

    {{-- Add currency --}}
    <div class="col-xl-4">
        <div class="card">
            <div class="card-header">
                <span class="card-title">Add Currency</span>
            </div>
            <div class="card-body">
                <form method="POST"
                      action="{{ tenant_route('settings.currencies.store') }}">
                    @csrf

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Currency</label>
                        <select name="code"
                                id="currencySelect"
                                class="form-select"
                                onchange="fillCurrency(this)">
                            <option value="">Select currency</option>
                            @foreach($available as $code => $info)
                                @if(!$currencies->contains('code', $code))
                                    <option value="{{ $code }}"
                                            data-name="{{ $info['name'] }}"
                                            data-symbol="{{ $info['symbol'] }}">
                                        {{ $code }} — {{ $info['name'] }}
                                    </option>
                                @endif
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Name</label>
                        <input type="text" name="name" id="currencyName"
                               class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Symbol</label>
                        <input type="text" name="symbol" id="currencySymbol"
                               class="form-control" maxlength="5" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Exchange Rate
                            <span style="font-size:.72rem;color:var(--muted);">
                                (1 {{ $currencies->where('is_base', true)->first()?->code ?? 'USD' }} = ? this currency)
                            </span>
                        </label>
                        <input type="number" name="exchange_rate"
                               class="form-control"
                               value="1" min="0.0001" step="0.0001" required>
                    </div>

                    <button type="submit" class="btn btn-primary btn-sm w-100">
                        Add Currency
                    </button>
                </form>
            </div>
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script>
function fillCurrency(select) {
    const opt = select.selectedOptions[0];
    if (opt) {
        document.getElementById('currencyName').value = opt.dataset.name || '';
        document.getElementById('currencySymbol').value = opt.dataset.symbol || '';
    }
}
</script>
@endpush