From 6fc456522a807e03ec25c404e037809ced3f7f03 Mon Sep 17 00:00:00 2001
From: hamed <15238-genius.ha@users.noreply.drupalcode.org>
Date: Fri, 19 Jun 2026 21:16:51 +0330
Subject: [PATCH] feat: enhance online booking toggle UI and improve booking
 window controls

---
 assets/admin/pages/DoctorDetailPage.tsx | 79 +++++++++++++++----------
 1 file changed, 47 insertions(+), 32 deletions(-)

diff --git a/assets/admin/pages/DoctorDetailPage.tsx b/assets/admin/pages/DoctorDetailPage.tsx
index d1f60872..39cf0b2f 100644
--- a/assets/admin/pages/DoctorDetailPage.tsx
+++ b/assets/admin/pages/DoctorDetailPage.tsx
@@ -12,7 +12,7 @@ import {
   BuildingOfficeIcon, MapPinIcon, AcademicCapIcon, UserIcon,
   PlusIcon, CameraIcon, ChevronDownIcon, ChevronRightIcon, ChevronLeftIcon,
   CheckCircleIcon, XMarkIcon, ExclamationTriangleIcon,
-  HeartIcon, CheckIcon, IdentificationIcon, DocumentTextIcon,
+  HeartIcon, CheckIcon, IdentificationIcon, DocumentTextIcon, GlobeAltIcon,
 } from '@heroicons/react/24/outline';
 import { StarIcon as StarSolid } from '@heroicons/react/24/solid';
 import { toast } from 'sonner';
@@ -1312,39 +1312,54 @@ function WeeklyScheduleTab({ doctorUuid, addresses }: { doctorUuid: string; addr
       )}
 
       {/* ─ نوبت‌دهی آنلاین */}
-      <div className="mb-3 p-3 rounded-xl border border-slate-200 dark:border-gray-700 space-y-3">
-        <label className="flex items-center justify-between gap-3 cursor-pointer">
-          <span className="text-sm font-medium text-slate-700 dark:text-slate-200">نوبت‌دهی آنلاین</span>
-          <input
-            type="checkbox"
-            checked={meta.online_booking_enabled}
-            onChange={(e) => setMeta(m => ({ ...m, online_booking_enabled: e.target.checked }))}
-          />
+      <div className="mb-3 rounded-xl border border-slate-200 dark:border-gray-700 overflow-hidden">
+        {/* header + toggle */}
+        <label className="flex items-center justify-between gap-3 px-4 py-3 cursor-pointer bg-slate-50 dark:bg-gray-800/50">
+          <div className="flex items-center gap-2">
+            <GlobeAltIcon className="w-4 h-4 text-slate-500 dark:text-slate-400 shrink-0" />
+            <span className="text-sm font-medium text-slate-700 dark:text-slate-200">نوبت‌دهی آنلاین</span>
+          </div>
+          <span className="relative inline-flex shrink-0">
+            <input
+              type="checkbox"
+              className="peer sr-only"
+              checked={meta.online_booking_enabled}
+              onChange={(e) => setMeta(m => ({ ...m, online_booking_enabled: e.target.checked }))}
+            />
+            <span className="w-10 h-6 rounded-full bg-slate-300 dark:bg-gray-600 transition-colors peer-checked:bg-emerald-500" />
+            <span className="absolute top-0.5 right-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform peer-checked:-translate-x-4" />
+          </span>
         </label>
-        <div className="flex items-center gap-2">
-          <span className="text-sm text-slate-600 dark:text-slate-400">رزرو آنلاین تا</span>
-          <input
-            type="number"
-            min={1}
-            value={meta.booking_window_value}
-            disabled={!meta.online_booking_enabled}
-            onChange={(e) => setMeta(m => ({ ...m, booking_window_value: Math.max(1, Number(e.target.value) || 1) }))}
-            className="input w-16 text-center"
-          />
-          <select
-            value={meta.booking_window_unit}
-            disabled={!meta.online_booking_enabled}
-            onChange={(e) => setMeta(m => ({ ...m, booking_window_unit: e.target.value as 'week' | 'month' }))}
-            className="input"
-          >
-            <option value="week">هفته</option>
-            <option value="month">ماه</option>
-          </select>
-          <span className="text-sm text-slate-600 dark:text-slate-400">آینده</span>
+
+        {/* booking window control */}
+        <div className={`px-4 py-3 transition-opacity ${meta.online_booking_enabled ? '' : 'opacity-50 pointer-events-none'}`}>
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="text-sm text-slate-600 dark:text-slate-400">رزرو آنلاین تا</span>
+            <div className="flex items-stretch rounded-lg border border-slate-200 dark:border-gray-700 overflow-hidden bg-white dark:bg-gray-900">
+              <input
+                type="number"
+                min={1}
+                value={meta.booking_window_value}
+                disabled={!meta.online_booking_enabled}
+                onChange={(e) => setMeta(m => ({ ...m, booking_window_value: Math.max(1, Number(e.target.value) || 1) }))}
+                className="w-14 text-center text-sm bg-transparent border-0 focus:outline-none focus:ring-0 px-2 py-1.5"
+              />
+              <select
+                value={meta.booking_window_unit}
+                disabled={!meta.online_booking_enabled}
+                onChange={(e) => setMeta(m => ({ ...m, booking_window_unit: e.target.value as 'week' | 'month' }))}
+                className="text-sm bg-slate-50 dark:bg-gray-800 border-0 border-r border-slate-200 dark:border-gray-700 focus:outline-none focus:ring-0 px-2 py-1.5"
+              >
+                <option value="week">هفته</option>
+                <option value="month">ماه</option>
+              </select>
+            </div>
+            <span className="text-sm text-slate-600 dark:text-slate-400">آینده</span>
+          </div>
+          <p className="text-xs text-slate-400 dark:text-slate-500 mt-2 leading-relaxed">
+            بیمار فقط تا این بازه می‌تواند آنلاین نوبت بگیرد؛ روزهای بعد از آن روی تقویم غیرفعال‌اند.
+          </p>
         </div>
-        <p className="text-xs text-slate-400 dark:text-slate-500">
-          بیمار فقط تا این بازه می‌تواند آنلاین نوبت بگیرد؛ روزهای بعد از آن روی تقویم غیرفعال‌اند.
-        </p>
       </div>
 
       {SCHEDULE_DAYS.map(day => {