diff --git a/lib/screens/request_leave_screen.dart b/lib/screens/request_leave_screen.dart index c3558b8..d664d48 100644 --- a/lib/screens/request_leave_screen.dart +++ b/lib/screens/request_leave_screen.dart @@ -131,6 +131,7 @@ class _RequestLeaveScreenState extends State { @override Widget build(BuildContext context) { return Scaffold( + resizeToAvoidBottomInset: true, // ✅ IMPORTANT body: AppBackground( child: SafeArea( child: Column( @@ -150,324 +151,33 @@ class _RequestLeaveScreenState extends State { // Title // const SizedBox(height: 30), Flexible( - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 25), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - // Fixed alignment for "طلب أجازة" - const Align( - alignment: Alignment.topRight, - child: Text( - "طلب أجازة ", - style: TextStyle( - color: Colors.white, - fontSize: 28, - fontWeight: FontWeight.bold, - ), - ), - ), - - const SizedBox(height: 10), - //============================= - // DROPDOWN: نوع الإجازة - //============================= - Align( - alignment: Alignment.centerRight, - child: const Text( - "نوع الإجازة", - style: TextStyle( - color: Colors.white, - fontSize: 18, - fontWeight: FontWeight.w600, - ), - ), - ), - - const SizedBox(height: 5), - - // Modified dropdown with disabled state - Directionality( - textDirection: TextDirection.rtl, - child: Opacity( - opacity: isTimedLeave ? 0.45 : 1.0, - child: IgnorePointer( - ignoring: isTimedLeave, - child: Container( - width: double.infinity, - padding: const EdgeInsets.symmetric( - horizontal: 20, - ), - height: 58, - decoration: BoxDecoration( - color: - isTimedLeave - ? Colors.grey[300] - : Colors.white, - borderRadius: BorderRadius.circular(14), - boxShadow: const [ - BoxShadow( - color: Color(0x22000000), - blurRadius: 8, - offset: Offset(0, 3), - ), - ], - ), - child: DropdownButtonHideUnderline( - child: DropdownButton( - value: leaveType, - icon: const Icon( - Icons.keyboard_arrow_down_rounded, - color: Colors.black, - size: 28, - ), - style: const TextStyle( - color: Colors.black, - fontSize: 17, - ), - isExpanded: true, - onChanged: (value) { - setState(() { - leaveType = value!; - // Set toggle based on selected value - isTimedLeave = value == "أجازة زمنية"; - }); - }, - items: [ - DropdownMenuItem( - value: "إجازة مرضية ", - child: Directionality( - textDirection: TextDirection.rtl, - child: Align( - alignment: Alignment.centerRight, - child: Text("إجازة مرضية "), - ), - ), - ), - DropdownMenuItem( - value: "إجازة مدفوعة", - child: Directionality( - textDirection: TextDirection.rtl, - child: Align( - alignment: Alignment.centerRight, - child: Text("إجازة مدفوعة"), - ), - ), - ), - DropdownMenuItem( - value: "إجازة غير مدفوعة", - child: Directionality( - textDirection: TextDirection.rtl, - child: Align( - alignment: Alignment.centerRight, - child: Text("إجازة غير مدفوعة"), - ), - ), - ), - DropdownMenuItem( - value: "أجازة زمنية", - child: Directionality( - textDirection: TextDirection.rtl, - child: Align( - alignment: Alignment.centerRight, - child: Text("أجازة زمنية"), - ), - ), - ), - ], - ), - ), + child: SingleChildScrollView( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 25), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + // Fixed alignment for "طلب أجازة" + const Align( + alignment: Alignment.topRight, + child: Text( + "طلب أجازة ", + style: TextStyle( + color: Colors.white, + fontSize: 28, + fontWeight: FontWeight.bold, ), ), ), - ), - - const SizedBox(height: 25), - - //============================= - // PERFECT CUSTOM TOGGLE (NEW) - //============================= - GestureDetector( - onTap: () { - setState(() { - isTimedLeave = !isTimedLeave; - // Set leave type to "أجازة زمنية" when toggle is ON - if (isTimedLeave) { - leaveType = "أجازة زمنية"; - } - }); - }, - child: Row( - children: [ - // ---------- TOGGLE ---------- - AnimatedContainer( - duration: const Duration(milliseconds: 250), - width: 75, - height: 30, - padding: const EdgeInsets.symmetric( - horizontal: 4, - ), - decoration: BoxDecoration( - color: - isTimedLeave - ? const Color( - 0xFF0A6B4A, - ) // ON green track - : const Color( - 0xFF9E9E9E, - ), // OFF grey track - borderRadius: BorderRadius.circular(40), - ), - child: Align( - alignment: - isTimedLeave - ? Alignment.centerRight - : Alignment.centerLeft, - child: AnimatedContainer( - duration: const Duration(milliseconds: 250), - width: 30, - height: 30, - decoration: BoxDecoration( - color: - isTimedLeave - ? const Color(0xFF12BE85) // ON knob - : Colors.white, // OFF knob - shape: BoxShape.circle, - boxShadow: [ - BoxShadow( - color: const Color(0x2D000000), - blurRadius: 6, - offset: const Offset(0, 2), - ), - ], - ), - ), - ), - ), - - const SizedBox(width: 14), - - // ---------- Dot (ALWAYS visible) ---------- - Container( - width: 10, - height: 10, - decoration: const BoxDecoration( - color: Color(0xFF32C59A), - shape: BoxShape.circle, - ), - ), - - const SizedBox(width: 6), - - // ---------- Line (ALWAYS visible) ---------- - Expanded( - child: Container( - height: 2, - color: const Color(0xFF32C59A), - ), - ), - - const SizedBox(width: 12), - - // ---------- Label ---------- - const Text( - "إجازة زمنية", - style: TextStyle( - color: Colors.white, - fontSize: 19, - fontWeight: FontWeight.w600, - ), - ), - ], - ), - ), - - const SizedBox(height: 20), - - // ============================= - // DATE PICKER BOX - // ============================= - Container( - padding: const EdgeInsets.all(16), - decoration: BoxDecoration( - color: const Color(0xFFF4F4F4), - borderRadius: BorderRadius.circular(16), - boxShadow: const [ - BoxShadow( - color: Color(0x33000000), - blurRadius: 10, - offset: Offset(0, 4), - ), - ], - ), - child: Column( - children: [ - Row( - mainAxisAlignment: - MainAxisAlignment.end, // ALIGN RIGHT - children: [ - // TEXT aligned right - const Text( - "فترة الإجازة", - style: TextStyle( - color: Colors.black, - fontSize: 18, - fontWeight: FontWeight.bold, - ), - ), - - const SizedBox(width: 8), - - // 🟢 YOUR CUSTOM SVG ICON - SvgPicture.asset( - "assets/images/calendar.svg", // <-- replace with your icon filename - width: 24, - height: 24, - color: Color( - 0xFF007C46, - ), // Optional: match your green - ), - ], - ), - - const SizedBox(height: 15), - - // From date row - _dateRow( - label: "من", - date: fromDate!, - time: fromTime!, - onDateTap: - isTimedLeave ? null : () => pickDate(true), - onTimeTap: () => pickTime(true), - ), - - const SizedBox(height: 15), - - // To date row - _dateRow( - label: "الى", - date: toDate!, - time: toTime!, - onDateTap: - isTimedLeave ? null : () => pickDate(false), - onTimeTap: () => pickTime(false), - ), - ], - ), - ), - - const SizedBox(height: 10), - - // ============================= - // REASON TEXTFIELD (Two Containers) - // ============================= - Align( - alignment: Alignment.centerRight, - child: Directionality( - textDirection: TextDirection.rtl, + + const SizedBox(height: 10), + //============================= + // DROPDOWN: نوع الإجازة + //============================= + Align( + alignment: Alignment.centerRight, child: const Text( - "السبب", + "نوع الإجازة", style: TextStyle( color: Colors.white, fontSize: 18, @@ -475,64 +185,357 @@ class _RequestLeaveScreenState extends State { ), ), ), - ), - - // OUTER BORDER CONTAINER - Container( - padding: const EdgeInsets.all( - 12, - ), // border thickness space - decoration: BoxDecoration( - border: Border.all( - color: Color(0xFF00FFAA), // green border - width: 0.5, - ), - borderRadius: BorderRadius.circular(14), - ), - - // INNER TEXTFIELD CONTAINER - child: Container( - height: 70, - padding: const EdgeInsets.symmetric( - horizontal: 14, - vertical: 10, - ), - decoration: BoxDecoration( - color: const Color(0xFFEAEAEA), - borderRadius: BorderRadius.circular(12), - ), - // Added Directionality to fix text direction - child: Directionality( - textDirection: TextDirection.rtl, - child: TextField( - controller: reasonController, - maxLines: 5, - textAlign: - TextAlign - .right, // Added this to align text to the right - decoration: const InputDecoration( - border: InputBorder.none, - hintText: - "اكتب السبب", // Added placeholder text - hintStyle: TextStyle(color: Colors.grey), + + const SizedBox(height: 5), + + // Modified dropdown with disabled state + Directionality( + textDirection: TextDirection.rtl, + child: Opacity( + opacity: isTimedLeave ? 0.45 : 1.0, + child: IgnorePointer( + ignoring: isTimedLeave, + child: Container( + width: double.infinity, + padding: const EdgeInsets.symmetric( + horizontal: 20, + ), + height: 58, + decoration: BoxDecoration( + color: + isTimedLeave + ? Colors.grey[300] + : Colors.white, + borderRadius: BorderRadius.circular(14), + boxShadow: const [ + BoxShadow( + color: Color(0x22000000), + blurRadius: 8, + offset: Offset(0, 3), + ), + ], + ), + child: DropdownButtonHideUnderline( + child: DropdownButton( + value: leaveType, + icon: const Icon( + Icons.keyboard_arrow_down_rounded, + color: Colors.black, + size: 28, + ), + style: const TextStyle( + color: Colors.black, + fontSize: 17, + ), + isExpanded: true, + onChanged: (value) { + setState(() { + leaveType = value!; + // Set toggle based on selected value + isTimedLeave = value == "أجازة زمنية"; + }); + }, + items: [ + DropdownMenuItem( + value: "إجازة مرضية ", + child: Directionality( + textDirection: TextDirection.rtl, + child: Align( + alignment: Alignment.centerRight, + child: Text("إجازة مرضية "), + ), + ), + ), + DropdownMenuItem( + value: "إجازة مدفوعة", + child: Directionality( + textDirection: TextDirection.rtl, + child: Align( + alignment: Alignment.centerRight, + child: Text("إجازة مدفوعة"), + ), + ), + ), + DropdownMenuItem( + value: "إجازة غير مدفوعة", + child: Directionality( + textDirection: TextDirection.rtl, + child: Align( + alignment: Alignment.centerRight, + child: Text("إجازة غير مدفوعة"), + ), + ), + ), + DropdownMenuItem( + value: "أجازة زمنية", + child: Directionality( + textDirection: TextDirection.rtl, + child: Align( + alignment: Alignment.centerRight, + child: Text("أجازة زمنية"), + ), + ), + ), + ], + ), + ), ), ), ), ), - ), - - const SizedBox(height: 20), - - // CONFIRM BUTTON - Center( - child: OnboardingButton( - text: "تأكيد الطلب", - backgroundColor: const Color(0xFFD1FEF0), - textColor: Colors.black, // Changed to black - onPressed: _saveLeaveRequest, // Call the save method + + const SizedBox(height: 25), + + //============================= + // PERFECT CUSTOM TOGGLE (NEW) + //============================= + GestureDetector( + onTap: () { + setState(() { + isTimedLeave = !isTimedLeave; + // Set leave type to "أجازة زمنية" when toggle is ON + if (isTimedLeave) { + leaveType = "أجازة زمنية"; + } + }); + }, + child: Row( + children: [ + // ---------- TOGGLE ---------- + AnimatedContainer( + duration: const Duration(milliseconds: 250), + width: 75, + height: 30, + padding: const EdgeInsets.symmetric( + horizontal: 4, + ), + decoration: BoxDecoration( + color: + isTimedLeave + ? const Color( + 0xFF0A6B4A, + ) // ON green track + : const Color( + 0xFF9E9E9E, + ), // OFF grey track + borderRadius: BorderRadius.circular(40), + ), + child: Align( + alignment: + isTimedLeave + ? Alignment.centerRight + : Alignment.centerLeft, + child: AnimatedContainer( + duration: const Duration(milliseconds: 250), + width: 30, + height: 30, + decoration: BoxDecoration( + color: + isTimedLeave + ? const Color(0xFF12BE85) // ON knob + : Colors.white, // OFF knob + shape: BoxShape.circle, + boxShadow: [ + BoxShadow( + color: const Color(0x2D000000), + blurRadius: 6, + offset: const Offset(0, 2), + ), + ], + ), + ), + ), + ), + + const SizedBox(width: 14), + + // ---------- Dot (ALWAYS visible) ---------- + Container( + width: 10, + height: 10, + decoration: const BoxDecoration( + color: Color(0xFF32C59A), + shape: BoxShape.circle, + ), + ), + + const SizedBox(width: 6), + + // ---------- Line (ALWAYS visible) ---------- + Expanded( + child: Container( + height: 2, + color: const Color(0xFF32C59A), + ), + ), + + const SizedBox(width: 12), + + // ---------- Label ---------- + const Text( + "إجازة زمنية", + style: TextStyle( + color: Colors.white, + fontSize: 19, + fontWeight: FontWeight.w600, + ), + ), + ], + ), ), - ), - ], + + const SizedBox(height: 20), + + // ============================= + // DATE PICKER BOX + // ============================= + Container( + padding: const EdgeInsets.all(16), + decoration: BoxDecoration( + color: const Color(0xFFF4F4F4), + borderRadius: BorderRadius.circular(16), + boxShadow: const [ + BoxShadow( + color: Color(0x33000000), + blurRadius: 10, + offset: Offset(0, 4), + ), + ], + ), + child: Column( + children: [ + Row( + mainAxisAlignment: + MainAxisAlignment.end, // ALIGN RIGHT + children: [ + // TEXT aligned right + const Text( + "فترة الإجازة", + style: TextStyle( + color: Colors.black, + fontSize: 18, + fontWeight: FontWeight.bold, + ), + ), + + const SizedBox(width: 8), + + // 🟢 YOUR CUSTOM SVG ICON + SvgPicture.asset( + "assets/images/calendar.svg", // <-- replace with your icon filename + width: 24, + height: 24, + color: Color( + 0xFF007C46, + ), // Optional: match your green + ), + ], + ), + + const SizedBox(height: 15), + + // From date row + _dateRow( + label: "من", + date: fromDate!, + time: fromTime!, + onDateTap: + isTimedLeave ? null : () => pickDate(true), + onTimeTap: () => pickTime(true), + ), + + const SizedBox(height: 15), + + // To date row + _dateRow( + label: "الى", + date: toDate!, + time: toTime!, + onDateTap: + isTimedLeave ? null : () => pickDate(false), + onTimeTap: () => pickTime(false), + ), + ], + ), + ), + + const SizedBox(height: 10), + + // ============================= + // REASON TEXTFIELD (Two Containers) + // ============================= + Align( + alignment: Alignment.centerRight, + child: Directionality( + textDirection: TextDirection.rtl, + child: const Text( + "السبب", + style: TextStyle( + color: Colors.white, + fontSize: 18, + fontWeight: FontWeight.w600, + ), + ), + ), + ), + + // OUTER BORDER CONTAINER + Container( + padding: const EdgeInsets.all( + 12, + ), // border thickness space + decoration: BoxDecoration( + border: Border.all( + color: Color(0xFF00FFAA), // green border + width: 0.5, + ), + borderRadius: BorderRadius.circular(14), + ), + + // INNER TEXTFIELD CONTAINER + child: Container( + height: 70, + padding: const EdgeInsets.symmetric( + horizontal: 14, + vertical: 10, + ), + decoration: BoxDecoration( + color: const Color(0xFFEAEAEA), + borderRadius: BorderRadius.circular(12), + ), + // Added Directionality to fix text direction + child: Directionality( + textDirection: TextDirection.rtl, + child: TextField( + controller: reasonController, + maxLines: 5, + textAlign: + TextAlign + .right, // Added this to align text to the right + decoration: const InputDecoration( + border: InputBorder.none, + hintText: + "اكتب السبب", // Added placeholder text + hintStyle: TextStyle(color: Colors.grey), + ), + ), + ), + ), + ), + + const SizedBox(height: 20), + + // CONFIRM BUTTON + Center( + child: OnboardingButton( + text: "تأكيد الطلب", + backgroundColor: const Color(0xFFD1FEF0), + textColor: Colors.black, // Changed to black + onPressed: _saveLeaveRequest, // Call the save method + ), + ), + ], + ), ), ), ),