tripz-llc/dashboards/service/lib/login_page.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:siro_service/constant/colors.dart';
import 'package:siro_service/views/auth/register_page.dart';
import 'package:siro_service/views/widgets/my_textField.dart';
import 'controller/login_controller.dart';

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    final LoginController controller = Get.put(LoginController());

    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: [
          // Background Gradient Element
          Positioned(
            top: -100,
            right: -100,
            child: Container(
              width: 300,
              height: 300,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                gradient: LinearGradient(
                  colors: [AppColor.blueColor.withOpacity(0.2), Colors.transparent],
                  begin: Alignment.topRight,
                  end: Alignment.bottomLeft,
                ),
              ),
            ),
          ),
          
          SafeArea(
            child: SingleChildScrollView(
              padding: const EdgeInsets.symmetric(horizontal: 30.0),
              child: Form(
                key: controller.formKey,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    const SizedBox(height: 80),
                    // App Logo or Icon
                    const Center(
                      child: Icon(
                        Icons.support_agent_rounded,
                        size: 100,
                        color: AppColor.blueColor,
                      ),
                    ),
                    const SizedBox(height: 24),
                    Center(
                      child: Text(
                        'Siro Service'.tr,
                        style: TextStyle(
                          fontSize: 28,
                          fontWeight: FontWeight.bold,
                          color: Colors.black87,
                          letterSpacing: 1.2,
                        ),
                      ),
                    ),
                    Center(
                      child: Text(
                        'Integrated customer service system'.tr,
                        style: TextStyle(
                          fontSize: 16,
                          color: Colors.grey,
                        ),
                      ),
                    ),
                    const SizedBox(height: 60),

                    // Fields with modern styling
                    Text(
                      'Login'.tr,
                      style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.w600,
                        color: Colors.black87,
                      ),
                    ),
                    const SizedBox(height: 20),

                    MyTextForm(
                      controller: controller.email,
                      label: 'البريد الإلكتروني',
                      hint: 'أدخل البريد الإلكتروني',
                      type: TextInputType.emailAddress,
                    ),
                    const SizedBox(height: 20),

                    MyTextForm(
                      controller: controller.password,
                      label: 'كلمة المرور',
                      hint: 'أدخل كلمة المرور',
                      type: TextInputType.visiblePassword,
                    ),
                    if (controller.isFirstRun) ...[
                      Obx(() => Container(
                            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
                            decoration: BoxDecoration(
                              color: Colors.grey.withOpacity(0.08),
                              borderRadius: BorderRadius.circular(16),
                              border: Border.all(color: Colors.grey.withOpacity(0.2)),
                            ),
                            child: DropdownButtonHideUnderline(
                              child: DropdownButton<String>(
                                value: controller.selectedCountry.value,
                                icon: const Icon(Icons.arrow_drop_down, color: AppColor.blueColor),
                                isExpanded: true,
                                dropdownColor: Colors.white,
                                style: const TextStyle(color: Colors.black87, fontSize: 16),
                                items: ['Jordan', 'Egypt', 'Syria'].map((String country) {
                                  return DropdownMenuItem<String>(
                                    value: country,
                                    child: Text(country.tr),
                                  );
                                }).toList(),
                                onChanged: (String? val) {
                                  if (val != null) {
                                    controller.changeCountry(val);
                                  }
                                },
                              ),
                            ),
                          )),
                      const SizedBox(height: 40),
                    ],

                    // Login Button
                    Container(
                      height: 55,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(16),
                        gradient: const LinearGradient(
                          colors: [AppColor.blueColor, Color(0xFF1A237E)],
                        ),
                        boxShadow: [
                          BoxShadow(
                            color: AppColor.blueColor.withOpacity(0.3),
                            blurRadius: 12,
                            offset: const Offset(0, 6),
                          ),
                        ],
                      ),
                      child: Material(
                        color: Colors.transparent,
                        child: InkWell(
                          borderRadius: BorderRadius.circular(16),
                          onTap: () => controller.login(),
                          child: Center(
                            child: Text(
                              'Login'.tr,
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 18,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),

                    const SizedBox(height: 30),

                    // Register Link
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          'Don\'t have an employee account?'.tr,
                          style: TextStyle(color: Colors.grey),
                        ),
                        TextButton(
                          onPressed: () => Get.to(() => const RegisterPage()),
                          child: Text(
                            'Create new account'.tr,
                            style: TextStyle(
                              color: AppColor.blueColor,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}