@extends('layouts.main')

@section('content')


<section class="page-project-details header">

    <div class="hero-section d-flex">
            <div class="text-desc ">
                <h1 class="fw-bold">Detalhes do projecto</h1>
            </div>
    </div>
</section>

{{-- aqui fica um carrosel --}}
<section class="carousel">
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            @foreach ($projecto->galeria as $galeria )
                <div class="swiper-slide"><img  src="{{ asset('storage/' .$galeria->path_imagem) }}" width="200"></div>
            @endforeach

        </div>
        <div class="swiper-pagination"></div>
    </div>
</section>

<section class="details-project d-flex justify-content-between">
    <div class="desc">
        <h3 class="title m-0 fw-bold">{{ $projecto->nome_projecto }}</h3>
        <span class="text-muted" style="font-size:12px"> <i class="bx bx-map"></i> {{ $projecto->endereco }}</span>

        <div class="description my-5">
            <h4 class="fw-bold fs-5 mb-3">Descrição do projecto</h4>
            <p class="small">{{ $projecto->descricao_projecto }}</p>
        </div>

        <div class="property">
            <h4 class="fw-bold fs-5 mb-3">Detalhes do projecto</h4>
            <div class="itens d-flex px-3">
                 <div class="group small py-3">
                    <p>Endereço: <span> {{ $projecto->endereco }}</span></p>
                    <p>Nome do cliente: <span>{{ $projecto->nome_cliente }}</span></p>
                    <p>Engenheiro Responsável: <span>{{ $projecto->engenheiro_resp }}</span></p>
                </div>
                <div class="divisor"></div>
                <div class="group small py-3">

                    <p>Orçamento previsto: <span>{{ $projecto->orcamento_prev }}</span></p>
                    <p>Custo Total: <span>{{ $projecto->custo_total }}</span></p>
                    <p>Moeda: <span>@if ($projecto->moeda == "Dolar_americano") USD @elseif ($projecto->moeda == "Kwanza") AOA @else EUR @endif</span></p>
                    <p>Estado: <span>{{ $projecto->estado }}</span></p>
                </div>
            </div>
        </div>

        <div class="plan  my-5">
            <h4 class="fw-bold fs-5 mb-3">Planta do projecto</h4>
            <img src="{{ asset('assets/img/projects/img1.png') }}" alt="" width="200">
        </div>
    </div>
    <div class="latest-projects shadow-sm">
        <h4 class="fw-bold fs-5">Projectos recentes</h4>
        <div class="item">
            <div class="image"><img src="{{ asset('assets/img/background1.jpg') }}" width="80"></div>
            <div class="desc-item">
                <span class="text-muted" style="font-size: 12px">data de publicação</span>
                <p>título do projecto</p>
            </div>
        </div>
        <div class="item">
            <div class="image"><img src="{{ asset('assets/img/projects/img10.jpg') }}" width="80"></div>
            <div class="desc-item">
                <span class="text-muted" style="font-size: 12px">data de publicação</span>
                <p>título do projecto</p>
            </div>
        </div>
        <div class="item">
            <div class="image"><img src="{{ asset('assets/img/projects/img6.jpg') }}" width="80"></div>
            <div class="desc-item">
                <span class="text-muted" style="font-size: 12px">data de publicação</span>
                <p>título do projecto</p>
            </div>
        </div>
        <div class="item">
            <div class="image"><img src="{{ asset('assets/img/projects/img7.jpg') }}" width="80"></div>
            <div class="desc-item">
                <span class="text-muted" style="font-size: 12px">data de publicação</span>
                <p>título do projecto</p>
            </div>
        </div>
    </div>
</section>
@include('components.footer')

@endsection

@push('scripts')
<script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: "auto",
      spaceBetween: 0,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
</script>
@endpush