@extends('layouts.app')
@section('title', 'Devices')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h5 class="mb-0 fw-bold">LIS Devices</h5>
    <a href="{{ route('lis.devices.create') }}" class="btn btn-primary">
        <i class="bi bi-plus-lg me-1"></i>Add Device
    </a>
</div>

<div class="card">
    <div class="card-body p-0">
        <table class="table mb-0">
            <thead>
                <tr>
                    <th>Status</th>
                    <th>Name</th>
                    <th>IP Address</th>
                    <th>Port</th>
                    <th>Size</th>
                    <th>Location</th>
                    <th>Last Sent</th>
                    <th>Mode</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
            @forelse($devices as $device)
                <tr>
                    <td>
                        <i class="bi bi-circle-fill {{ $device->last_status === 'online' ? 'text-success' : ($device->last_status === 'offline' ? 'text-danger' : 'text-secondary') }}"
                           title="{{ $device->last_status ?? 'unknown' }}" style="font-size:.6rem"></i>
                        <span class="ms-1 text-secondary" style="font-size:.75rem">{{ $device->last_status ?? '—' }}</span>
                    </td>
                    <td class="fw-semibold">{{ $device->name }}</td>
                    <td><code style="color:#7dd3fc">{{ $device->ip_address }}</code></td>
                    <td>{{ $device->port }}</td>
                    <td style="font-size:.8rem">{{ $device->width_px }} × {{ $device->height_px }}</td>
                    <td class="text-secondary" style="font-size:.8rem">{{ $device->location ?? '—' }}</td>
                    <td class="text-secondary" style="font-size:.8rem">
                        {{ $device->last_sent_at?->format('d/m/y H:i') ?? 'Never' }}
                    </td>
                    <td>
                        @if($device->last_sent_mode)
                            <span class="badge badge-{{ $device->last_sent_mode }}">{{ strtoupper($device->last_sent_mode) }}</span>
                        @else
                            <span class="badge bg-secondary">—</span>
                        @endif
                    </td>
                    <td class="text-end">
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-success btn-quick" data-id="{{ $device->id }}" data-mode="buka" title="Send BUKA">
                                <i class="bi bi-circle-fill" style="font-size:.5rem"></i> BUKA
                            </button>
                            <button class="btn btn-danger btn-quick" data-id="{{ $device->id }}" data-mode="tutup" title="Send TUTUP">
                                <i class="bi bi-circle-fill" style="font-size:.5rem"></i> TUTUP
                            </button>
                            <a href="{{ route('lis.devices.edit', $device) }}" class="btn btn-outline-secondary" title="Edit">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <form action="{{ route('lis.devices.destroy', $device) }}" method="POST" class="d-inline"
                                  onsubmit="return confirm('Delete {{ $device->name }}?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-outline-danger" title="Delete"><i class="bi bi-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
            @empty
                <tr><td colspan="9" class="text-center text-secondary py-5">No devices. <a href="{{ route('lis.devices.create') }}">Add one →</a></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.btn-quick').forEach(btn => {
    btn.addEventListener('click', async () => {
        const id   = btn.dataset.id;
        const mode = btn.dataset.mode;
        const orig = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
        try {
            const r = await fetch(`/lis-portal/send/${id}/quick`, {
                method: 'POST',
                headers: { 'Content-Type':'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content },
                body: JSON.stringify({ mode })
            });
            const d = await r.json();
            btn.className = btn.className.replace(/btn-(success|danger)/, d.success ? 'btn-success' : 'btn-danger');
            setTimeout(() => { btn.disabled = false; btn.innerHTML = orig; }, 2000);
        } catch(e) { btn.disabled = false; btn.innerHTML = orig; }
    });
});
</script>
@endpush