@extends('layouts.app')

@section('title', 'Add-ons')
@section('page', 'products')
@section('productsNav', 'addons')

@php
  $statusVariant = fn ($s) => $s === 'Active' ? 'success' : 'danger';
@endphp

@section('content')
  @include('partials.products-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

  <x-data-table
    id="product-addons-table"
    class="catalog-table categories-table"
    title="Add-ons"
    subtitle="Extras like cheese, sauce, and sides customers can add to a dish."
    search-placeholder="Search add-ons..."
    :selectable="false"
    :page-size="10"
  >
    <x-slot:toolbarActions>
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addonModal" data-addon-add>
        <i class="bi bi-plus-lg"></i> Add Add-on
      </button>
    </x-slot:toolbarActions>
    <x-slot:filters>
      <select class="form-select form-select-sm" data-edt-col-filter="status" aria-label="Status">
        <option value="">All Statuses</option>
        <option>Active</option>
        <option>Inactive</option>
      </select>
    </x-slot:filters>
    <x-slot:afterToolbar>
      <div class="product-stats-panel">
        <div class="row g-3 product-stats product-stats--4 justify-content-start">
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--primary">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-plus-circle"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Total Add-ons</p>
                <p class="product-kpi__value">{{ $totalAddons }}</p>
                <p class="product-kpi__meta">All extras</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--success">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-check-lg"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Active</p>
                <p class="product-kpi__value">{{ $activeAddons }}</p>
                <p class="product-kpi__meta">Available to order</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--warning">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-link-45deg"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Linked</p>
                <p class="product-kpi__value">{{ $linkedAddons }}</p>
                <p class="product-kpi__meta">Assigned to products</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-3 product-stat-col">
            <div class="product-kpi product-kpi--inactive">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-pause-circle-fill"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Inactive</p>
                <p class="product-kpi__value">{{ $inactiveAddons }}</p>
                <p class="product-kpi__meta">Hidden from orders</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </x-slot:afterToolbar>
    <x-slot:head>
      <x-data-table-th label="Name" col="name" />
      <x-data-table-th label="Cost" col="cost" sort-type="number" />
      @foreach ($priceGroups as $group)
        <x-data-table-th :label="$group->short_label" :col="'pg_'.$group->id" sort-type="number" />
      @endforeach
      <x-data-table-th label="Products" col="products" sort-type="number" />
      <x-data-table-th label="Sort" col="sort_order" sort-type="number" />
      <x-data-table-th label="Status" col="status" />
    </x-slot:head>
    <x-slot:body>
      @forelse ($addons as $row)
        @php
          $priceMap = $row->prices->pluck('amount', 'price_group_id');
          $pricesPayload = [];
          foreach ($priceGroups as $group) {
            $pricesPayload[(string) $group->id] = (float) ($priceMap[$group->id] ?? 0);
          }
        @endphp
        <tr data-id="{{ $row->id }}">
          <td data-col="name" class="cell-primary">{{ $row->name }}</td>
          <td data-col="cost" data-sort-value="{{ $row->cost }}"><span class="product-price">{{ money($row->cost) }}</span></td>
          @foreach ($priceGroups as $group)
            <td data-col="pg_{{ $group->id }}" data-sort-value="{{ $priceMap[$group->id] ?? 0 }}"><span class="product-price">{{ money($priceMap[$group->id] ?? 0) }}</span></td>
          @endforeach
          <td data-col="products" data-sort-value="{{ $row->products_count }}">{{ $row->products_count }}</td>
          <td data-col="sort_order">{{ $row->sort_order }}</td>
          <td data-col="status">
            <x-badge :variant="$statusVariant($row->status)">{{ $row->status }}</x-badge>
          </td>
          <td class="edt__actions-col">
            <div class="edt__row-actions">
              <button
                type="button"
                class="btn btn-sm btn-outline-primary"
                title="Edit"
                data-bs-toggle="modal"
                data-bs-target="#addonModal"
                data-addon-edit
                data-id="{{ $row->id }}"
                data-name="{{ $row->name }}"
                data-cost="{{ $row->cost }}"
                data-prices='@json($pricesPayload)'
                data-sort-order="{{ $row->sort_order }}"
                data-status="{{ $row->status }}"
                data-notes="{{ $row->notes }}"
                data-product-ids="{{ $row->products->pluck('id')->implode(',') }}"
                data-update-url="{{ route('products.addons.update', $row) }}"
              >
                <i class="bi bi-pencil"></i>
              </button>
              <form method="post" action="{{ route('products.addons.destroy', $row) }}" class="d-inline" onsubmit="return confirm('Delete this add-on?');">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
                  <i class="bi bi-trash"></i>
                </button>
              </form>
            </div>
          </td>
        </tr>
      @empty
        <tr>
          <td colspan="{{ 6 + $priceGroups->count() }}" class="text-center text-muted py-4">No add-ons yet. Create Extra Cheese, Sauce, etc.</td>
        </tr>
      @endforelse
    </x-slot:body>
  </x-data-table>

  <x-ui-modal id="addonModal" title="Add Add-on" size="lg">
    <form id="addon-form" method="post" action="{{ route('products.addons.store') }}" data-store-url="{{ route('products.addons.store') }}">
      @csrf
      <input type="hidden" name="_method" value="POST">
      <div class="row g-3">
        <div class="col-md-8">
          <label class="form-label" for="addon_name">Name</label>
          <input type="text" class="form-control" id="addon_name" name="name" required maxlength="255" placeholder="e.g. Extra Cheese">
        </div>
        <div class="col-md-4">
          <label class="form-label" for="addon_sort_order">Sort order</label>
          <input type="number" class="form-control" id="addon_sort_order" name="sort_order" min="0" value="0">
        </div>
        <div class="col-md-4">
          <label class="form-label" for="addon_status">Status</label>
          <select class="form-select" id="addon_status" name="status" required>
            <option value="Active">Active</option>
            <option value="Inactive">Inactive</option>
          </select>
        </div>
        <div class="col-md-4">
          <label class="form-label" for="addon_cost">Cost</label>
          <input type="number" class="form-control" id="addon_cost" name="cost" min="0" step="0.01" value="0">
        </div>
        @foreach ($priceGroups as $group)
          <div class="col-md-4">
            <label class="form-label" for="addon_price_{{ $group->id }}">{{ $group->name }}</label>
            <input
              type="number"
              class="form-control"
              id="addon_price_{{ $group->id }}"
              name="prices[{{ $group->id }}]"
              min="0"
              step="0.01"
              value="0"
              @if ($group->is_locked) required @endif
              data-price-group-input="{{ $group->id }}"
            >
          </div>
        @endforeach
        <div class="col-12">
          <label class="form-label" for="addon_notes">Notes</label>
          <textarea class="form-control" id="addon_notes" name="notes" rows="2" maxlength="1000" placeholder="Optional"></textarea>
        </div>
        <div class="col-12">
          <div class="d-flex align-items-center justify-content-between mb-2">
            <label class="form-label mb-0">Available for products</label>
            <span class="text-muted small">Select products this add-on applies to</span>
          </div>
          <div class="addon-product-list border rounded p-2" style="max-height: 220px; overflow: auto;">
            @forelse ($products as $product)
              <label class="d-flex align-items-center gap-2 py-1 px-1 mb-0">
                <input type="checkbox" name="product_ids[]" value="{{ $product->id }}" data-addon-product>
                <span>{{ $product->name }} <span class="text-muted small">({{ $product->code }})</span></span>
              </label>
            @empty
              <p class="text-muted small mb-0">No active products found.</p>
            @endforelse
          </div>
        </div>
      </div>
    </form>
    <x-slot:footer>
      <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
      <button type="submit" form="addon-form" class="btn btn-primary">Save</button>
    </x-slot:footer>
  </x-ui-modal>
@endsection

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

@push('scripts')
  <script src="{{ asset('assets/js/pages/products.js') }}"></script>
@endpush