import 'package:feelverapp/ui/favorite/favorite.dart';
import 'package:feelverapp/ui/menu/menu.dart';
import 'package:feelverapp/ui/payment/payment_detail.dart';
import 'package:feelverapp/util/SizeConfig.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Payment extends StatefulWidget {
  @override
  _PaymentState createState() => _PaymentState();
}

class _PaymentState extends State<Payment> {
  @override
  Widget build(BuildContext context) {
    SizeConfig(context);
    return Scaffold(
      body: _setupView(),
      bottomNavigationBar: Container(
        color: Color.fromRGBO(69, 85, 79, 1),
        height: SizeConfig.getWidth(170),
        child: Column(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(left: SizeConfig.getPadding(15), top: 17),
              child: Row(
                children: <Widget>[
                  Icon(
                    Icons.local_offer,
                    color: Colors.white,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 7, right: 12),
                    child: Text(
                      'โค้ดส่วนลด',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: SizeConfig.getFontSize(16),
                      ),
                    ),
                  ),
                  Container(
                    height: 40,
                    width: 200,
                    color: Colors.white,
                    child: TextField(
                      decoration: InputDecoration(
                        border: InputBorder.none,
                      ),
                    ),
                  ),
                  IconButton(
                      icon: Icon(
                        Icons.keyboard_arrow_right,
                        color: Colors.white,
                        size: 40,
                      ),
                      alignment: Alignment(0, 0),
                      onPressed: () {}),
                ],
              ),
            ),
            Divider(
              color: Colors.white,
              height: 35,
              indent: 20,
              endIndent: 20,
            ),
            Container(
              child: Row(
                children: <Widget>[
                  SizedBox(
                    width: SizeConfig.getWidth(75),
                  ),
                  Container(
                    child: Padding(
                      padding: const EdgeInsets.only(left: 50),
                      child: Column(
                        children: <Widget>[
                          Text(
                            'ยอดชำระเงินทั้งหมด',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 16,
                            ),
                          ),
                          Text(
                            '฿2,000',
                            style: TextStyle(
                              color: Color(0xFFEEAFB7),
                              fontSize: 24,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Container(
                    child: Padding(
                      padding: const EdgeInsets.only(left: 25),
                      child: RaisedButton(
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(25.0),
                        ),
                        onPressed: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => Paymentdetail(),
                            ),
                          );
                        },
                        padding: EdgeInsets.only(
                          left: 35,
                          right: 35,
                          top: 15,
                          bottom: 15,
                        ),
                        color: Color(0xFFEEAFB7),
                        child: Text(
                          'ยืนยัน',
                          style: TextStyle(
                            fontSize: 16,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  _setupView() {
    return Column(
      children: <Widget>[
        Stack(
          children: <Widget>[
            Container(
              color: Color.fromRGBO(69, 85, 79, 1),
              height: SizeConfig.getHeight(200),
              width: MediaQuery.of(context).size.width,
            ),
            Positioned(
              top: SizeConfig.getPadding(50),
              left: SizeConfig.getPadding(
                  MediaQuery.of(context).size.width / 3.5),
              child: Container(
                alignment: Alignment.topCenter,
                child: Image.asset(
                  'assets/images/feelver_banner.png',
                  width: MediaQuery.of(context).size.width / 2.5,
                ),
              ),
            ),
            Positioned(
              top: SizeConfig.getPadding(77),
              left: SizeConfig.getPadding(16),
              child: Container(
                child: GestureDetector(
                  onTap: () {
                    showDialog(
                      context: context,
                      builder: (BuildContext context) {
                        return NavDrawer();
                      },
                    );
                  },
                  child: Image.asset(
                    'assets/images/ic_menu.png',
                    height: SizeConfig.getWidth(24),
                    width: SizeConfig.getWidth(30),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            Positioned(
              top: SizeConfig.getPadding(77),
              right: SizeConfig.getPadding(60),
              child: Container(
                child: Image.asset(
                  'assets/images/ic_noti.png',
                  height: SizeConfig.getWidth(30),
                  width: SizeConfig.getWidth(30),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Positioned(
              top: SizeConfig.getPadding(77),
              right: SizeConfig.getPadding(20),
              child: InkWell(
//                onTap: () {
//                  Navigator.push(
//                    context,
//                    MaterialPageRoute(builder: (context) => LoginPage()),
//                  );
//                },
                child: Container(
                  child: Image.asset(
                    'assets/images/ic_userimg.png',
                    height: SizeConfig.getWidth(30),
                    width: SizeConfig.getWidth(30),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
          ],
        ),
        Expanded(
          child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.only(
                left: 10,
                right: 10,
                top: 8,
                bottom: 8,
              ),
              child: Container(
                alignment: FractionalOffset.topLeft,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      'เเพ็คเกจที่คุณเลือก',
                      style: TextStyle(
                          fontSize: SizeConfig.getFontSize(18),
                          fontWeight: FontWeight.bold),
                    ),
                    SizedBox(
                      height: SizeConfig.getHeight(15),
                    ),
                    Container(
                      child: Row(
                        children: <Widget>[
                          Image.asset('assets/images/Thai massage.png'),
                          Padding(
                            padding: const EdgeInsets.only(left: 8),
                            child: Container(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text(
                                    'Ivory Relax and Spa',
                                    style: TextStyle(
                                      fontSize: SizeConfig.getFontSize(16),
                                      fontFamily: "SF_Pro_Text",
                                      fontWeight: FontWeight.bold,
                                      color: Colors.black,
                                    ),
                                  ),
                                  SizedBox(
                                    height: SizeConfig.getHeight(12),
                                  ),
                                  Text(
                                    'นวดแผนไทย',
                                    style: TextStyle(
                                      fontSize: SizeConfig.getFontSize(16),
                                      fontFamily: "SF_Pro_Text",
                                      color: Colors.black,
                                    ),
                                  ),
                                  SizedBox(
                                    height: SizeConfig.getHeight(15),
                                  ),
                                  Row(
                                    children: <Widget>[
                                      Text(
                                        '฿1,000.00',
                                        style: TextStyle(
                                          fontSize: SizeConfig.getFontSize(20),
                                          color: Color(0xFFFD2956),
                                          fontFamily: "SF_Pro_Text",
                                          fontWeight: FontWeight.bold,
                                        ),
                                      ),
                                      SizedBox(
                                        width: SizeConfig.getWidth(120),
                                      ),
                                      Text(
                                        'X1',
                                        style: TextStyle(
                                          color: Color(0xFF9D9D9D),
                                          fontSize: SizeConfig.getFontSize(20),
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                    Divider(
                      color: Colors.black,
                      height: 40,
                      indent: 8,
                      endIndent: 20,
                    ),
                    Container(
                      child: Row(
                        children: <Widget>[
                          Image.asset('assets/images/Thai massage.png'),
                          Padding(
                            padding: const EdgeInsets.only(left: 8),
                            child: Container(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text(
                                    'Ivory Relax and Spa',
                                    style: TextStyle(
                                      fontSize: SizeConfig.getFontSize(16),
                                      fontFamily: "SF_Pro_Text",
                                      fontWeight: FontWeight.bold,
                                      color: Colors.black,
                                    ),
                                  ),
                                  SizedBox(
                                    height: SizeConfig.getHeight(12),
                                  ),
                                  Text(
                                    'นวดแผนไทย',
                                    style: TextStyle(
                                      fontSize: SizeConfig.getFontSize(16),
                                      fontFamily: "SF_Pro_Text",
                                      color: Colors.black,
                                    ),
                                  ),
                                  SizedBox(
                                    height: SizeConfig.getHeight(15),
                                  ),
                                  Row(
                                    children: <Widget>[
                                      Text(
                                        '฿1,000.00',
                                        style: TextStyle(
                                          fontSize: SizeConfig.getFontSize(20),
                                          color: Color(0xFFFD2956),
                                          fontFamily: "SF_Pro_Text",
                                          fontWeight: FontWeight.bold,
                                        ),
                                      ),
                                      SizedBox(
                                        width: SizeConfig.getWidth(120),
                                      ),
                                      Text(
                                        'X1',
                                        style: TextStyle(
                                          color: Color(0xFF9D9D9D),
                                          fontSize: SizeConfig.getFontSize(20),
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                    Divider(
                      color: Colors.black,
                      height: 40,
                      indent: 8,
                      endIndent: 20,
                    ),
                    Text(
                      'ช่องทางการชำระเงิน',
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: SizeConfig.getFontSize(16),
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Row(
                      children: <Widget>[
                        Image.asset(
                          'assets/images/ic_credit.png',
                          height: 50,
                          width: 50,
                        ),
                        Text(
                          'บัตรเครดิต/บัตรเดบิต',
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: SizeConfig.getFontSize(16),
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                    Divider(
                      color: Colors.black,
                      height: 10,
                      indent: 8,
                      endIndent: 20,
                    ),
                    Row(
                      children: <Widget>[
                        Image.asset(
                          'assets/images/ic_Allpay.png',
                          height: 50,
                          width: 50,
                        ),
                        Text(
                          'All Pay',
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: SizeConfig.getFontSize(16),
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                    Divider(
                      color: Colors.black,
                      height: 10,
                      indent: 8,
                      endIndent: 20,
                    ),
                    Row(
                      children: <Widget>[
                        Image.asset(
                          'assets/images/ic_QFpay.png',
                          height: 50,
                          width: 50,
                        ),
                        Text(
                          'QF Pay',
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: SizeConfig.getFontSize(16),
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                    Divider(
                      color: Colors.black,
                      height: 10,
                      indent: 8,
                      endIndent: 20,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}
