@extends('layouts.admin')

@section('title', 'Select Counter')

@section('content')
<h2>Select POS Counter</h2>
<p style="margin-bottom: 1rem;">Choose a counter to start the POS session. Use "Retrieve Kiosk" in POS to collect payment for kiosk orders.</p>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem;">
    @foreach($counters as $counter)
    <a href="{{ route('pos.index', $counter) }}" class="counter-link" data-counter-id="{{ $counter->id }}" style="display: block; padding: 1.5rem; background: white; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); text-decoration: none; color: inherit; text-align: center; border: 2px solid #e2e8f0; transition: all 0.2s;">
        <div style="font-weight: 600; color: #ff753a;">{{ $counter->name }}</div>
        <div style="font-size: 0.875rem; color: #6b7280;">{{ $counter->branch->name }}</div>
    </a>
    @endforeach
</div>
@if($counters->isEmpty())
<p>No POS counters available. Contact your manager to assign one.</p>
@endif
<script>
document.querySelectorAll('.counter-link').forEach(a => {
    a.addEventListener('click', () => localStorage.setItem('pos_last_counter', a.dataset.counterId));
});
</script>
@endsection