@extends('layouts.app', ['page' => __('Mis inversiones'), 'pageSlug' => 'myinvestments', 'section' => 'menu'])

@section('content')

<div class="row">
    <div class="col-12">
       <div class="card">
            <div class="card-header">
                <div class="row" style="border-bottom:2px solid #343434;height: 42px;"></div>
                <div class="row">
                    <div class="col-12 py-3">
                        <h1>{{ __('Mis Inversiones') }}</h1>
                    </div>
                </div>
            </div>

            <div class="card-body">
                <div class="d-flex flex-column flex-md-column">

                    @foreach($customerWithUnits->customerUnits as $customerUnit)
                        <div class="row apartment mb-4 align-items-center">
                            <div class="col-12 col-md-3 text-center mb-3 mb-md-0">
                                @if($customerUnit->unit->images->first())
                                    <img class="img-fluid rounded" src="{{ Storage::url($customerUnit->unit->images->first()->path) }}" alt="Imagen Departamento">
                                @else
                                    <div class="text-muted">No image available</div>
                                @endif
                            </div>
                            <div class="col-12 col-md-9">
                                <div class="mb-2">
                                    <span style="font-weight: 800;">{{ __('Desarrollo:') }}</span>
                                    <span style="font-size: 12px;">{{ $customerUnit->houseDevelopment->name }}</span>
                                </div>
                                <div class="mb-2">
                                    <span style="font-weight: 800;">{{ __('Ubicación:') }}</span>
                                    <span style="font-size: 12px;">{{ $customerUnit->houseDevelopment->address }}</span>
                                </div>
                                <div class="mb-2">
                                    <span style="font-weight: 800;">{{ __('Departamento:') }}</span>
                                    <span style="font-size: 12px;">{{ $customerUnit->unit->name }}</span>
                                </div>
                                <div class="mb-3">
                                    <span style="font-weight: 800;">{{ __('Fecha de adquisición:') }}</span>
                                    <span style="font-size: 12px;">{{ $customerUnit->created_at->translatedFormat('l, d F Y') }}</span>
                                </div>

                                <div class="d-flex flex-wrap gap-2">
                                    <a href="{{ route('portal-customers.customers.houseDevelopmentProgress',['customer' => $customer, 'houseDevelopment' => $customerUnit->houseDevelopment->id]) }}" class="btn btn-gradient btn-sm">{{ __('Avances de Obra') }}</a>
                                    <a href="{{ route('portal-customers.account-statement.index',['customer' => $customer, 'unit' => $customerUnit->unit->id ]) }}" class="btn btn-gradient btn-sm">{{ __('Estado de Cuenta') }}</a>
                                    <a href="{{ route('portal-customers.customers.apartmentdocuments',['customer' => $customer, 'unit' => $customerUnit->unit->id ]) }}" class="btn btn-gradient btn-sm">{{ __('Documentos') }}</a>
                                    <a href="{{ route('portal-customers.customers.myapartment',['customer' => $customer, 'unit' => $customerUnit->unit->id ]) }}" class="btn btn-gradient btn-sm">{{ __('Mi departamento') }}</a>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
    </div>
</div>

@endsection