post_enrollment_app/lib/pages/service/popup_widget.dart

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:go_router/go_router.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:nhance_app_pwa/customAppBar/responsive.dart';
import 'package:nhance_app_pwa/pages/postEnrollment/service/svg_service.dart';
import 'package:flutter/foundation.dart';
import 'package:shared_preferences/shared_preferences.dart';

void showBlurPopup(BuildContext context, emp_name) {
  showDialog(
    context: context,
    barrierColor: Colors.black.withOpacity(0.6),
    barrierDismissible: true,
    builder: (context) {
      return BlurPopup(
        empName: emp_name,
        isWeb: kIsWeb,  // WEB OR MOBILE
      );
    },
  );
}

class BlurPopup extends StatelessWidget {
  final String empName;
  final bool isWeb;

  const BlurPopup({super.key, required this.empName,required this.isWeb,});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // Blurred background
        BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
          child: Container(color: Colors.black.withOpacity(0.3)),
        ),

        Align(
          alignment: isWeb ? Alignment.center : Alignment.bottomCenter,
          child: Material(
            // <-- FIX: Add Material widget
            color: Colors.transparent,
            child: Container(
              width: isWeb ? 600 : double.infinity,
              margin: isWeb ? const EdgeInsets.symmetric(horizontal: 20) : null,
              padding: EdgeInsets.all(20),
              decoration: BoxDecoration(
                color: Color(0xFF55babe),
                borderRadius: isWeb ? BorderRadius.all(Radius.circular(20)) : BorderRadius.vertical(top: Radius.circular(25)),
              ),
              child: SingleChildScrollView(
                  child: buildPopupContent(context,empName),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Widget buildPopupContent(BuildContext context, String empName) {
  return Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // if(Responsive.isDesktop(context))
      // Align(
      //   alignment: Alignment.topRight,
      //   child: InkWell(
      //     onTap: () => Navigator.pop(context),
      //     child: const Icon(Icons.close,
      //         size: 26, color: Colors.black87),
      //   ),
      // ),
      // if(Responsive.isDesktop(context))
      // const SizedBox(height: 10),

      // Center(
      //   child: Container(
      //     height: 90,
      //     width: 90,
      //     decoration: const BoxDecoration(
      //       shape: BoxShape.circle,
      //       color: Color(0xFFF8E6E8),
      //     ),
      //     padding: const EdgeInsets.all(18), // adjust svg size
      //     child: SvgPicture.string(SvgService.initialPopup)
      //   ),
      // ),



      // Center(
      //   child: Container(
      //     height: 90,
      //     width: 90,
      //     decoration: const BoxDecoration(
      //       shape: BoxShape.circle,
      //       color: Color(0xFFF8E6E8),
      //     ),
      //     child: const Icon(Icons.rocket_launch_outlined,
      //         color: Colors.red, size: 45),
      //   ),
      // ),
      //
      // const SizedBox(height: 15),

      Center(
        child: Text(
          "🚀 New Policy Alert!",
          style: GoogleFonts.poppins(
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),

      const SizedBox(height: 8),

      Center(
        child: Text(
          "Hello $empName,",
          textAlign: TextAlign.center,
          style: GoogleFonts.poppins(
            fontSize: 18,
            color: Colors.black87,
            fontWeight: FontWeight.w600,
          ),
        ),
      ),

      const SizedBox(height: 10),

      Text(
        "We've confirmed your enrollment in your new health insurance policy.",
        style: GoogleFonts.poppins(
            fontSize: 15, color: Colors.black87),
      ),

      const SizedBox(height: 8),

      Text(
        "Your next crucial step is to ensure your coverage is accurate! "
            "Please take a moment now to verify and update the following information:",
        style: GoogleFonts.poppins(
            fontSize: 15, color: Colors.black87),
      ),

      const SizedBox(height: 10),

      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Icon(Icons.check_circle,
              color: Color(0xFFE26728), size: 25),
          SizedBox(width: 10),
          Expanded(
            child: Text(
              "Your Personal Profile: Confirm your contact details and basic information are up-to-date.",
              style: GoogleFonts.poppins(fontSize: 15),
            ),
          ),
        ],
      ),

      const SizedBox(height: 10),

      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Icon(Icons.groups,
              color: Color(0xFFE26728), size: 25),
          SizedBox(width: 10),
          Expanded(
            child: Text(
              "Family Composition: Check and update the list of covered dependents on your policy.",
              style: GoogleFonts.poppins(fontSize: 15),
            ),
          ),
        ],
      ),

      const SizedBox(height: 10),

      Text(
        "Why update now? Accurate details ensure fast claim processing and correct coverage for your entire family.",
        style: GoogleFonts.poppins(
            fontSize: 15, color: Colors.black87),
      ),

      const SizedBox(height: 15),

      // Primary Button — Update Details
      SizedBox(
        width: double.infinity,
        height: 40,
        child: DecoratedBox(
          decoration: BoxDecoration(
            color: Color(0xFFE26728),
            borderRadius: BorderRadius.circular(10),
          ),
          child: ElevatedButton(
            onPressed: () async {
              final prefs = await SharedPreferences.getInstance();
              await prefs.setBool('cancel_flag', true);
              context.go('/empDetails');
            },
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.transparent,
              shadowColor: Colors.transparent,
            ),
            child: Text(
              "Update My Details Now",
              style: GoogleFonts.poppins(
                color: Colors.white,
                fontSize: 15,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
        ),
      ),

      const SizedBox(height: 15),

      Center(
        child: Text(
          "You can complete this later in the Profile section, but we highly recommend doing it now.",
          textAlign: TextAlign.center,
          style: GoogleFonts.poppins(
            fontSize: 14,
            color: Colors.black87,
            fontWeight: FontWeight.w400,
          ),
        ),
      ),

      const SizedBox(height: 15),

      // Cancel Button
      SizedBox(
        width: double.infinity,
        height: 40,
        child: OutlinedButton(
          onPressed: () async {
            final prefs = await SharedPreferences.getInstance();
            await prefs.setBool('cancel_flag', true);   // Save the key

            Navigator.pop(context);
          },
          style: OutlinedButton.styleFrom(
            side: const BorderSide(color: Colors.black54),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
          ),
          child: Text(
            "Cancel And Go Back",
            style: GoogleFonts.poppins(
              color: Colors.black87,
              fontSize: 15,
              fontWeight: FontWeight.w500,
            ),
          ),
        ),
      ),

      const SizedBox(height: 10),
    ],
  );
}