@extends('layouts.app')

@section('title', 'New Work Order')
@section('nav_maintenance', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'New Work Order')
@section('page_subtitle', 'Report a maintenance issue or facility request')

@section('content')
<div class="max-w-2xl">

    <div class="mb-5">
        <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>
    </div>

    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-6"
         x-data="{ locationType: '{{ old('location_type', 'room') }}' }">

        @if($errors->any())
        <div class="mb-5 bg-red-50 border-[0.5px] border-red-200 text-red-700 text-sm px-4 py-3 rounded-lg">
            <ul class="list-disc list-inside space-y-0.5">
                @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
            </ul>
        </div>
        @endif

        <form method="POST" action="{{ route('maintenance.store') }}" class="space-y-5"
              data-confirm="Submit this maintenance work order?">
            @csrf

            {{-- Location type toggle --}}
            <div>
                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Location Type</label>
                <div class="flex gap-2">
                    <button type="button" @click="locationType = 'room'"
                            :class="locationType === 'room'
                                ? 'bg-teal-600 text-white border-teal-600'
                                : 'bg-white text-gray-500 border-gray-200 hover:border-gray-300'"
                            class="px-4 py-2 text-sm font-medium rounded-lg border-[0.5px] transition-colors">
                        Specific Room
                    </button>
                    <button type="button" @click="locationType = 'area'"
                            :class="locationType === 'area'
                                ? 'bg-teal-600 text-white border-teal-600'
                                : 'bg-white text-gray-500 border-gray-200 hover:border-gray-300'"
                            class="px-4 py-2 text-sm font-medium rounded-lg border-[0.5px] transition-colors">
                        Common Area
                    </button>
                </div>
                <input type="hidden" name="location_type" :value="locationType">
            </div>

            {{-- Room fields --}}
            <div x-show="locationType === 'room'" class="space-y-4">
                <div>
                    <label for="room_no" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Room</label>
                    <select id="room_no" name="room_no"
                            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-teal-500/20 focus:border-teal-400">
                        <option value="">Select a room...</option>
                        @foreach($rooms->groupBy('floor') as $floor => $floorRooms)
                        <optgroup label="Floor {{ $floor }}">
                            @foreach($floorRooms as $room)
                            <option value="{{ $room->no }}" {{ old('room_no') == $room->no ? 'selected' : '' }}>
                                Room {{ $room->no }} — {{ $room->type }}{{ in_array($room->status, ['maintenance', 'out_of_order']) ? ' (' . str_replace('_', ' ', $room->status) . ')' : '' }}
                            </option>
                            @endforeach
                        </optgroup>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">
                        Update Room Status
                    </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-teal-500/20 focus:border-teal-400">
                        <option value="none">No change — leave room status as-is</option>
                        <option value="maintenance">Set to Maintenance (blocked but recoverable)</option>
                        <option value="out_of_order">Set to Out of Order (remove from sale)</option>
                    </select>
                </div>
            </div>

            {{-- Area field --}}
            <div x-show="locationType === 'area'">
                <label for="area" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Area / Location</label>
                <input type="text" id="area" name="area"
                       value="{{ old('area') }}"
                       placeholder="e.g. Lobby, 2nd Floor Hallway, Pool Deck, Parking Area..."
                       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-teal-500/20 focus:border-teal-400">
            </div>

            {{-- Category + Priority --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label for="category" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Category</label>
                    <select id="category" name="category"
                            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-teal-500/20 focus:border-teal-400">
                        <option value="">Select category...</option>
                        @foreach([
                            'electrical' => 'Electrical',
                            'plumbing'   => 'Plumbing',
                            'hvac'       => 'HVAC',
                            'furniture'  => 'Furniture',
                            'appliances' => 'Appliances',
                            'structural' => 'Structural',
                            'other'      => 'Other',
                        ] as $val => $lbl)
                        <option value="{{ $val }}" {{ old('category') == $val ? 'selected' : '' }}>{{ $lbl }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="priority" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Priority</label>
                    <select id="priority" name="priority"
                            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-teal-500/20 focus:border-teal-400">
                        <option value="">Select priority...</option>
                        <option value="urgent" {{ old('priority') == 'urgent' ? 'selected' : '' }}>Urgent — fix immediately</option>
                        <option value="high"   {{ old('priority') == 'high'   ? 'selected' : '' }}>High — fix within 24 hours</option>
                        <option value="normal" {{ old('priority') == 'normal' ? 'selected' : '' }}>Normal — fix this week</option>
                        <option value="low"    {{ old('priority') == 'low'    ? 'selected' : '' }}>Low — fix when available</option>
                    </select>
                </div>
            </div>

            {{-- Description --}}
            <div>
                <label for="description" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Description</label>
                <textarea id="description" name="description" rows="4"
                          placeholder="Describe the issue in detail — what is broken, where exactly, when it was noticed..."
                          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-teal-500/20 focus:border-teal-400 resize-none">{{ old('description') }}</textarea>
            </div>

            {{-- Reported By --}}
            <div>
                <label for="reported_by" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">
                    Reported By <span class="font-normal normal-case text-gray-300">— optional</span>
                </label>
                <input type="text" id="reported_by" name="reported_by"
                       value="{{ old('reported_by') }}"
                       placeholder="Staff name or department..."
                       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-teal-500/20 focus:border-teal-400">
            </div>

            {{-- Actions --}}
            <div class="flex items-center gap-3 pt-2 border-t border-gray-100">
                <button type="submit"
                        class="bg-teal-600 hover:bg-teal-700 text-white text-sm font-medium px-5 py-2.5 rounded-lg transition-colors">
                    Create Work Order
                </button>
                <a href="{{ route('maintenance.index') }}"
                   class="text-sm text-gray-400 hover:text-gray-600 transition-colors">
                    Cancel
                </a>
            </div>

        </form>
    </div>
</div>
@endsection