@extends('layouts.app')

@section('title', 'Alert Details')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="flex items-center mb-6">
        <a href="{{ route('alerts.index') }}" class="text-gray-500 hover:text-gray-700 mr-4">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
        </a>
        <h1 class="text-2xl font-semibold text-gray-900">Alert Details</h1>
        <div class="ml-auto">
            @if(!$alert->is_resolved)
                <form action="{{ route('alerts.resolve', $alert->id) }}" method="POST" class="inline" onsubmit="return confirm('Mark this alert as resolved?')">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                        Mark as Resolved
                    </button>
                </form>
            @else
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                    Resolved
                </span>
            @endif
        </div>
    </div>

    <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-8">
        <div class="px-4 py-5 sm:px-6">
            <div class="flex items-center">
                @php
                    $alertType = [
                        'leak' => ['bg-red-100 text-red-800', 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'],
                        'low_gas' => ['bg-yellow-100 text-yellow-800', 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z'],
                        'maintenance' => ['bg-blue-100 text-blue-800', 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'],
                    ][$alert->type] ?? ['bg-gray-100 text-gray-800', 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'];
                @endphp
                <div class="flex-shrink-0 h-10 w-10 rounded-full {{ $alertType[0] }} flex items-center justify-center">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $alertType[1] }}" />
                    </svg>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg leading-6 font-medium text-gray-900">
                        {{ ucfirst(str_replace('_', ' ', $alert->type)) }} Alert
                    </h3>
                    <p class="mt-1 max-w-2xl text-sm text-gray-500">
                        {{ $alert->description }}
                    </p>
                </div>
            </div>
        </div>
        <div class="border-t border-gray-200 px-4 py-5 sm:px-6">
            <dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Status</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        @if($alert->is_resolved)
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                Resolved
                            </span>
                        @else
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                Active
                            </span>
                        @endif
                    </dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Alert Type</dt>
                    <dd class="mt-1 text-sm text-gray-900 capitalize">{{ str_replace('_', ' ', $alert->type) }}</dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Gas Level</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        <div class="flex items-center">
                            <div class="w-24 bg-gray-200 rounded-full h-2.5 mr-2">
                                <div class="bg-{{ $alert->gas_level < 20 ? 'red' : ($alert->gas_level < 50 ? 'yellow' : 'green') }}-500 h-2.5 rounded-full" style="width: {{ $alert->gas_level }}%"></div>
                            </div>
                            <span>{{ $alert->gas_level }}%</span>
                        </div>
                    </dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Battery Level</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        <div class="flex items-center">
                            <div class="w-24 bg-gray-200 rounded-full h-2.5 mr-2">
                                <div class="bg-{{ $alert->battery_level < 20 ? 'red' : ($alert->battery_level < 50 ? 'yellow' : 'green') }}-500 h-2.5 rounded-full" style="width: {{ $alert->battery_level }}%"></div>
                            </div>
                            <span>{{ $alert->battery_level }}%</span>
                        </div>
                    </dd>
                </div>
                @if($alert->sensor)
                    <div class="sm:col-span-1">
                        <dt class="text-sm font-medium text-gray-500">Sensor ID</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            <a href="{{ route('sensors.show', $alert->sensor_id) }}" class="text-primary-600 hover:text-primary-900">
                                {{ $alert->sensor->device_uuid }}
                            </a>
                        </dd>
                    </div>
                    <div class="sm:col-span-1">
                        <dt class="text-sm font-medium text-gray-500">Gas Company</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            @if($alert->sensor->gasCompany)
                                <a href="{{ route('gas-companies.show', $alert->sensor->gas_company_id) }}" class="text-primary-600 hover:text-primary-900">
                                    {{ $alert->sensor->gasCompany->name }}
                                </a>
                            @else
                                N/A
                            @endif
                        </dd>
                    </div>
                @endif
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Triggered By</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        @if($alert->user)
                            {{ $alert->user->name }}
                            <span class="text-gray-500">({{ $alert->user->phone_number }})</span>
                        @else
                            System
                        @endif
                    </dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Triggered At</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        {{ $alert->created_at->format('M j, Y g:i A') }}
                        <span class="text-gray-500">({{ $alert->created_at->diffForHumans() }})</span>
                    </dd>
                </div>
                @if($alert->is_resolved)
                    <div class="sm:col-span-1">
                        <dt class="text-sm font-medium text-gray-500">Resolved At</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            {{ $alert->resolved_at->format('M j, Y g:i A') }}
                            <span class="text-gray-500">({{ $alert->resolved_at->diffForHumans() }})</span>
                        </dd>
                    </div>
                    <div class="sm:col-span-1">
                        <dt class="text-sm font-medium text-gray-500">Resolution Time</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            {{ $alert->created_at->diffForHumans($alert->resolved_at, true) }}
                        </dd>
                    </div>
                @endif
            </dl>
        </div>
    </div>

    @if($alert->sensor && $alert->sensor->gasCompany)
        <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-8">
            <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
                <h3 class="text-lg leading-6 font-medium text-gray-900">
                    Gas Company Contact Information
                </h3>
            </div>
            <div class="px-4 py-5 sm:p-6">
                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                    <div>
                        <h4 class="text-sm font-medium text-gray-500">Company Name</h4>
                        <p class="mt-1 text-sm text-gray-900">{{ $alert->sensor->gasCompany->name }}</p>
                    </div>
                    <div>
                        <h4 class="text-sm font-medium text-gray-500">Contact Email</h4>
                        <p class="mt-1 text-sm text-gray-900">
                            <a href="mailto:{{ $alert->sensor->gasCompany->contact_email }}" class="text-primary-600 hover:text-primary-900">
                                {{ $alert->sensor->gasCompany->contact_email }}
                            </a>
                        </p>
                    </div>
                    <div>
                        <h4 class="text-sm font-medium text-gray-500">Contact Phone</h4>
                        <p class="mt-1 text-sm text-gray-900">
                            <a href="tel:{{ $alert->sensor->gasCompany->contact_phone }}" class="text-primary-600 hover:text-primary-900">
                                {{ $alert->sensor->gasCompany->contact_phone }}
                            </a>
                        </p>
                    </div>
                    <div>
                        <h4 class="text-sm font-medium text-gray-500">Address</h4>
                        <p class="mt-1 text-sm text-gray-900">{{ $alert->sensor->gasCompany->address }}</p>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div class="flex justify-end">
        <a href="{{ route('alerts.index') }}" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
            Back to Alerts
        </a>
    </div>
</div>
@endsection