@extends('layouts.app')

@section('title', 'Currency')
@section('page', 'system-settings')
@section('systemNav', 'currency')

@section('content')
  @include('partials.settings-system-nav')

  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  @if ($errors->any())
    <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
  @endif

  <div class="payroll-rates-page">
    <div class="payroll-rates-page__head">
      <div>
        <h1 class="payroll-rates-page__title">Currency</h1>
        <p class="payroll-rates-page__subtitle">Single system currency used across POS, sales, and accounts.</p>
      </div>
      <div class="payroll-rates-page__tip" role="note">
        <i class="bi bi-info-circle-fill" aria-hidden="true"></i>
        <span>Preview: <strong>{{ money(1250) }}</strong></span>
      </div>
    </div>

    <form method="post" action="{{ route('settings.currency.update') }}" class="payroll-rates-form">
      @csrf
      @method('PUT')

      <article class="rate-card rate-card--teal">
        <div class="rate-card__head">
          <div class="rate-card__identity">
            <span class="rate-card__icon" aria-hidden="true"><i class="bi bi-currency-exchange"></i></span>
            <div>
              <h2 class="rate-card__title">Currency details</h2>
              <p class="rate-card__desc">Code, symbol, and full name shown in money formatting.</p>
            </div>
          </div>
        </div>
        <div class="rate-card__body rate-card__body--3">
          <div class="rate-field">
            <label class="rate-field__label" for="currency_code">
              <i class="bi bi-hash" aria-hidden="true"></i>
              Currency code
            </label>
            <div class="rate-field__control rate-field__control--plain">
              <input type="text" class="text-uppercase" id="currency_code" name="currency_code" maxlength="10" required value="{{ old('currency_code', $currencyCode) }}" placeholder="LKR">
            </div>
            <p class="rate-field__help">ISO-style code, e.g. LKR or USD.</p>
          </div>
          <div class="rate-field">
            <label class="rate-field__label" for="currency_symbol">
              <i class="bi bi-cash" aria-hidden="true"></i>
              Symbol
            </label>
            <div class="rate-field__control rate-field__control--plain">
              <input type="text" id="currency_symbol" name="currency_symbol" maxlength="20" required value="{{ old('currency_symbol', $currencySymbol) }}" placeholder="Rs">
            </div>
            <p class="rate-field__help">Shown before amounts.</p>
          </div>
          <div class="rate-field">
            <label class="rate-field__label" for="currency_name">
              <i class="bi bi-card-text" aria-hidden="true"></i>
              Name
            </label>
            <div class="rate-field__control rate-field__control--plain">
              <input type="text" id="currency_name" name="currency_name" maxlength="100" required value="{{ old('currency_name', $currencyName) }}" placeholder="Sri Lankan Rupee">
            </div>
            <p class="rate-field__help">Full currency name.</p>
          </div>
        </div>
      </article>

      <div class="payroll-rates-form__actions">
        <button type="submit" class="btn btn-primary payroll-rates-form__save">
          <i class="bi bi-floppy" aria-hidden="true"></i> Save currency
        </button>
      </div>
    </form>
  </div>
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/payroll-rates.css') }}" rel="stylesheet">
@endpush