import 'package:flutter/material.dart';
import 'package:supplier_new/common/settings.dart';

void main() => runApp(const MaterialApp(home: ServiceLocation()));

class ServiceLocation extends StatefulWidget {
  const ServiceLocation({super.key});

  @override
  State<ServiceLocation> createState() => _ServiceLocationState();
}

class _ServiceLocationState extends State<ServiceLocation> {
  final _formKey = GlobalKey<FormState>();
  String _deliveryFrom = 'business';
  final TextEditingController _radiusController =
  TextEditingController(text: "10");
  bool _customizeEachSource = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,
        surfaceTintColor: Colors.transparent,
        elevation: 0,
        scrolledUnderElevation: 0,
        title: const Text("Complete Profile"),
        actions: [
          IconButton(
            splashRadius: 20,
            icon: const Image(
              image: AssetImage('images/calendar_appbar.png'),
              width: 22,
              height: 22,
            ),
            onPressed: () {},
          ),
          IconButton(
            splashRadius: 20,
            icon: Image.asset('images/notification_appbar.png',
                width: 22, height: 22),
            onPressed: () {},
          ),
        ],
      ),
      body: SafeArea(
        child: Form(
          key: _formKey,
          child: ListView(
            padding: const EdgeInsets.fromLTRB(20, 10, 20, 24),
            children: [
              // Step indicator
              Text("Step 3/5",
                  style:
                  fontTextStyle(16, const Color(0xFFC3C4C4), FontWeight.w500)),
              const SizedBox(height: 16),
              Row(
                children: List.generate(5, (index) {
                  final isFilled = index < 3;
                  return Expanded(
                    child: Container(
                      margin: const EdgeInsets.symmetric(horizontal: 2),
                      height: 5,
                      decoration: BoxDecoration(
                        color: isFilled
                            ? const Color(0xFF0D3771)
                            : const Color(0xFFE6E6E6),
                        borderRadius: BorderRadius.circular(2),
                      ),
                    ),
                  );
                }),
              ),

              const SizedBox(height: 16),
              Text("SOURCE LOCATION",
                  style:
                  fontTextStyle(20, const Color(0xFF515253), FontWeight.w600)),
              const SizedBox(height: 8),
              Align(
                alignment: Alignment.centerLeft,
                child: Image.asset('images/marker-pin.png', width: 24, height: 24),
              ),
              const SizedBox(height: 12),
              Text(
                "Define where you want to provide delivery services",
                style:
                fontTextStyle(14, const Color(0xFF939495), FontWeight.w500),
              ),
              const SizedBox(height: 6),

              // Radio Buttons
              RadioListTile<String>(
                value: 'business',
                groupValue: _deliveryFrom,
                onChanged: (value) =>
                    setState(() => _deliveryFrom = value ?? 'business'),
                title: Text("From Business Location",
                    style: fontTextStyle(
                        14, const Color(0xFF2D2E30), FontWeight.w500)),
                dense: true,
                contentPadding: EdgeInsets.zero,
                visualDensity:
                const VisualDensity(horizontal: 0, vertical: -3),
              ),
              RadioListTile<String>(
                value: 'source',
                groupValue: _deliveryFrom,
                onChanged: (value) =>
                    setState(() => _deliveryFrom = value ?? 'source'),
                title: Text("From Source Locations",
                    style: fontTextStyle(
                        14, const Color(0xFF2D2E30), FontWeight.w500)),
                dense: true,
                contentPadding: EdgeInsets.zero,
                visualDensity:
                const VisualDensity(horizontal: 0, vertical: -3),
              ),

              const SizedBox(height: 12),

              // ✅ Business Location Section
              Visibility(
                visible: _deliveryFrom == 'business',
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text("Delivery Radius (in Kms) *",
                        style: fontTextStyle(
                            14, const Color(0xFF2D2E30), FontWeight.w500)),
                    const SizedBox(height: 6),
                    TextFormField(
                      controller: _radiusController,
                      keyboardType: TextInputType.number,
                      decoration: InputDecoration(
                        hintText: "Enter radius in kms",
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                        ),
                        contentPadding: const EdgeInsets.symmetric(
                            horizontal: 12, vertical: 12),
                      ),
                    ),

                    const SizedBox(height: 12),
                    Container(
                      width: double.infinity,
                      height: 160,
                      decoration: const BoxDecoration(
                        image: DecorationImage(
                          image: AssetImage('images/google_maps.png'),
                          fit: BoxFit.contain,
                        ),
                      ),
                    ),
                  ],
                ),
              ),

              // ✅ Source Location Customization Section
              Visibility(
                visible: _deliveryFrom == 'source',
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SizedBox(height: 12),

                    // 🔹 Checkbox toggle
                    Row(
                      children: [
                        Checkbox(
                          value: _customizeEachSource,
                          onChanged: (val) =>
                              setState(() => _customizeEachSource = val ?? false),
                        ),
                        const SizedBox(width: 6),
                        Expanded(
                          child: Text(
                            "Customize for each source location",
                            style: fontTextStyle(
                                14, const Color(0xFF2D2E30), FontWeight.w500),
                          ),
                        ),
                      ],
                    ),

                    const SizedBox(height: 12),

                    // 🔹 Only the list hides/shows
                    Visibility(
                      visible: _customizeEachSource,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          _SectionHeaderBar(title: "SOURCE LOCATION #1"),
                          const SizedBox(height: 12),
                          Text(
                            "Delivery Radius (in Kms) *",
                            style: fontTextStyle(
                                14, const Color(0xFF2D2E30), FontWeight.w500),
                          ),
                          const SizedBox(height: 6),
                          TextFormField(
                            controller: TextEditingController(text: "10"),
                            keyboardType: TextInputType.number,
                            decoration: InputDecoration(
                              hintText: "Enter radius in kms",
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(8),
                              ),
                              contentPadding:
                              const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
                            ),
                          ),
                          const SizedBox(height: 12),
                          _SectionHeaderBar(title: "SOURCE LOCATION #2"),
                          const SizedBox(height: 12),
                          Text(
                            "Delivery Radius (in Kms) *",
                            style: fontTextStyle(
                                14, const Color(0xFF2D2E30), FontWeight.w500),
                          ),
                          const SizedBox(height: 6),
                          TextFormField(
                            controller: TextEditingController(text: "8"),
                            keyboardType: TextInputType.number,
                            decoration: InputDecoration(
                              hintText: "Enter radius in kms",
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(8),
                              ),
                              contentPadding:
                              const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
                            ),
                          ),
                          const SizedBox(height: 12),
                        ],
                      ),
                    ),

                    // 🔹 Map always visible
                    Container(
                      width: double.infinity,
                      height: 160,
                      decoration: const BoxDecoration(
                        image: DecorationImage(
                          image: AssetImage('images/google_maps.png'),
                          fit: BoxFit.contain,
                        ),
                      ),
                    ),
                  ],
                ),
              ),



              const SizedBox(height: 24),
              Text("Types of Services",
                  style: fontTextStyle(
                      16, const Color(0xFF2D2E30), FontWeight.w600)),
              const SizedBox(height: 12),
              Text("Define what type of services you would wish to provide",
                  style:
                  fontTextStyle(14, const Color(0xFF939495), FontWeight.w500)),
              const SizedBox(height: 20),

              _serviceItem("24/7 Emergency services"),
              _serviceItem("Scheduled water deliveries"),
              _serviceItem("Bulk water deliveries"),
              _serviceItem("Long-term water delivery plans"),
              _serviceItem("Industrial/Commercial water deliveries"),

              const SizedBox(height: 24),
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: const Color(0xFF8270DB),
                    foregroundColor: Colors.white,
                    padding: const EdgeInsets.symmetric(vertical: 14),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(24)),
                  ),
                  onPressed: () {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text(
                            "Saved successfully for ${_deliveryFrom == 'business' ? 'Business Location' : 'Source Locations'}"),
                      ),
                    );
                  },
                  child: Text("Save & Continue",
                      style: fontTextStyle(14, Colors.white, FontWeight.w400)),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _serviceItem(String label) => Padding(
    padding: const EdgeInsets.only(bottom: 12),
    child: Row(
      children: [
        const Icon(Icons.check_box_outline_blank,
            size: 20, color: Color(0xFF939495)),
        const SizedBox(width: 8),
        Text(label,
            style:
            fontTextStyle(12, const Color(0xFF2D2E30), FontWeight.w400)),
      ],
    ),
  );
}

class _SectionHeaderBar extends StatelessWidget {
  final String title;

  const _SectionHeaderBar({required this.title, super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFFEEEEEE),
        border: Border.all(color: const Color(0xFFE5E7EB), width: 1),
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.04),
            blurRadius: 6,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      child: Text(title,
          style:
          fontTextStyle(10, const Color(0xFF2D2E30), FontWeight.w600)),
    );
  }
}