@extends('layouts.app')

@section('title', $service->service_name)

@section('content')
<div class="min-h-screen bg-gray-50 p-4 lg:p-6">
    <div class="max-w-5xl mx-auto">
        <!-- Header with Back Button -->
        <div class="flex justify-between items-start mb-6">
            <div>
                <a href="{{ route('services.index') }}" class="text-blue-600 hover:text-blue-900 text-sm inline-flex items-center mb-2">
                    <i class="fas fa-arrow-left mr-1"></i>Back to Sites
                </a>
                <h4 class="text-3xl font-bold text-gray-900">{{ $service->service_name }}</h4>
                <p class="text-gray-500 mt-1">{{ $service->zone_area ?? 'Service Details' }}</p>
            </div>
            <div class="flex gap-2">
                <a href="{{ route('services.edit', $service) }}" class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors">
                    <i class="fas fa-edit mr-2"></i>Edit Site
                </a>
                <button onclick="confirmDelete('{{ route('services.destroy', $service) }}')" class="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors">
                    <i class="fas fa-trash mr-2"></i>Delete
                </button>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Main Content -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Service Overview Card -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-blue-100">
                        <h5 class="text-lg font-semibold text-gray-900 flex items-center">
                            <i class="fas fa-info-circle mr-2 text-blue-600"></i>Site Overview
                        </h5>
                    </div>
                    <div class="px-6 py-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <p class="text-xs font-semibold text-gray-500 uppercase">Service Types</p>
                                <div class="mt-2 space-y-1">
                                    @if($service->serviceTypes->count() > 0)
                                        @foreach($service->serviceTypes as $serviceType)
                                            <span class="px-2 py-1 inline-flex text-xs font-semibold rounded-full
                                                @if($serviceType->type == 'security') bg-purple-100 text-purple-800
                                                @elseif($serviceType->type == 'cleaning') bg-green-100 text-green-800
                                                @elseif($serviceType->type == 'maintenance') bg-orange-100 text-orange-800
                                                @else bg-gray-100 text-gray-800 @endif">
                                                @if($serviceType->type == 'security')
                                                    <i class="fas fa-shield mr-1"></i>
                                                @elseif($serviceType->type == 'cleaning')
                                                    <i class="fas fa-broom mr-1"></i>
                                                @elseif($serviceType->type == 'maintenance')
                                                    <i class="fas fa-wrench mr-1"></i>
                                                @endif
                                                {{ $serviceType->name }}
                                            </span>
                                        @endforeach
                                    @else
                                        <span class="text-xs text-gray-500">No service types assigned</span>
                                    @endif
                                </div>
                            </div>

                            <div>
                                <p class="text-xs font-semibold text-gray-500 uppercase">Status</p>
                                <div class="mt-2">
                                    @if($service->is_active)
                                        <span class="px-3 py-1 inline-flex text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                            <i class="fas fa-concierge-bell mr-2"></i>Sites
                                        </span>
                                    @else
                                        <span class="px-3 py-1 inline-flex text-xs font-semibold rounded-full bg-red-100 text-red-800">
                                            <i class="fas fa-times-circle mr-1"></i>Inactive
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div>
                                <p class="text-xs font-semibold text-gray-500 uppercase">Client</p>
                                <p class="mt-2 text-sm text-gray-900 font-medium">
                                    @if($service->client)
                                        <a href="{{ route('clients.show', $service->client) }}" class="text-blue-600 hover:text-blue-900">
                                            {{ $service->client->name }}
                                        </a>
                                    @else
                                        <span class="text-gray-500">N/A</span>
                                    @endif
                                </p>
                            </div>

                            <div>
                                <p class="text-xs font-semibold text-gray-500 uppercase">Location</p>
                                <p class="mt-2 text-sm text-gray-900 font-medium">
                                    {{ $service->location->name ?? 'N/A' }}
                                </p>
                            </div>

                            <div class="md:col-span-2">
                                <p class="text-xs font-semibold text-gray-500 uppercase">Zone / Area</p>
                                <p class="mt-2 text-sm text-gray-900">{{ $service->zone_area ?? 'Not specified' }}</p>
                            </div>
                        </div>

                        @if($service->description)
                            <div class="mt-6 pt-6 border-t border-gray-200">
                                <p class="text-xs font-semibold text-gray-500 uppercase">Description</p>
                                <p class="mt-2 text-sm text-gray-900">{{ $service->description }}</p>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Service Types & Employees Card -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-green-50 to-green-100">
                        <h5 class="text-lg font-semibold text-gray-900 flex items-center">
                            <i class="fas fa-users mr-2 text-green-600"></i>Service Types & Employee Assignments
                        </h5>
                    </div>
                    <div class="px-6 py-4">
                        @if($service->serviceTypes->count() > 0)
                            <div class="space-y-6">
                                @foreach($service->serviceTypes as $serviceType)
                                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                                        <div class="px-4 py-3 bg-gray-50 border-b border-gray-200">
                                            <div class="flex items-center justify-between">
                                                <div class="flex items-center gap-2">
                                                    <span class="px-2 py-1 inline-flex text-xs font-semibold rounded-full
                                                        @if($serviceType->type == 'security') bg-purple-100 text-purple-800
                                                        @elseif($serviceType->type == 'cleaning') bg-green-100 text-green-800
                                                        @elseif($serviceType->type == 'maintenance') bg-orange-100 text-orange-800
                                                        @else bg-gray-100 text-gray-800 @endif">
                                                        @if($serviceType->type == 'security')
                                                            <i class="fas fa-shield mr-1"></i>
                                                        @elseif($serviceType->type == 'cleaning')
                                                            <i class="fas fa-broom mr-1"></i>
                                                        @elseif($serviceType->type == 'maintenance')
                                                            <i class="fas fa-wrench mr-1"></i>
                                                        @endif
                                                        {{ $serviceType->name }}
                                                    </span>
                                                    <span class="text-sm text-gray-600">
                                                        ({{ $service->employeeAssignments->where('service_type_id', $serviceType->id)->where('is_active', true)->count() }} active employees)
                                                    </span>
                                                </div>
                                                <div class="text-xs text-gray-500">
                                                    {{ $serviceType->description }}
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- Service Type Capabilities -->
                                        <div class="px-4 py-3 bg-blue-50 border-b border-blue-200">
                                            <p class="text-xs font-semibold text-blue-700 mb-2">Capabilities</p>
                                            <div class="flex flex-wrap gap-2">
                                                @if($serviceType->capabilities)
                                                    @foreach($serviceType->capabilities as $capability)
                                                        <span class="px-2 py-1 bg-white border border-blue-200 text-xs text-blue-700 rounded">
                                                            <i class="fas fa-check text-green-500 mr-1"></i>{{ $capability }}
                                                        </span>
                                                    @endforeach
                                                @else
                                                    <span class="text-xs text-gray-500">No capabilities defined</span>
                                                @endif
                                            </div>
                                        </div>
                                        
                                        <!-- Employee Assignments for this Service Type -->
                                        <div class="px-4 py-3">
                                            @if($service->employeeAssignments->where('service_type_id', $serviceType->id)->count() > 0)
                                                <div class="space-y-2">
                                                    @foreach($service->employeeAssignments->where('service_type_id', $serviceType->id) as $assignment)
                                                        <div class="flex justify-between items-center p-3 bg-white border border-gray-200 rounded-md hover:bg-gray-50 transition-colors">
                                                            <div class="flex items-center gap-3">
                                                                <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
                                                                    <i class="fas fa-user text-blue-600 text-sm"></i>
                                                                </div>
                                                                <div>
                                                                    <p class="text-sm font-medium text-gray-900">{{ $assignment->employee?->full_name ?? 'Unknown Employee' }}</p>
                                                                    <p class="text-xs text-gray-500">
                                                                        <i class="fas fa-calendar mr-1"></i>
                                                                        {{ $assignment->start_date->format('M d, Y') }} 
                                                                        @if($assignment->end_date)
                                                                            - {{ $assignment->end_date->format('M d, Y') }}
                                                                        @else
                                                                            - Ongoing
                                                                        @endif
                                                                    </p>
                                                                    @if($assignment->notes)
                                                                        <p class="text-xs text-gray-600 mt-1">{{ $assignment->notes }}</p>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                            <div class="flex items-center gap-2">
                                                                <span class="px-2 py-1 text-xs font-semibold rounded-full {{ $assignment->is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                                                    {{ $assignment->is_active ? 'Active' : 'Inactive' }}
                                                                </span>
                                                                <span class="px-2 py-1 bg-gray-100 text-gray-700 text-xs font-semibold rounded">
                                                                    {{ ucfirst($assignment->assignment_type) }}
                                                                </span>
                                                                <a href="#" class="text-blue-600 hover:text-blue-900 text-xs font-medium">Edit</a>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            @else
                                                <div class="text-center py-4 text-gray-500">
                                                    <i class="fas fa-user-slash text-gray-300 text-2xl mb-2 block"></i>
                                                    <p class="text-sm">No employees assigned to {{ $serviceType->name }} service.</p>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-8 text-gray-500">
                                <i class="fas fa-cogs text-gray-300 text-3xl mb-2 block"></i>
                                <p class="text-sm">No service types assigned to this site.</p>
                                <a href="{{ route('services.edit', $service) }}" class="text-blue-600 hover:text-blue-900 text-sm font-medium mt-2 inline-block">Add service types</a>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Service Relationships Card -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-purple-50 to-purple-100">
                        <h5 class="text-lg font-semibold text-gray-900 flex items-center">
                            <i class="fas fa-link mr-2 text-purple-600"></i>Site Relationships
                        </h5>
                    </div>
                    <div class="px-6 py-4">
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                            <!-- Assigned Employees -->
                            <div class="p-4 bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg border border-blue-200">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-xs font-semibold text-blue-700 uppercase">Assigned Employees</p>
                                        <p class="text-2xl font-bold text-blue-900 mt-1">
                                            {{ $service->employeeAssignments()->count() }}
                                        </p>
                                    </div>
                                    <i class="fas fa-users text-blue-300 text-3xl"></i>
                                </div>
                            </div>

                            <!-- Active Assignments -->
                            <div class="p-4 bg-gradient-to-br from-green-50 to-green-100 rounded-lg border border-green-200">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-xs font-semibold text-green-700 uppercase">Active Assignments</p>
                                        <p class="text-2xl font-bold text-green-900 mt-1">
                                            {{ $service->employeeAssignments()->where('is_active', true)->count() }}
                                        </p>
                                    </div>
                                    <i class="fas fa-check-circle text-green-300 text-3xl"></i>
                                </div>
                            </div>

                            <!-- Service Status -->
                            <div class="p-4 bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg border border-purple-200">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-xs font-semibold text-purple-700 uppercase">Site Status</p>
                                        <p class="text-2xl font-bold text-purple-900 mt-1">
                                            @if($service->is_active)
                                                <span class="text-green-600">Active</span>
                                            @else
                                                <span class="text-red-600">Inactive</span>
                                            @endif
                                        </p>
                                    </div>
                                    <i class="fas fa-toggle-on text-purple-300 text-3xl"></i>
                                </div>
                            </div>

                            <!-- Geofences -->
                            <div class="p-4 bg-gradient-to-br from-red-50 to-red-100 rounded-lg border border-red-200">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-xs font-semibold text-red-700 uppercase">Geofences</p>
                                        <p class="text-2xl font-bold text-red-900 mt-1">
                                            {{ $service->geofences()->count() }}
                                        </p>
                                    </div>
                                    <i class="fas fa-ring text-red-300 text-3xl"></i>
                                </div>
                            </div>

                            <!-- Created Date -->
                            <div class="p-4 bg-gradient-to-br from-yellow-50 to-yellow-100 rounded-lg border border-yellow-200">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-xs font-semibold text-yellow-700 uppercase">Created</p>
                                        <p class="text-sm font-bold text-yellow-900 mt-1">
                                            {{ $service->created_at->format('M d, Y') }}
                                        </p>
                                    </div>
                                    <i class="fas fa-calendar text-yellow-300 text-3xl"></i>
                                </div>
                            </div>

                            <!-- Service Types -->
                            <div class="p-4 bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-lg border border-indigo-200">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-xs font-semibold text-indigo-700 uppercase">Service Types</p>
                                        <p class="text-sm font-bold text-indigo-900 mt-1">
                                            {{ $service->serviceTypes->count() }}
                                        </p>
                                    </div>
                                    <i class="fas fa-cogs text-indigo-300 text-3xl"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="space-y-6">
                <!-- Quick Stats Card -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h6 class="text-sm font-semibold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-chart-pie mr-2 text-blue-600"></i>Quick Stats
                    </h6>
                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">Active Employees</span>
                            <span class="text-lg font-bold text-gray-900">
                                {{ $service->employeeAssignments()->where('is_active', true)->count() }}
                            </span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">Total Assignments</span>
                            <span class="text-lg font-bold text-gray-900">
                                {{ $service->employeeAssignments()->count() }}
                            </span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">Service Types</span>
                            <span class="text-lg font-bold text-gray-900">
                                {{ $service->serviceTypes->count() }}
                            </span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-600">Geofences</span>
                            <span class="text-lg font-bold text-gray-900">
                                {{ $service->geofences()->count() }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Service Status Card -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h6 class="text-sm font-semibold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-heartbeat mr-2 text-green-600"></i>Service Status
                    </h6>
                    <div class="space-y-3">
                        <div>
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-xs font-semibold text-gray-600">Overall Health</span>
                                <span class="text-xs font-semibold text-green-600">Good</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-green-500 h-2 rounded-full" style="width: 85%"></div>
                            </div>
                        </div>

                        <div class="pt-3 border-t border-gray-200">
                            <p class="text-xs text-gray-600 flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                Site is operational
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Metadata Card -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h6 class="text-sm font-semibold text-gray-900 mb-4 flex items-center">
                        <i class="fas fa-info mr-2 text-gray-600"></i>Metadata
                    </h6>
                    <div class="space-y-3 text-xs">
                        <div>
                            <p class="text-gray-500">Created</p>
                            <p class="text-gray-900 font-medium">{{ $service->created_at->format('M d, Y h:i A') }}</p>
                        </div>
                        <div>
                            <p class="text-gray-500">Last Updated</p>
                            <p class="text-gray-900 font-medium">{{ $service->updated_at->format('M d, Y h:i A') }}</p>
                        </div>
                        <div>
                            <p class="text-gray-500">Site ID</p>
                            <p class="text-gray-900 font-medium">{{ $service->id }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function confirmDelete(deleteUrl) {
    if (confirm('Are you sure you want to delete this site? This action cannot be undone.')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = deleteUrl;
        form.innerHTML = '@csrf @method("DELETE")';
        document.body.appendChild(form);
        form.submit();
    }
}
</script>
@endsection