@php
    $exchangeSettings = $exchangeSettings ?? \App\Models\CurrencyExchangeSetting::current();
@endphp

<div class="crancy-product-card mg-bottom-30 currency-exchange-settings">
    <h4 class="crancy-product-card__title">{{ __('translate.FreeCurrencyAPI settings') }}</h4>
    <p class="text-muted mb-0">
        {{ __('translate.FreeCurrencyAPI settings help') }}
        <a href="https://freecurrencyapi.com/" target="_blank" rel="noopener noreferrer">freecurrencyapi.com</a>
    </p>

    <form
        id="currency_exchange_settings_form"
        action="{{ route('admin.multi-currency.exchange-settings.update') }}"
        method="POST"
        class="currency-exchange-settings__form mg-top-20"
    >
        @csrf
        @method('PUT')

        <div class="row g-3">
            <div class="col-lg-6 col-md-12">
                <div class="crancy__item-form--group mb-0">
                    <label class="crancy__item-label" for="freecurrency_api_key">{{ __('translate.FreeCurrencyAPI key') }}</label>
                    <input
                        class="crancy__item-input"
                        type="password"
                        name="freecurrency_api_key"
                        id="freecurrency_api_key"
                        value=""
                        placeholder="{{ $exchangeSettings->hasApiKey() ? __('translate.API key configured leave blank to keep') : __('translate.Paste your API key') }}"
                        autocomplete="off"
                    >
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="crancy__item-form--group mb-0">
                    <label class="crancy__item-label" for="sync_interval_hours">{{ __('translate.Sync interval hours') }}</label>
                    <input
                        class="crancy__item-input"
                        type="number"
                        name="sync_interval_hours"
                        id="sync_interval_hours"
                        min="1"
                        max="168"
                        value="{{ old('sync_interval_hours', $exchangeSettings->sync_interval_hours) }}"
                    >
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="crancy__item-form--group mb-0">
                    <label class="crancy__item-label d-block">{{ __('translate.Auto sync') }}</label>
                    <div class="form-check form-switch currency-exchange-settings__switch">
                        <input
                            class="form-check-input"
                            type="checkbox"
                            name="sync_enabled"
                            id="sync_enabled"
                            value="1"
                            @checked(old('sync_enabled', $exchangeSettings->sync_enabled))
                        >
                        <label class="form-check-label" for="sync_enabled">{{ __('translate.Enable automatic sync') }}</label>
                    </div>
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="crancy__item-form--group mb-0">
                    <label class="crancy__item-label" for="base_currency_code">{{ __('translate.Base currency') }}</label>
                    <input
                        class="crancy__item-input"
                        type="text"
                        name="base_currency_code"
                        id="base_currency_code"
                        value="{{ old('base_currency_code', $exchangeSettings->base_currency_code) }}"
                        maxlength="8"
                    >
                </div>
            </div>

            <div class="col-lg-3 col-md-6">
                <div class="crancy__item-form--group mb-0">
                    <label class="crancy__item-label" for="target_currency_code">{{ __('translate.Target currency') }}</label>
                    <input
                        class="crancy__item-input"
                        type="text"
                        name="target_currency_code"
                        id="target_currency_code"
                        value="{{ old('target_currency_code', $exchangeSettings->target_currency_code) }}"
                        maxlength="8"
                    >
                </div>
            </div>
        </div>
    </form>

    <div class="currency-exchange-settings__actions">
        <button type="submit" form="currency_exchange_settings_form" class="crancy-btn">
            {{ __('translate.Save API settings') }}
        </button>
        <form action="{{ route('admin.multi-currency.sync-rates') }}" method="POST" class="currency-exchange-settings__sync-form">
            @csrf
            <button type="submit" class="crancy-btn">
                <i class="fas fa-sync-alt" aria-hidden="true"></i>
                {{ __('translate.Sync exchange rate now') }}
            </button>
        </form>
    </div>

    @if ($exchangeSettings->last_synced_at)
        <div class="alert alert-light currency-exchange-settings__status mb-0" role="status">
            <strong>{{ __('translate.Last sync') }}:</strong>
            {{ $exchangeSettings->last_synced_at->timezone(config('app.timezone'))->format('d.m.Y H:i') }}
            —
            <span class="{{ $exchangeSettings->last_sync_status === 'success' ? 'text-success' : 'text-danger' }}">
                {{ $exchangeSettings->last_sync_message }}
            </span>
            @if ($exchangeSettings->last_target_rate)
                <br>
                <strong>{{ $exchangeSettings->target_currency_code }}:</strong>
                {{ number_format((float) $exchangeSettings->last_target_rate, 6, '.', '') }}
                ({{ __('translate.per') }} {{ $exchangeSettings->base_currency_code }})
            @endif
        </div>
    @endif
</div>

@once
    @push('style_section')
        <style>
            .currency-exchange-settings__form {
                margin-bottom: 0;
            }

            .currency-exchange-settings__switch {
                margin-top: 12px;
                padding-left: 2.5em;
            }

            .currency-exchange-settings__actions {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 12px;
                margin-top: 24px;
            }

            .currency-exchange-settings__sync-form {
                margin: 0;
                display: contents;
            }

            .currency-exchange-settings__sync-form .crancy-btn {
                margin: 0;
            }

            .currency-exchange-settings__status {
                margin-top: 20px;
            }
        </style>
    @endpush
@endonce