@foreach (Auth::user()->exchangeProcesses as $exchangeProcess)
    <div class="expandable" onclick="expand(this, {{ $exchangeProcess->items->count() * 92 }})">
        <div class="row no-gutters justify-content-between align-items-center main-title-container">
            <div class="title">#{{ $exchangeProcess->id }}</div>
            <i class="fa-solid fa-chevron-down" style="color:#7F7F7F;"></i>
        </div>
        <div class="content">
            <div class="h-10"></div>
            <div class="row">
                @if ($exchangeProcess->name !== null)
                    <div class="col-12 col-md-4">
                        <div class="title">Számlázási cím:</div>
                        <div class="spacer-6"></div>
                        <div class="data">Név: {{ $exchangeProcess->name }}</div>
                        <div class="data">Irányítószám: {{ $exchangeProcess->postal_code }}</div>
                        <div class="data">Település: {{ $exchangeProcess->city }}</div>
                        <div class="data">Utca és házszám: {{ $exchangeProcess->street }}</div>
                        <div class="data">Telefonszám: {{ $exchangeProcess->phone }}</div>
                        <div class="data">Email: {{ $exchangeProcess->user->email }}</div>
                    </div>
                    <div class="spacer-9 w-100 d-block d-md-none"></div>
                    <div class="col-12 col-md-4">
                        <div class="title">Szállítási cím:</div>
                        <div class="spacer-6"></div>
                        <div class="data">Név: {{ $exchangeProcess->shipping_name }}</div>
                        <div class="data">Irányítószám: {{ $exchangeProcess->shipping_postal_code }}</div>
                        <div class="data">Település: {{ $exchangeProcess->shipping_city }}</div>
                        <div class="data">Utca és házszám: {{ $exchangeProcess->shipping_street }}</div>
                    </div>
                    <div class="spacer-9 w-100 d-block d-md-none"></div>
                @endif
                <div class="col-12 {{ $exchangeProcess->name !== null ? 'col-md-4' : '' }}">
                    <div class="title">Megrendelés dátuma:</div>
                    <div class="spacer-6"></div>
                    <div class="data">{{ convertToTimezone($exchangeProcess->created_at) }}</div>
                    <div class="title">Státusz:</div>
                    <div class="spacer-6"></div>
                    <div class="data">{{ $exchangeProcess->status->label() }}</div>
                    <div class="title">Szállítási költség:</div>
                    <div class="spacer-6"></div>
                    <div class="data">{{ number_format($exchangeProcess->shipping_price, 0, ',', ' ') }} Ft</div>
                    <div class="title">Fizetve a termékekért:</div>
                    <div class="spacer-6"></div>
                    <div class="data {{ $exchangeProcess->paid_price > 0 ? 'red-price' : '' }}">{{ number_format($exchangeProcess->paid_price, 0, ',', ' ') }} Ft</div>
                </div>
            </div>
            <div class="spacer-5"></div>
            <div class="title">Visszaküldött termékek:</div>
            <div class="spacer-7"></div>
            <div class="d-none d-lg-flex row justify-content-end no-gutters product-row header align-items-center">
                <div class="datas row no-gutters w-100 justify-content-end">
                    <div>Terméknév</div>
                    <div>db.</div>
                    <div>Ár</div>
                    <div>Ár össz.</div>
                </div>
            </div>
            @php
                $total = 0;
            @endphp
            @foreach ($exchangeProcess->items as $item)
                @if (!$item->exchanged)
                    @continue
                @endif
                @php
                    $total += $item->price;
                @endphp
                <div onclick="expand(this,0,event); return false;"
                    class="row justify-content-between no-gutters product-row align-items-left align-items-lg-center d-flex flex-column flex-lg-row flex-nowrap">
                    <div class="row no-gutters align-items-center flex-nowrap">
                        <img src="/storage/product_images/{{ $item->product->id }}.{{ $item->product->image_extension }}">
                        <div class="text-padding-right">{{ $item->product->name }}</div>
                        <div class="flex-grow-1"></div>
                        <i class="fa-icon fa-solid fa-chevron-down d-block d-lg-none" style="color:#7F7F7F;"></i>
                    </div>
                    <div class="content datas row no-gutters d-flex flex-column flex-lg-row flex-nowrap">
                        <div class="placeholder"></div>
                        <div><span class="d-inline-block d-lg-none">db.:</span> 1</div>
                        <div><span class="d-inline-block d-lg-none">Ár:</span> {{ number_format($item->price, 0, ',', ' ') }} Ft</div>
                        <div><span class="d-inline-block d-lg-none">Ár össz.:</span> {{ number_format($item->price, 0, ',', ' ') }} Ft
                        </div>
                    </div>
                </div>
            @endforeach
            <div class="d-none d-lg-flex row justify-content-end no-gutters product-row total align-items-center">
                <div class="datas row no-gutters w-100 justify-content-end">
                    <div>Összesen:</div>
                    <div></div>
                    <div></div>
                    <div>{{ number_format($total, 0, ',', ' ') }} Ft</div>
                </div>
            </div>
            <div class="d-block d-lg-none total-mobile">
                Ár össz.: <b>{{ number_format($total, 0, ',', ' ') }} Ft</b>
            </div>
            @if ($exchangeProcess->name != null)
                <div class="spacer-5"></div>
                <div class="title">Kapott termékek:</div>
                <div class="spacer-7"></div>
                <div class="d-none d-lg-flex row justify-content-end no-gutters product-row header align-items-center">
                    <div class="datas row no-gutters w-100 justify-content-end">
                        <div>Terméknév</div>
                        <div>db.</div>
                        <div>Ár</div>
                        <div>Ár össz.</div>
                    </div>
                </div>
                @php
                    $total = 0;
                @endphp
                @foreach ($exchangeProcess->items as $item)
                    @if ($item->exchanged)
                        @continue
                    @endif
                    @php
                        $total += $item->price * $item->quantity;
                    @endphp
                    <div onclick="expand(this,0,event); return false;"
                        class="row justify-content-between no-gutters product-row align-items-left align-items-lg-center d-flex flex-column flex-lg-row flex-nowrap">
                        <div class="row no-gutters align-items-center flex-nowrap">
                            <img src="/storage/product_images/{{ $item->product->id }}.{{ $item->product->image_extension }}">
                            <div class="text-padding-right">{{ $item->product->name }}</div>
                            <div class="flex-grow-1"></div>
                            <i class="fa-icon fa-solid fa-chevron-down d-block d-lg-none" style="color:#7F7F7F;"></i>
                        </div>
                        <div class="content datas row no-gutters d-flex flex-column flex-lg-row flex-nowrap">
                            <div class="placeholder"></div>
                            <div><span class="d-inline-block d-lg-none">db.:</span> {{ $item->quantity }}</div>
                            <div><span class="d-inline-block d-lg-none">Ár:</span> {{ number_format($item->price, 0, ',', ' ') }} Ft</div>
                            <div><span class="d-inline-block d-lg-none">Ár össz.:</span>
                                {{ number_format($item->price * $item->quantity, 0, ',', ' ') }} Ft</div>
                        </div>
                    </div>
                @endforeach
                <div class="d-none d-lg-flex row justify-content-end no-gutters product-row total align-items-center">
                    <div class="datas row no-gutters w-100 justify-content-end">
                        <div>Összesen:</div>
                        <div></div>
                        <div></div>
                        <div>{{ number_format($total, 0, ',', ' ') }} Ft</div>
                    </div>
                </div>
                <div class="d-block d-lg-none total-mobile">
                    Ár össz.: <b>{{ number_format($total, 0, ',', ' ') }} Ft</b>
                </div>
            @endif
        </div>
    </div>
@endforeach