@extends('layouts.app')

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

@section('content')
<div class="space-y-6" x-data="{ modal: false }">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-bold text-slate-900 dark:text-white">Service Counters & Desks</h1>
            <p class="text-xs text-slate-500">Service counters (Reception, Typing, Cashier, PRO Desk, VIP Counter) and live status control.</p>
        </div>
        <button @click="modal = true" class="px-4 py-2 bg-sky-600 hover:bg-sky-700 text-white font-bold text-xs rounded-xl shadow-sm">+ Add Counter Desk</button>
    </div>

    <!-- Counters Table (Requirements 16-18) -->
    <div class="bg-white dark:bg-slate-800 rounded-3xl border border-slate-200 dark:border-slate-700/60 shadow-sm overflow-hidden text-xs">
        <div class="overflow-x-auto">
            <table class="w-full text-left rtl:text-right">
                <thead class="bg-slate-50 dark:bg-slate-900/60 border-b border-slate-200 dark:border-slate-700 text-slate-500 uppercase tracking-wider font-bold">
                    <tr>
                        <th class="px-6 py-4">Counter Name</th>
                        <th class="px-6 py-4">Code</th>
                        <th class="px-6 py-4">Branch</th>
                        <th class="px-6 py-4">Department</th>
                        <th class="px-6 py-4">Live Status</th>
                        <th class="px-6 py-4 text-right rtl:text-left">Change Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200 dark:divide-slate-700/60 font-medium">
                    @foreach($counters as $counter)
                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-700/30">
                            <td class="px-6 py-4 font-bold text-slate-900 dark:text-white">{{ $counter->name }}</td>
                            <td class="px-6 py-4 font-mono text-slate-400">{{ $counter->code }}</td>
                            <td class="px-6 py-4 text-slate-700 dark:text-slate-300 font-semibold">{{ $counter->branch->name }}</td>
                            <td class="px-6 py-4 text-slate-500">{{ $counter->department ? $counter->department->name : 'General' }}</td>
                            <td class="px-6 py-4">
                                <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold 
                                    {{ $counter->status === 'available' ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-300' : '' }}
                                    {{ $counter->status === 'busy' ? 'bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300' : '' }}
                                    {{ $counter->status === 'closed' || $counter->status === 'offline' ? 'bg-rose-100 text-rose-700 dark:bg-rose-950 dark:text-rose-300' : '' }}">
                                    {{ ucfirst($counter->status) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-right rtl:text-left">
                                <form action="{{ route('app.settings.counters.toggle_status', $counter->id) }}" method="POST" class="inline-flex space-x-1 rtl:space-x-reverse">
                                    @csrf
                                    <button type="submit" name="status" value="available" class="px-2 py-0.5 bg-emerald-600 text-white rounded text-[10px] font-bold">Available</button>
                                    <button type="submit" name="status" value="busy" class="px-2 py-0.5 bg-amber-600 text-white rounded text-[10px] font-bold">Busy</button>
                                    <button type="submit" name="status" value="closed" class="px-2 py-0.5 bg-rose-600 text-white rounded text-[10px] font-bold">Closed</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Create Counter Modal -->
    <div x-show="modal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 flex items-center justify-center p-4" x-cloak>
        <div class="bg-white dark:bg-slate-800 rounded-3xl max-w-md w-full p-6 border border-slate-200 dark:border-slate-700 shadow-2xl space-y-4 text-xs">
            <h3 class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wider">Add Counter Desk</h3>
            <form action="{{ route('app.settings.counters.store') }}" method="POST" class="space-y-3">
                @csrf
                <div>
                    <label class="block font-semibold mb-1">Counter Name *</label>
                    <input type="text" name="name" required placeholder="Counter 1 (Emirates ID Typing)" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                </div>
                <div>
                    <label class="block font-semibold mb-1">Branch *</label>
                    <select name="branch_id" required class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex justify-end space-x-2 rtl:space-x-reverse pt-2">
                    <button type="button" @click="modal = false" class="px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-bold rounded-xl">Cancel</button>
                    <button type="submit" class="px-5 py-2 bg-sky-600 text-white font-bold rounded-xl">Add Counter</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection