@extends('layouts.dashboard')

@section('content')
    <div class="max-w-7xl mx-auto space-y-6">

        <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4">

            <div>
                <h1 class="text-3xl font-black">
                    📋 Inventory Audit Report
                </h1>

                <p class="text-slate-500">
                    {{ $check->salesman_name }}
                    •
                    {{ \Carbon\Carbon::parse($check->created_at)->format('d M Y H:i') }}
                </p>

            </div>

            <div class="flex gap-2">

                <button onclick="window.print()" class="btn btn-primary">

                    🖨 Print

                </button>

            </div>

        </div>

        <div class="grid md:grid-cols-4 gap-4">

            <div class="stat rounded-3xl bg-white shadow">

                <div class="stat-title">
                    Checked
                </div>

                <div class="stat-value">

                    {{ $items->count() }}

                </div>

            </div>

            <div class="stat rounded-3xl bg-emerald-50">

                <div class="stat-title">
                    Correct
                </div>

                <div class="stat-value text-emerald-600">

                    {{ $items->where('status', 'correct')->count() }}

                </div>

            </div>

            <div class="stat rounded-3xl bg-orange-50">

                <div class="stat-title">
                    Wrong
                </div>

                <div class="stat-value text-orange-600">

                    {{ $items->where('status', 'wrong')->count() }}

                </div>

            </div>

            <div class="stat rounded-3xl bg-red-50">

                <div class="stat-title">
                    Missing
                </div>

                <div class="stat-value text-red-600">

                    {{ $items->where('status', 'missing')->count() }}

                </div>

            </div>

        </div>

        <div class="rounded-3xl bg-white p-5 shadow">

            <div class="flex flex-col md:flex-row gap-3">

                <input id="reportSearch" class="input input-bordered flex-1" placeholder="Search product / SKU / barcode">

                <select id="statusFilter" class="select select-bordered w-full md:w-56">

                    <option value="">
                        All Status

                    </option>

                    <option value="correct">
                        Correct
                    </option>

                    <option value="wrong">
                        Wrong
                    </option>

                    <option value="missing">
                        Missing
                    </option>

                </select>

            </div>

        </div>

        <div class="overflow-x-auto rounded-3xl bg-white shadow">

            <table class="table">

                <thead>

                    <tr>

                        <th>Photo</th>

                        <th>Product</th>

                        <th>System</th>

                        <th>Counted</th>

                        <th>Diff</th>

                        <th>Status</th>

                        <th>Note</th>

                    </tr>

                </thead>

                <tbody>

                    @foreach ($items as $item)
                        @php

                            $diff = $item->counted_qty - $item->system_qty;

                        @endphp

                        <tr class="report-row" data-search="{{ strtolower($item->name . ' ' . $item->sku . ' ' . $item->barcode) }}"
                            data-status="{{ $item->status }}">

                            <td width="90">

                                @if ($item->main_image)
                                    <img src="{{ asset('storage/' . $item->main_image) }}"
                                        class="w-16 h-16 rounded-xl object-contain border">
                                @else
                                    <div class="w-16 h-16 rounded-xl bg-base-200 flex items-center justify-center">

                                        🖼

                                    </div>
                                @endif

                            </td>

                            <td>

                                <div class="font-bold">

                                    {{ $item->name }}

                                </div>

                                <div class="text-xs text-slate-500">

                                    {{ $item->sku }}

                                    <br>

                                    {{ $item->barcode }}

                                </div>

                            </td>

                            <td class="font-bold">

                                {{ number_format($item->system_qty) }}

                            </td>

                            <td class="font-bold">

                                {{ number_format($item->counted_qty) }}

                            </td>

                            <td>

                                @if ($diff == 0)
                                    <span class="badge badge-success">

                                        0

                                    </span>
                                @elseif($diff > 0)
                                    <span class="badge badge-warning">

                                        +{{ number_format($diff) }}

                                    </span>
                                @else
                                    <span class="badge badge-error">

                                        {{ number_format($diff) }}

                                    </span>
                                @endif

                            </td>

                            <td>

                                <span
                                    class="badge
{{ $item->status == 'correct' ? 'badge-success' : '' }}
{{ $item->status == 'wrong' ? 'badge-warning' : '' }}
{{ $item->status == 'missing' ? 'badge-error' : '' }}">

                                    {{ ucfirst($item->status) }}

                                </span>

                            </td>

                            <td>

                                {{ $item->note ?: '-' }}

                            </td>

                        </tr>
                    @endforeach

                </tbody>

            </table>

        </div>

    </div>

    <script>
        const rows = document.querySelectorAll('.report-row');

        document.getElementById('reportSearch').addEventListener('input', filterRows);

        document.getElementById('statusFilter').addEventListener('change', filterRows);

        function filterRows() {

            const q = document.getElementById('reportSearch').value.toLowerCase();

            const st = document.getElementById('statusFilter').value;

            rows.forEach(r => {

                const okSearch = r.dataset.search.includes(q);

                const okStatus = !st || r.dataset.status === st;

                r.style.display = (okSearch && okStatus) ? '' : 'none';

            });

        }
    </script>
@endsection