@extends('layouts.app')

@section('title', 'Refill Request #' . $refillRequest->id)

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
            <a href="{{ route('refill-requests.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">Refill Request #{{ $refillRequest->id }}</h1>
        </div>
        <div class="flex items-center space-x-3">
            @if($refillRequest->status === 'pending')
                <form action="{{ route('refill-requests.update', $refillRequest->id) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to start processing this request?')">
                    @csrf
                    @method('PATCH')
                    <input type="hidden" name="status" value="processing">
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        Start Processing
                    </button>
                </form>
            @elseif($refillRequest->status === 'processing')
                <form action="{{ route('refill-requests.update', $refillRequest->id) }}" method="POST" class="inline" onsubmit="return confirm('Mark this request as completed?')">
                    @csrf
                    @method('PATCH')
                    <input type="hidden" name="status" value="completed">
                    <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 Completed
                    </button>
                </form>
            @endif
            @if($refillRequest->status !== 'cancelled')
                <form action="{{ route('refill-requests.update', $refillRequest->id) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to cancel this request?')">
                    @csrf
                    @method('PATCH')
                    <input type="hidden" name="status" value="cancelled">
                    <button type="submit" class="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                        {{ $refillRequest->status === 'cancelled' ? 'Cancelled' : 'Cancel Request' }}
                    </button>
                </form>
            @endif
        </div>
    </div>

    <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">
            <div class="flex items-center justify-between">
                <h3 class="text-lg leading-6 font-medium text-gray-900">
                    Request Details
                </h3>
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                    {{ [
                        'pending' => 'bg-yellow-100 text-yellow-800',
                        'processing' => 'bg-blue-100 text-blue-800',
                        'completed' => 'bg-green-100 text-green-800',
                        'cancelled' => 'bg-red-100 text-red-800',
                    ][$refillRequest->status] ?? 'bg-gray-100 text-gray-800' }}">
                    {{ ucfirst($refillRequest->status) }}
                </span>
            </div>
        </div>
        <div class="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">Requested By</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        @if($refillRequest->user)
                            {{ $refillRequest->user->name }}
                            <span class="text-gray-500">({{ $refillRequest->user->phone_number }})</span>
                        @else
                            N/A
                        @endif
                    </dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Request Date</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        {{ $refillRequest->created_at->format('M j, Y g:i A') }}
                        <span class="text-gray-500">({{ $refillRequest->created_at->diffForHumans() }})</span>
                    </dd>
                </div>
                @if($refillRequest->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', $refillRequest->sensor_id) }}" class="text-primary-600 hover:text-primary-900">
                                {{ $refillRequest->sensor->device_uuid }}
                            </a>
                        </dd>
                    </div>
                @endif
                @if($refillRequest->gasCompany)
                    <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">
                            <a href="{{ route('gas-companies.show', $refillRequest->gas_company_id) }}" class="text-primary-600 hover:text-primary-900">
                                {{ $refillRequest->gasCompany->name }}
                            </a>
                        </dd>
                    </div>
                @endif
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Gas Level at Request</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-{{ $refillRequest->gas_level_at_request < 20 ? 'red' : ($refillRequest->gas_level_at_request < 50 ? 'yellow' : 'green') }}-500 h-2.5 rounded-full" style="width: {{ $refillRequest->gas_level_at_request }}%"></div>
                            </div>
                            <span>{{ $refillRequest->gas_level_at_request }}%</span>
                        </div>
                    </dd>
                </div>
                <div class="sm:col-span-2">
                    <dt class="text-sm font-medium text-gray-500">Delivery Address</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        {{ $refillRequest->delivery_address }}
                        <a href="https://www.google.com/maps/search/?api=1&query={{ urlencode($refillRequest->delivery_address) }}" target="_blank" class="ml-2 text-primary-600 hover:text-primary-900 text-xs">
                            (View on Map)
                        </a>
                    </dd>
                </div>
                @if($refillRequest->assigned_at)
                    <div class="sm:col-span-1">
                        <dt class="text-sm font-medium text-gray-500">Assigned At</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            {{ $refillRequest->assigned_at->format('M j, Y g:i A') }}
                            <span class="text-gray-500">({{ $refillRequest->assigned_at->diffForHumans() }})</span>
                        </dd>
                    </div>
                @endif
                @if($refillRequest->assigned_to)
                    <div class="sm:col-span-1">
                        <dt class="text-sm font-medium text-gray-500">Assigned To</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            {{ $refillRequest->assignedTo->name ?? 'N/A' }}
                            @if($refillRequest->assignedTo)
                                <span class="text-gray-500">({{ $refillRequest->assignedTo->phone_number ?? '' }})</span>
                            @endif
                        </dd>
                    </div>
                @endif
                @if($refillRequest->delivered_at)
                    <div class="sm:col-span-1">
                        <dt class="text-sm font-medium text-gray-500">Delivered At</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            {{ $refillRequest->delivered_at->format('M j, Y g:i A') }}
                            <span class="text-gray-500">({{ $refillRequest->delivered_at->diffForHumans() }})</span>
                        </dd>
                    </div>
                @endif
                @if($refillRequest->notes)
                    <div class="sm:col-span-2">
                        <dt class="text-sm font-medium text-gray-500">Notes</dt>
                        <dd class="mt-1 text-sm text-gray-900 whitespace-pre-line">{{ $refillRequest->notes }}</dd>
                    </div>
                @endif
            </dl>
        </div>
    </div>

    @if($refillRequest->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">{{ $refillRequest->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:{{ $refillRequest->gasCompany->contact_email }}" class="text-primary-600 hover:text-primary-900">
                                {{ $refillRequest->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:{{ $refillRequest->gasCompany->contact_phone }}" class="text-primary-600 hover:text-primary-900">
                                {{ $refillRequest->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">{{ $refillRequest->gasCompany->address }}</p>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div class="flex justify-between">
        <a href="{{ route('refill-requests.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 Refill Requests
        </a>
        <div class="space-x-3">
            <a href="{{ route('refill-requests.edit', $refillRequest->id) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.793.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                </svg>
                Edit Request
            </a>
        </div>
    </div>
</div>
@endsection