@extends('layouts.app')

@section('title', 'Inventory Settings')

@section('content')
    @php
        $tabs = [
            'numbering' => 'Document Numbering',
            'stores' => 'Stores',
            'departments' => 'Departments',
        ];
    @endphp

    <div class="flex flex-col gap-6">
        <div>
            <h1 class="text-lg font-semibold">Inventory Settings</h1>
            <p class="text-xs text-muted-foreground">Configure document numbering, stores and departments</p>
        </div>

        @include('partials.flashes')

        <div class="flex flex-wrap gap-1 rounded-xl border border-border bg-card p-1">
            @foreach ($tabs as $key => $label)
                <a href="{{ route('inventory.settings', ['tab' => $key]) }}"
                   class="rounded-md px-3 py-1.5 text-xs font-medium {{ $tab === $key ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-accent' }}">
                    {{ $label }}
                </a>
            @endforeach
        </div>

        @if ($tab === 'numbering')
            <section class="rounded-xl border border-border bg-card p-4">
                <h2 class="text-sm font-semibold">Document Numbering</h2>
                <p class="text-xs text-muted-foreground">Prefixes and the next number to allocate for each document type</p>

                <form method="post" action="{{ route('inventory.settings.numbering') }}" class="mt-4 grid gap-4 md:grid-cols-3">
                    @csrf
                    @foreach ([
                        ['prefix' => 'po_prefix', 'number' => 'next_po', 'label' => 'Purchase Orders', 'preview' => $settings->poPreview()],
                        ['prefix' => 'grn_prefix', 'number' => 'next_grn', 'label' => 'Goods Received Notes', 'preview' => $settings->grnPreview()],
                        ['prefix' => 'invoice_prefix', 'number' => 'next_invoice', 'label' => 'Invoices', 'preview' => $settings->invoicePreview()],
                    ] as $group)
                        <div class="rounded-lg border border-border p-3">
                            <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">{{ $group['label'] }}</p>
                            <div class="grid grid-cols-2 gap-3">
                                <x-field label="Prefix *" required>
                                    <input type="text" name="{{ $group['prefix'] }}" required maxlength="10"
                                           value="{{ old($group['prefix'], $settings->{$group['prefix']}) }}"
                                           class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                </x-field>
                                <x-field label="Next No. *" required>
                                    <input type="number" name="{{ $group['number'] }}" required min="1"
                                           value="{{ old($group['number'], $settings->{$group['number']}) }}"
                                           class="h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                                </x-field>
                            </div>
                            <p class="mt-2 text-xs text-muted-foreground">Next document: <span class="font-mono font-medium">{{ $group['preview'] }}</span></p>
                        </div>
                    @endforeach

                    <div class="md:col-span-3">
                        <button class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">
                            Save Numbering Settings
                        </button>
                    </div>
                </form>
            </section>
        @elseif ($tab === 'stores')
            <div class="flex flex-col gap-4">
                <section class="rounded-xl border border-border bg-card p-4">
                    <h2 class="text-sm font-semibold">Stores &amp; Warehouses</h2>
                    <p class="text-xs text-muted-foreground">{{ $warehouses->count() }} stores &middot; {{ $warehouses->sum(fn ($w) => $w->stockItems->count()) }} stock items assigned</p>

                    <form method="get" action="{{ route('inventory.settings', ['tab' => 'stores']) }}" class="mt-3">
                        <input type="search" name="wh_q" value="{{ $wh_q }}" placeholder="Search name, location or type..."
                               class="h-9 w-72 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    </form>

                    <div class="mt-3 overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                                    <th class="px-3 py-2 font-medium">Name</th>
                                    <th class="px-3 py-2 font-medium">Type</th>
                                    <th class="px-3 py-2 font-medium">Location</th>
                                    <th class="px-3 py-2 font-medium">Manager</th>
                                    <th class="px-3 py-2 text-right font-medium">Items</th>
                                    <th class="px-3 py-2 font-medium">Status</th>
                                    <th class="px-3 py-2 text-right font-medium">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($filteredWarehouses as $w)
                                    <tr class="border-b last:border-0">
                                        <td class="px-3 py-2 font-medium">{{ $w->name }}</td>
                                        <td class="px-3 py-2 text-xs">{{ $w->type }}</td>
                                        <td class="px-3 py-2 text-xs text-muted-foreground">{{ $w->location ?: '—' }}</td>
                                        <td class="px-3 py-2 text-xs">{{ $w->manager }}</td>
                                        <td class="px-3 py-2 text-right tabular-nums">{{ $w->stockItems->count() }}</td>
                                        <td class="px-3 py-2">
                                            <span class="rounded-full px-2 py-0.5 text-[10px] font-medium {{ $w->active ? 'bg-emerald-500/15 text-emerald-700' : 'bg-slate-500/15 text-slate-600' }}">
                                                {{ $w->active ? 'Active' : 'Inactive' }}
                                            </span>
                                        </td>
                                        <td class="px-3 py-2">
                                            <div class="flex items-center justify-end gap-1">
                                                <button type="button" onclick="document.getElementById('wh-{{ $w->id }}').classList.toggle('hidden')"
                                                        class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Edit</button>
                                                <form method="post" action="{{ route('inventory.warehouses.destroy', $w) }}"
                                                      onsubmit="return confirm('Delete store {{ $w->name }}?')">
                                                    @csrf @method('DELETE')
                                                    <button class="rounded-md border border-rose-300 px-2 py-1 text-xs text-rose-700 hover:bg-rose-50">Delete</button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="hidden" id="wh-{{ $w->id }}">
                                        <td colspan="7" class="bg-muted/30 px-3 py-4">
                                            @include('inventory.partials.warehouse-form', [
                                                'action' => route('inventory.warehouses.update', $w),
                                                'method' => 'PUT',
                                                'prefix' => 'wh-edit-'.$w->id,
                                                'row' => $w,
                                                'staff' => $staff,
                                            ])
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="7" class="px-3 py-8 text-center text-sm text-muted-foreground">No stores match your search.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </section>

                <details id="wh-new" class="rounded-xl border border-border bg-card p-4">
                    <summary class="cursor-pointer text-sm font-semibold">Add store</summary>
                    <div class="mt-3">
                        @include('inventory.partials.warehouse-form', [
                            'action' => route('inventory.warehouses.store'),
                            'method' => 'POST',
                            'prefix' => 'wh-new',
                            'row' => null,
                            'staff' => $staff,
                        ])
                    </div>
                </details>
            </div>
        @else
            <div class="flex flex-col gap-4">
                <section class="rounded-xl border border-border bg-card p-4">
                    <h2 class="text-sm font-semibold">Departments</h2>
                    <p class="text-xs text-muted-foreground">{{ $departments->count() }} departments &middot; {{ $departments->sum(fn ($d) => $d->stockItems->count()) }} stock items assigned</p>

                    <form method="get" action="{{ route('inventory.settings', ['tab' => 'departments']) }}" class="mt-3">
                        <input type="search" name="dept_q" value="{{ $dept_q }}" placeholder="Search name or head..."
                               class="h-9 w-72 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    </form>

                    <div class="mt-3 overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                                    <th class="px-3 py-2 font-medium">Department</th>
                                    <th class="px-3 py-2 font-medium">Head</th>
                                    <th class="px-3 py-2 font-medium">Description</th>
                                    <th class="px-3 py-2 text-right font-medium">Items</th>
                                    <th class="px-3 py-2 font-medium">Status</th>
                                    <th class="px-3 py-2 text-right font-medium">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($filteredDepartments as $d)
                                    <tr class="border-b last:border-0">
                                        <td class="px-3 py-2 font-medium">{{ $d->name }}</td>
                                        <td class="px-3 py-2 text-xs">{{ $d->head }}</td>
                                        <td class="px-3 py-2 text-xs text-muted-foreground">{{ $d->description ?: '—' }}</td>
                                        <td class="px-3 py-2 text-right tabular-nums">{{ $d->stockItems->count() }}</td>
                                        <td class="px-3 py-2">
                                            <span class="rounded-full px-2 py-0.5 text-[10px] font-medium {{ $d->active ? 'bg-emerald-500/15 text-emerald-700' : 'bg-slate-500/15 text-slate-600' }}">
                                                {{ $d->active ? 'Active' : 'Inactive' }}
                                            </span>
                                        </td>
                                        <td class="px-3 py-2">
                                            <div class="flex items-center justify-end gap-1">
                                                <button type="button" onclick="document.getElementById('dept-{{ $d->id }}').classList.toggle('hidden')"
                                                        class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Edit</button>
                                                <form method="post" action="{{ route('inventory.departments.destroy', $d) }}"
                                                      onsubmit="return confirm('Delete department {{ $d->name }}?')">
                                                    @csrf @method('DELETE')
                                                    <button class="rounded-md border border-rose-300 px-2 py-1 text-xs text-rose-700 hover:bg-rose-50">Delete</button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="hidden" id="dept-{{ $d->id }}">
                                        <td colspan="6" class="bg-muted/30 px-3 py-4">
                                            @include('inventory.partials.department-form', [
                                                'action' => route('inventory.departments.update', $d),
                                                'method' => 'PUT',
                                                'prefix' => 'dept-edit-'.$d->id,
                                                'row' => $d,
                                                'staff' => $staff,
                                            ])
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="6" class="px-3 py-8 text-center text-sm text-muted-foreground">No departments match your search.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </section>

                <details id="dept-new" class="rounded-xl border border-border bg-card p-4">
                    <summary class="cursor-pointer text-sm font-semibold">Add department</summary>
                    <div class="mt-3">
                        @include('inventory.partials.department-form', [
                            'action' => route('inventory.departments.store'),
                            'method' => 'POST',
                            'prefix' => 'dept-new',
                            'row' => null,
                            'staff' => $staff,
                        ])
                    </div>
                </details>
            </div>
        @endif
    </div>
@endsection