@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-3 gap-6">
                            <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. Central Site">
                                    @error('service_name')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Contact Information -->
                        <div class="mb-8">
                            <div class="w-full">
                                <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                    <i class="fas fa-user-tie mr-2"></i>
                                    Contact Information
                                </h6>
                                <p class="text-gray-500 text-sm">Primary contact details for this site.</p>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div>
                                <div class="mb-4">
                                    <label for="phone" class="block text-sm font-medium text-gray-700 mb-2"> Contact
                                        Phone</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('phone') border-red-500 @enderror"
                                        id="phone" name="phone" value="{{ old('phone', $service->phone ?? '') }}" required
                                        placeholder="e.g. +1 234 567 8900">
                                    @error('phone')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div>
                                <div class="mb-4">
                                    <label for="contact_person" class="block text-sm font-medium text-gray-700 mb-2">Contact
                                        Person</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('contact_person') border-red-500 @enderror"
                                        id="contact_person" name="contact_person"
                                        value="{{ old('contact_person', $service->contact_person ?? '') }}" required
                                        placeholder="e.g. John Smith">
                                    @error('contact_person')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div>
                                <div class="mb-4">
                                    <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Contact
                                        Email</label>
                                    <input type="email"
                                        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('email') border-red-500 @enderror"
                                        id="email" name="email" value="{{ old('email', $service->email ?? '') }}" required
                                        placeholder="e.g. john@example.com">
                                    @error('email')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Client Login Credentials -->
                        <div class="mb-8">
                            <div class="w-full">
                                <h6 class="text-blue-600 font-semibold text-sm mb-3">
                                    <i class="fas fa-user-shield mr-2"></i>
                                    Client Login Credentials
                                </h6>
                                <p class="text-gray-500 text-sm">Enter client user name to create a login account for viewing
                                    reports. Optional: can also be used for login.</p>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <div class="mb-4">
                                    <label for="client_email" class="block text-sm font-medium text-gray-700 mb-2">Client
                                        User 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-purple-500 focus:border-purple-500 @error('client_email') border-red-500 @enderror"
                                        id="client_email" name="client_email"
                                        value="{{ old('client_email', $service->clientUser->email ?? '') }}"
                                        placeholder="e.g. client_username">
                                    @error('client_email')
                                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                            <div>
                                <div class="mb-4">
                                    <label for="client_phone" class="block text-sm font-medium text-gray-700 mb-2">Client
                                        Phone</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-purple-500 focus:border-purple-500 @error('client_phone') border-red-500 @enderror"
                                        id="client_phone" name="client_phone"
                                        value="{{ old('client_phone', $service->phone ?? '') }}"
                                        placeholder="e.g. +60123456789">
                                    @error('client_phone')
                                        <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="client_password" class="block text-sm font-medium text-gray-700 mb-2">Client Password</label>
                                        <input type="password"
                                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 @error('client_password') border-red-500 @enderror"
                                            id="client_password" name="client_password"
                                            placeholder="Leave blank to auto-generate">
                                        @error('client_password')
                                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                        @enderror
                                        <p class="text-xs text-gray-500 mt-1">Leave blank to auto-generate a secure password</p>
                                    </div>
                                </div>
                            </div>

                            @if(isset($service) && $service->clientUser)
                                <div class="mb-4">
                                    <label class="flex items-center">
                                        <input type="checkbox" name="remove_client_user" value="1" class="mr-2">
                                        <span class="text-sm text-gray-700">Remove client user account</span>
                                    </label>
                                    <p class="text-xs text-gray-500 mt-1">Check this to remove the client's login access</p>
                                </div>
                            @endif

                            <div class="grid grid-cols-1 gap-6">
                                <div>
                                    <div class="mb-4">
                                        <label for="address"
                                            class="block text-sm font-medium text-gray-700 mb-2">Address</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('address') border-red-500 @enderror"
                                            id="address" name="address" rows="2" required
                                            placeholder="Enter complete address">{{ old('address', $service->address ?? '') }}</textarea>
                                        @error('address')
                                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                <div>
                                    <div class="mb-4">
                                        <label for="state_id" class="block text-sm font-medium text-gray-700 mb-2">State</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('state_id') border-red-500 @enderror"
                                            id="state_id" name="state_id" required>
                                            <option value="">Select State</option>
                                            @foreach($states as $state)
                                                <option value="{{ $state->id }}" {{ old('state_id', $service->state_id ?? '') == $state->id ? 'selected' : '' }}>
                                                    {{ $state->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('state_id')
                                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div>
                                    <div class="mb-4">
                                        <label for="district_id"
                                            class="block text-sm font-medium text-gray-700 mb-2">District</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('district_id') border-red-500 @enderror"
                                            id="district_id" name="district_id" disabled required>
                                            <option value="">Select District</option>
                                            @foreach($districts as $district)
                                                <option value="{{ $district->id }}" data-state-id="{{ $district->state_id }}" {{ old('district_id', $service->district_id ?? '') == $district->id ? 'selected' : '' }}>
                                                    {{ $district->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('district_id')
                                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div>
                                    <div class="mb-4">
                                        <label for="zone_id" class="block text-sm font-medium text-gray-700 mb-2">Zone</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('zone_id') border-red-500 @enderror"
                                            id="zone_id" name="zone_id" required>
                                            <option value="">Select Zone</option>
                                            @foreach($zones as $zone)
                                                <option value="{{ $zone->id }}" {{ old('zone_id', $service->zone_id ?? '') == $zone->id ? 'selected' : '' }}>
                                                    {{ $zone->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('zone_id')
                                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div>
                                    <div class="mb-4">
                                        <label for="postal_code" class="block text-sm font-medium text-gray-700 mb-2">Postal
                                            Code</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('postal_code') border-red-500 @enderror"
                                            id="postal_code" name="postal_code"
                                            value="{{ old('postal_code', $service->postal_code ?? '') }}" required
                                            placeholder="e.g. 10001">
                                        @error('postal_code')
                                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <!-- Service Types and Employee Assignments -->
                            <div class="mb-8">
                                <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 m-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 Site
                                    @else
                                        Create Site
                                    @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']
            };

            // State and District cascading dropdown functionality
                document.addEventListener('DOMContentLoaded', function () {
                    const stateSelect = document.getElementById('state_id');
                    const districtSelect = document.getElementById('district_id');

                    if (stateSelect && districtSelect) {
                        // Store all district options
                        const allDistrictOptions = Array.from(districtSelect.querySelectorAll('option[data-state-id]'));

                        // Handle state selection change
                        stateSelect.addEventListener('change', function () {
                            const selectedStateId = this.value;

                            // Clear district options
                            districtSelect.innerHTML = '<option value="">Select District</option>';

                            if (selectedStateId) {
                                // Enable district dropdown
                                districtSelect.disabled = false;

                                // Filter and add districts for selected state
                                allDistrictOptions.forEach(function (option) {
                                    if (option.getAttribute('data-state-id') === selectedStateId) {
                                        districtSelect.appendChild(option.cloneNode(true));
                                    }
                                });
                            } else {
                                // Disable district dropdown if no state selected
                                districtSelect.disabled = true;
                                districtSelect.innerHTML = '<option value="">Select State First</option>';
                            }
                        });

                        // Initialize on page load (for edit mode)
                        if (stateSelect.value) {
                            // Store the currently selected district value before clearing
                            const currentDistrictValue = districtSelect.value;

                            // Trigger the state change event to populate districts
                            stateSelect.dispatchEvent(new Event('change'));

                            // Re-select the previously selected district if it exists
                            if (currentDistrictValue) {
                                setTimeout(function () {
                                    districtSelect.value = currentDistrictValue;
                                }, 0);
                            }
                        } else {
                            // Ensure district is disabled if no state is selected
                            districtSelect.disabled = true;
                        }
                    }
                });

                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