@extends('layouts.admin')
@section('title', 'Count Stock')

@section('content')
@php
  $select = 'h-11 px-3 rounded-xl border border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 text-sm outline-none focus:ring-2 ring-brand-500';
@endphp

{{-- Breadcrumb --}}
<div class="flex items-center gap-2 text-sm text-slate-500">
  <span>Products</span><span>/</span><span class="text-slate-800 dark:text-slate-200 font-medium">Count stock</span>
</div>

{{-- Success message --}}
@if (session('success'))
  <div class="px-4 py-3 rounded-xl bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border border-emerald-500/30 text-sm font-medium">
    {{ session('success') }}
  </div>
@endif

{{-- Errors --}}
@if ($errors->any())
  <div class="px-4 py-3 rounded-xl bg-red-500/10 text-red-600 dark:text-red-400 border border-red-500/30 text-sm">
    <ul class="list-disc ml-5">
      @foreach ($errors->all() as $e)<li>{{ $e }}</li>@endforeach
    </ul>
  </div>
@endif

{{-- How it works --}}
<div class="flex items-start gap-3 p-4 rounded-xl bg-brand-500/10 border border-brand-500/30 text-sm">
  <svg class="w-5 h-5 mt-0.5 text-brand-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v4h1"/></svg>
  <div>
    Shelf theke product gune <b>Counted</b> ghore sonkha likho (kg/meter hole dosomik o dewa jabe, jemon 2.5). Je product gune nai oi ghor khali rakho, oigulor stock change hobe na.
    <b>Save Count</b> dile system stock tomar gona sonkha diye replace hobe.
  </div>
</div>

<div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 overflow-hidden">

  {{-- Filter --}}
  <form method="GET" class="p-5 flex flex-wrap gap-3 border-b border-slate-200 dark:border-slate-800">
    <input type="text" name="q" value="{{ request('q') }}" placeholder="Search name or code…" class="{{ $select }} w-full sm:w-64">

    <select name="category" class="{{ $select }}">
      <option value="">All categories</option>
      @foreach ($categories as $c)
        <option value="{{ $c->id }}" @selected(request('category') == $c->id)>{{ $c->name }}</option>
      @endforeach
    </select>

    <select name="brand" class="{{ $select }}">
      <option value="">All brands</option>
      @foreach ($brands as $b)
        <option value="{{ $b->id }}" @selected(request('brand') == $b->id)>{{ $b->name }}</option>
      @endforeach
    </select>

    <button class="h-11 px-5 rounded-xl bg-slate-900 dark:bg-slate-700 text-white text-sm font-semibold hover:opacity-90">Filter</button>

    @if (request()->hasAny(['q', 'category', 'brand']))
      <a href="{{ route('admin.products.count-stock.index') }}" class="h-11 px-4 inline-flex items-center rounded-xl border border-slate-300 dark:border-slate-700 text-sm hover:bg-slate-100 dark:hover:bg-slate-800">Reset</a>
    @endif
  </form>

  {{-- Count form --}}
  <form method="POST" action="{{ route('admin.products.count-stock.store') }}">
    @csrf

    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead class="text-left text-xs uppercase text-slate-500 bg-slate-50 dark:bg-slate-800/50">
          <tr>
            <th class="px-5 py-3">Product</th>
            <th class="px-3">Code</th>
            <th class="px-3">Category</th>
            <th class="px-3 text-right">System Stock</th>
            <th class="px-3 text-right w-52">Counted</th>
            <th class="px-5 text-right w-28">Difference</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
          @forelse ($products as $p)
            @php $unit = $p->unit?->short_name; @endphp
            <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40">
              <td class="px-5 py-3">
                <div class="flex items-center gap-3">
                  <div class="w-10 h-10 rounded-lg bg-slate-100 dark:bg-slate-800 overflow-hidden grid place-items-center shrink-0">
                    @if ($p->image)
                      <img src="{{ asset('storage/' . $p->image) }}" alt="{{ $p->name }}" class="w-full h-full object-cover">
                    @else
                      <svg class="w-5 h-5 text-slate-400" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2 4 14h6l-1 8 9-12h-6z"/></svg>
                    @endif
                  </div>
                  <span class="font-semibold">{{ $p->name }}</span>
                </div>
              </td>
              <td class="px-3 text-slate-500">{{ $p->code }}</td>
              <td class="px-3">{{ $p->category->name }}</td>
              <td class="px-3 text-right font-semibold whitespace-nowrap">{{ $p->stock_qty }} {{ $unit }}</td>
              <td class="px-3">
                <div class="flex items-center gap-2">
                  <input type="number" min="0" step="any"
                         name="counted[{{ $p->id }}]"
                         value="{{ old('counted.' . $p->id) }}"
                         data-count data-id="{{ $p->id }}" data-system="{{ $p->stock_qty }}"
                         placeholder="—"
                         class="w-full h-10 px-3 text-right rounded-lg border border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 outline-none focus:ring-2 ring-brand-500">
                  <span class="w-10 shrink-0 text-xs font-semibold text-slate-500">{{ $unit }}</span>
                </div>
              </td>
              <td class="px-5 text-right"><span id="diff-{{ $p->id }}" class="text-slate-400">—</span></td>
            </tr>
          @empty
            <tr>
              <td colspan="6" class="px-5 py-16 text-center text-slate-500">
                Kono product paoa jayni.
                <a href="{{ route('admin.products.create') }}" class="text-brand-600 dark:text-brand-400 font-semibold">Notun product add koro</a>
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    @if ($products->count())
      <div class="p-5 border-t border-slate-200 dark:border-slate-800 flex flex-col md:flex-row gap-3 md:items-center">
        <input type="text" name="note" value="{{ old('note') }}" maxlength="255" placeholder="Note (optional), jemon: Mashik stock count"
               class="{{ $select }} flex-1">
        <button type="submit" onclick="return confirm('Count save korle stock update hoye jabe. Nishchit?')"
                class="h-11 px-8 rounded-xl bg-gradient-to-r from-brand-500 to-orange-500 text-slate-900 font-bold shadow-lg shadow-brand-500/25 hover:opacity-90">Save Count</button>
      </div>
    @endif
  </form>
</div>

{{-- History --}}
<div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 overflow-hidden">
  <div class="p-6 pb-3 font-bold">Recent stock counts</div>
  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead class="text-left text-xs uppercase text-slate-500 bg-slate-50 dark:bg-slate-800/50">
        <tr>
          <th class="px-6 py-3">Reference</th>
          <th>Date</th>
          <th>Note</th>
          <th class="text-right">Products</th>
          <th class="px-6 text-right">Net difference</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
        @forelse ($history as $h)
          @php $net = round((float) $h->items_sum_difference, 3); @endphp
          <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/40">
            <td class="px-6 py-3 font-medium">SC-{{ str_pad($h->id, 4, '0', STR_PAD_LEFT) }}</td>
            <td>{{ $h->created_at->format('d M Y, h:i A') }}</td>
            <td class="text-slate-500">{{ $h->note ?: '—' }}</td>
            <td class="text-right">{{ $h->items_count }}</td>
            <td class="px-6 text-right">
              <span class="px-2.5 py-1 rounded-full text-xs font-semibold {{ $net == 0 ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400' : ($net > 0 ? 'bg-sky-500/10 text-sky-500' : 'bg-red-500/10 text-red-500') }}">
                {{ $net > 0 ? '+' . $net : $net }}
              </span>
            </td>
          </tr>
        @empty
          <tr><td colspan="5" class="px-6 py-10 text-center text-slate-500">Ekhono kono stock count kora hoyni.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>
@endsection

@push('scripts')
<script>
  // Counted likhle sathe sathe Difference dekhabe
  document.querySelectorAll('[data-count]').forEach(function (input) {
    const out    = document.getElementById('diff-' + input.dataset.id);
    const system = parseFloat(input.dataset.system);

    function update() {
      if (input.value === '') {
        out.textContent = '—';
        out.className = 'text-slate-400';
        return;
      }
      const d = Math.round((parseFloat(input.value) - system) * 1000) / 1000;
      out.textContent = d > 0 ? '+' + d : d;
      out.className = d === 0 ? 'font-bold text-emerald-500' : (d > 0 ? 'font-bold text-sky-500' : 'font-bold text-red-500');
    }

    input.addEventListener('input', update);
    update();
  });
</script>
@endpush