@php
    $badges = [
        'in_stock' => 'badge-subtle-info',
        'deployed' => 'badge-subtle-success',
        'faulty' => 'badge-subtle-danger',
        'retired' => 'badge-subtle-secondary',
    ];
    $icons = [
        'router' => 'bi-router', 'antenna' => 'bi-broadcast-pin', 'ont' => 'bi-hdd',
        'switch' => 'bi-diagram-3', 'cable' => 'bi-usb-c', 'other' => 'bi-box',
    ];
@endphp

<div>
    <x-slot name="header">{{ __('Equipment') }}</x-slot>

    <x-page-head :group="__('Network')" :title="__('Equipment')"
        :lead="__('What you own, who has it, and whether it still works.')">
        <x-slot name="actions">
            <button class="btn btn-sm btn-secondary" wire:click="export" wire:loading.attr="disabled" wire:target="export">
                <i class="bi bi-download me-1"></i>{{ __('Export CSV') }}
            </button>
            <button class="btn btn-sm btn-primary" wire:click="create">
                <i class="bi bi-plus-lg me-1"></i>{{ __('Add item') }}
            </button>
        </x-slot>
    </x-page-head>

    @if (session('equipment-flash'))
        <div class="alert alert-success border-0 rounded-3 py-2 small d-flex align-items-center gap-2">
            <i class="bi bi-check-circle"></i>{{ session('equipment-flash') }}
        </div>
    @endif

    <div class="row g-3 mb-3">
        <div class="col-6 col-xl-3">
            <x-stat-card tone="primary" icon="bi-boxes" :label="__('Items')"
                :value="$this->summary['total']" :sub="__('On the register')" />
        </div>
        <div class="col-6 col-xl-3">
            <x-stat-card tone="info" icon="bi-box-seam" :label="__('In stock')"
                :value="$this->summary['in_stock']" :sub="__('Ready to deploy')" />
        </div>
        <div class="col-6 col-xl-3">
            <x-stat-card tone="success" icon="bi-broadcast" :label="__('Deployed')"
                :value="$this->summary['deployed']" :sub="__('Out in the field')" />
        </div>
        <div class="col-6 col-xl-3">
            <x-stat-card :tone="$this->summary['faulty'] > 0 ? 'danger' : 'neutral'" icon="bi-tools"
                :label="__('Faulty')" :value="$this->summary['faulty']" :sub="__('Needs repair')" />
        </div>
    </div>

    @if ($showForm)
        <div class="card dash-panel mb-3">
            <div class="dash-panel__head">
                <h6>{{ $editingId ? __('Edit item') : __('New item') }}</h6>
            </div>
            <div class="card-body">
                <form wire:submit="save">
                    <div class="row g-3">
                        <div class="col-12 col-md-4">
                            <label class="form-label small fw-semibold">{{ __('Name') }}</label>
                            <input type="text" class="form-control form-control-sm" wire:model="name"
                                placeholder="{{ __('hAP ac2 — Mast 3') }}">
                            <x-input-error for="name" />
                        </div>
                        <div class="col-6 col-md-2">
                            <label class="form-label small fw-semibold">{{ __('Type') }}</label>
                            <select class="form-select form-select-sm" wire:model="type">
                                @foreach (\App\Models\Equipment::TYPES as $t)
                                    <option value="{{ $t }}">{{ strtoupper($t) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6 col-md-3">
                            <label class="form-label small fw-semibold">{{ __('Brand') }}</label>
                            <input type="text" class="form-control form-control-sm" wire:model="brand"
                                placeholder="MikroTik">
                        </div>
                        <div class="col-6 col-md-3">
                            <label class="form-label small fw-semibold">{{ __('Model') }}</label>
                            <input type="text" class="form-control form-control-sm" wire:model="model">
                        </div>

                        <div class="col-6 col-md-3">
                            <label class="form-label small fw-semibold">{{ __('Serial') }}</label>
                            <input type="text" class="form-control form-control-sm" wire:model="serial"
                                spellcheck="false">
                            <x-input-error for="serial" />
                        </div>
                        <div class="col-6 col-md-3">
                            <label class="form-label small fw-semibold">{{ __('MAC address') }}</label>
                            <input type="text" class="form-control form-control-sm" wire:model="mac_address"
                                placeholder="AA:BB:CC:DD:EE:FF" spellcheck="false">
                        </div>
                        <div class="col-6 col-md-2">
                            <label class="form-label small fw-semibold">{{ __('Status') }}</label>
                            <select class="form-select form-select-sm" wire:model="status">
                                @foreach (\App\Models\Equipment::STATUSES as $s)
                                    <option value="{{ $s }}">{{ ucfirst(str_replace('_', ' ', $s)) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6 col-md-4">
                            <label class="form-label small fw-semibold">{{ __('Held by') }}</label>
                            <input type="text" class="form-control form-control-sm" wire:model="assigned_to"
                                placeholder="{{ __('Subscriber, technician or site') }}">
                        </div>

                        <div class="col-6 col-md-4">
                            <label class="form-label small fw-semibold">{{ __('Location') }}</label>
                            <input type="text" class="form-control form-control-sm" wire:model="location">
                        </div>
                        <div class="col-6 col-md-2">
                            <label class="form-label small fw-semibold">{{ __('Cost') }}</label>
                            <input type="number" step="0.01" class="form-control form-control-sm" wire:model="cost">
                            <x-input-error for="cost" />
                        </div>
                        <div class="col-6 col-md-3">
                            <label class="form-label small fw-semibold">{{ __('Bought on') }}</label>
                            <input type="date" class="form-control form-control-sm" wire:model="purchased_on">
                            <x-input-error for="purchased_on" />
                        </div>

                        <div class="col-12">
                            <label class="form-label small fw-semibold">{{ __('Notes') }}</label>
                            <textarea class="form-control form-control-sm" rows="2" wire:model="notes"></textarea>
                        </div>
                    </div>

                    <div class="d-flex gap-2 mt-4">
                        <button type="submit" class="btn btn-sm btn-primary">{{ __('Save item') }}</button>
                        <button type="button" class="btn btn-sm btn-secondary" wire:click="$set('showForm', false)">
                            {{ __('Cancel') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    @endif

    <div class="card dash-panel">
        <div class="dash-panel__head flex-wrap gap-2">
            <h6>{{ __('Register') }}</h6>

            <div class="d-flex flex-wrap gap-2 ms-auto">
                <div class="ledger-search">
                    <i class="bi bi-search"></i>
                    <input type="search" class="form-control form-control-sm"
                        wire:model.live.debounce.400ms="search"
                        placeholder="{{ __('Serial, MAC, holder or site...') }}">
                </div>

                <select class="form-select form-select-sm w-auto" wire:model.live="typeFilter">
                    <option value="">{{ __('All types') }}</option>
                    @foreach (\App\Models\Equipment::TYPES as $t)
                        <option value="{{ $t }}">{{ strtoupper($t) }}</option>
                    @endforeach
                </select>

                <select class="form-select form-select-sm w-auto" wire:model.live="statusFilter">
                    <option value="">{{ __('All statuses') }}</option>
                    @foreach (\App\Models\Equipment::STATUSES as $s)
                        <option value="{{ $s }}">{{ ucfirst(str_replace('_', ' ', $s)) }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-sm align-middle mb-0 ledger-table">
                    <thead>
                        <tr>
                            <th>{{ __('Item') }}</th>
                            <th class="d-none d-md-table-cell">{{ __('Serial / MAC') }}</th>
                            <th class="d-none d-lg-table-cell">{{ __('Held by') }}</th>
                            <th class="d-none d-xl-table-cell">{{ __('Location') }}</th>
                            <th class="text-end d-none d-sm-table-cell">{{ __('Cost') }}</th>
                            <th class="text-center">{{ __('Status') }}</th>
                            <th class="text-end">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($items as $item)
                            <tr>
                                <td>
                                    <span class="fw-semibold">
                                        <i class="bi {{ $icons[$item->type] ?? 'bi-box' }} me-1 text-secondary"></i>
                                        {{ $item->name }}
                                    </span>
                                    <span class="d-block text-secondary" style="font-size:0.72rem;">
                                        {{ trim(($item->brand ?? '').' '.($item->model ?? '')) ?: strtoupper($item->type) }}
                                    </span>
                                </td>
                                <td class="d-none d-md-table-cell">
                                    @if ($item->serial)
                                        <span class="ledger-receipt">{{ $item->serial }}</span>
                                    @endif
                                    @if ($item->mac_address)
                                        <span class="d-block text-secondary" style="font-size:0.7rem;">{{ $item->mac_address }}</span>
                                    @endif
                                    @if (! $item->serial && ! $item->mac_address)
                                        <span class="text-secondary">—</span>
                                    @endif
                                </td>
                                <td class="d-none d-lg-table-cell text-secondary">{{ $item->assigned_to ?: '—' }}</td>
                                <td class="d-none d-xl-table-cell text-secondary">{{ $item->location ?: '—' }}</td>
                                <td class="text-end d-none d-sm-table-cell">
                                    {{ $item->cost !== null ? money($item->cost, 0) : '—' }}
                                </td>
                                <td class="text-center">
                                    <span class="badge rounded-pill {{ $badges[$item->status] ?? 'badge-subtle-info' }}">
                                        {{ $item->statusLabel() }}
                                    </span>
                                </td>
                                <td class="text-end text-nowrap">
                                    @if ($item->status === 'in_stock')
                                        <button class="btn btn-sm btn-outline-success p-1" title="{{ __('Mark deployed') }}"
                                            wire:click="setStatus({{ $item->id }}, 'deployed')">
                                            <i class="bi bi-box-arrow-up" style="font-size:0.85rem;"></i>
                                        </button>
                                    @elseif ($item->status === 'deployed')
                                        <button class="btn btn-sm btn-outline-info p-1" title="{{ __('Back to stock') }}"
                                            wire:click="setStatus({{ $item->id }}, 'in_stock')">
                                            <i class="bi bi-box-arrow-in-down" style="font-size:0.85rem;"></i>
                                        </button>
                                    @endif
                                    @if ($item->status !== 'faulty')
                                        <button class="btn btn-sm btn-outline-warning p-1" title="{{ __('Mark faulty') }}"
                                            wire:click="setStatus({{ $item->id }}, 'faulty')">
                                            <i class="bi bi-tools" style="font-size:0.85rem;"></i>
                                        </button>
                                    @endif
                                    <button class="btn btn-sm btn-outline-info p-1" title="{{ __('Edit') }}"
                                        wire:click="edit({{ $item->id }})">
                                        <i class="bi bi-pencil-square" style="font-size:0.85rem;"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger p-1" title="{{ __('Delete') }}"
                                        wire:click="destroy({{ $item->id }})"
                                        wire:confirm="{{ __('Remove this item from the register?') }}">
                                        <i class="bi bi-trash" style="font-size:0.85rem;"></i>
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center text-secondary py-5">
                                    <i class="bi bi-boxes fs-4 d-block mb-2 opacity-50"></i>
                                    {{ __('Nothing on the register yet. Add your routers, antennas and ONTs.') }}
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if ($items->hasPages())
                <div class="px-3 py-2 border-top">{{ $items->links() }}</div>
            @endif
        </div>
    </div>
</div>