@extends('layouts.app')

@section('title', 'WO-' . str_pad($req->id, 4, '0', STR_PAD_LEFT))
@section('nav_maintenance', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Work Order WO-' . str_pad($req->id, 4, '0', STR_PAD_LEFT))
@section('page_subtitle', $req->location . ' · ' . ($req->category === 'hvac' ? 'HVAC' : ucfirst($req->category)))

@section('content')
@php
    $priColors = [
        'urgent' => 'bg-red-50 text-red-700 border-red-200',
        'high'   => 'bg-orange-50 text-orange-700 border-orange-200',
        'normal' => 'bg-blue-50 text-blue-700 border-blue-200',
        'low'    => 'bg-gray-50 text-gray-500 border-gray-200',
    ];
    $statusColors = [
        'open'        => 'bg-red-50 text-red-700 border-red-200',
        'in_progress' => 'bg-amber-50 text-amber-700 border-amber-200',
        'resolved'    => 'bg-green-50 text-green-700 border-green-200',
    ];
    $catColors = [
        'electrical' => 'bg-yellow-50 text-yellow-700 border-yellow-200',
        'plumbing'   => 'bg-cyan-50 text-cyan-700 border-cyan-200',
        'hvac'       => 'bg-indigo-50 text-indigo-700 border-indigo-200',
        'furniture'  => 'bg-amber-50 text-amber-700 border-amber-200',
        'appliances' => 'bg-purple-50 text-purple-700 border-purple-200',
        'structural' => 'bg-stone-50 text-stone-600 border-stone-200',
        'other'      => 'bg-gray-50 text-gray-500 border-gray-200',
    ];
    $catLabel = $req->category === 'hvac' ? 'HVAC' : ucfirst($req->category);
    $statusLabel = ['open' => 'Open', 'in_progress' => 'In Progress', 'resolved' => 'Resolved'][$req->status] ?? ucfirst($req->status);
@endphp

<div class="max-w-2xl space-y-5">

    {{-- Back link --}}
    <a href="{{ route('maintenance.index') }}"
       class="inline-flex items-center gap-1.5 text-sm text-gray-400 hover:text-gray-600 transition-colors">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Back to Maintenance
    </a>

    @if(session('success'))
    <div class="bg-green-50 border-[0.5px] border-green-200 text-green-700 text-sm px-4 py-2.5 rounded-lg">
        {{ session('success') }}
    </div>
    @endif

    {{-- Details card --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">

        {{-- Header band --}}
        <div class="px-6 py-4 border-b border-gray-100 flex items-start justify-between gap-4">
            <div>
                <p class="text-[11px] font-semibold uppercase tracking-wider text-gray-400 mb-1">
                    {{ $req->location }}
                </p>
                <h2 class="text-gray-900 font-semibold text-base">{{ $req->description }}</h2>
            </div>
            <div class="flex flex-col items-end gap-1.5 flex-shrink-0">
                <span class="inline-flex text-[11px] font-semibold px-2.5 py-1 rounded-md border-[0.5px] {{ $statusColors[$req->status] ?? 'bg-gray-50 text-gray-500 border-gray-200' }}">
                    {{ $statusLabel }}
                </span>
                <span class="inline-flex text-[11px] font-semibold px-2.5 py-1 rounded-md border-[0.5px] {{ $priColors[$req->priority] ?? 'bg-gray-50 text-gray-500 border-gray-200' }}">
                    {{ ucfirst($req->priority) }} Priority
                </span>
            </div>
        </div>

        {{-- Meta row --}}
        <div class="px-6 py-3 bg-gray-50/40 border-b border-gray-100 flex flex-wrap gap-x-6 gap-y-1.5">
            <div>
                <p class="text-[10px] font-semibold uppercase tracking-wider text-gray-400">Category</p>
                <span class="inline-flex text-[11px] font-semibold px-2 py-0.5 rounded-md border-[0.5px] mt-0.5 {{ $catColors[$req->category] ?? 'bg-gray-50 text-gray-500 border-gray-200' }}">
                    {{ $catLabel }}
                </span>
            </div>
            <div>
                <p class="text-[10px] font-semibold uppercase tracking-wider text-gray-400">Reported</p>
                <p class="text-sm text-gray-700 mt-0.5">{{ $req->created_at->format('M j, Y · g:i A') }}</p>
            </div>
            @if($req->reported_by)
            <div>
                <p class="text-[10px] font-semibold uppercase tracking-wider text-gray-400">Reported By</p>
                <p class="text-sm text-gray-700 mt-0.5">{{ $req->reported_by }}</p>
            </div>
            @endif
            @if($req->resolved_at)
            <div>
                <p class="text-[10px] font-semibold uppercase tracking-wider text-gray-400">Resolved</p>
                <p class="text-sm text-green-700 mt-0.5">{{ $req->resolved_at->format('M j, Y · g:i A') }}</p>
            </div>
            @endif
        </div>

        {{-- Resolution notes --}}
        @if($req->resolved_at && $req->resolution_notes)
        <div class="px-6 py-4 border-b border-gray-100">
            <p class="text-[10px] font-semibold uppercase tracking-wider text-gray-400 mb-1.5">Resolution Notes</p>
            <p class="text-sm text-gray-700 leading-relaxed">{{ $req->resolution_notes }}</p>
        </div>
        @endif

        {{-- Room info --}}
        @if($room)
        <div class="px-6 py-4 border-b border-gray-100">
            <p class="text-[10px] font-semibold uppercase tracking-wider text-gray-400 mb-2">Room Details</p>
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-800">Room {{ $room->no }} — {{ $room->type }}</p>
                    <p class="text-xs text-gray-400 mt-0.5">Floor {{ $room->floor }}, Wing {{ $room->wing }} · {{ $room->beds }}</p>
                </div>
                <div class="flex items-center gap-2">
                    @php
                        $roomStatusColors = [
                            'available'    => 'bg-teal-50 text-teal-700 border-teal-200',
                            'clean'        => 'bg-green-50 text-green-700 border-green-200',
                            'occupied'     => 'bg-blue-50 text-blue-700 border-blue-200',
                            'dirty'        => 'bg-amber-50 text-amber-700 border-amber-200',
                            'maintenance'  => 'bg-orange-50 text-orange-700 border-orange-200',
                            'out_of_order' => 'bg-red-50 text-red-700 border-red-200',
                        ];
                    @endphp
                    <span class="inline-flex text-[11px] font-semibold px-2 py-0.5 rounded-md border-[0.5px] {{ $roomStatusColors[$room->status] ?? 'bg-gray-50 text-gray-500 border-gray-200' }}">
                        {{ ucwords(str_replace('_', ' ', $room->status)) }}
                    </span>
                    <a href="{{ route('rooms.show', $room->id) }}"
                       class="text-xs text-teal-600 hover:text-teal-700 font-medium transition-colors">
                        View Room →
                    </a>
                </div>
            </div>
        </div>
        @endif

        {{-- Actions --}}
        <div class="px-6 py-5" x-data="{ resolving: false }">

            @if($req->status === 'resolved')
            {{-- Resolved state --}}
            <div class="flex items-center gap-3">
                <div class="flex-1 flex items-center gap-2 text-green-700 text-sm font-medium">
                    <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    This work order has been resolved.
                </div>
                <form method="POST" action="{{ route('maintenance.reopen', $req->id) }}"
                      data-confirm="Reopen this work order? The resolved status will be cleared.">
                    @csrf
                    <button type="submit"
                            class="text-xs font-medium text-gray-500 hover:text-red-600 px-3 py-2 rounded-lg border-[0.5px] border-gray-200 hover:border-red-200 hover:bg-red-50 transition-colors">
                        Reopen Work Order
                    </button>
                </form>
            </div>

            @else
            {{-- Open / In Progress actions --}}
            <div class="space-y-4">
                <div class="flex items-center gap-2 flex-wrap">

                    @if($req->status === 'open')
                    <form method="POST" action="{{ route('maintenance.in-progress', $req->id) }}"
                          data-confirm="Mark this work order as in progress?">
                        @csrf
                        <button type="submit"
                                class="text-sm font-medium bg-amber-500 hover:bg-amber-600 text-white px-4 py-2 rounded-lg transition-colors">
                            Mark In Progress
                        </button>
                    </form>
                    @endif

                    <button type="button" @click="resolving = !resolving" x-show="!resolving"
                            class="text-sm font-medium bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors">
                        Resolve Work Order
                    </button>

                </div>

                {{-- Inline resolve form --}}
                <div x-show="resolving" x-cloak
                     class="border-[0.5px] border-green-200 bg-green-50/40 rounded-xl p-4 space-y-4">
                    <p class="text-sm font-semibold text-gray-700">Resolve Work Order</p>
                    <form method="POST" action="{{ route('maintenance.resolve', $req->id) }}" class="space-y-4"
                          data-confirm="Mark this work order as resolved?">
                        @csrf

                        <div>
                            <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">
                                Resolution Notes <span class="font-normal normal-case text-gray-300">— optional</span>
                            </label>
                            <textarea name="resolution_notes" rows="3"
                                      placeholder="What was done to fix the issue?"
                                      class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-green-500/20 focus:border-green-400 resize-none"></textarea>
                        </div>

                        @if($room)
                        <div>
                            <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">
                                Update Room Status After Resolving
                            </label>
                            <select name="room_action"
                                    class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-green-500/20 focus:border-green-400">
                                <option value="none">No change — keep current status</option>
                                <option value="clean">Set to Clean (ready for housekeeping to release)</option>
                                <option value="available">Set to Available (ready to sell)</option>
                            </select>
                        </div>
                        @else
                        <input type="hidden" name="room_action" value="none">
                        @endif

                        <div class="flex items-center gap-2">
                            <button type="submit"
                                    class="text-sm font-medium bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors">
                                Confirm Resolve
                            </button>
                            <button type="button" @click="resolving = false"
                                    class="text-sm text-gray-400 hover:text-gray-600 transition-colors px-2">
                                Cancel
                            </button>
                        </div>
                    </form>
                </div>

            </div>
            @endif

        </div>
    </div>

</div>
@endsection