@extends('admin.layouts.app')
@section('title', __('admin.currencies.title'))
@section('content')

<div class="page-header" style="display:flex;align-items:center;justify-content:space-between;">
    <h1>{{ __('admin.currencies.title') }}</h1>
    <button type="button" onclick="document.getElementById('modal-add-currency').style.display='flex'" class="btn btn-primary btn-sm">+ {{ __('admin.currencies.add_currency') }}</button>
</div>
{{-- Rates are per US dollar (Currency::BASE): say so with one of the
     shop's own currencies as the example, so what to type is obvious. --}}
@php
    $exampleCurrency = $currencies->sortByDesc('is_default')->first(fn ($c) => ! $c->isBase() && (float) $c->rate > 0);
    $exampleRate = $exampleCurrency ? rtrim(rtrim(number_format((float) $exampleCurrency->rate, 5, '.', ','), '0'), '.') : '130';
    $exampleCode = $exampleCurrency->code ?? 'KES';
@endphp
<div class="alert alert-info" style="margin-bottom:15px;font-size:13px;line-height:1.55;">
    <strong>{{ __('admin.currencies.rates_notice_title') }}</strong><br>
    {{ __('admin.currencies.rates_notice', ['rate' => $exampleRate, 'code' => $exampleCode]) }}
</div>
{{-- Customers choosing their currency (CustomerCurrency) and the daily
     rate update (pnlcs:currency-update). The books stay in the default
     currency either way. --}}
<div class="card" id="currency-settings" style="margin-bottom:15px;">
    <div class="card-header" style="display:flex;align-items:center;justify-content:space-between;gap:8px;">
        <strong>{{ __('admin.currencies.settings_title') }}</strong>
        <form method="POST" action="{{ route('admin.config.currencies.update-rates') }}" style="margin:0;">
            @csrf
            <button type="submit" class="btn btn-default btn-xs">{{ __('admin.currencies.update_rates_now') }}</button>
        </form>
    </div>
    <form method="POST" action="{{ route('admin.config.currencies.settings') }}">
        @csrf
        <div class="card-body">
            <div class="form-group">
                <label style="font-size:13px;display:flex;align-items:flex-start;gap:8px;cursor:pointer;">
                    <input type="hidden" name="customer_choice" value="0">
                    <input type="checkbox" name="customer_choice" value="1" @checked($customerChoice) style="margin-top:3px;">
                    <span><strong>{{ __('admin.currencies.customer_choice') }}</strong><br><span style="color:#777;">{{ __('admin.currencies.customer_choice_hint') }}</span></span>
                </label>
                @if($customerChoice && $currencies->count() < 2)
                <div style="font-size:12px;color:#c43c35;margin:4px 0 0 22px;">{{ __('admin.currencies.customer_choice_needs_two') }}</div>
                @endif
            </div>
            <div class="form-group" style="margin-bottom:0;">
                <label style="font-size:13px;display:flex;align-items:flex-start;gap:8px;cursor:pointer;">
                    <input type="hidden" name="auto_update_rates" value="0">
                    <input type="checkbox" name="auto_update_rates" value="1" @checked($autoUpdateRates) style="margin-top:3px;">
                    <span><strong>{{ __('admin.currencies.auto_update_rates') }}</strong><br><span style="color:#777;">{{ __('admin.currencies.auto_update_rates_hint') }}</span></span>
                </label>
            </div>
        </div>
        <div style="padding:10px 16px;border-top:1px solid #e5e5e5;display:flex;justify-content:flex-end;">
            <button type="submit" class="btn btn-primary btn-sm">{{ __('common.actions.save_changes') }}</button>
        </div>
    </form>
</div>

<p style="color:#666;font-size:13px;margin:0 0 10px;">{{ __('admin.currencies.default_switch_hint') }}</p>
<div class="card">
    <table class="data-table">
        <thead><tr><th>{{ __('common.table.code') }}</th><th>{{ __('common.table.name') }}</th><th>{{ __('admin.currencies.prefix') }}</th><th>{{ __('admin.currencies.suffix') }}</th><th>{{ __('admin.currencies.rate_per_usd') }}</th><th>{{ __('admin.currencies.clients') }}</th><th>{{ __('admin.currencies.default') }}</th><th style="text-align:right;">{{ __('common.table.actions') }}</th></tr></thead>
        <tbody>
        @foreach($currencies as $currency)
        <tr>
            <td style="font-family:monospace;font-weight:600;">{{ $currency->code }}</td>
            <td>{{ $currency->prefix }}</td>
            <td style="font-family:monospace;">{{ $currency->prefix }}</td>
            <td style="font-family:monospace;">{{ $currency->suffix ?? '' }}</td>
            <td style="font-family:monospace;white-space:nowrap;">@if($currency->isBase())1 USD <span style="color:#999;font-family:inherit;">({{ __('admin.currencies.base') }})</span>@else 1 USD = {{ rtrim(rtrim(number_format((float) $currency->rate, 5, '.', ','), '0'), '.') }} {{ $currency->code }}@endif</td>
            <td>{{ (int) ($clientsPerCurrency[$currency->id] ?? 0) }}</td>
            <td>@if($currency->is_default)<span class="badge-active">{{ __('admin.currencies.default') }}</span>@endif</td>
            <td style="text-align:right;">
                @unless($currency->is_default)
                <form method="POST" action="{{ route('admin.config.currencies.default', $currency) }}" style="display:inline;">
                    @csrf
                    <button type="submit" class="btn btn-default btn-xs">{{ __('admin.currencies.make_default') }}</button>
                </form>
                @endunless
                <button type="button" class="btn btn-default btn-xs"
                    onclick="openEditCurrency({{ json_encode(['id'=>$currency->id,'code'=>$currency->code,'prefix'=>$currency->prefix,'suffix'=>$currency->suffix,'format'=>(int) $currency->format,'rate'=>$currency->rate,'default'=>$currency->is_default]) }})">{{ __('common.actions.edit') }}</button>
                @if(!$currency->is_default)
                <form method="POST" action="{{ route('admin.config.currencies.destroy', $currency) }}" style="display:inline;" onsubmit="return pnConfirm(event, @js($currency->code), {title: @js(__('admin.currencies.confirm_delete')), danger: true})">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn btn-danger btn-xs">{{ __('common.actions.delete') }}</button>
                </form>
                @endif
            </td>
        </tr>
        @endforeach
        </tbody>
    </table>
</div>

<div id="modal-add-currency" style="display:none;position:fixed;inset:0;z-index:1050;align-items:center;justify-content:center;">
    <div style="position:fixed;inset:0;background:rgba(0,0,0,0.5);" onclick="document.getElementById('modal-add-currency').style.display='none'"></div>
    <div style="position:relative;background:#fff;border-radius:4px;width:450px;max-width:95%;box-shadow:0 5px 30px rgba(0,0,0,0.3);">
        <div style="padding:15px 20px;border-bottom:1px solid #e5e5e5;display:flex;align-items:center;justify-content:space-between;">
            <h4 style="margin:0;font-size:16px;">{{ __('admin.currencies.add_currency') }}</h4>
            <button type="button" onclick="document.getElementById('modal-add-currency').style.display='none'" style="background:none;border:none;font-size:22px;cursor:pointer;color:#777;">&times;</button>
        </div>
        <form method="POST" action="{{ route('admin.config.currencies.store') }}">
            @csrf
            <div style="padding:20px;">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                    <div class="form-group"><label class="form-label">{{ __('admin.currencies.code') }}</label><input type="text" name="code" required maxlength="3" class="form-control" placeholder="USD"></div>
                    <div class="form-group"><label class="form-label">{{ __('admin.currencies.rate_per_usd') }}</label><input type="number" name="rate" step="0.000001" required value="1" class="form-control"><small style="display:block;color:#777;margin-top:3px;">{{ __('admin.currencies.rate_hint') }}</small></div>
                    <div class="form-group"><label class="form-label">{{ __('admin.currencies.prefix_symbol') }}</label><input type="text" name="prefix" class="form-control" placeholder="$"></div>
                    <div class="form-group"><label class="form-label">{{ __('admin.currencies.suffix') }}</label><input type="text" name="suffix" class="form-control"></div>
                    <div class="form-group" style="grid-column:span 2;"><label class="form-label">{{ __('admin.currencies.number_format') }}</label><select name="format" class="form-control">@foreach(array_keys(\App\Models\Currency::FORMATS) as $f)<option value="{{ $f }}">{{ (new \App\Models\Currency(['format' => $f]))->number(1234.56) }}</option>@endforeach</select></div>
                </div>
            </div>
            <div style="padding:12px 20px;border-top:1px solid #e5e5e5;display:flex;gap:8px;justify-content:flex-end;">
                <button type="button" onclick="document.getElementById('modal-add-currency').style.display='none'" class="btn btn-default btn-sm">{{ __('common.actions.cancel') }}</button>
                <button type="submit" class="btn btn-primary btn-sm">{{ __('admin.currencies.add_currency') }}</button>
            </div>
        </form>
    </div>
</div>

<div id="modal-edit-currency" style="display:none;position:fixed;inset:0;z-index:1050;align-items:center;justify-content:center;">
    <div style="position:fixed;inset:0;background:rgba(0,0,0,0.5);" onclick="document.getElementById('modal-edit-currency').style.display='none'"></div>
    <div style="position:relative;background:#fff;border-radius:4px;width:450px;max-width:95%;box-shadow:0 5px 30px rgba(0,0,0,0.3);">
        <div style="padding:15px 20px;border-bottom:1px solid #e5e5e5;display:flex;align-items:center;justify-content:space-between;">
            <h4 style="margin:0;font-size:16px;">{{ __('admin.currencies.edit_currency') }}</h4>
            <button type="button" onclick="document.getElementById('modal-edit-currency').style.display='none'" style="background:none;border:none;font-size:22px;cursor:pointer;color:#777;">&times;</button>
        </div>
        <form method="POST" id="edit-currency-form" action="">
            @csrf @method('PUT')
            <div style="padding:20px;">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                    <div class="form-group"><label class="form-label">{{ __('admin.currencies.code') }}</label><input type="text" name="code" id="ec-code" required class="form-control"></div>
                    <div class="form-group"><label class="form-label">{{ __('admin.currencies.rate_per_usd') }}</label><input type="number" name="rate" id="ec-rate" step="0.000001" required class="form-control"><small style="display:block;color:#777;margin-top:3px;">{{ __('admin.currencies.rate_hint') }}</small></div>
                    <div class="form-group"><label class="form-label">{{ __('admin.currencies.prefix') }}</label><input type="text" name="prefix" id="ec-prefix" class="form-control"></div>
                    <div class="form-group"><label class="form-label">{{ __('admin.currencies.suffix') }}</label><input type="text" name="suffix" id="ec-suffix" class="form-control"></div>
                    <div class="form-group" style="grid-column:span 2;"><label class="form-label">{{ __('admin.currencies.number_format') }}</label><select name="format" id="ec-format" class="form-control">@foreach(array_keys(\App\Models\Currency::FORMATS) as $f)<option value="{{ $f }}">{{ (new \App\Models\Currency(['format' => $f]))->number(1234.56) }}</option>@endforeach</select></div>
                    <div class="form-group" style="grid-column:span 2;"><label style="font-size:13px;display:flex;align-items:center;gap:6px;cursor:pointer;"><input type="checkbox" name="default" value="1" id="ec-default"> {{ __('admin.currencies.set_as_default') }}</label></div>
                </div>
            </div>
            <div style="padding:12px 20px;border-top:1px solid #e5e5e5;display:flex;gap:8px;justify-content:flex-end;">
                <button type="button" onclick="document.getElementById('modal-edit-currency').style.display='none'" class="btn btn-default btn-sm">{{ __('common.actions.cancel') }}</button>
                <button type="submit" class="btn btn-primary btn-sm">{{ __('common.actions.save_changes') }}</button>
            </div>
        </form>
    </div>
</div>

<script>
function openEditCurrency(d) {
    document.getElementById('edit-currency-form').action = '/admin/config/currencies/' + d.id;
    document.getElementById('ec-code').value = d.code;
    document.getElementById('ec-rate').value = d.rate;
    document.getElementById('ec-prefix').value = d.prefix || '';
    document.getElementById('ec-suffix').value = d.suffix || '';
    document.getElementById('ec-format').value = String(d.format || 1);
    document.getElementById('ec-default').checked = !!d.default;
    document.getElementById('modal-edit-currency').style.display = 'flex';
}
</script>
@endsection