<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:binding="http://schemas.android.com/tools"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable name="vm" type="com.dspread.pos.ui.payment.WaitingForCardViewModel" />
    </data>

    <!-- Use FrameLayout as root to contain both camera overlay and main content -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Main Content -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="16dp">

            <!-- Card animation GIF -->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center">
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/dp_300"
                    android:paddingTop="10dp"
                    android:scaleType="fitCenter"
                    android:src="@drawable/melberry_char_purple" />
            </LinearLayout>

            <!-- Amount and currency section -->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:orientation="horizontal"
                android:gravity="center"
                android:layout_weight="1">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@{vm.amount}"
                    android:textSize="36sp"
                    android:textColor="#2C2929"
                    tools:text="100.00" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@{vm.currencySymbol}"
                    android:textSize="36sp"
                    android:layout_marginLeft="8dp"
                    android:textColor="#2C2929"
                    tools:text="$" />
            </LinearLayout>

            <!-- Divided section for QR code and Face ID -->
            <LinearLayout
                android:id="@+id/twoCardsContainer"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:orientation="horizontal"
                android:weightSum="2"
                android:paddingHorizontal="1dp">

                <!-- Left side - Face ID Card -->
                <androidx.cardview.widget.CardView
                    android:id="@+id/faceIDContainer"
                    android:layout_width="0dp"
                    android:layout_height="260dp"
                    android:layout_marginEnd="2dp"
                    android:layout_weight="1"
                    app:cardCornerRadius="18dp"
                    app:cardElevation="2dp"
                    app:cardUseCompatPadding="true">

                    <!-- Outer Card (White Background) -->
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical"
                        android:background="#8c1084"
                        android:padding="5dp">

                        <!-- Inner Card (Purple Background) -->
                        <androidx.cardview.widget.CardView
                            android:layout_width="match_parent"
                            android:layout_height="170dp"
                            app:cardCornerRadius="12dp"
                            android:layout_gravity="center"
                            android:background="@android:color/holo_purple">

                            <!-- Center the GIF Image -->
                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:gravity="center"
                                android:orientation="vertical">
                                <pl.droidsonroids.gif.GifImageView
                                    android:layout_width="98dp"
                                    android:layout_height="124dp"
                                    android:src="@drawable/faceid" />
                            </LinearLayout>
                        </androidx.cardview.widget.CardView>

                        <!-- Text in Outer Card -->
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="10dp"
                            android:orientation="horizontal"
                            android:gravity="center_vertical"
                            android:layout_gravity="center">

                            <!-- Left Text: "Оплатите лицом" -->
                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="Оплатить\nлицом"
                                android:textSize="18sp"
                                android:paddingLeft="10dp"
                                android:textStyle="normal"
                                android:textColor="@color/white"
                                android:layout_weight="1" />

                            <!-- Right Text: ">" -->
                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:textSize="20sp"
                                android:textStyle="bold"
                                android:paddingRight="10dp"
                                android:text=">"
                                android:textColor="@color/white" />
                        </LinearLayout>
                    </LinearLayout>
                </androidx.cardview.widget.CardView>

                <!-- Right side - QR Code Card -->
                <androidx.cardview.widget.CardView
                    android:id="@+id/qrCodeContainer"
                    android:layout_width="0dp"
                    android:layout_height="260dp"
                    android:layout_marginStart="2dp"
                    android:layout_weight="1"
                    app:cardCornerRadius="18dp"
                    app:cardElevation="2dp"
                    app:cardUseCompatPadding="true">

                    <!-- Single Card with Purple Background -->
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical"
                        android:background="#8c1084"
                        android:padding="3dp">

                        <!-- QR Code Image -->
                        <ImageView
                            android:id="@+id/qr_code_image"
                            android:layout_width="match_parent"
                            android:layout_height="170dp"
                            android:scaleType="fitCenter"
                            android:src="@drawable/am_qr_code_mag_black"
                            android:contentDescription="@string/qr_code_description"
                            app:imageBitmap="@{vm.qrCodeBitmap}" />

                        <!-- Text Under QR Code -->
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="10dp"
                            android:text="Отсканируйте\nQR-код"
                            android:textColor="@color/white"
                            android:textSize="18sp"
                            android:textStyle="normal"
                            android:paddingBottom="5dp"
                            android:gravity="left"
                            android:layout_gravity="center" />
                    </LinearLayout>
                </androidx.cardview.widget.CardView>
            </LinearLayout>
        </LinearLayout>

        <!-- Camera Container (Full Screen Overlay) -->
        <FrameLayout
            android:id="@+id/camera_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:visibility="gone"
            android:background="@android:color/black">

            <!-- Camera Preview will be added here programmatically -->

            <FrameLayout
                android:id="@+id/camera_preview_holder"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:layout_gravity="center">

                <!-- Camera Preview will be added here -->

            </FrameLayout>

            <TextView
                android:id="@+id/amountOnCamera"

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="24dp"
                android:padding="10dp"

                android:text="@{vm.amount + ` `+vm.currencySymbol}"
                android:textSize="36sp"
                android:textStyle="bold"
                android:background="@drawable/rounded_bg_black_50"
                android:textColor="@color/white"
                tools:text="100.00" />


            <!-- Close button for camera -->
            <ImageButton
                android:id="@+id/btn_close_camera"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:layout_margin="37dp"
                android:src="@drawable/ic_close_white"
                android:background="@drawable/rounded_bg_black_50"
                android:scaleType="center"
                android:contentDescription="Close_camera"
                android:layout_gravity="top|end" />

            <!-- Face detection guidance -->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Смотрите в камеру\nЛицо должно быть в рамке"
                android:textColor="@color/white"
                android:textSize="18sp"
                android:textAlignment="center"
                android:gravity="center"
                android:layout_gravity="center"
                android:padding="16dp"
                android:background="@drawable/rounded_bg_black_50"
                android:visibility="gone" />

        </FrameLayout>
    </FrameLayout>
</layout>