@extends('layouts.app', ['page' => __('Listado De Tipologias'), 'pageSlug' => 'typologies', 'section' => 'menu'])

@section('content')

    @component('components.searchBar', ['fields' => $fields , 'action' => route('typologies.index', $houseDevelopmentId), 'search' => $search, 'houseDevelopmentID' => $houseDevelopment->id]) @endcomponent

    <div class="row">
        <div class="col-md-12">
            
            <div class="row">
              <div class="col-6">
                <h2 class="card-title">{{ __('Lista de Tipologías')  }} de {{ $houseDevelopment->name }}</h2>
              </div>
              <div class="col-6 text-right">
                <a href="{{ route('typologies.create', ['houseDevelopmentId' => $houseDevelopment->id]) }}" class="btn btn-sm btn-gradient">{{ __('Alta Tipología') }}</a>
                <a href="{{ route('typologies.priceUpdateHistory', ['houseDevelopment' => $houseDevelopmentId]) }}" class="btn btn-sm btn-gradient" style="background:#333333;">{{ __('Histórico de precios') }}</a>
                <a href="{{ route('house-developments.index') }}" class="btn btn-sm btn-gradient">{{ __('Regresar a listado de Desarrollos') }}</a>
              </div>
            </div> 
            <div class="d-flex flex-wrap justify-content-between align-items-start">
              @foreach ($typologies as $typology)
                <div class="card border-0 shadow-sm mt-4 mx-auto" style="width:26rem;">
                    @if($typology->mainImage)
                        <a href="{{ route('typologies.show', ['typology' => $typology]) }}"><img class="card-img-top" src="/storage/{{ $typology->mainImage }}" alt="{{ $typology->name }}" alt="{{ __('Nombre') }}"></a>
                    @endif
                    <div class="card-body">
                        <h3 class="card-title">{{ $typology->name }}</h3>
                        <div class="row">
                            <div class="col-8">
                                <p class="card-text">{{ __('Área interior') }}:  {{ $typology->construction_meters }}</p>
                                <p class="card-text">{{ __('Área exterior') }}:  {{ $typology->meters_of_free_area }}</p>
                                <p class="card-text">{{ __('Precios desde') }}: ${{ number_format($typology->price, 0) }}</p>
                            </div>
                            <div class="col-4">
                                <p class="card-text">{{ __('Niveles') }}: {{ $typology->houseDevelopment->levels }}</p>
                            </div>
                        </div>
                        <br/>
                        <a style="width:25%;" class="btn btn-sm btn-gradient" href="{{ route('typologies.show', ['typology' => $typology]) }}">{{ __('Ver detalle') }}</a>
                        <a style="width:25%;" class="btn btn-sm btn-gradient" href="{{ route('typology-blueprints.showByTypology', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology]) }}">{{ __('Planos') }}</a>
                        <a style="width:25%;" class="btn btn-sm btn-gradient" href="{{ route('typologies.edit', ['typology' => $typology]) }}">{{ __('Editar') }}</a>
                        <form class="form-delete" action="{{ route('typologies.destroy', $typology) }}" method="post" style="display: initial;">
                            @csrf
                            @method('delete')
                            <button type="button" class="btn btn-sm btn-gradient" style="background:linear-gradient(to right, #b94444, #995656);" onclick="confirm('{{ __('Are you sure you want to delete this Typology?') }}') ? this.parentElement.submit() : ''">
                                {{ __('Borrar') }}
                            </button>
                        </form>
                        <a style="width:100%;" class="btn btn-sm btn-gradient units" href="{{ route('units.index', ['houseDevelopment' => $houseDevelopment,'typology' => $typology]) }}">{{ __('Unidades') }}</a>
                    </div>
                </div>
              @endforeach
            </div>
            @if(count($typologies) == 0)
                <br/>
                <p class="text-center">No hay Tipologías para este desarrollo aún.</p>
                <br/>
            @endif
            <div class="card-footer py-4">
                <nav class="d-flex justify-content-end" aria-label="...">
                    {{ $typologies->appends($_GET)->links() }}
                </nav>
            </div>
        </div>
    </div>
@endsection