import 'package:flutter/material.dart';
import 'package:dropdown_button2/dropdown_button2.dart';

class CreateCreditAccountScreen extends StatefulWidget {
  @override
  _CreateCreditAccountScreenState createState() => _CreateCreditAccountScreenState();
}
class _CreateCreditAccountScreenState extends State<CreateCreditAccountScreen> {
  String? selectedCustomer;
  String paymentTerm = 'Net 30';
  final creditLimitController = TextEditingController(text: '₹500');
  final openingBalanceController = TextEditingController(text: '₹500');
  final List<Map<String, String>> customers = [
    {'name': 'Ramakrishna', 'date': '20 August'},
    {'name': 'Mallesham Water Supplies', 'date': '21 August'},
    {'name': 'My Home Bhooja', 'date': '21 August'},
  ];
  final List<String> paymentTerms = ['Net 15', 'Net 30', 'Net 45'];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Create Credit Account'),
        actions: [
          TextButton(
            onPressed: () {},
            child: Text('HELP', style: TextStyle(color: Colors.blue)),
          )
        ],
        backgroundColor: Colors.white,
        foregroundColor: Colors.black,
        elevation: 1,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: ListView(
          children: [
            Text('SELECT CUSTOMER', style: TextStyle(fontWeight: FontWeight.bold)),
            const SizedBox(height: 10),
            ...customers.map((customer) {
              return GestureDetector(
                onTap: () {
                  setState(() {
                    selectedCustomer = customer['name'];
                  });
                },
                child: Container(
                  margin: const EdgeInsets.only(bottom: 10),
                  padding: const EdgeInsets.all(12),
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: selectedCustomer == customer['name'] ? Colors.black : Colors.grey.shade300,
                      width: 1.5,
                    ),
                    borderRadius: BorderRadius.circular(8),
                    color: Colors.white,
                  ),
                  child: Row(
                    children: [
                      CircleAvatar(child: Icon(Icons.person)),
                      const SizedBox(width: 10),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(customer['name']!, style: TextStyle(fontSize: 16)),
                          Text(customer['date']!, style: TextStyle(color: Colors.grey)),
                        ],
                      )
                    ],
                  ),
                ),
              );
            }),
            const SizedBox(height: 20),
            Text('ENTER DETAILS', style: TextStyle(fontWeight: FontWeight.bold)),
            const SizedBox(height: 10),
            TextField(
              controller: creditLimitController,
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                labelText: 'Credit Limit (in ₹) *',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 15),
            DropdownButtonFormField2<String>(
              decoration: InputDecoration(
                labelText: 'Payment Terms *',
                border: OutlineInputBorder(),
              ),
              value: paymentTerm,
              items: paymentTerms.map((term) {
                return DropdownMenuItem<String>(
                  value: term,
                  child: Text(term),
                );
              }).toList(),
              onChanged: (value) {
                setState(() {
                  paymentTerm = value!;
                });
              },
            ),
            const SizedBox(height: 15),
            TextField(
              controller: openingBalanceController,
              keyboardType: TextInputType.number,
              decoration: InputDecoration(
                labelText: 'Opening Balance (in ₹) *',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 10),
            Row(
              children: [
                Icon(Icons.info_outline, color: Colors.orange, size: 18),
                const SizedBox(width: 8),
                Expanded(
                  child: Text(
                    'Creating an Account will send the customer a notification about the details and a request to add balance to start the water delivery plan.',
                    style: TextStyle(color: Colors.black87, fontSize: 13),
                  ),
                )
              ],
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // Add your submission logic here
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: Color(0xFF9375E8),
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
                minimumSize: Size(double.infinity, 50),
              ),
              child: Text('Create Account'),
            )
          ],
        ),
      ),
    );
  }
}