@extends('layouts.aura-main')

@section('main-content')
<div class="max-w-6xl mx-auto pb-20">
    <div class="flex justify-between items-center mb-8">
        <div>
            <h1 class="text-2xl font-black text-slate-900  tracking-tighter">Stocktake Count Sheet</h1>
            <div class="flex items-center gap-4 mt-1">
                <span class="text-[10px] font-bold text-slate-400  tracking-widest">Ref: {{ $count->reference }}</span>
                <span class="w-1 h-1 bg-slate-300 rounded-full"></span>
                <span class="text-[10px] font-bold text-slate-400  tracking-widest">Location: {{ $count->warehouse->name }}</span>
            </div>
        </div>
        
        <div class="flex items-center gap-3">
            @if($count->status === 'draft')
                <button form="post-adjustments-form" type="submit" class="bg-indigo-600 text-white px-6 py-2 text-[10px] font-black  tracking-widest shadow-lg hover:bg-indigo-700 transition">
                    Commit & Adjust Stock
                </button>
            @else
                <span class="bg-emerald-100 text-emerald-700 px-4 py-2 text-[10px] font-black  tracking-widest rounded-sm border border-emerald-200">
                    Status: Adjusted & Closed
                </span>
            @endif
        </div>
    </div>

    <div class="bg-white border border-slate-300 shadow-sm overflow-hidden rounded-sm">
        <form id="post-adjustments-form" action="{{ route('inventory.counts.adjust', $count->id) }}" method="POST">
            @csrf
            <table class="w-full text-left border-collapse" x-data="{ counts: {} }">
                <thead>
                    <tr class="border-b border-slate-900 bg-slate-50 text-[9px] font-black text-slate-500  tracking-widest">
                        <th class="px-6 py-4">Item Details</th>
                        <th class="px-6 py-4 text-right">System Qty</th>
                        <th class="px-6 py-4 text-right w-48">Physical Count</th>
                        <th class="px-6 py-4 text-right">Variance</th>
                    </tr>
                </thead>
                <tbody class="text-[11px] font-medium divide-y divide-slate-100 font-mono">
                    @foreach($count->items as $item)
                    <tr class="hover:bg-slate-50/50 transition" x-data="{ system: {{ $item->system_qty }}, physical: {{ $item->physical_qty }} }">
                        <td class="px-6 py-4">
                            <span class="block font-black text-slate-900  font-sans">{{ $item->product->name }}</span>
                            <span class="text-[9px] text-slate-400 font-sans tracking-widest">SKU: {{ $item->product->sku }}</span>
                        </td>
                        <td class="px-6 py-4 text-right text-slate-400">
                            {{ number_format($item->system_qty, 2) }}
                        </td>
                        <td class="px-6 py-4 text-right">
                            <input type="number" step="0.01" 
                                   name="items[{{ $item->id }}][physical_qty]" 
                                   x-model.number="physical"
                                   {{ $count->status !== 'draft' ? 'disabled' : '' }}
                                   class="w-32 text-right border-slate-200 focus:border-indigo-600 rounded-sm font-mono font-bold text-xs p-1 bg-slate-50/50 focus:bg-white transition-all">
                        </td>
                        <td class="px-6 py-4 text-right">
                            <span class="font-black" 
                                  :class="physical - system < 0 ? 'text-rose-600' : (physical - system > 0 ? 'text-emerald-600' : 'text-slate-300')">
                                <span x-text="physical - system > 0 ? '+' : ''"></span>
                                <span x-text="(physical - system).toFixed(2)"></span>
                            </span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </form>
    </div>

    <div class="mt-8 flex justify-between items-center no-print">
        <p class="text-[10px] font-bold text-slate-400  tracking-widest">
            * Adjustments will be posted as FIFO layers at current product cost.
        </p>
        <button onclick="window.print()" class="text-[10px] font-black text-slate-500 hover:text-slate-900  tracking-widest flex items-center gap-2">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2-2v4"></path></svg>
            Print Count Sheet
        </button>
    </div>
</div>
@endsection