@extends('layouts.app')

@section('page-title', 'Ubah Tipe Kamar')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('room-types.index') }}" class="text-slate-400 hover:text-slate-600">
            <svg class="w-5 h-5" 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>
        </a>
        <h2 class="text-xl font-bold text-slate-800">Ubah Tipe Kamar: {{ $roomType->name }}</h2>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
        <form method="POST" action="{{ route('room-types.update', $roomType) }}" enctype="multipart/form-data" class="space-y-5">
            @csrf @method('PUT')

            @if($errors->any())
                <div class="bg-red-50 border border-red-200 text-red-700 rounded-xl p-4 text-sm">
                    <ul class="list-disc list-inside space-y-1">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="grid grid-cols-2 gap-4">
                <div class="col-span-2">
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Nama Tipe Kamar <span class="text-red-500">*</span></label>
                    <input type="text" name="name" value="{{ old('name', $roomType->name) }}" required
                           class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none">
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Harga per Bulan (Rp) <span class="text-red-500">*</span></label>
                    <input type="number" name="price_per_month" value="{{ old('price_per_month', $roomType->price_per_month) }}" required min="0" step="1000"
                           class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none">
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Kapasitas Maksimal <span class="text-red-500">*</span></label>
                    <input type="number" name="capacity" value="{{ old('capacity', $roomType->capacity) }}" required min="1" max="20"
                           class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none">
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Tipe Kasur <span class="text-red-500">*</span></label>
                    <select name="bed_type" required
                            class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none">
                        @foreach(['Single', 'Twin', 'Double', 'Queen', 'King', 'Suite'] as $bed)
                            <option value="{{ $bed }}" {{ old('bed_type', $roomType->bed_type) === $bed ? 'selected' : '' }}>{{ $bed }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Ukuran Kamar</label>
                    <input type="text" name="size" value="{{ old('size', $roomType->size) }}"
                           class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none">
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Deskripsi</label>
                <textarea name="description" rows="3"
                          class="w-full px-4 py-2.5 border border-slate-200 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent outline-none resize-none">{{ old('description', $roomType->description) }}</textarea>
            </div>

            <div x-data="{
                    facilities: [],
                    newFacility: '',
                    suggestions: ['WiFi', 'AC', 'TV', 'Minibar', 'Brankas', 'Kulkas', 'Bathtub', 'Shower Air Panas', 'Balkon', 'Sarapan'],
                    init() {
                        const seed = @js(old('facilities', $roomType->facilities ? implode(', ', $roomType->facilities) : ''));
                        this.facilities = String(seed)
                            .split(',')
                            .map(item => item.trim())
                            .filter(item => item.length > 0)
                            .filter((item, idx, arr) => arr.findIndex(v => v.toLowerCase() === item.toLowerCase()) === idx);
                    },
                    addFacility() {
                        const value = this.newFacility.trim();
                        if (!value) return;
                        const exists = this.facilities.some(item => item.toLowerCase() === value.toLowerCase());
                        if (!exists) this.facilities.push(value);
                        this.newFacility = '';
                    },
                    addSuggested(value) {
                        const exists = this.facilities.some(item => item.toLowerCase() === value.toLowerCase());
                        if (!exists) this.facilities.push(value);
                    },
                    removeFacility(index) {
                        this.facilities.splice(index, 1);
                    },
                    get facilitiesValue() {
                        return this.facilities.join(', ');
                    }
                }"
                x-init="init()">
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Fasilitas</label>
                <input type="hidden" name="facilities" :value="facilitiesValue">

                <div class="w-full px-3 py-2.5 border border-slate-200 rounded-xl focus-within:ring-2 focus-within:ring-indigo-500 focus-within:border-transparent">
                    <div class="flex flex-wrap gap-2 mb-2" x-show="facilities.length > 0">
                        <template x-for="(facility, index) in facilities" :key="facility + '-' + index">
                            <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-indigo-50 text-indigo-700 text-xs font-medium">
                                <span x-text="facility"></span>
                                <button type="button" @click="removeFacility(index)" class="text-indigo-500 hover:text-indigo-700">&times;</button>
                            </span>
                        </template>
                    </div>

                    <input type="text"
                           x-model="newFacility"
                           @keydown.enter.prevent="addFacility()"
                           @keydown.,.prevent="addFacility()"
                           @blur="addFacility()"
                           class="w-full border-0 p-0 text-sm text-slate-700 placeholder:text-slate-400 focus:ring-0 outline-none"
                           placeholder="Ketik fasilitas lalu Enter atau koma">
                </div>

                <div class="flex flex-wrap gap-2 mt-2">
                    <template x-for="item in suggestions" :key="item">
                        <button type="button"
                                @click="addSuggested(item)"
                                class="px-2.5 py-1 rounded-full text-xs bg-slate-100 text-slate-600 hover:bg-slate-200 transition-colors">
                            <span x-text="item"></span>
                        </button>
                    </template>
                </div>
            </div>

            @if($roomType->photo)
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Foto Saat Ini</label>
                    <img src="{{ $roomType->photo_url }}" alt="{{ $roomType->name }}"
                         class="w-32 h-24 object-cover rounded-xl border border-slate-200">
                </div>
            @endif

            <x-drag-drop-upload 
                name="photo" 
                id="photo" 
                label="{{ $roomType->photo ? 'Ganti Foto' : 'Foto Kamar' }}" 
                hint="PNG, JPG (Max 5MB)"
                :preview="$roomType->photo_url"
            />

            <div class="flex items-center gap-3">
                <input type="checkbox" name="is_active" id="is_active" value="1"
                       {{ old('is_active', $roomType->is_active) ? 'checked' : '' }}
                       class="w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500">
                <label for="is_active" class="text-sm text-slate-700">Aktif (tersedia untuk pemesanan)</label>
            </div>

            <div class="flex justify-end gap-3 pt-2">
                <a href="{{ route('room-types.index') }}"
                   class="px-5 py-2.5 text-sm font-medium text-slate-700 bg-slate-100 hover:bg-slate-200 rounded-xl transition-colors">
                    Batal
                </a>
                <button type="submit"
                        class="px-5 py-2.5 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-xl transition-colors">
                    Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>
@endsection