@extends('layouts.app')

@section('title', 'Product List')
@section('page', 'products')
@section('productsNav', 'list')

@php
  $statusVariant = fn ($s) => match ($s) {
    'Active' => 'success',
    'Low stock' => 'warning',
    'Out of stock', 'Inactive' => 'danger',
    default => 'neutral',
  };
  $totalProducts = $products->count();
  $activeProducts = $products->filter(fn ($p) => $p->stockLabel() === 'Active')->count();
  $lowStockProducts = $products->filter(fn ($p) => $p->stockLabel() === 'Low stock')->count();
  $outOfStockProducts = $products->filter(fn ($p) => $p->stockLabel() === 'Out of stock')->count();
  $inactiveProducts = $products->filter(fn ($p) => $p->stockLabel() === 'Inactive')->count();
@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="products-table"
    class="catalog-table products-table"
    title="Products"
    subtitle="Manage your product inventory."
    search-placeholder="Search products..."
    :selectable="false"
    :page-size="10"
  >
    <x-slot:toolbarActions>
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#productModal" data-product-add>
        <i class="bi bi-plus-lg"></i> Add Product
      </button>
    </x-slot:toolbarActions>
    <x-slot:filters>
      <select class="form-select form-select-sm" data-edt-col-filter="category" aria-label="Category">
        <option value="">All Categories</option>
        @foreach ($categories as $category)
          <option>{{ $category->name }}</option>
        @endforeach
      </select>
      <select class="form-select form-select-sm" data-edt-col-filter="status" aria-label="Status">
        <option value="">All Statuses</option>
        <option>Active</option>
        <option>Low stock</option>
        <option>Out of stock</option>
        <option>Inactive</option>
      </select>
      <select class="form-select form-select-sm" data-edt-col-filter="app" aria-label="Customer app">
        <option value="">All App</option>
        <option>Shown</option>
        <option>Hidden</option>
      </select>
    </x-slot:filters>
    <x-slot:afterToolbar>
      <div class="product-stats-panel">
        <div class="row g-3 product-stats justify-content-start">
          <div class="col-6 col-md-4 col-xl 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-box-fill"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Total Products</p>
                <p class="product-kpi__value">{{ $totalProducts }}</p>
                <p class="product-kpi__meta">All products in inventory</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-4 col-xl 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 Products</p>
                <p class="product-kpi__value">{{ $activeProducts }}</p>
                <p class="product-kpi__meta">Currently active</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-4 col-xl 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-exclamation-lg"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Low Stock</p>
                <p class="product-kpi__value">{{ $lowStockProducts }}</p>
                <p class="product-kpi__meta">Need restocking</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-4 col-xl product-stat-col">
            <div class="product-kpi product-kpi--danger">
              <span class="product-kpi__icon" aria-hidden="true">
                <span class="product-kpi__glyph"><i class="bi bi-x-circle-fill"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Out of Stock</p>
                <p class="product-kpi__value">{{ $outOfStockProducts }}</p>
                <p class="product-kpi__meta">Currently unavailable</p>
              </div>
            </div>
          </div>
          <div class="col-6 col-md-4 col-xl 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">{{ $inactiveProducts }}</p>
                <p class="product-kpi__meta">Not available for sale</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </x-slot:afterToolbar>
    <x-slot:bulkActions>
      <button type="button" class="btn btn-soft-primary btn-sm" data-edt-bulk-action="export">Export selected</button>
      <button type="button" class="btn btn-outline-secondary btn-sm" data-edt-bulk-action="activate">Activate</button>
      <button type="button" class="btn btn-outline-danger btn-sm" data-edt-bulk-action="deactivate">Deactivate</button>
    </x-slot:bulkActions>
    <x-slot:head>
      <x-data-table-th label="Product" col="name" />
      <x-data-table-th label="Code" col="sku" />
      <x-data-table-th label="Category" col="category" />
      <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="Stock" col="stock" sort-type="number" />
      <x-data-table-th label="Status" col="status" />
      <x-data-table-th label="App" col="app" />
    </x-slot:head>
    <x-slot:body>
      @forelse ($products as $row)
        @php
          $label = $row->stockLabel();
          $imageUrl = $row->imageUrl();
          $desc = trim((string) $row->description);
          $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">
            <div class="product-cell">
              <span class="product-thumb">
                @if ($imageUrl)
                  <img src="{{ $imageUrl }}" alt="" onerror="this.remove(); this.parentElement.insertAdjacentHTML('beforeend','<i class=&quot;bi bi-image&quot; aria-hidden=&quot;true&quot;></i>');">
                @else
                  <i class="bi bi-image" aria-hidden="true"></i>
                @endif
              </span>
              <span class="product-cell__text">
                <span class="product-cell__name">{{ $row->name }}</span>
                @if ($desc !== '')
                  <span class="product-cell__desc">{{ \Illuminate\Support\Str::limit($desc, 42) }}</span>
                @endif
              </span>
            </div>
          </td>
          <td data-col="sku">{{ $row->code }}</td>
          <td data-col="category">{{ $row->category?->name ?? '—' }}</td>
          <td data-col="cost"><span class="product-price" data-product-cost-value="{{ $row->id }}">{{ money($row->cost) }}</span></td>
          @foreach ($priceGroups as $group)
            <td data-col="pg_{{ $group->id }}"><span class="product-price">{{ money($priceMap[$group->id] ?? 0) }}</span></td>
          @endforeach
          <td data-col="stock">{{ $row->stock }}</td>
          <td data-col="status"><x-badge :variant="$statusVariant($label)">{{ $label }}</x-badge></td>
          <td data-col="app">
            @if ($row->show_in_app)
              <x-badge variant="success">Shown</x-badge>
            @else
              <x-badge variant="neutral">Hidden</x-badge>
            @endif
          </td>
          <td data-edt-actions>
            <div class="edt-row-actions product-actions">
              <button
                type="button"
                class="btn btn-sm btn-icon product-action product-action--edit"
                title="Edit"
                aria-label="Edit"
                data-edt-action="edit"
                data-backend
                data-product-edit
                data-id="{{ $row->id }}"
                data-name="{{ $row->name }}"
                data-code="{{ $row->code }}"
                data-category-id="{{ $row->category_id }}"
                data-unit-id="{{ $row->unit_id }}"
                data-prices='@json($pricesPayload)'
                data-cost="{{ $row->cost }}"
                data-stock="{{ $row->stock }}"
                data-description="{{ $row->description }}"
                data-image="{{ $imageUrl }}"
                data-status="{{ $row->status }}"
                data-show-in-app="{{ $row->show_in_app ? '1' : '0' }}"
                data-update-url="{{ route('products.update', $row) }}"
              >
                <i class="bi bi-pencil" aria-hidden="true"></i>
              </button>
              <button
                type="button"
                class="btn btn-sm btn-icon product-action product-action--cost"
                title="Build cost recipe"
                aria-label="Build cost recipe"
                data-product-cost
                data-id="{{ $row->id }}"
                data-name="{{ $row->name }}"
                data-cost="{{ number_format((float) $row->cost, 2, '.', '') }}"
                data-recipe-url="{{ route('products.cost-recipe', $row, absolute: false) }}"
                data-save-url="{{ route('products.cost-recipe.update', $row, absolute: false) }}"
              >
                <i class="bi bi-calculator" aria-hidden="true"></i>
              </button>
              <button
                type="button"
                class="btn btn-sm btn-icon product-action product-action--delete"
                title="Delete"
                aria-label="Delete"
                data-edt-action="delete"
                data-backend
                data-delete-open
                data-delete-url="{{ route('products.destroy', $row) }}"
                data-delete-label="{{ $row->name }}"
                data-delete-type="product"
              >
                <i class="bi bi-trash" aria-hidden="true"></i>
              </button>
            </div>
          </td>
        </tr>
      @empty
        <tr data-edt-empty-row>
          <td colspan="{{ 8 + $priceGroups->count() }}" class="text-center text-muted py-4">No products yet. Add your first product.</td>
        </tr>
      @endforelse
    </x-slot:body>
  </x-data-table>

  <div class="modal fade" id="productModal" tabindex="-1" aria-labelledby="productModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content edt-modal">
        <form
          id="product-form"
          method="post"
          action="{{ route('products.store') }}"
          data-store-url="{{ route('products.store') }}"
          enctype="multipart/form-data"
        >
          @csrf
          <input type="hidden" name="_method" id="product_form_method" value="POST">
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="productModalLabel">Add product</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="row g-3">
              <div class="col-12">
                <label class="form-label" for="product_image">Product image</label>
                <div class="product-image-field">
                  <div class="product-image-preview" id="product_image_preview" aria-hidden="true">
                    <i class="bi bi-image"></i>
                  </div>
                  <div class="product-image-field__controls">
                    <input type="file" class="form-control" id="product_image" name="image" accept="image/*">
                    <div class="form-text">JPG, PNG or WebP. Max 2MB.</div>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <label class="form-label" for="product_name">Product name</label>
                <input type="text" class="form-control" id="product_name" name="name" required value="{{ old('name') }}">
              </div>
              <div class="col-md-6">
                <label class="form-label" for="product_status">Status</label>
                <select class="form-select" id="product_status" name="status">
                  <option value="Active" @selected(old('status', 'Active') === 'Active')>Active</option>
                  <option value="Inactive" @selected(old('status') === 'Inactive')>Inactive</option>
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label" for="product_show_in_app">Show in customer app</label>
                <select class="form-select" id="product_show_in_app" name="show_in_app">
                  <option value="1" @selected(old('show_in_app', '1') === '1')>Yes — show in app</option>
                  <option value="0" @selected(old('show_in_app') === '0')>No — hide from app</option>
                </select>
                <div class="form-text">Hidden products stay on POS but do not appear in the customer app menu.</div>
              </div>
              <div class="col-md-6">
                <label class="form-label" for="product_code">CODE</label>
                <input type="text" class="form-control" id="product_code" name="code" required value="{{ old('code') }}">
              </div>
              <div class="col-md-6">
                <label class="form-label" for="product_unit">Unit</label>
                <select class="form-select" id="product_unit" name="unit_id" required>
                  <option value="">Select unit</option>
                  @foreach ($units as $unit)
                    <option value="{{ $unit->id }}" @selected((string) old('unit_id') === (string) $unit->id)>{{ $unit->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label" for="product_category">Category</label>
                <select class="form-select" id="product_category" name="category_id" required>
                  <option value="">Select category</option>
                  @foreach ($categories as $category)
                    <option value="{{ $category->id }}" @selected((string) old('category_id') === (string) $category->id)>{{ $category->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-6">
                <label class="form-label" for="product_stock">Stock</label>
                <input type="number" min="0" class="form-control" id="product_stock" name="stock" value="{{ old('stock', 0) }}">
              </div>
              <div class="col-md-6">
                <label class="form-label" for="product_cost">Cost</label>
                <input type="number" step="0.01" min="0" class="form-control" id="product_cost" name="cost" value="{{ old('cost', 0) }}">
              </div>
              @foreach ($priceGroups as $group)
                <div class="col-md-6">
                  <label class="form-label" for="product_price_{{ $group->id }}">{{ $group->name }}</label>
                  <input
                    type="number"
                    step="0.01"
                    min="0"
                    class="form-control"
                    id="product_price_{{ $group->id }}"
                    name="prices[{{ $group->id }}]"
                    value="{{ old('prices.'.$group->id, 0) }}"
                    @if ($group->is_locked) required @endif
                    data-price-group-input="{{ $group->id }}"
                  >
                </div>
              @endforeach
              <div class="col-12">
                <label class="form-label" for="product_desc">Description</label>
                <textarea class="form-control" id="product_desc" name="description" rows="2" placeholder="Optional">{{ old('description') }}</textarea>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary">Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div
    class="modal fade"
    id="productCostModal"
    tabindex="-1"
    aria-labelledby="productCostModalLabel"
    aria-hidden="true"
    data-stock-items='@json($recipeStockItems ?? [])'
  >
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content edt-modal">
        <div class="modal-header">
          <div>
            <h2 class="modal-title fs-5" id="productCostModalLabel">Product cost recipe</h2>
            <p class="text-muted small mb-0" id="product-cost-subtitle">Search inventory by item code or name, then set quantities.</p>
          </div>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="product-cost-recipe">
            <div class="product-cost-recipe__table-wrap">
              <table class="table table-sm align-middle mb-0">
                <thead>
                  <tr>
                    <th>Inventory item</th>
                    <th style="width:110px">Qty</th>
                    <th style="width:120px">Unit cost</th>
                    <th style="width:110px" class="text-end">Line total</th>
                    <th style="width:44px"></th>
                  </tr>
                </thead>
                <tbody id="product-cost-rows"></tbody>
              </table>
            </div>
            <button type="button" class="btn btn-outline-primary btn-sm mt-3" id="product-cost-add-row">
              <i class="bi bi-plus-lg"></i> Add item
            </button>
            <div class="product-cost-recipe__total">
              <span>Total cost</span>
              <strong id="product-cost-total">0.00</strong>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" id="product-cost-save">
            <i class="bi bi-floppy"></i> Save cost
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content edt-modal">
        <form id="delete-confirm-form" method="post" action="#">
          @csrf
          @method('DELETE')
          <div class="modal-header">
            <h2 class="modal-title fs-5" id="deleteConfirmModalLabel">Delete product</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p class="mb-0">Are you sure you want to delete <strong id="delete-confirm-name">this item</strong>? This action cannot be undone.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-danger"><i class="bi bi-trash"></i> Delete</button>
          </div>
        </form>
      </div>
    </div>
  </div>
@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