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

class Paymentdetail extends StatefulWidget {
  @override
  _PaymentdetailState createState() => _PaymentdetailState();
}

class _PaymentdetailState extends State<Paymentdetail> {
  @override
  Widget build(BuildContext context) {
    SizeConfig(context);
    return Scaffold(
      body: _setupView(),
    );
  }

  _setupView() {
    return Column(
      children: <Widget>[
        header(),
        containt(),
      ],
    );
  }

  Widget containt() {
    List<String> litems = ["1", "2", "Third", "4"];

    return Expanded(
      child: Container(
        alignment: Alignment.topLeft,
        padding: EdgeInsets.only(
            left: SizeConfig.getPadding(24),
            right: SizeConfig.getPadding(24),
            top: SizeConfig.getPadding(12),
            bottom: SizeConfig.getPadding(24)),
        child: Column(crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'สั่งซื้อสำเร็จ',
              style: TextStyle(
                  color: Colors.black,
                  fontSize: SizeConfig.getFontSize(16),
                  fontFamily: "SF_Pro_Text",
                  fontWeight: FontWeight.w700),
            ),
            Text(
              'รายละเอียดการสั่งซื้อ',
              style: TextStyle(
                  color: Colors.black,
                  fontSize: SizeConfig.getFontSize(16),
                  fontFamily: "SF_Pro_Text",
                  fontWeight: FontWeight.w500),
            ),
//            SizedBox(
//              height: SizeConfig.getHeight(16),
//            ),
            Expanded(
              child: ListView.builder(
                itemCount: 1,
                itemBuilder: (BuildContext ctxt, int index) {
                  return list1('title');
                },
              ),
            )
          ],
        ),
      ),
    );
  }

  list1(String title) {
    return GestureDetector(
      onTap: (){
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => PaymentBookingDateTime(),
          ),
        );
      },
      child: Container(
        padding: EdgeInsets.only(top: SizeConfig.getPadding(6),bottom: SizeConfig.getPadding(16)),
        child: Column(
          children: <Widget>[
            Divider(
              color: Colors.black,
              height: SizeConfig.getHeight(1),
            ),
            SizedBox(
              height: SizeConfig.getHeight(16),
            ),
            Row(
              children: <Widget>[
                Text(
                  'Order : 9S284-11506',
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: SizeConfig.getFontSize(16),
                      fontFamily: "SF_Pro_Text",
                      fontWeight: FontWeight.w700),
                ),
                Spacer(),
                Text(
                  '23.02.2020  08:57',
                  style: TextStyle(
                      color: Colors.black54,
                      fontSize: SizeConfig.getFontSize(16),
                      fontFamily: "SF_Pro_Text",
                      fontWeight: FontWeight.w500),
                ),
              ],
            ),
            SizedBox(
              height: SizeConfig.getHeight(16),
            ),
            Row(
              children: <Widget>[
                Image.asset(
                  'assets/images/demo_img.png',
                  height: SizeConfig.getPadding(90),
                  width: SizeConfig.getPadding(80),
                  fit: BoxFit.cover,
                ),
                Expanded(
                  child: Container(
//                  color: Colors.green,
                    padding: EdgeInsets.only(
                      left: SizeConfig.getPadding(8),
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          'Ivory Relax and Spa',
                          style: TextStyle(
                              color: Colors.black,
                              fontSize: SizeConfig.getFontSize(16),
                              fontFamily: "SF_Pro_Text",
                              fontWeight: FontWeight.w700),
                        ),
                        SizedBox(
                          height: SizeConfig.getHeight(12),
                        ),
                        Text(
                          'นวดแผนไทย',
                          style: TextStyle(
                              color: Colors.black,
                              fontSize: SizeConfig.getFontSize(16),
                              fontFamily: "SF_Pro_Text",
                              fontWeight: FontWeight.w500),
                        ),
                        SizedBox(
                          height: SizeConfig.getHeight(15),
                        ),
                        Row(
                          children: <Widget>[
                            Text(
                              '฿1,200.00',
                              style: TextStyle(
                                fontSize: SizeConfig.getFontSize(20),
                                color: Color(0xFFFD2956),
                                fontFamily: "SF_Pro_Text",
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                            Spacer(),
                            Text(
                              'x1',
                              style: TextStyle(
                                color: Color(0xFF9D9D9D),
                                fontSize: SizeConfig.getFontSize(20),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
//          Divider(
//            color: Colors.black,
//            height: 40,
//          ),
          ],
        ),
      ),
    );
  }

  Widget header() {
    return Container(
      child: 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,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
