<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:padding="8dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- العنوان الرئيسي -->
    <TextView
        android:id="@+id/tv_title"
        android:text="رحلة Intaleq"
        android:textStyle="bold"
        android:textSize="14sp"
        android:textColor="#FFFFFF"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <!-- سطر بيانات السائق / السيارة -->
    <TextView
        android:id="@+id/tv_subtitle"
        android:text="أحمد محمد • أبيض • ABC 123"
        android:textSize="12sp"
        android:textColor="#DDDDDD"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="2dp" />

    <!-- خط الطريق + سلوطات السيارة -->
    <FrameLayout
        android:layout_marginTop="6dp"
        android:layout_marginBottom="4dp"
        android:layout_width="match_parent"
        android:layout_height="32dp">

        <!-- خلفية الطريق -->
        <ImageView
            android:id="@+id/img_road"
            android:src="@drawable/road_bg"
            android:scaleType="fitXY"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <!-- شريط سلوطات السيارة -->
        <LinearLayout
            android:id="@+id/ll_car_slots"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingLeft="8dp"
            android:paddingRight="8dp">

            <!-- 10 سلوطات للسيارة -->
            <!-- كل Slot عبارة عن ImageView، نخلي واحد بس منهم ظاهر حسب الـ progress -->

            <ImageView
                android:id="@+id/car_slot_0"
                android:src="@drawable/car_icon"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:visibility="invisible"
                android:layout_gravity="center_vertical" />

            <ImageView
                android:id="@+id/car_slot_1"
                android:src="@drawable/car_icon"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:visibility="invisible"
                android:layout_gravity="center_vertical" />

            <ImageView
                android:id="@+id/car_slot_2"
                android:src="@drawable/car_icon"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:visibility="invisible"
                android:layout_gravity="center_vertical" />

            <ImageView
                android:id="@+id/car_slot_3"
                android:src="@drawable/car_icon"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:visibility="invisible"
                android:layout_gravity="center_vertical" />

            <ImageView
                android:id="@+id/car_slot_4"
                android:src="@drawable/car_icon"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:visibility="invisible"
                android:layout_gravity="center_vertical" />

            <ImageView
                android:id="@+id/car_slot_5"
                android:src="@drawable/car_icon"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:visibility="invisible"
                android:layout_gravity="center_vertical" />

            <ImageView
                android:id="@+id/car_slot_6"
                android:src="@drawable/car_icon"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:visibility="invisible"
                android:layout_gravity="center_vertical" />

            <ImageView
                android:id="@+id/car_slot_7"
                android:src="@drawable/car_icon"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:visibility="invisible"
                android:layout_gravity="center_vertical" />

            <ImageView
                android:id="@+id/car_slot_8"
                android:src="@drawable/car_icon"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:visibility="invisible"
                android:layout_gravity="center_vertical" />

            <ImageView
                android:id="@+id/car_slot_9"
                android:src="@drawable/car_icon"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:visibility="visible"
                android:layout_gravity="center_vertical" />
        </LinearLayout>
    </FrameLayout>

    <!-- سطر الوقت/المسافة المتبقية -->
    <TextView
        android:id="@+id/tv_eta"
        android:text="المتبقي: 8 كم • 12 دقيقة"
        android:textSize="12sp"
        android:textColor="#CCCCCC"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>