@extends('layouts.app')

@section('title', 'Kitchen Mode')
@section('page', 'company-details')
@section('companyNav', 'kitchen-mode')

@php
  $mode = old('kitchen_mode', $kitchenMode);
  $kotPreview = old('kot_preview_enabled', $kotPreviewEnabled ? '1' : '0') === '1';
@endphp

@section('content')
  @include('partials.settings-company-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 kitchen-mode-page">
    <div class="payroll-rates-page__head">
      <div>
        <h1 class="payroll-rates-page__title">Kitchen Mode</h1>
        <p class="payroll-rates-page__subtitle">Choose how POS sends orders to the kitchen. Only one mode is active.</p>
      </div>
      <div class="payroll-rates-page__tip" role="note">
        <i class="bi bi-info-circle-fill" aria-hidden="true"></i>
        <span>Change applies on the next POS refresh.</span>
      </div>
    </div>

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

      <input type="hidden" name="kitchen_mode" id="kitchen_mode_value" value="{{ $mode }}">

      <article class="rate-card rate-card--violet" data-kitchen-card>
        <div class="rate-card__head">
          <div class="rate-card__identity">
            <span class="rate-card__icon" aria-hidden="true"><i class="bi bi-fire"></i></span>
            <div>
              <h2 class="rate-card__title">POS kitchen workflow</h2>
              <p class="rate-card__desc">Kitchen Display uses the status bar. KOT Print skips status and enables Charge &amp; Receipt after print.</p>
            </div>
          </div>
          <div class="rate-card__toggle-wrap">
            <span class="rate-card__toggle-label">Active mode</span>
            <div class="rate-toggle" role="group" aria-label="Kitchen mode">
              <button
                type="button"
                class="rate-toggle__btn {{ $mode === 'display' ? 'is-active' : '' }}"
                data-kitchen-mode="display"
                aria-pressed="{{ $mode === 'display' ? 'true' : 'false' }}"
              >Display</button>
              <button
                type="button"
                class="rate-toggle__btn {{ $mode === 'print' ? 'is-active' : '' }}"
                data-kitchen-mode="print"
                aria-pressed="{{ $mode === 'print' ? 'true' : 'false' }}"
              >KOT Print</button>
            </div>
          </div>
        </div>

        <div class="rate-card__body">
          <div class="rate-field {{ $mode === 'display' ? 'is-selected' : '' }}" data-mode-panel="display">
            <label class="rate-field__label">
              <i class="bi bi-display" aria-hidden="true"></i>
              Kitchen Display
            </label>
            <div class="rate-field__box rate-field__box--info">
              <p class="mb-0">Place order → Pending / Preparing / Ready status bar → wait for Served → then Charge &amp; Receipt.</p>
            </div>
            <p class="rate-field__help">Best when staff use the kitchen display screen.</p>
          </div>

          <div class="rate-field {{ $mode === 'print' ? 'is-selected' : '' }}" data-mode-panel="print">
            <label class="rate-field__label">
              <i class="bi bi-printer" aria-hidden="true"></i>
              KOT Print
            </label>
            <div class="rate-field__box rate-field__box--info">
              <p class="mb-0">Print KOT, hide status bar, and enable Charge / Receipt / Change right after KOT.</p>
            </div>
            <p class="rate-field__help">Best when kitchen works from printed tickets.</p>

            <label class="kitchen-kot-preview form-check" id="kot-preview-option">
              <input
                type="checkbox"
                class="form-check-input"
                name="kot_preview_enabled"
                value="1"
                id="kot_preview_enabled"
                {{ $kotPreview ? 'checked' : '' }}
              >
              <span class="form-check-label">
                <strong>Show KOT preview before print</strong>
                <em>Untick to open the print dialog immediately after Print KOT.</em>
              </span>
            </label>
          </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 mode
        </button>
      </div>
    </form>
  </div>
@endsection

@push('styles')
  <link href="{{ asset('assets/css/pages/payroll-rates.css') }}" rel="stylesheet">
  <style>
    .kitchen-kot-preview {
      display: flex;
      align-items: flex-start;
      gap: 0.65rem;
      margin-top: 0.85rem;
      padding: 0.75rem 0.85rem;
      border-radius: 12px;
      border: 1px solid #99f6e4;
      background: #f0fdfa;
      cursor: pointer;
    }
    .kitchen-kot-preview .form-check-input {
      margin-top: 0.2rem;
      flex-shrink: 0;
      width: 1.1rem;
      height: 1.1rem;
      border-color: #14b8a6;
    }
    .kitchen-kot-preview .form-check-input:checked {
      background-color: #0d9488;
      border-color: #0d9488;
    }
    .kitchen-kot-preview .form-check-label {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      line-height: 1.35;
    }
    .kitchen-kot-preview .form-check-label strong {
      font-size: 0.9rem;
      color: #0f766e;
    }
    .kitchen-kot-preview .form-check-label em {
      font-style: normal;
      font-size: 0.78rem;
      color: #64748b;
    }
    .rate-field[data-mode-panel="print"]:not(.is-selected) .kitchen-kot-preview {
      opacity: 0.55;
    }
  </style>
@endpush

@push('scripts')
  <script>
    (function () {
      const form = document.getElementById('kitchen-mode-form');
      if (!form) return;

      const hidden = document.getElementById('kitchen_mode_value');
      const card = form.querySelector('[data-kitchen-card]');
      const buttons = form.querySelectorAll('[data-kitchen-mode]');
      const panels = form.querySelectorAll('[data-mode-panel]');
      const previewOpt = document.getElementById('kot-preview-option');
      const previewInput = document.getElementById('kot_preview_enabled');

      function setMode(mode) {
        if (!hidden) return;
        hidden.value = mode;
        buttons.forEach((btn) => {
          const on = btn.dataset.kitchenMode === mode;
          btn.classList.toggle('is-active', on);
          btn.setAttribute('aria-pressed', on ? 'true' : 'false');
        });
        panels.forEach((panel) => {
          panel.classList.toggle('is-selected', panel.dataset.modePanel === mode);
        });
        if (card) {
          card.classList.toggle('rate-card--violet', mode === 'display');
          card.classList.toggle('rate-card--teal', mode === 'print');
        }
        if (previewInput) {
          previewInput.disabled = mode !== 'print';
        }
        if (previewOpt) {
          previewOpt.classList.toggle('is-disabled', mode !== 'print');
        }
      }

      buttons.forEach((btn) => {
        btn.addEventListener('click', () => setMode(btn.dataset.kitchenMode));
      });

      setMode(hidden.value || 'display');
    })();
  </script>
@endpush