@extends('layouts.app')

@section('title', 'Create Group')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-2xl mx-auto">
        <div class="flex items-center mb-6">
            <a href="{{ route('admin.groups.index') }}" class="text-gray-600 hover:text-gray-900 mr-3">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                </svg>
            </a>
            <h1 class="text-3xl font-bold text-gray-900">Create New Group</h1>
        </div>

        <div class="bg-white shadow-sm rounded-lg p-6">
            <form action="{{ route('admin.groups.store') }}" method="POST">
                @csrf
                
                <div class="mb-6">
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                        Group Name <span class="text-red-500">*</span>
                    </label>
                    <input type="text" 
                           name="name" 
                           id="name" 
                           value="{{ old('name') }}"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-woot-500 focus:border-woot-500 @error('name') border-red-300 @enderror"
                           required>
                    @error('name')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-6">
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                        Description
                    </label>
                    <textarea name="description" 
                              id="description" 
                              rows="3"
                              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-woot-500 focus:border-woot-500 @error('description') border-red-300 @enderror">{{ old('description') }}</textarea>
                    @error('description')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-6">
                    <label for="color" class="block text-sm font-medium text-gray-700 mb-2">
                        Group Color <span class="text-red-500">*</span>
                    </label>
                    <div class="flex items-center space-x-3">
                        <input type="color" 
                               name="color" 
                               id="color" 
                               value="{{ old('color', '#1F93FF') }}"
                               class="h-10 w-20 border border-gray-300 rounded-md cursor-pointer @error('color') border-red-300 @enderror"
                               required>
                        <span class="text-sm text-gray-500">Choose a color to identify this group</span>
                    </div>
                    @error('color')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Status
                    </label>
                    <div class="flex items-center">
                        <input type="checkbox" 
                               name="is_active" 
                               id="is_active" 
                               value="1"
                               {{ old('is_active', true) ? 'checked' : '' }}
                               class="h-4 w-4 text-woot-600 focus:ring-woot-500 border-gray-300 rounded">
                        <label for="is_active" class="ml-2 text-sm text-gray-700">
                            Active (group can be assigned to conversations)
                        </label>
                    </div>
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Assign Operators
                    </label>
                    <p class="text-sm text-gray-500 mb-3">Select operators to add to this group</p>
                    
                    @if($operators->count() > 0)
                        <div class="space-y-2 max-h-60 overflow-y-auto border border-gray-200 rounded-md p-3">
                            @foreach($operators as $operator)
                                <label class="flex items-center hover:bg-gray-50 p-2 rounded cursor-pointer">
                                    <input type="checkbox" 
                                           name="operators[]" 
                                           value="{{ $operator->id }}"
                                           {{ in_array($operator->id, old('operators', [])) ? 'checked' : '' }}
                                           class="h-4 w-4 text-woot-600 focus:ring-woot-500 border-gray-300 rounded">
                                    <span class="ml-3 text-sm text-gray-700">{{ $operator->name }}</span>
                                    <span class="ml-auto text-xs text-gray-500">{{ $operator->email }}</span>
                                </label>
                            @endforeach
                        </div>
                    @else
                        <p class="text-sm text-gray-500 italic">No operators available. Create operator users first.</p>
                    @endif
                </div>

                <div class="flex justify-end space-x-3">
                    <a href="{{ route('admin.groups.index') }}" class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                        Cancel
                    </a>
                    <button type="submit" class="px-4 py-2 bg-woot-500 text-white rounded-lg hover:bg-woot-600 transition-colors">
                        Create Group
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection