@extends('layouts.app')

@section('title', isset($service) ? 'Edit Site' : 'Create Site')

@section('content')
<div class="min-h-screen bg-gray-50 p-4 lg:p-6">
    <div class="max-w-6xl mx-auto">
        <div class="bg-white rounded-lg shadow-sm border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                <h5 class="text-lg font-semibold text-gray-900 m-0">
                    <i class="fas fa-concierge-bell mr-2"></i>
                    @if(isset($service))
                        Edit Site
                    @else
                        Add New Site
                    @endif
                </h5>
                <a href="{{ route('services.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Back to List
                </a>
            </div>
            <div class="p-6">
                <form action="{{ isset($service) ? route('services.update', $service->id) : route('services.store') }}" method="POST">
                    @csrf
                    @if(isset($service))
                        @method('PUT')
                    @endif

                    <!-- Basic Information -->
                    <div class="mb-8">
                        <div class="w-full">
                            <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                <i class="fas fa-info-circle mr-2"></i>
                                Site Information
                            </h6>
                            <p class="text-gray-500 text-sm">Basic site details and configuration. This site can support multiple service types.</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="client_id" class="block text-sm font-medium text-gray-700 mb-2">Client</label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('client_id') border-red-500 @enderror" id="client_id" name="client_id" required {{ isset($service) ? 'disabled' : '' }}>
                                    <option value="">Select Client</option>
                                    @foreach($clients as $client)
                                        <option value="{{ $client->id }}" {{ old('client_id', $service->client_id ?? '') == $client->id ? 'selected' : '' }}>
                                            {{ $client->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @if(isset($service))
                                    <input type="hidden" name="client_id" value="{{ $service->client_id }}">
                                @endif
                                @error('client_id')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div>
                            <div class="mb-4">
                                <label for="service_name" class="block text-sm font-medium text-gray-700 mb-2">Site Name</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('service_name') border-red-500 @enderror" id="service_name" name="service_name" 
                                       value="{{ old('service_name', $service->service_name ?? '') }}" required
                                       placeholder="e.g. Downtown Office Complex">
                                @error('service_name')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="location_id" class="block text-sm font-medium text-gray-700 mb-2">Location</label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('location_id') border-red-500 @enderror" id="location_id" name="location_id" required>
                                    <option value="">Select Location</option>
                                    @foreach($locations as $location)
                                        <option value="{{ $location->id }}" {{ old('location_id', $service->location_id ?? '') == $location->id ? 'selected' : '' }}>
                                            {{ $location->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('location_id')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div>
                            <div class="mb-4">
                                <label for="is_active" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                                <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('is_active') border-red-500 @enderror" id="is_active" name="is_active" required>
                                    <option value="1" {{ old('is_active', $service->is_active ?? true) ? 'selected' : '' }}>Active</option>
                                    <option value="0" {{ !old('is_active', $service->is_active ?? true) ? 'selected' : '' }}>Inactive</option>
                                </select>
                                @error('is_active')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="zone_area" class="block text-sm font-medium text-gray-700 mb-2">Zone / Area (Optional)</label>
                                <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('zone_area') border-red-500 @enderror" id="zone_area" name="zone_area" 
                                       value="{{ old('zone_area', $service->zone_area ?? '') }}"
                                       placeholder="e.g. North Wing, Building A">
                                @error('zone_area')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Description (Optional)</label>
                                <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('description') border-red-500 @enderror" id="description" name="description" rows="3" 
                                          placeholder="Site details and special instructions...">{{ old('description', $service->description ?? '') }}</textarea>
                                @error('description')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Service Types and Employee Assignments -->
                    <div class="mb-8 mt-12">
                        <div class="w-full">
                            <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                <i class="fas fa-cogs mr-2"></i>
                                Service Types & Employee Assignments
                            </h6>
                            <p class="text-gray-500 text-sm">Add multiple service types for this site and assign employees to each service type.</p>
                        </div>
                        
                        <!-- Service Type Management Guide -->
                        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-4 mb-6">
                            <div class="flex items-start gap-3">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-lightbulb text-blue-600 mt-1"></i>
                                </div>
                                <div class="flex-1">
                                    <h6 class="text-sm font-semibold text-gray-900 mb-2">Service Type Management</h6>
                                    <ul class="text-xs text-gray-600 space-y-1">
                                        <li><i class="fas fa-check text-green-500 mr-1"></i>Add multiple service types (Security, Cleaning, Maintenance) to a single site</li>
                                        <li><i class="fas fa-check text-green-500 mr-1"></i>Assign different employees to each service type with specific roles</li>
                                        <li><i class="fas fa-check text-green-500 mr-1"></i>Set date ranges and availability for each assignment</li>
                                        <li><i class="fas fa-check text-green-500 mr-1"></i>Manage assignments independently for each service type</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- Service Types Container -->
                        <div id="serviceTypesContainer" class="space-y-6">
                            <!-- Service types will be dynamically added here -->
                            @if(isset($service) && $service->serviceTypes->count() > 0)
                                @foreach($service->serviceTypes as $index => $serviceType)
                                    <div class="service-type-section bg-white border border-gray-200 rounded-lg" data-service-type-id="{{ $serviceType->id }}">
                                        <div class="bg-gradient-to-r from-gray-50 to-gray-100 px-6 py-4 border-b border-gray-200">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center gap-3">
                                                    <div class="flex-shrink-0">
                                                        <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
                                                            <i class="fas fa-cogs text-blue-600"></i>
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <h6 class="text-sm font-semibold text-gray-900 service-type-name">
                                                            {{ ucfirst($serviceType->type) }} Services
                                                        </h6>
                                                        <p class="text-xs text-gray-500">Manage employees and assignments for this service type</p>
                                                    </div>
                                                </div>
                                                <div class="flex items-center gap-2">
                                                    <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-bold employee-count">
                                                        {{ $service->employeeAssignments->where('service_type_id', $serviceType->id)->count() }} Employees
                                                    </span>
                                                    <button type="button" onclick="removeServiceType(this)" class="text-red-600 hover:text-red-800 transition-colors p-2">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="p-6">
                                            <input type="hidden" name="service_types[{{ $index }}][id]" value="{{ $serviceType->id }}">
                                            <input type="hidden" name="service_types[{{ $index }}][type]" value="{{ $serviceType->type }}">
                                            
                                            <!-- Service Type Capabilities -->
                                            <div class="mb-6">
                                                <h6 class="text-xs font-semibold text-gray-700 mb-3">
                                                    <i class="fas fa-star mr-1"></i>
                                                    Service Capabilities
                                                </h6>
                                                <div class="capabilities-display grid grid-cols-2 md:grid-cols-3 gap-3 p-3 bg-gray-50 rounded-lg">
                                                    @php
                                                        $capabilities = [
                                                            'security' => ['Geofencing', 'Incident Logging', 'Scheduling', 'Guard Assignment', 'Reporting'],
                                                            'cleaning' => ['Task Scheduling', 'Task Tracking', 'Reporting', 'Inventory', 'Time Tracking'],
                                                            'maintenance' => ['Work Orders', 'Maintenance Logging', 'Task Scheduling', 'Reporting', 'Time Tracking']
                                                        ];
                                                        $typeCapabilities = $capabilities[$serviceType->type] ?? [];
                                                    @endphp
                                                    @foreach($typeCapabilities as $capability)
                                                        <div class="flex items-center gap-2">
                                                            <svg class="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                                                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                                            </svg>
                                                            <span class="text-xs text-gray-900">{{ $capability }}</span>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                            
                                            <!-- Employee Assignments for this Service Type -->
                                            <div class="mb-4">
                                                <div class="flex items-center justify-between mb-3">
                                                    <h6 class="text-xs font-semibold text-gray-700">
                                                        <i class="fas fa-users mr-1"></i>
                                                        Employee Assignments
                                                    </h6>
                                                    <button type="button" onclick="addEmployeeAssignment(this)" class="inline-flex items-center px-2 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition-colors">
                                                        <i class="fas fa-plus mr-1"></i>Add Employee
                                                    </button>
                                                </div>
                                                
                                                <div class="employee-assignments space-y-2">
                                                    @php
                                                        $assignmentsForServiceType = $service->employeeAssignments->where('service_type_id', $serviceType->id);
                                                    @endphp
                                                    @foreach($assignmentsForServiceType as $empIndex => $assignment)
                                                        <div class="employee-assignment bg-gray-50 rounded-lg p-3 border border-gray-200">
                                                            <div class="flex items-center justify-between mb-2">
                                                                <div class="flex items-center gap-2">
                                                                    <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center">
                                                                        <i class="fas fa-user text-blue-600 text-xs"></i>
                                                                    </div>
                                                                    <span class="text-xs font-medium text-gray-900">
                                                                        {{ $assignment->employee->full_name ?? 'Unknown Employee' }}
                                                                    </span>
                                                                    <span class="text-xs text-gray-500">({{ ucfirst($assignment->assignment_type) }})</span>
                                                                </div>
                                                                <button type="button" onclick="removeEmployeeAssignment(this)" class="text-red-600 hover:text-red-800 transition-colors">
                                                                    <i class="fas fa-trash text-xs"></i>
                                                                </button>
                                                            </div>
                                                            
                                                            <div class="grid grid-cols-1 md:grid-cols-4 gap-2">
                                                                <input type="hidden" name="service_types[{{ $index }}][employee_assignments][{{ $empIndex }}][id]" value="{{ $assignment->id }}">
                                                                
                                                                <select name="service_types[{{ $index }}][employee_assignments][{{ $empIndex }}][employee_id]" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                                                                    <option value="">Select Employee</option>
                                                                    @foreach($employees as $employee)
                                                                        <option value="{{ $employee->id }}" {{ $assignment->employee_id == $employee->id ? 'selected' : '' }}>
                                                                            {{ $employee->full_name }}{{ $employee->designations->isNotEmpty() ? ' - ' . $employee->designations->first()->name : '' }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                                
                                                                <select name="service_types[{{ $index }}][employee_assignments][{{ $empIndex }}][assignment_type]" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
                                                                    <option value="primary" {{ $assignment->assignment_type == 'primary' ? 'selected' : '' }}>Primary</option>
                                                                    <option value="backup" {{ $assignment->assignment_type == 'backup' ? 'selected' : '' }}>Backup</option>
                                                                    <option value="rotational" {{ $assignment->assignment_type == 'rotational' ? 'selected' : '' }}>Rotational</option>
                                                                    <option value="temporary" {{ $assignment->assignment_type == 'temporary' ? 'selected' : '' }}>Temporary</option>
                                                                </select>
                                                                
                                                                <input type="date" name="service_types[{{ $index }}][employee_assignments][{{ $empIndex }}][start_date]" value="{{ $assignment->start_date->format('Y-m-d') }}" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                                                                
                                                                <input type="date" name="service_types[{{ $index }}][employee_assignments][{{ $empIndex }}][end_date]" value="{{ $assignment->end_date?->format('Y-m-d') }}" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Ongoing">
                                                            </div>
                                                            
                                                            <div class="mt-2">
                                                                <textarea name="service_types[{{ $index }}][employee_assignments][{{ $empIndex }}][notes]" rows="1" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Assignment notes...">{{ $assignment->notes ?? '' }}</textarea>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                                
                                                @if($service->employeeAssignments->where('service_type_id', $serviceType->id)->count() === 0)
                                                    <div class="text-center py-4 text-gray-500">
                                                        <i class="fas fa-user-slash text-gray-300 text-2xl mb-1"></i>
                                                        <p class="text-xs">No employees assigned. Click "Add Employee" to get started.</p>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                        
                        <!-- Add Service Type Button -->
                        <div class="text-center">
                            <button type="button" onclick="addServiceType()" class="inline-flex items-center px-4 py-2 bg-green-600 text-white text-sm rounded-md hover:bg-green-700 transition-colors">
                                <i class="fas fa-plus mr-2"></i>Add Service Type
                            </button>
                        </div>
                        
                        @if(!isset($service) || $service->serviceTypes->count() === 0)
                            <div id="noServiceTypesMessage" class="text-center py-8 text-gray-500">
                                <i class="fas fa-cogs text-gray-300 text-3xl mb-2"></i>
                                <p class="text-sm">No service types added yet. Click "Add Service Type" to get started.</p>
                            </div>
                        @endif
                    </div>

                    <!-- Hidden templates -->
                    <template id="serviceTypeTemplate">
                        <div class="service-type-section bg-white border border-gray-200 rounded-lg">
                            <div class="bg-gradient-to-r from-gray-50 to-gray-100 px-6 py-4 border-b border-gray-200">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <div class="flex-shrink-0">
                                            <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
                                                <i class="fas fa-cogs text-blue-600"></i>
                                            </div>
                                        </div>
                                        <div>
                                            <h6 class="text-sm font-semibold text-gray-900 service-type-name">
                                                New Service Type
                                            </h6>
                                            <p class="text-xs text-gray-500">Manage employees and assignments for this service type</p>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-2">
                                        <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-bold employee-count">
                                            0 Employees
                                        </span>
                                        <button type="button" onclick="removeServiceType(this)" class="text-red-600 hover:text-red-800 transition-colors p-2">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="p-6">
                                <input type="hidden" name="service_types[SERVICE_TYPE_INDEX][id]" value="">
                                <input type="hidden" name="service_types[SERVICE_TYPE_INDEX][type]" value="" class="service-type-input">
                                
                                <!-- Service Type Selection -->
                                <div class="mb-6">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Service Type</label>
                                    <select class="service-type-select w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required onchange="updateServiceTypeCapabilities(this)">
                                        <option value="">Select Service Type</option>
                                        <option value="security">Security Services</option>
                                        <option value="cleaning">Cleaning Services</option>
                                        <option value="maintenance">Maintenance Services</option>
                                    </select>
                                </div>
                                
                                <!-- Service Type Capabilities -->
                                <div class="mb-6">
                                    <h6 class="text-xs font-semibold text-gray-700 mb-3">
                                        <i class="fas fa-star mr-1"></i>
                                        Service Capabilities
                                    </h6>
                                    <div class="capabilities-display grid grid-cols-2 md:grid-cols-3 gap-3 p-3 bg-gray-50 rounded-lg">
                                        <!-- Dynamically populated -->
                                    </div>
                                </div>
                                
                                <!-- Employee Assignments for this Service Type -->
                                <div class="mb-4">
                                    <div class="flex items-center justify-between mb-3">
                                        <h6 class="text-xs font-semibold text-gray-700">
                                            <i class="fas fa-users mr-1"></i>
                                            Employee Assignments
                                        </h6>
                                        <button type="button" onclick="addEmployeeAssignment(this)" class="inline-flex items-center px-2 py-1 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 transition-colors">
                                            <i class="fas fa-plus mr-1"></i>Add Employee
                                        </button>
                                    </div>
                                    
                                    <div class="employee-assignments space-y-2">
                                        <!-- Employee assignments will be dynamically added here -->
                                    </div>
                                    
                                    <div class="no-assignments-message text-center py-4 text-gray-500">
                                        <i class="fas fa-user-slash text-gray-300 text-2xl mb-1"></i>
                                        <p class="text-xs">No employees assigned. Click "Add Employee" to get started.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>

                    <template id="employeeAssignmentTemplate">
                        <div class="employee-assignment bg-gray-50 rounded-lg p-3 border border-gray-200">
                            <div class="flex items-center justify-between mb-2">
                                <div class="flex items-center gap-2">
                                    <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center">
                                        <i class="fas fa-user text-blue-600 text-xs"></i>
                                    </div>
                                    <span class="text-xs font-medium text-gray-900 employee-name">New Employee Assignment</span>
                                    <span class="text-xs text-gray-500 assignment-type-display">(Primary)</span>
                                </div>
                                <button type="button" onclick="removeEmployeeAssignment(this)" class="text-red-600 hover:text-red-800 transition-colors">
                                    <i class="fas fa-trash text-xs"></i>
                                </button>
                            </div>
                            
                            <div class="grid grid-cols-1 md:grid-cols-4 gap-2">
                                <select name="service_types[SERVICE_TYPE_INDEX][employee_assignments][EMPLOYEE_INDEX][employee_id]" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 employee-select" required>
                                    <option value="">Select Employee</option>
                                </select>
                                
                                <select name="service_types[SERVICE_TYPE_INDEX][employee_assignments][EMPLOYEE_INDEX][assignment_type]" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 assignment-type-select">
                                    <option value="primary">Primary</option>
                                    <option value="backup">Backup</option>
                                    <option value="rotational">Rotational</option>
                                    <option value="temporary">Temporary</option>
                                </select>
                                
                                <input type="date" name="service_types[SERVICE_TYPE_INDEX][employee_assignments][EMPLOYEE_INDEX][start_date]" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 start-date-input" required>
                                
                                <input type="date" name="service_types[SERVICE_TYPE_INDEX][employee_assignments][EMPLOYEE_INDEX][end_date]" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 end-date-input" placeholder="Ongoing">
                            </div>
                            
                            <div class="mt-2">
                                <textarea name="service_types[SERVICE_TYPE_INDEX][employee_assignments][EMPLOYEE_INDEX][notes]" rows="1" class="w-full px-2 py-1 text-xs border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 assignment-notes" placeholder="Assignment notes..."></textarea>
                            </div>
                        </div>
                    </template>

                    <div class="flex justify-end gap-3">
                        <a href="{{ route('services.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors">
                            <i class="fas fa-times mr-2"></i>Cancel
                        </a>
                        <button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
                            <i class="fas fa-save mr-2"></i>
                            @if(isset($service))
                                Update Sites
                            @else
                                Create Sites
                            @endif
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
// Service type and employee assignment functionality
let serviceTypeCounter = 0;
let employeeAssignmentCounters = {};
let employeesData = {};

// Initialize employees data with designations
employeesData = @json($employees->map(function($employee) {
    return [
        'id' => $employee->id,
        'name' => $employee->full_name . ($employee->designations->isNotEmpty() ? ' - ' . $employee->designations->first()->name : ''),
        'full_name' => $employee->full_name
    ];
})->keyBy('id'));

// Service type capabilities
const serviceCapabilities = {
    'security': ['Geofencing', 'Incident Logging', 'Scheduling', 'Guard Assignment', 'Reporting'],
    'cleaning': ['Task Scheduling', 'Task Tracking', 'Reporting', 'Inventory', 'Time Tracking'],
    'maintenance': ['Work Orders', 'Maintenance Logging', 'Task Scheduling', 'Reporting', 'Time Tracking']
};

function addServiceType() {
    const container = document.getElementById('serviceTypesContainer');
    const template = document.getElementById('serviceTypeTemplate');
    const noServiceTypesMessage = document.getElementById('noServiceTypesMessage');
    
    // Hide no service types message
    if (noServiceTypesMessage) {
        noServiceTypesMessage.style.display = 'none';
    }
    
    // Clone template
    const serviceTypeDiv = template.content.cloneNode(true).firstElementChild;
    
    // Replace SERVICE_TYPE_INDEX with actual counter
    const index = serviceTypeCounter++;
    const html = serviceTypeDiv.innerHTML.replace(/SERVICE_TYPE_INDEX/g, index);
    serviceTypeDiv.innerHTML = html;
    
    // Initialize employee assignment counter for this service type
    employeeAssignmentCounters[index] = 0;
    
    // Add event listener for service type selection
    const serviceTypeSelect = serviceTypeDiv.querySelector('.service-type-select');
    serviceTypeSelect.addEventListener('change', function() {
        updateServiceTypeCapabilities(this);
        updateServiceTypeName(this);
    });
    
    container.appendChild(serviceTypeDiv);
}

function removeServiceType(button) {
    const serviceTypeDiv = button.closest('.service-type-section');
    serviceTypeDiv.remove();
    
    // Show no service types message if no service types left
    const container = document.getElementById('serviceTypesContainer');
    const serviceTypes = container.querySelectorAll('.service-type-section');
    const noServiceTypesMessage = document.getElementById('noServiceTypesMessage');
    
    if (serviceTypes.length === 0 && noServiceTypesMessage) {
        noServiceTypesMessage.style.display = 'block';
    }
}

function updateServiceTypeCapabilities(select) {
    const serviceTypeDiv = select.closest('.service-type-section');
    const serviceType = select.value;
    const capabilitiesDisplay = serviceTypeDiv.querySelector('.capabilities-display');
    const serviceTypeInput = serviceTypeDiv.querySelector('.service-type-input');
    
    // Update hidden input
    serviceTypeInput.value = serviceType;
    
    // Update capabilities display
    const capabilities = serviceCapabilities[serviceType] || [];
    
    capabilitiesDisplay.innerHTML = capabilities.map(capability => `
        <div class="flex items-center gap-2">
            <svg class="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
            </svg>
            <span class="text-xs text-gray-900">${capability}</span>
        </div>
    `).join('');
}

function updateServiceTypeName(select) {
    const serviceTypeDiv = select.closest('.service-type-section');
    const serviceName = serviceTypeDiv.querySelector('.service-type-name');
    const serviceType = select.value;
    
    if (serviceType) {
        serviceName.textContent = select.options[select.selectedIndex].text;
    } else {
        serviceName.textContent = 'New Service Type';
    }
}

function addEmployeeAssignment(button) {
    const serviceTypeDiv = button.closest('.service-type-section');
    const assignmentsContainer = serviceTypeDiv.querySelector('.employee-assignments');
    const noAssignmentsMessage = serviceTypeDiv.querySelector('.no-assignments-message');
    const template = document.getElementById('employeeAssignmentTemplate');
    
    // Get service type index from hidden input name
    const serviceTypeIndex = serviceTypeDiv.querySelector('input[name*="service_types["]').name.match(/service_types\[(\d+)\]/)[1];
    
    // Hide no assignments message
    if (noAssignmentsMessage) {
        noAssignmentsMessage.style.display = 'none';
    }
    
    // Clone template
    const assignmentDiv = template.content.cloneNode(true).firstElementChild;
    
    // Replace placeholders with actual counters
    const employeeIndex = employeeAssignmentCounters[serviceTypeIndex]++;
    let html = assignmentDiv.innerHTML.replace(/SERVICE_TYPE_INDEX/g, serviceTypeIndex);
    html = html.replace(/EMPLOYEE_INDEX/g, employeeIndex);
    assignmentDiv.innerHTML = html;
    
    // Populate employee options
    const employeeSelect = assignmentDiv.querySelector('.employee-select');
    Object.values(employeesData).forEach(employee => {
        const option = document.createElement('option');
        option.value = employee.id;
        option.textContent = employee.name;
        employeeSelect.appendChild(option);
    });
    
    // Set default start date to today
    const today = new Date().toISOString().split('T')[0];
    assignmentDiv.querySelector('.start-date-input').value = today;
    
    // Add event listeners
    employeeSelect.addEventListener('change', function() {
        const selectedEmployee = employeesData[this.value];
        const employeeName = selectedEmployee ? selectedEmployee.full_name : 'New Employee Assignment';
        assignmentDiv.querySelector('.employee-name').textContent = employeeName;
    });
    
    const typeSelect = assignmentDiv.querySelector('.assignment-type-select');
    typeSelect.addEventListener('change', function() {
        const typeName = this.options[this.selectedIndex].text;
        assignmentDiv.querySelector('.assignment-type-display').textContent = '(' + typeName + ')';
    });
    
    assignmentsContainer.appendChild(assignmentDiv);
    updateEmployeeCount(serviceTypeDiv);
}

function removeEmployeeAssignment(button) {
    const assignmentDiv = button.closest('.employee-assignment');
    const serviceTypeDiv = button.closest('.service-type-section');
    
    assignmentDiv.remove();
    updateEmployeeCount(serviceTypeDiv);
    
    // Show no assignments message if no assignments left
    const assignmentsContainer = serviceTypeDiv.querySelector('.employee-assignments');
    const assignments = assignmentsContainer.querySelectorAll('.employee-assignment');
    const noAssignmentsMessage = serviceTypeDiv.querySelector('.no-assignments-message');
    
    if (assignments.length === 0 && noAssignmentsMessage) {
        noAssignmentsMessage.style.display = 'block';
    }
}

function updateEmployeeCount(serviceTypeDiv) {
    const assignmentsContainer = serviceTypeDiv.querySelector('.employee-assignments');
    const assignments = assignmentsContainer.querySelectorAll('.employee-assignment');
    const countSpan = serviceTypeDiv.querySelector('.employee-count');
    
    if (countSpan) {
        countSpan.textContent = assignments.length + ' Employees';
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    // Add event listeners to existing service type selects
    const existingServiceTypeSelects = document.querySelectorAll('.service-type-select');
    existingServiceTypeSelects.forEach(function(select) {
        select.addEventListener('change', function() {
            updateServiceTypeCapabilities(this);
            updateServiceTypeName(this);
        });
        // Initialize capabilities for existing service types
        if (select.value) {
            updateServiceTypeCapabilities(select);
        }
    });
    
    // Add event listeners to existing employee selects
    const existingEmployeeSelects = document.querySelectorAll('.employee-select');
    existingEmployeeSelects.forEach(function(select) {
        select.addEventListener('change', function() {
            const selectedEmployee = employeesData[this.value];
            const employeeName = selectedEmployee ? selectedEmployee.full_name : 'Unknown Employee';
            const assignmentDiv = this.closest('.employee-assignment');
            assignmentDiv.querySelector('.employee-name').textContent = employeeName;
        });
    });
    
    // Add event listeners to existing assignment type selects
    const existingAssignmentTypeSelects = document.querySelectorAll('.assignment-type-select');
    existingAssignmentTypeSelects.forEach(function(select) {
        select.addEventListener('change', function() {
            const typeName = this.options[this.selectedIndex].text;
            const assignmentDiv = this.closest('.employee-assignment');
            const typeDisplay = assignmentDiv.querySelector('.assignment-type-display');
            if (typeDisplay) {
                typeDisplay.textContent = '(' + typeName + ')';
            }
        });
    });
});
</script>
@endsection