<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black">

    <include
        android:id="@+id/toolbar"
        layout="@layout/detail_toolbar" />

    <ScrollView
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/ll_payment"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/cl_charge_can"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="13.3dp"
                android:layout_marginTop="13.3dp"
                android:background="@drawable/bg_round_corner_16_7_222222"
                android:paddingHorizontal="13.3dp"
                android:paddingVertical="23.3dp">

                <ImageView
                    android:id="@+id/ic_can"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:contentDescription="@null"
                    android:src="@drawable/ic_can"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <TextView
                    android:id="@+id/tv_charge_can_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="13.3dp"
                    android:fontFamily="@font/gmarket_sans_bold"
                    android:gravity="center"
                    android:textColor="@color/color_eeeeee"
                    android:textSize="15.3sp"
                    app:layout_constraintBottom_toBottomOf="@+id/ic_can"
                    app:layout_constraintStart_toEndOf="@+id/ic_can"
                    app:layout_constraintTop_toTopOf="@+id/ic_can"
                    tools:text="5000 캔 + 1000 캔" />

                <LinearLayout
                    android:id="@+id/ll_price"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent">

                    <TextView
                        android:id="@+id/tv_price"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:fontFamily="@font/gmarket_sans_bold"
                        android:textColor="@color/color_eeeeee"
                        android:textSize="15.3sp"
                        tools:text="3,300" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:fontFamily="@font/gmarket_sans_light"
                        android:text=" 원"
                        android:textColor="@color/color_eeeeee"
                        android:textSize="15.3sp" />

                </LinearLayout>
            </androidx.constraintlayout.widget.ConstraintLayout>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="13.3dp"
                android:layout_marginTop="26.7dp"
                android:fontFamily="@font/gmarket_sans_bold"
                android:text="결제 수단 선택"
                android:textColor="@color/color_eeeeee"
                android:textSize="16.7sp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="13.3dp"
                android:layout_marginTop="16.7dp">

                <TextView
                    android:id="@+id/tv_method_card"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@drawable/bg_round_corner_10_232323_777777"
                    android:fontFamily="@font/gmarket_sans_medium"
                    android:gravity="center"
                    android:paddingVertical="16.7dp"
                    android:text="카드"
                    android:textColor="@color/color_eeeeee"
                    android:textSize="13.3sp" />

                <TextView
                    android:id="@+id/tv_method_bank"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="13.3dp"
                    android:layout_weight="1"
                    android:background="@drawable/bg_round_corner_10_232323_777777"
                    android:fontFamily="@font/gmarket_sans_medium"
                    android:gravity="center"
                    android:paddingVertical="16.7dp"
                    android:text="계좌이체"
                    android:textColor="@color/color_eeeeee"
                    android:textSize="13.3sp" />
            </LinearLayout>

            <TextView
                android:id="@+id/tv_agree"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="26.7dp"
                android:layout_marginTop="13.3dp"
                android:button="@null"
                android:drawablePadding="6.7dp"
                android:fontFamily="@font/gmarket_sans_medium"
                android:gravity="center"
                android:text="구매조건 확인 및 결제 진행 동의"
                android:textColor="@color/color_eeeeee"
                android:textSize="14.7sp"
                app:drawableStartCompat="@drawable/ic_select" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="26.7dp"
                android:layout_marginTop="13.3dp"
                android:fontFamily="@font/gmarket_sans_medium"
                android:text="- 충전된 캔의 유효기간은 충전 후 5년 입니다.\n- 결제 취소는 결제 후 7일 이내에만 할 수 있습니다.\n  단, 캔의 일부를 사용하면 결제 취소할 수 없습니다.\n- 광고성 이벤트 등 회사가 무료로 지급한 \n포인트는 환불되지 않습니다.\n- 자세한 내용은 소다라이브 이용약관에서 확인할 수 있습니다."
                android:textColor="@color/color_777777"
                android:textSize="12sp" />
        </LinearLayout>
    </ScrollView>

    <LinearLayout
        android:id="@+id/ll_payment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_top_round_corner_16_7_222222"
        android:paddingVertical="13.3dp"
        android:paddingStart="22dp"
        android:paddingEnd="13.3dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/gmarket_sans_medium"
                android:text="결제금액"
                android:textColor="@color/color_eeeeee"
                android:textSize="13.3sp" />

            <TextView
                android:id="@+id/tv_payment_price"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:fontFamily="@font/gmarket_sans_bold"
                android:textColor="@color/color_eeeeee"
                android:textSize="23.3sp"
                tools:text="3,300원" />

        </LinearLayout>

        <TextView
            android:id="@+id/tv_payment"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="31dp"
            android:background="@drawable/bg_round_corner_10_80d8ff"
            android:fontFamily="@font/gmarket_sans_bold"
            android:gravity="center"
            android:paddingVertical="16dp"
            android:text="결제하기"
            android:textColor="@color/color_1313bc"
            android:textSize="18.3sp" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
