@extends('layouts.app')

@section('title', 'Promotions')
@section('page', 'products')
@section('productsNav', 'promotions')

@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-promotions-table"
    class="catalog-table categories-table"
    title="Promotions"
    subtitle="Product discounts by price group, with optional customer-app display and active period."
    search-placeholder="Search promotions..."
    :selectable="false"
    :page-size="10"
  >
    <x-slot:toolbarActions>
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#promotionModal" data-promotion-add>
        <i class="bi bi-plus-lg"></i> Add Promotion
      </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>
      <select class="form-select form-select-sm" data-edt-col-filter="app" aria-label="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 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-percent"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">Total</p>
                <p class="product-kpi__value">{{ $total }}</p>
                <p class="product-kpi__meta">All promotions</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">{{ $active }}</p>
                <p class="product-kpi__meta">Live discounts</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-phone"></i></span>
              </span>
              <div class="product-kpi__body">
                <p class="product-kpi__label">In App</p>
                <p class="product-kpi__value">{{ $inApp }}</p>
                <p class="product-kpi__meta">Shown to customers</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">{{ $inactive }}</p>
                <p class="product-kpi__meta">Paused</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </x-slot:afterToolbar>
    <x-slot:head>
      <x-data-table-th label="Product" col="product" />
      <x-data-table-th label="Discount" col="discount" />
      <x-data-table-th label="Period" col="period" />
      <x-data-table-th label="Price groups" col="groups" />
      <x-data-table-th label="App" col="app" />
      <x-data-table-th label="Status" col="status" />
    </x-slot:head>
    <x-slot:body>
      @forelse ($promotions as $row)
        @php
          $groupIds = $row->priceGroups->pluck('id')->map(fn ($id) => (string) $id)->values()->all();
          $groupNames = $row->priceGroups->map(fn ($g) => $g->short_label ?: $g->name)->implode(', ');
          $inPeriod = $row->isWithinActivePeriod();
        @endphp
        <tr data-id="{{ $row->id }}">
          <td data-col="product" class="cell-primary">
            {{ $row->product?->name ?? '—' }}
            @if ($row->product?->code)
              <div class="text-muted small">{{ $row->product->code }}</div>
            @endif
          </td>
          <td data-col="discount">
            @if ($row->discount_type === 'percent')
              <x-badge variant="warning">{{ rtrim(rtrim(number_format((float) $row->discount_value, 2, '.', ''), '0'), '.') }}%</x-badge>
            @else
              <x-badge variant="warning">{{ money($row->discount_value) }} OFF</x-badge>
            @endif
          </td>
          <td data-col="period">
            {{ $row->periodLabel() }}
            @if ($row->status === 'Active' && ! $inPeriod)
              <div class="text-muted small">Outside period</div>
            @endif
          </td>
          <td data-col="groups">{{ $groupNames ?: '—' }}</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-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="#promotionModal"
                data-promotion-edit
                data-id="{{ $row->id }}"
                data-product-id="{{ $row->product_id }}"
                data-discount-type="{{ $row->discount_type }}"
                data-discount-value="{{ number_format((float) $row->discount_value, 2, '.', '') }}"
                data-show-in-app="{{ $row->show_in_app ? '1' : '0' }}"
                data-status="{{ $row->status }}"
                data-starts-at="{{ $row->starts_at?->format('Y-m-d') ?? '' }}"
                data-ends-at="{{ $row->ends_at?->format('Y-m-d') ?? '' }}"
                data-price-group-ids="{{ implode(',', $groupIds) }}"
                data-update-url="{{ route('products.promotions.update', $row) }}"
              >
                <i class="bi bi-pencil"></i>
              </button>
              <form method="post" action="{{ route('products.promotions.destroy', $row) }}" class="d-inline" onsubmit="return confirm('Delete this promotion?');">
                @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="7" class="text-center text-muted py-4">No promotions yet. Add a product discount here.</td>
        </tr>
      @endforelse
    </x-slot:body>
  </x-data-table>

  <x-ui-modal id="promotionModal" title="Add Promotion" size="lg">
    <form id="promotion-form" method="post" action="{{ route('products.promotions.store') }}" data-store-url="{{ route('products.promotions.store') }}">
      @csrf
      <input type="hidden" name="_method" value="POST">
      <div class="row g-3">
        <div class="col-md-8">
          <label class="form-label" for="promotion_product_id">Product</label>
          <select class="form-select" id="promotion_product_id" name="product_id" required>
            <option value="">Select product</option>
            @foreach ($products as $product)
              <option
                value="{{ $product->id }}"
                data-assigned="{{ in_array($product->id, $assignedProductIds, true) ? '1' : '0' }}"
              >{{ $product->name }} ({{ $product->code }})</option>
            @endforeach
          </select>
          <div class="form-text">Each product can have one promotion.</div>
        </div>
        <div class="col-md-4">
          <label class="form-label" for="promotion_status">Status</label>
          <select class="form-select" id="promotion_status" name="status" required>
            <option value="Active">Active</option>
            <option value="Inactive">Inactive</option>
          </select>
        </div>
        <div class="col-md-6">
          <label class="form-label" for="promotion_discount_type">Discount type</label>
          <select class="form-select" id="promotion_discount_type" name="discount_type" required>
            <option value="percent">Percent %</option>
            <option value="fixed">Fixed amount</option>
          </select>
        </div>
        <div class="col-md-6">
          <label class="form-label" for="promotion_discount_value">Discount value</label>
          <input type="number" class="form-control" id="promotion_discount_value" name="discount_value" min="0.01" step="0.01" required value="10">
          <div class="form-text">Percent: 0–100. Fixed: amount in {{ currency_code() }}.</div>
        </div>
        <div class="col-md-6">
          <label class="form-label" for="promotion_show_in_app">Show in customer app</label>
          <select class="form-select" id="promotion_show_in_app" name="show_in_app" required>
            <option value="1">Yes — show discount in app</option>
            <option value="0">No — POS only</option>
          </select>
        </div>
        <div class="col-md-6">
          <label class="form-label" for="promotion_starts_at">Active from</label>
          <input type="date" class="form-control" id="promotion_starts_at" name="starts_at">
        </div>
        <div class="col-md-6">
          <label class="form-label" for="promotion_ends_at">Active until</label>
          <input type="date" class="form-control" id="promotion_ends_at" name="ends_at">
          <div class="form-text">Leave blank for no end date. Empty both = always (while Active).</div>
        </div>
        <div class="col-12">
          <label class="form-label d-block">Apply to price groups</label>
          <div class="border rounded p-3" style="max-height: 220px; overflow: auto;">
            <div class="row g-2">
              @forelse ($priceGroups as $group)
                <div class="col-md-4">
                  <label class="form-check">
                    <input type="checkbox" class="form-check-input" name="price_group_ids[]" value="{{ $group->id }}" data-promotion-group>
                    <span class="form-check-label">{{ $group->name }}</span>
                  </label>
                </div>
              @empty
                <p class="text-muted small mb-0">No active price groups found.</p>
              @endforelse
            </div>
          </div>
          <div class="form-text">Tick the price groups that should receive this discount on POS.</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="promotion-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