From 2475c76d459ffeb19f8cf436aef6c69e294768ff Mon Sep 17 00:00:00 2001
From: HotelSync <admin@hotelsync.ru>
Date: Sun, 22 Mar 2026 01:38:25 +0300
Subject: [PATCH] feat: RentalBookingModal 2-column layout

Left col: existing bookings list, full-day toggle, time selectors
Right col: guest autocomplete, phone, link-to-room, notes, price+payment block
Modal widened to max-w-2xl; payment section unified with BookingModal style

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/rental/RentalBookingModal.tsx | 540 +++++++++----------
 1 file changed, 240 insertions(+), 300 deletions(-)

diff --git a/src/components/rental/RentalBookingModal.tsx b/src/components/rental/RentalBookingModal.tsx
index b8395f6..b05fd86 100644
--- a/src/components/rental/RentalBookingModal.tsx
+++ b/src/components/rental/RentalBookingModal.tsx
@@ -213,7 +213,7 @@ export function RentalBookingModal({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
-      <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl w-full max-w-md flex flex-col max-h-[90vh]">
+      <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl w-full max-w-2xl flex flex-col max-h-[90vh]">
         {/* Header */}
         <div className="flex items-center gap-3 px-5 py-4 border-b border-slate-200 dark:border-slate-700 shrink-0">
           <span className="text-2xl">{obj.icon}</span>
@@ -224,325 +224,265 @@ export function RentalBookingModal({
           <button onClick={onClose} className="btn-ghost p-1.5"><X size={16} /></button>
         </div>
 
-        <div className="overflow-y-auto flex-1 p-5 space-y-4">
-          {/* Existing bookings for the day */}
-          {existingBookings.filter(b => b.status !== 'cancelled').length > 0 && (
-            <div className="rounded-xl bg-slate-50 dark:bg-slate-700/50 p-3 space-y-1.5">
-              <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Уже забронировано</p>
-              {existingBookings.filter(b => b.status !== 'cancelled').map(b => (
-                <div key={b.id} className="flex items-center gap-2 text-sm">
-                  <div className={cn('w-2 h-2 rounded-full shrink-0', obj.color)} />
-                  <span className="text-slate-700 dark:text-slate-300 font-medium">
-                    {b.isFullDay ? 'Весь день' : `${fmtTime(b.startHour)} – ${fmtTime(b.endHour)}`}
-                  </span>
-                  <span className="text-slate-500 dark:text-slate-400 truncate">{b.guestName}</span>
+        <div className="overflow-y-auto flex-1 p-5">
+          <div className="flex flex-col sm:flex-row gap-5 sm:gap-6">
+
+            {/* ── LEFT: статус дня + переключатель + время ── */}
+            <div className="flex-1 space-y-4 min-w-0">
+
+              {/* Existing bookings */}
+              {existingBookings.filter(b => b.status !== 'cancelled').length > 0 && (
+                <div className="rounded-xl bg-slate-50 dark:bg-slate-700/50 p-3 space-y-1.5">
+                  <p className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Уже забронировано</p>
+                  {existingBookings.filter(b => b.status !== 'cancelled').map(b => (
+                    <div key={b.id} className="flex items-center gap-2 text-sm">
+                      <div className={cn('w-2 h-2 rounded-full shrink-0', obj.color)} />
+                      <span className="text-slate-700 dark:text-slate-300 font-medium">
+                        {b.isFullDay ? 'Весь день' : `${fmtTime(b.startHour)} – ${fmtTime(b.endHour)}`}
+                      </span>
+                      <span className="text-slate-500 dark:text-slate-400 truncate">{b.guestName}</span>
+                    </div>
+                  ))}
                 </div>
-              ))}
-            </div>
-          )}
-
-          {hasFullDayConflict && (
-            <div className="flex items-center gap-2 p-3 rounded-xl bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 text-sm">
-              <AlertCircle size={15} className="shrink-0" />
-              <span>Объект уже забронирован на весь день</span>
-            </div>
-          )}
-
-          {/* Full day toggle */}
-          <div className={cn(
-            'flex items-center gap-3 p-3 rounded-xl border',
-            (hasTimedConflict || hasFullDayConflict)
-              ? 'border-slate-200 dark:border-slate-600 opacity-50 pointer-events-none'
-              : 'border-slate-200 dark:border-slate-600',
-          )}>
-            <CalendarDays size={16} className="text-slate-400 shrink-0" />
-            <span className="text-sm font-medium text-slate-700 dark:text-slate-300 flex-1">Весь день</span>
-            {hasTimedConflict && (
-              <span className="text-xs text-slate-400">Есть частичные брони</span>
-            )}
-            <button
-              type="button"
-              onClick={() => (!hasTimedConflict && !hasFullDayConflict) && setIsFullDay(v => !v)}
-              className={cn(
-                'relative rounded-full overflow-hidden transition-colors shrink-0 p-0',
-                isFullDay ? 'bg-brand-600' : 'bg-slate-200 dark:bg-slate-600',
               )}
-              style={{ height: 22, width: 40 }}
-            >
-              <span className={cn(
-                'absolute top-[3px] left-[2px] w-4 h-4 rounded-full bg-white shadow transition-transform duration-200',
-                isFullDay ? 'translate-x-[18px]' : 'translate-x-0',
-              )} />
-            </button>
-          </div>
 
-          {/* Time selection */}
-          {!isFullDay && !hasFullDayConflict && (
-            <div>
-              <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">
-                Время аренды
-                {bufMin > 0 && <span className="ml-1 font-normal normal-case">(перерыв {bufMin} мин)</span>}
-              </label>
-              {noSlots ? (
+              {hasFullDayConflict && (
                 <div className="flex items-center gap-2 p-3 rounded-xl bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 text-sm">
                   <AlertCircle size={15} className="shrink-0" />
-                  <span>Все слоты на этот день заняты</span>
+                  <span>Объект уже забронирован на весь день</span>
                 </div>
-              ) : (
-                <>
-                  <div className="flex items-center gap-3">
-                    <div className="flex-1">
-                      <label className="block text-xs text-slate-500 mb-1">Начало</label>
-                      <select
-                        className="input text-sm"
-                        value={effectiveStart}
-                        onChange={e => {
-                          const v = parseInt(e.target.value)
-                          setStartMin(v)
-                          const maxEnd = getMaxEnd(v)
-                          if (endMin <= v || endMin > maxEnd) setEndMin(Math.min(v + 60, maxEnd))
-                        }}
-                      >
-                        {availableStarts.map(m => (
-                          <option key={m} value={m}>{fmtTime(m)}</option>
-                        ))}
-                      </select>
+              )}
+
+              {/* Full day toggle */}
+              <div className={cn(
+                'flex items-center gap-3 p-3 rounded-xl border border-slate-200 dark:border-slate-600',
+                (hasTimedConflict || hasFullDayConflict) && 'opacity-50 pointer-events-none',
+              )}>
+                <CalendarDays size={16} className="text-slate-400 shrink-0" />
+                <span className="text-sm font-medium text-slate-700 dark:text-slate-300 flex-1">Весь день</span>
+                {hasTimedConflict && <span className="text-xs text-slate-400">Есть частичные брони</span>}
+                <button
+                  type="button"
+                  onClick={() => (!hasTimedConflict && !hasFullDayConflict) && setIsFullDay(v => !v)}
+                  className={cn('relative rounded-full overflow-hidden transition-colors shrink-0 p-0', isFullDay ? 'bg-brand-600' : 'bg-slate-200 dark:bg-slate-600')}
+                  style={{ height: 22, width: 40 }}
+                >
+                  <span className={cn('absolute top-[3px] left-[2px] w-4 h-4 rounded-full bg-white shadow transition-transform duration-200', isFullDay ? 'translate-x-[18px]' : 'translate-x-0')} />
+                </button>
+              </div>
+
+              {/* Time selection */}
+              {!isFullDay && !hasFullDayConflict && (
+                <div>
+                  <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">
+                    Время аренды
+                    {bufMin > 0 && <span className="ml-1 font-normal normal-case">(перерыв {bufMin} мин)</span>}
+                  </label>
+                  {noSlots ? (
+                    <div className="flex items-center gap-2 p-3 rounded-xl bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300 text-sm">
+                      <AlertCircle size={15} className="shrink-0" />
+                      <span>Все слоты на этот день заняты</span>
                     </div>
-                    <Clock size={14} className="text-slate-400 mt-4 shrink-0" />
-                    <div className="flex-1">
-                      <label className="block text-xs text-slate-500 mb-1">Конец</label>
-                      <select
-                        className="input text-sm"
-                        value={availableEnds.includes(endMin) ? endMin : (availableEnds[0] ?? endMin)}
-                        onChange={e => setEndMin(parseInt(e.target.value))}
-                      >
-                        {availableEnds.map(m => (
-                          <option key={m} value={m}>{fmtTime(m)}</option>
-                        ))}
-                      </select>
-                    </div>
-                  </div>
-                  {obj.maxHoursPerSlot && !maxHoursOk && (
-                    <p className="mt-1.5 text-xs text-red-500">Максимум: {obj.maxHoursPerSlot} ч</p>
+                  ) : (
+                    <>
+                      <div className="flex items-center gap-3">
+                        <div className="flex-1">
+                          <label className="block text-xs text-slate-500 mb-1">Начало</label>
+                          <select className="input text-sm" value={effectiveStart}
+                            onChange={e => {
+                              const v = parseInt(e.target.value)
+                              setStartMin(v)
+                              const maxEnd = getMaxEnd(v)
+                              if (endMin <= v || endMin > maxEnd) setEndMin(Math.min(v + 60, maxEnd))
+                            }}
+                          >
+                            {availableStarts.map(m => <option key={m} value={m}>{fmtTime(m)}</option>)}
+                          </select>
+                        </div>
+                        <Clock size={14} className="text-slate-400 mt-4 shrink-0" />
+                        <div className="flex-1">
+                          <label className="block text-xs text-slate-500 mb-1">Конец</label>
+                          <select className="input text-sm"
+                            value={availableEnds.includes(endMin) ? endMin : (availableEnds[0] ?? endMin)}
+                            onChange={e => setEndMin(parseInt(e.target.value))}
+                          >
+                            {availableEnds.map(m => <option key={m} value={m}>{fmtTime(m)}</option>)}
+                          </select>
+                        </div>
+                      </div>
+                      {obj.maxHoursPerSlot && !maxHoursOk && (
+                        <p className="mt-1.5 text-xs text-red-500">Максимум: {obj.maxHoursPerSlot} ч</p>
+                      )}
+                      {isTimeConflict && (
+                        <p className="mt-1.5 text-xs text-red-500">Время пересекается с существующей бронью</p>
+                      )}
+                    </>
                   )}
-                  {isTimeConflict && (
-                    <p className="mt-1.5 text-xs text-red-500">Время пересекается с существующей бронью</p>
-                  )}
-                </>
+                </div>
               )}
             </div>
-          )}
 
-          {/* Guest search */}
-          <div className="space-y-3">
-            <div>
-              <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">
-                Гость *
-              </label>
-              <div className="relative" ref={nameRef}>
-                <User size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 z-10" />
-                <input
-                  type="text"
-                  className="input pl-8 text-sm"
-                  placeholder="Имя гостя"
-                  value={guestName}
-                  onChange={e => {
-                    const val = e.target.value
-                    setGuestName(val)
-                    setGuestIsKnown(false)   // manual typing = new guest
-                    setShowSuggestions(true)
-                    if (searchTimerRef.current) clearTimeout(searchTimerRef.current)
-                    if (val.trim().length >= 2 && slug) {
-                      searchTimerRef.current = setTimeout(async () => {
-                        try {
-                          const results = await api.guests.list(slug, val.trim())
-                          setDbResults(results.slice(0, 8))
-                        } catch { setDbResults([]) }
-                      }, 300)
-                    } else {
-                      setDbResults([])
-                    }
-                  }}
-                  onFocus={() => setShowSuggestions(true)}
-                  autoComplete="off"
-                />
-                {/* Suggestions dropdown */}
-                {showSuggestions && (filtered.length > 0 || dbResults.length > 0) && (
-                  <div className="absolute top-full left-0 right-0 mt-1 z-50 bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-600 shadow-xl overflow-hidden max-h-60 overflow-y-auto">
-                    {/* Current/upcoming guests from bookings */}
-                    {filtered.slice(0, 5).map(b => {
-                      const rLabel = roomLabel(b)
-                      const isCheckedIn = b.status === 'checked_in'
-                      return (
-                        <button
-                          key={b.id}
-                          type="button"
-                          onMouseDown={() => selectGuest(b)}
-                          className="w-full flex items-center gap-2.5 px-3 py-2.5 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors text-left"
-                        >
-                          <div className={cn('w-2 h-2 rounded-full shrink-0', isCheckedIn ? 'bg-emerald-500' : 'bg-sky-400')} />
-                          <div className="min-w-0 flex-1">
-                            <p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate">{b.guestName}</p>
-                            <p className="text-[11px] text-slate-400 truncate">
-                              {b.guestPhone
-                                ? b.guestPhone
-                                : isCheckedIn ? '🏠 Проживает' : '📅 Бронь'
-                              }{rLabel ? ` · ${rLabel}` : ''}
-                            </p>
-                          </div>
-                        </button>
-                      )
-                    })}
-                    {/* DB guest search results */}
-                    {dbResults
-                      .filter(g => !filtered.some(b => b.guestName.startsWith(g.lastName)))
-                      .map(g => {
+            {/* ── RIGHT: гость + оплата ── */}
+            <div className="w-full sm:w-72 space-y-4 shrink-0">
+
+              {/* Guest */}
+              <div>
+                <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Гость *</label>
+                <div className="relative" ref={nameRef}>
+                  <User size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 z-10" />
+                  <input
+                    type="text" className="input pl-8 text-sm" placeholder="Фамилия Имя Отчество"
+                    value={guestName} onFocus={() => setShowSuggestions(true)} autoComplete="off"
+                    onChange={e => {
+                      const val = e.target.value
+                      setGuestName(val)
+                      setGuestIsKnown(false)
+                      setShowSuggestions(true)
+                      if (searchTimerRef.current) clearTimeout(searchTimerRef.current)
+                      if (val.trim().length >= 2 && slug) {
+                        searchTimerRef.current = setTimeout(async () => {
+                          try { setDbResults((await api.guests.list(slug, val.trim())).slice(0, 8)) }
+                          catch { setDbResults([]) }
+                        }, 300)
+                      } else { setDbResults([]) }
+                    }}
+                  />
+                  {showSuggestions && (filtered.length > 0 || dbResults.length > 0) && (
+                    <div className="absolute top-full left-0 right-0 mt-1 z-50 bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-600 shadow-xl overflow-hidden max-h-52 overflow-y-auto">
+                      {filtered.slice(0, 5).map(b => {
+                        const rLabel = roomLabel(b)
+                        const isCI = b.status === 'checked_in'
+                        return (
+                          <button key={b.id} type="button" onMouseDown={() => selectGuest(b)}
+                            className="w-full flex items-center gap-2.5 px-3 py-2.5 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors text-left">
+                            <div className={cn('w-2 h-2 rounded-full shrink-0', isCI ? 'bg-emerald-500' : 'bg-sky-400')} />
+                            <div className="min-w-0 flex-1">
+                              <p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate">{b.guestName}</p>
+                              <p className="text-[11px] text-slate-400 truncate">{b.guestPhone ?? (isCI ? '🏠 Проживает' : '📅 Бронь')}{rLabel ? ` · ${rLabel}` : ''}</p>
+                            </div>
+                          </button>
+                        )
+                      })}
+                      {dbResults.filter(g => !filtered.some(b => b.guestName.startsWith(g.lastName))).map(g => {
                         const fullName = [g.lastName, g.firstName, g.middleName].filter(Boolean).join(' ')
                         return (
-                        <button
-                          key={g.id}
-                          type="button"
-                          onMouseDown={() => {
-                            setGuestName(fullName)
-                            setGuestPhone(g.phone ?? '')
-                            setShowSuggestions(false)
-                            setDbResults([])
-                            setGuestIsKnown(true)
-                          }}
-                          className="w-full flex items-center gap-2.5 px-3 py-2.5 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors text-left"
-                        >
-                          <div className="w-2 h-2 rounded-full shrink-0 bg-slate-400" />
-                          <div className="min-w-0 flex-1">
-                            <p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate">{fullName}</p>
-                            <p className="text-[11px] text-slate-400 truncate">
-                              {g.phone ?? 'нет телефона'}
-                            </p>
-                          </div>
-                        </button>
-                      )})
-                    }
-                  </div>
+                          <button key={g.id} type="button"
+                            onMouseDown={() => { setGuestName(fullName); setGuestPhone(g.phone ?? ''); setShowSuggestions(false); setDbResults([]); setGuestIsKnown(true) }}
+                            className="w-full flex items-center gap-2.5 px-3 py-2.5 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors text-left">
+                            <div className="w-2 h-2 rounded-full shrink-0 bg-slate-400" />
+                            <div className="min-w-0 flex-1">
+                              <p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate">{fullName}</p>
+                              <p className="text-[11px] text-slate-400 truncate">{g.phone ?? 'нет телефона'}</p>
+                            </div>
+                          </button>
+                        )
+                      })}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Phone */}
+              <div>
+                <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">
+                  Телефон {phoneRequired && <span className="text-red-500">*</span>}
+                </label>
+                <div className="relative">
+                  <Phone size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
+                  <input type="tel"
+                    className={cn('input pl-8 text-sm', phoneRequired && !guestPhone.trim() && 'border-red-400 focus:ring-red-400')}
+                    placeholder={phoneRequired ? '+7 999 000 11 22 (обязательно)' : '+7 999 000 11 22'}
+                    value={guestPhone} onChange={e => setGuestPhone(maskPhone(e.target.value))} />
+                </div>
+                {phoneRequired && !guestPhone.trim() && (
+                  <p className="mt-1 text-[11px] text-red-500">Для нового гостя необходим телефон — он будет добавлен в базу</p>
                 )}
               </div>
-            </div>
 
-            <div>
-              <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">
-                Телефон {phoneRequired && <span className="text-red-500">*</span>}
-              </label>
-              <div className="relative">
-                <Phone size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
-                <input
-                  type="tel"
-                  className={cn('input pl-8 text-sm', phoneRequired && !guestPhone.trim() && 'border-red-400 focus:ring-red-400')}
-                  placeholder={phoneRequired ? '+7 999 000 11 22 (обязательно)' : '+7 999 000 11 22'}
-                  value={guestPhone}
-                  onChange={e => setGuestPhone(maskPhone(e.target.value))}
-                />
+              {/* Link to room */}
+              <div>
+                <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5 flex items-center gap-1">
+                  <Link2 size={11} /> Привязать к номеру
+                </label>
+                <select className="input text-sm" value={linkedBookingId}
+                  onChange={e => {
+                    const id = e.target.value
+                    setLinkedBookingId(id)
+                    if (id) {
+                      const b = bookings.find(b => b.id === id)
+                      if (b && !guestName) { setGuestName(b.guestName); setGuestPhone(b.guestPhone ?? '') }
+                    }
+                  }}
+                >
+                  <option value="">— Без привязки —</option>
+                  {linkableBookings.map(b => {
+                    const r = rooms.find(r => r.id === b.roomId)
+                    const isCI = b.status === 'checked_in'
+                    return (
+                      <option key={b.id} value={b.id}>
+                        {isCI ? '🏠' : '📅'} №{r?.number ?? '?'} — {b.guestName}{isCI ? ' (проживает)' : ''}
+                      </option>
+                    )
+                  })}
+                </select>
               </div>
-              {phoneRequired && !guestPhone.trim() && (
-                <p className="mt-1 text-[11px] text-red-500">Для нового гостя необходим телефон — он будет добавлен в базу</p>
+
+              {/* Notes */}
+              <div>
+                <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Примечание</label>
+                <textarea className="input resize-none text-sm" rows={2} placeholder="Дополнительно..."
+                  value={notes} onChange={e => setNotes(e.target.value)} />
+              </div>
+
+              {/* Price + Payment */}
+              {hours > 0 && (
+                <div className="rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-700/40 p-3 space-y-3">
+                  <div className="flex items-baseline justify-between">
+                    <span className="text-xs text-slate-500 dark:text-slate-400">
+                      {isFullDay ? `Весь день (${obj.openHour}:00–${obj.closeHour}:00)` : `${hours} ч × ${obj.pricePerHour.toLocaleString('ru-RU')} ₽`}
+                    </span>
+                    <span className="text-xl font-bold text-slate-900 dark:text-slate-100">{totalAmount.toLocaleString('ru-RU')} ₽</span>
+                  </div>
+                  <div>
+                    <p className="text-xs text-slate-500 dark:text-slate-400 mb-1.5">Внесение оплаты</p>
+                    <div className="grid grid-cols-3 gap-1.5">
+                      {([
+                        { id: 'cash' as const,     label: 'Наличные', icon: Banknote },
+                        { id: 'card' as const,     label: 'Карта',    icon: CreditCard },
+                        { id: 'transfer' as const, label: 'Перевод',  icon: Building2 },
+                      ]).map(m => (
+                        <button key={m.id} type="button" onClick={() => setPayMethod(m.id)}
+                          className={cn(
+                            'flex flex-col items-center gap-1 py-2 rounded-lg border text-xs font-medium transition-colors',
+                            payMethod === m.id
+                              ? 'bg-brand-600 border-brand-600 text-white'
+                              : 'bg-white dark:bg-slate-700 border-slate-200 dark:border-slate-600 text-slate-600 dark:text-slate-300',
+                          )}
+                        >
+                          <m.icon size={14} /> {m.label}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                  {payMethod && (
+                    <div className="flex items-center gap-2">
+                      <label className="text-xs text-slate-500 dark:text-slate-400 shrink-0">Оплачено (₽)</label>
+                      <input type="number" className="input flex-1 text-sm" min="0" max={totalAmount}
+                        placeholder={`макс. ${totalAmount.toLocaleString('ru-RU')}`}
+                        value={paidAmount} onChange={e => setPaidAmount(e.target.value)} />
+                      <button type="button" onClick={() => setPaidAmount(String(totalAmount))}
+                        className="text-xs text-brand-600 dark:text-brand-400 hover:underline shrink-0">Всю сумму</button>
+                    </div>
+                  )}
+                  {paidAmount && parseFloat(paidAmount) > 0 && parseFloat(paidAmount) < totalAmount && (
+                    <p className="text-xs text-amber-600 dark:text-amber-400">
+                      Долг: {(totalAmount - parseFloat(paidAmount)).toLocaleString('ru-RU')} ₽
+                    </p>
+                  )}
+                </div>
               )}
             </div>
 
-            {/* Link to room */}
-            <div>
-              <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5 flex items-center gap-1">
-                <Link2 size={11} /> Привязать к номеру
-              </label>
-              <select
-                className="input text-sm"
-                value={linkedBookingId}
-                onChange={e => {
-                  const id = e.target.value
-                  setLinkedBookingId(id)
-                  if (id) {
-                    const b = bookings.find(b => b.id === id)
-                    if (b && !guestName) {
-                      setGuestName(b.guestName)
-                      setGuestPhone(b.guestPhone ?? '')
-                    }
-                  }
-                }}
-              >
-                <option value="">— Без привязки —</option>
-                {linkableBookings.map(b => {
-                  const r = rooms.find(r => r.id === b.roomId)
-                  const isCI = b.status === 'checked_in'
-                  return (
-                    <option key={b.id} value={b.id}>
-                      {isCI ? '🏠' : '📅'} №{r?.number ?? '?'} — {b.guestName}
-                      {isCI ? ' (проживает)' : ''}
-                    </option>
-                  )
-                })}
-              </select>
-            </div>
-
-            <div>
-              <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">
-                Примечание
-              </label>
-              <textarea
-                className="input resize-none text-sm"
-                rows={2}
-                placeholder="Дополнительно..."
-                value={notes}
-                onChange={e => setNotes(e.target.value)}
-              />
-            </div>
-          </div>
-
-          {/* Price summary */}
-          <div className="rounded-xl bg-slate-50 dark:bg-slate-700/50 px-4 py-3 flex items-center justify-between">
-            <span className="text-sm text-slate-600 dark:text-slate-300">
-              {isFullDay
-                ? `Весь день (${obj.openHour}:00 – ${obj.closeHour}:00)`
-                : `${hours} ч × ${obj.pricePerHour.toLocaleString('ru-RU')} ₽`}
-            </span>
-            <span className="text-lg font-bold text-slate-900 dark:text-slate-100">
-              {totalAmount.toLocaleString('ru-RU')} ₽
-            </span>
-          </div>
-
-          {/* Payment */}
-          <div className="space-y-2">
-            <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide">
-              Оплата при бронировании
-            </label>
-            <div className="grid grid-cols-3 gap-1.5">
-              {([
-                { id: 'cash' as const,     label: 'Наличные', icon: Banknote },
-                { id: 'card' as const,     label: 'Карта',    icon: CreditCard },
-                { id: 'transfer' as const, label: 'Перевод',  icon: Building2 },
-              ]).map(m => (
-                <button
-                  key={m.id} type="button" onClick={() => setPayMethod(m.id)}
-                  className={cn(
-                    'flex flex-col items-center gap-1 py-2 rounded-lg border text-xs font-medium transition-colors',
-                    payMethod === m.id
-                      ? 'bg-brand-600 border-brand-600 text-white'
-                      : 'bg-white dark:bg-slate-700 border-slate-200 dark:border-slate-600 text-slate-600 dark:text-slate-300',
-                  )}
-                >
-                  <m.icon size={14} /> {m.label}
-                </button>
-              ))}
-            </div>
-            <input
-              type="number"
-              className="input text-sm"
-              placeholder={`Сумма (макс. ${totalAmount.toLocaleString('ru-RU')} ₽)`}
-              value={paidAmount}
-              onChange={e => setPaidAmount(e.target.value)}
-              min="0"
-              max={totalAmount}
-            />
-            {paidAmount && parseFloat(paidAmount) > 0 && parseFloat(paidAmount) < totalAmount && (
-              <p className="text-xs text-amber-600 dark:text-amber-400">
-                Остаток: {(totalAmount - parseFloat(paidAmount)).toLocaleString('ru-RU')} ₽
-              </p>
-            )}
           </div>
         </div>