import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class TopUpAddBank extends StatefulWidget {
  const TopUpAddBank({Key? key}) : super(key: key);

  @override
  State<TopUpAddBank> createState() => _TopUpAddBankState();
}

class _TopUpAddBankState extends State<TopUpAddBank> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          actions: [
            CupertinoButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: IconButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                icon: const Icon(Icons.clear,color: Colors.grey,),
              ),
            )
          ],
          leading: CupertinoButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: const Icon(
              Icons.chevron_left,
              color: Colors.black54,
            ),
          ),
          elevation: 0,
          title: Text(
            "เพิ่มบัญชีกับธนาคาร",
            textAlign: TextAlign.center,
            style: GoogleFonts.kanit(
              color: Colors.black,
              fontSize: 20,
            ),
          ),
        ),
        body: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: Container(
                child: Row(
                  children: [
                    Image(
                      image: AssetImage('images/bank/krungthai.png'),
                      fit: BoxFit.cover,
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    Text(
                      "Krungthai Bank",
                      style: TextStyle(
                        color: Color(0xff050505),
                        fontSize: 18,
                        fontWeight: FontWeight.w300,
                      ),
                    )
                  ],
                ),
                height: 56,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6),
                  color: Colors.grey.shade100,
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: Container(
                child: Row(
                  children: [
                    Image(
                      image: AssetImage('images/bank/kbank.png'),
                      fit: BoxFit.cover,
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    Text(
                      "KASIKORNBANK",
                      style: TextStyle(
                        color: Color(0xff050505),
                        fontSize: 18,
                        fontWeight: FontWeight.w300,
                      ),
                    )
                  ],
                ),
                height: 56,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6),
                  color: Colors.grey.shade100,
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: InkWell(
                onTap: () {
                  showModalBottomSheet<void>(
                      context: context,
                      isScrollControlled: true,useSafeArea: true,
                      builder: (BuildContext context) {
                        return SafeArea(child: TopUpAddBankDetail());
                      });
                },
                child: Container(
                  child: Row(
                    children: [
                      Image(
                        image: AssetImage('images/bank/scb.png'),
                        fit: BoxFit.cover,
                      ),
                      SizedBox(
                        width: 20,
                      ),
                      Text(
                        "Siam Commercial Bank",
                        style: TextStyle(
                          color: Color(0xff050505),
                          fontSize: 18,
                          fontWeight: FontWeight.w300,
                        ),
                      )
                    ],
                  ),
                  height: 56,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(6),
                    color: Colors.grey.shade100,
                  ),
                ),
              ),
            )
          ],
        ));
  }
}

class TopUpAddBankDetail extends StatefulWidget {
  const TopUpAddBankDetail({Key? key}) : super(key: key);

  @override
  State<TopUpAddBankDetail> createState() => _TopUpAddBankDetailState();
}

class _TopUpAddBankDetailState extends State<TopUpAddBankDetail> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          actions: [
            CupertinoButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: IconButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                icon: const Icon(Icons.clear,color: Colors.grey,),
              ),
            )
          ],
          leading: CupertinoButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: const Icon(
              Icons.chevron_left,
              color: Colors.black54,
            ),
          ),
          elevation: 0,
          title: Text(
            "เพิ่มบัญชีกับธนาคาร",
            textAlign: TextAlign.center,
            style: GoogleFonts.kanit(
              color: Colors.black,
              fontSize: 20,
            ),
          ),
        ),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                child: Row(
                  children: [
                    Image(
                      image: AssetImage('images/bank/scb.png'),
                      fit: BoxFit.cover,
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    Text(
                      "Siam Commercial Bank",
                      style: TextStyle(
                        color: Color(0xff050505),
                        fontSize: 18,
                        fontWeight: FontWeight.w300,
                      ),
                    )
                  ],
                ),
                height: 56,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6),
                  color: Colors.grey.shade100,
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Text(
                "ชื่อสาขา",
                style: TextStyle(
                  color: Color(0xff65676b),
                  fontSize: 16,
                  fontWeight: FontWeight.w300,
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Container(
                height: 48,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(100),
                  color: Color(0xfff2f2f2),
                ),
                child: Row(
                  children: [
                    Spacer(),
                    Text(
                      "ชื่อสาขา",
                      textAlign: TextAlign.right,
                      style: TextStyle(
                        color: Color(0xff65676b),
                        fontSize: 20,
                      ),
                    ),
                    SizedBox(
                      width: 20,
                    )
                  ],
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Text(
                "ชื่อบัญชี",
                style: TextStyle(
                  color: Color(0xff65676b),
                  fontSize: 16,
                  fontWeight: FontWeight.w300,
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Container(
                height: 48,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(100),
                  color: Color(0xfff2f2f2),
                ),
                child: Row(
                  children: [
                    Spacer(),
                    Text(
                      "ชื่อบัญชี",
                      textAlign: TextAlign.right,
                      style: TextStyle(
                        color: Color(0xff65676b),
                        fontSize: 20,
                      ),
                    ),
                    SizedBox(
                      width: 20,
                    )
                  ],
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Text(
                "เลขที่บัญชี",
                style: TextStyle(
                  color: Color(0xff65676b),
                  fontSize: 16,
                  fontWeight: FontWeight.w300,
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Container(
                height: 48,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(100),
                  color: Color(0xfff2f2f2),
                ),
                child: Row(
                  children: [
                    Spacer(),
                    Text(
                      "เลขที่บัญชี",
                      textAlign: TextAlign.right,
                      style: TextStyle(
                        color: Color(0xff65676b),
                        fontSize: 20,
                      ),
                    ),
                    SizedBox(
                      width: 20,
                    )
                  ],
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Container(
              child: Row(children: [SizedBox(width: 20,),
                Container(
                  width: 20,
                  height: 16,
                  child: Image(
                    image: AssetImage('images/home/upload.png'),
                    fit: BoxFit.cover,
                  ),
                ),
                Text(
                  "   อัพโหลด / ถ่ายรูป หน้าสมุดบัญชีธนาคาร",
                  style: TextStyle(
                    color: Color(0xff050505),
                    fontSize: 15,
                  ),
                ),Spacer(),Icon(
                  Icons.help_outline,
                  color: Colors.black54,
                ),
                SizedBox(width: 20,),
              ],),
                height: 44,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(100),
                  boxShadow: [
                    BoxShadow(
                      color: Color(0x19000000),
                      blurRadius: 2,
                      offset: Offset(0.75, 1),
                    ),
                  ],
                  color: Color(0xfffbfbfb),
                ),
              ),
              Spacer(),
              InkWell(onTap: (){
                // Navigator.pushNamed(context, '/RegisterPage');
                Navigator.of(context).pop();
                Navigator.of(context).pop();
              },
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  height: 51,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(40),
                    color: Color(0xff9d001b),
                  ),
                  padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 12, ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children:[
                      SizedBox(
                        width: 106,
                        height: 32,
                        child: Text(
                          "ยืนยัน",
                          textAlign: TextAlign.center,
                          style: GoogleFonts.kanit(
                            color: Colors.white,
                            fontSize: 20,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              )
            ],
          ),
        ));
  }
}