@php $stats = $this->stats; @endphp

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

    <x-page-head :group="__('Network')" :title="__('TR-069 devices')"
        :lead="__('The routers in your customers\' houses, and which one is where.')">
        <x-slot name="actions">
            <button type="button" class="btn btn-sm btn-primary" wire:click="create">
                <i class="bi bi-plus-lg me-1"></i>{{ __('Add device') }}
            </button>
        </x-slot>
    </x-page-head>

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

    {{-- Said plainly rather than implied by an empty table: there is no ACS
         behind this yet, so no device will ever report in by itself. --}}
    <div class="alert alert-warning border-0 rounded-3 d-flex gap-2 align-items-start">
        <i class="bi bi-exclamation-triangle mt-1"></i>
        <div class="small">
            <strong>{{ __('No ACS is running yet.') }}</strong>
            {{ __('TR-069 needs a server for devices to call home to, and Bilipoa does not have one. What you record here is a register kept by hand — useful for knowing which router is at which customer, but nothing will check in on its own until an ACS is built.') }}
            <span class="d-block mt-1 text-secondary">
                {{ __('When it exists, devices will point at') }}
                <code>{{ $this->acsUrl }}</code>
            </span>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-6 col-xl-4">
            <x-stat-card tone="primary" icon="bi-router" :label="__('Devices recorded')"
                :value="$stats['total']" :sub="__('In the register')" />
        </div>
        <div class="col-6 col-xl-4">
            <x-stat-card :tone="$stats['informed'] > 0 ? 'success' : 'neutral'" icon="bi-arrow-repeat"
                :label="__('Ever checked in')" :value="$stats['informed']" :sub="__('Reported to an ACS')" />
        </div>
        <div class="col-6 col-xl-4">
            <x-stat-card :tone="$stats['online'] > 0 ? 'success' : 'neutral'" icon="bi-broadcast"
                :label="__('Online now')" :value="$stats['online']" :sub="__('Informed in the last 30 min')" />
        </div>
    </div>

    @if ($showForm)
        <div class="card dash-panel mb-3">
            <div class="dash-panel__head">
                <h6>{{ $editing ? __('Edit device') : __('New device') }}</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">{{ __('Serial number') }}</label>
                            <input type="text" class="form-control form-control-sm" wire:model="serial">
                            <x-input-error for="serial" />
                        </div>
                        <div class="col-6 col-md-4">
                            <label class="form-label small fw-semibold">{{ __('Manufacturer') }}</label>
                            <input type="text" class="form-control form-control-sm" wire:model="manufacturer"
                                placeholder="TP-Link">
                        </div>
                        <div class="col-6 col-md-4">
                            <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-12 col-md-4">
                            <label class="form-label small fw-semibold">{{ __('Subscriber') }}</label>
                            <input type="text" class="form-control form-control-sm" wire:model="subscriber_handle"
                                placeholder="{{ __('Phone or PPPoE username') }}">
                        </div>
                        <div class="col-6 col-md-4">
                            <label class="form-label small fw-semibold">{{ __('IP address') }}</label>
                            <input type="text" class="form-control form-control-sm" wire:model="ip_address">
                            <x-input-error for="ip_address" />
                        </div>
                        <div class="col-6 col-md-4">
                            <label class="form-label small fw-semibold">{{ __('Firmware') }}</label>
                            <input type="text" class="form-control form-control-sm" wire:model="software_version">
                        </div>
                    </div>

                    <div class="d-flex gap-2 mt-3">
                        <button type="submit" class="btn btn-sm btn-primary">
                            <i class="bi bi-save me-1"></i>{{ __('Save device') }}
                        </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">
            <h6>{{ __('Devices') }}</h6>
            <div style="max-width:260px;">
                <input type="search" class="form-control form-control-sm" wire:model.live.debounce.300ms="search"
                    placeholder="{{ __('Serial, model or subscriber...') }}">
            </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>{{ __('Serial') }}</th>
                            <th class="d-none d-md-table-cell">{{ __('Device') }}</th>
                            <th class="d-none d-lg-table-cell">{{ __('Subscriber') }}</th>
                            <th class="d-none d-lg-table-cell">{{ __('IP') }}</th>
                            <th>{{ __('Last inform') }}</th>
                            <th class="text-end">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($this->devices as $d)
                            <tr>
                                <td><span class="ledger-receipt">{{ $d->serial }}</span></td>
                                <td class="d-none d-md-table-cell text-secondary" style="font-size:0.8rem;">
                                    {{ trim($d->manufacturer.' '.$d->model) ?: '—' }}
                                    @if ($d->software_version)
                                        <span class="d-block" style="font-size:0.72rem;">{{ $d->software_version }}</span>
                                    @endif
                                </td>
                                <td class="d-none d-lg-table-cell">{{ $d->subscriber_handle ?: '—' }}</td>
                                <td class="d-none d-lg-table-cell text-secondary">{{ $d->ip_address ?: '—' }}</td>
                                <td>
                                    @if ($d->hasInformed())
                                        <span class="badge rounded-pill {{ $d->isOnline() ? 'badge-subtle-success' : 'badge-subtle-secondary' }}">
                                            {{ $d->last_inform_at->diffForHumans() }}
                                        </span>
                                    @else
                                        <span class="text-secondary" style="font-size:0.78rem;">{{ __('Never') }}</span>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <button class="btn btn-sm btn-outline-secondary py-0 px-2" wire:click="edit({{ $d->id }})">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger py-0 px-2 ms-1" wire:click="delete({{ $d->id }})"
                                        wire:confirm="{{ __('Remove this device?') }}">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="6" class="text-center text-secondary py-5">
                                {{ $search !== '' ? __('Nothing matches that.') : __('No devices recorded yet.') }}
                            </td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>