@extends('layouts.app')

@section('title', 'Settings')
@section('page', 'system-settings')
@section('systemNav', 'general')

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

  <div class="payroll-rates-page">
    <div class="payroll-rates-page__head">
      <div>
        <h1 class="payroll-rates-page__title">System Settings</h1>
        <p class="payroll-rates-page__subtitle">Configure general system preferences for your restaurant POS.</p>
      </div>
      <div class="payroll-rates-page__tip" role="note">
        <i class="bi bi-info-circle-fill" aria-hidden="true"></i>
        <span>Use the tabs above or the shortcuts below.</span>
      </div>
    </div>

    <div class="payroll-rates-form">
      <article class="rate-card rate-card--violet">
        <div class="rate-card__head">
          <div class="rate-card__identity">
            <span class="rate-card__icon" aria-hidden="true"><i class="bi bi-sliders"></i></span>
            <div>
              <h2 class="rate-card__title">Quick links</h2>
              <p class="rate-card__desc">Jump to the most common system options.</p>
            </div>
          </div>
        </div>
        <div class="rate-link-grid">
          <a href="{{ route('settings.currency') }}" class="rate-link-card" style="--rate-accent:#0d9488;--rate-soft:#f0fdfa;--rate-border:#99f6e4">
            <span class="rate-link-card__icon" aria-hidden="true"><i class="bi bi-currency-exchange"></i></span>
            <span>
              <p class="rate-link-card__title">Currency</p>
              <p class="rate-link-card__desc">Code, symbol, and display name</p>
            </span>
            <i class="bi bi-chevron-right rate-link-card__chevron" aria-hidden="true"></i>
          </a>
          <a href="{{ route('settings.sms-gateway') }}" class="rate-link-card" style="--rate-accent:#ea580c;--rate-soft:#fff7ed;--rate-border:#fed7aa">
            <span class="rate-link-card__icon" aria-hidden="true"><i class="bi bi-chat-dots"></i></span>
            <span>
              <p class="rate-link-card__title">SMS Gateway</p>
              <p class="rate-link-card__desc">SMSlenz credentials and balance</p>
            </span>
            <i class="bi bi-chevron-right rate-link-card__chevron" aria-hidden="true"></i>
          </a>
          <a href="{{ route('settings.kitchen-mode') }}" class="rate-link-card" style="--rate-accent:#7c3aed;--rate-soft:#f5f3ff;--rate-border:#ddd6fe">
            <span class="rate-link-card__icon" aria-hidden="true"><i class="bi bi-fire"></i></span>
            <span>
              <p class="rate-link-card__title">Kitchen Mode</p>
              <p class="rate-link-card__desc">Display vs KOT print workflow</p>
            </span>
            <i class="bi bi-chevron-right rate-link-card__chevron" aria-hidden="true"></i>
          </a>
          <a href="{{ route('settings.payroll-rates') }}" class="rate-link-card" style="--rate-accent:#16a34a;--rate-soft:#f0fdf4;--rate-border:#bbf7d0">
            <span class="rate-link-card__icon" aria-hidden="true"><i class="bi bi-calculator"></i></span>
            <span>
              <p class="rate-link-card__title">EPF / ETF / Tax</p>
              <p class="rate-link-card__desc">Enable statutory items for payroll</p>
            </span>
            <i class="bi bi-chevron-right rate-link-card__chevron" aria-hidden="true"></i>
          </a>
          <a href="{{ route('settings.service-charge') }}" class="rate-link-card" style="--rate-accent:#7c3aed;--rate-soft:#f5f3ff;--rate-border:#ddd6fe">
            <span class="rate-link-card__icon" aria-hidden="true"><i class="bi bi-percent"></i></span>
            <span>
              <p class="rate-link-card__title">Service Charge</p>
              <p class="rate-link-card__desc">Enable and set default bill rate</p>
            </span>
            <i class="bi bi-chevron-right rate-link-card__chevron" aria-hidden="true"></i>
          </a>
          <a href="{{ route('settings.printers') }}" class="rate-link-card" style="--rate-accent:#0f766e;--rate-soft:#f0fdfa;--rate-border:#99f6e4">
            <span class="rate-link-card__icon" aria-hidden="true"><i class="bi bi-printer"></i></span>
            <span>
              <p class="rate-link-card__title">Printers</p>
              <p class="rate-link-card__desc">Bill / KOT / Report printer names</p>
            </span>
            <i class="bi bi-chevron-right rate-link-card__chevron" aria-hidden="true"></i>
          </a>
          <a href="{{ route('settings.invoice-message') }}" class="rate-link-card" style="--rate-accent:#ea580c;--rate-soft:#fff7ed;--rate-border:#fed7aa">
            <span class="rate-link-card__icon" aria-hidden="true"><i class="bi bi-chat-quote"></i></span>
            <span>
              <p class="rate-link-card__title">Invoice Message</p>
              <p class="rate-link-card__desc">Receipt footer print message</p>
            </span>
            <i class="bi bi-chevron-right rate-link-card__chevron" aria-hidden="true"></i>
          </a>
        </div>
      </article>
    </div>
  </div>
@endsection

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