<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="#FFFFFF"
    tools:context=".transaction.CreateTransactionActivity">

    <!-- Main Content -->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:overScrollMode="never"
        android:scrollbars="none"
        android:background="#FFFFFF">

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

            <include layout="@layout/component_appbar" />

            <!-- Payment Card - Positioned to overlap with red header -->
            <androidx.cardview.widget.CardView
                android:id="@+id/paymentCard"
                android:layout_width="match_parent"
                android:layout_height="191dp"
                android:layout_marginStart="16dp"
                android:layout_marginEnd="16dp"
                android:layout_marginTop="-85dp"
                app:cardBackgroundColor="#3498DB"
                app:cardCornerRadius="16dp"
                app:cardElevation="8dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    android:padding="24dp"
                    android:paddingTop="32dp">

                    <!-- Title -->
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="TOTAL PEMBAYARAN"
                        android:textColor="@android:color/white"
                        android:textSize="20sp"
                        android:textStyle="bold"
                        android:fontFamily="@font/inter"
                        android:layout_marginBottom="20dp" />

                    <!-- Amount Input Section -->
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:layout_marginBottom="8dp">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="RP"
                            android:textColor="@android:color/white"
                            android:textSize="20sp"
                            android:textStyle="bold"
                            android:fontFamily="@font/inter"
                            android:layout_marginEnd="8dp"
                            android:layout_gravity="bottom" />

                        <TextView
                            android:id="@+id/tv_amount_display"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:background="@android:color/transparent"
                            android:textColor="@android:color/white"
                            android:textSize="32sp"
                            android:textStyle="bold"
                            android:fontFamily="@font/inter"
                            android:text=""
                            android:gravity="start"
                            android:paddingBottom="4dp" />

                    </LinearLayout>

                    <!-- White Underline -->
                    <View
                        android:layout_width="match_parent"
                        android:layout_height="2dp"
                        android:background="@android:color/white"
                        android:layout_marginBottom="12dp" />

                    <!-- Description -->
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Pastikan kembali nominal pembayaran pelanggan Anda"
                        android:textColor="@android:color/white"
                        android:textSize="10sp"
                        android:fontFamily="@font/inter"
                        android:textStyle="normal"
                        android:alpha="0.9" />

                </LinearLayout>

            </androidx.cardview.widget.CardView>

            <!-- Numpad -->
            <GridLayout
                android:id="@+id/numpad_grid"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:columnCount="3"
                android:rowCount="4"
                android:layout_marginTop="32dp"
                android:layout_marginStart="16dp"
                android:layout_marginEnd="16dp">

                <!-- Row 1: 1, 2, 3 -->
                <TextView
                    android:id="@+id/btn_1"
                    style="@style/NumpadButton"
                    android:text="1" />

                <TextView
                    android:id="@+id/btn_2"
                    style="@style/NumpadButton"
                    android:text="2" />

                <TextView
                    android:id="@+id/btn_3"
                    style="@style/NumpadButton"
                    android:text="3" />

                <!-- Row 2: 4, 5, 6 -->
                <TextView
                    android:id="@+id/btn_4"
                    style="@style/NumpadButton"
                    android:text="4" />

                <TextView
                    android:id="@+id/btn_5"
                    style="@style/NumpadButton"
                    android:text="5" />

                <TextView
                    android:id="@+id/btn_6"
                    style="@style/NumpadButton"
                    android:text="6" />

                <!-- Row 3: 7, 8, 9 -->
                <TextView
                    android:id="@+id/btn_7"
                    style="@style/NumpadButton"
                    android:text="7" />

                <TextView
                    android:id="@+id/btn_8"
                    style="@style/NumpadButton"
                    android:text="8" />

                <TextView
                    android:id="@+id/btn_9"
                    style="@style/NumpadButton"
                    android:text="9" />

                <!-- Row 4: 000, 0, Delete -->
                <TextView
                    android:id="@+id/btn_00"
                    style="@style/NumpadButton"
                    android:text="000" />

                <TextView
                    android:id="@+id/btn_0"
                    style="@style/NumpadButton"
                    android:text="0" />

                <ImageView
                    android:id="@+id/btn_clear"
                    android:layout_width="0dp"
                    android:layout_height="60dp"
                    android:layout_columnWeight="1"
                    android:layout_margin="8dp"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:src="@drawable/ic_backspace"
                    android:scaleType="center"
                    android:contentDescription="Delete" />

            </GridLayout>

            <!-- Confirmation Button -->
            <com.google.android.material.button.MaterialButton
                android:id="@+id/btn_confirm"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:text="Konfirmasi"
                android:textColor="#FFFFFF"
                android:textSize="12sp"
                android:textStyle="bold"
                android:fontFamily="@font/inter"
                android:layout_marginStart="16dp"
                android:layout_marginEnd="16dp"
                android:layout_marginTop="32dp"
                android:layout_marginBottom="24dp"
                app:backgroundTint="@null"
                android:background="@drawable/button_confirm_background_selector"
                android:enabled="false"
                app:cornerRadius="8dp"
                app:rippleColor="#B3000000" />

            <!-- Hidden Components -->
            <TextView
                android:id="@+id/tv_mode_indicator"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:visibility="gone" />

            <Button
                android:id="@+id/btn_toggle_mode"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:visibility="gone" />

            <ProgressBar
                android:id="@+id/progress_bar"
                style="?android:attr/progressBarStyle"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:layout_gravity="center"
                android:visibility="gone"
                android:indeterminateTint="#E31937" />

        </LinearLayout>

    </ScrollView>

    <!-- Modal Overlay -->
    <FrameLayout
        android:id="@+id/modal_overlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#80000000"
        android:visibility="gone"
        android:clickable="true"
        android:focusable="true"
        android:elevation="100dp">

        <androidx.cardview.widget.CardView
            android:id="@+id/modal_card"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="32dp"
            app:cardCornerRadius="16dp"
            app:cardElevation="20dp"
            app:cardBackgroundColor="@android:color/white">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="32dp"
                android:gravity="center">

                <ImageView
                    android:id="@+id/modal_icon"
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:src="@drawable/ic_card_insert"
                    android:layout_marginBottom="24dp"
                    android:scaleType="fitCenter"
                    android:adjustViewBounds="true"
                    app:tint="#E31937" />

                <TextView
                    android:id="@+id/modal_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Silakan Tempelkan / Gesekkan / Masukkan Kartu ke Perangkat"
                    style="@style/StatusTextStyle"
                    android:textAlignment="center"
                    android:gravity="center"
                    android:lineSpacingExtra="4dp" />

            </LinearLayout>

        </androidx.cardview.widget.CardView>

    </FrameLayout>

    <LinearLayout
        android:id="@+id/success_screen"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center"
        android:background="#E31937"
        android:visibility="gone"
        android:elevation="100dp">

        <!-- Success Icon -->
        <ImageView
            android:id="@+id/success_icon"
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:src="@drawable/ic_success_payment"
            android:layout_marginBottom="32dp"
            android:scaleType="centerInside"/>

        <!-- Success Message -->
        <TextView
            android:id="@+id/success_message"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Pembayaran Berhasil"
            android:textColor="@android:color/white"
            android:textSize="24sp"
            android:textStyle="bold"
            android:fontFamily="@font/inter"
            android:gravity="center"
            android:letterSpacing="0.02"/>
    </LinearLayout>

</FrameLayout>