@extends('admin.layouts.app')
@section('title', 'POS Outlets')
@section('page-title', 'POS Outlets Management')

@section('content')
<div class="max-w-4xl">
    <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
        <h3 class="text-lg font-semibold mb-4">Add New Outlet</h3>
        <form action="{{ route('admin.pos.outlets.store') }}" method="POST" class="flex gap-4 items-end">
            @csrf
            <div class="flex-1">
                <label class="block text-sm font-medium text-gray-700 mb-1">Outlet Name</label>
                <input type="text" name="name" required class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
            </div>
            <div class="flex-1">
                <label class="block text-sm font-medium text-gray-700 mb-1">Type (unique)</label>
                <input type="text" name="type" required placeholder="e.g., restaurant, bar" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
            </div>
            <div class="flex-1">
                <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                <input type="text" name="description" class="w-full border rounded-lg px-4 py-2 focus:ring-2 focus:ring-gold">
            </div>
            <button type="submit" class="bg-gold hover:bg-gold-dark text-white px-6 py-2 rounded-lg">
                Add
            </button>
        </form>
    </div>

    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Description</th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                @forelse($outlets as $outlet)
                <tr>
                    <td class="px-6 py-4 font-medium">{{ $outlet->name }}</td>
                    <td class="px-6 py-4">
                        <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">{{ $outlet->type }}</span>
                    </td>
                    <td class="px-6 py-4 text-gray-600">{{ $outlet->description }}</td>
                    <td class="px-6 py-4 text-right">
                        <button onclick="editOutlet({{ $outlet->id }}, '{{ $outlet->name }}', '{{ $outlet->type }}', '{{ $outlet->description }}')" class="text-blue-600 hover:text-blue-800 mr-3">
                            <i class="fas fa-edit"></i>
                        </button>
                        <form action="{{ route('admin.pos.outlets.destroy', $outlet) }}" method="POST" class="inline">
                            @csrf @method('DELETE')
                            <button type="submit" onclick="return confirm('Delete this outlet?')" class="text-red-600 hover:text-red-800">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="px-6 py-8 text-center text-gray-500">No outlets found</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<div id="editModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
    <div class="bg-white rounded-lg p-6 w-full max-w-md">
        <h3 class="text-lg font-semibold mb-4">Edit Outlet</h3>
        <form id="editForm" method="POST">
            @csrf @method('PUT')
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Outlet Name</label>
                <input type="text" name="name" id="editName" required class="w-full border rounded-lg px-4 py-2">
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Type</label>
                <input type="text" name="type" id="editType" required class="w-full border rounded-lg px-4 py-2">
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                <input type="text" name="description" id="editDescription" class="w-full border rounded-lg px-4 py-2">
            </div>
            <div class="flex justify-end gap-4">
                <button type="button" onclick="closeModal()" class="px-4 py-2 border rounded-lg">Cancel</button>
                <button type="submit" class="bg-gold text-white px-4 py-2 rounded-lg">Update</button>
            </div>
        </form>
    </div>
</div>

<script>
function editOutlet(id, name, type, description) {
    document.getElementById('editName').value = name;
    document.getElementById('editType').value = type;
    document.getElementById('editDescription').value = description || '';
    document.getElementById('editForm').action = '/admin/pos/outlets/' + id;
    document.getElementById('editModal').classList.remove('hidden');
}
function closeModal() {
    document.getElementById('editModal').classList.add('hidden');
}
</script>
@endsection