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

@section('content')

    @component('components.searchBar', ['fields' => $fields , 'action' => route('units.index', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology]), 'search' => $search]) @endcomponent

    <div class="row">
        <div class="col-md-12">
           <div class="card ">
                <div class="card-header">
                    <div class="row">
                        <div class="col-8">
                            <h2 class="card-title">{{ __('Lista de Unidades')  }} de {{ $typology->name }} </h2>
                        </div>
                        <div class="col-4 text-right">
                            <a href="{{ route('units.create', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology]) }}" class="btn btn-sm btn-gradient">{{ __('Alta Unidad') }}</a>
                            <a href="{{ route('typologies.index', ['houseDevelopmentId' => $houseDevelopment->id]) }}" class="btn btn-sm btn-gradient">{{ __('Regresar a listado de Tipologías') }}</a>
                        </div>
                    </div> 
                </div>

                <div class="card-body">
                        <table class="table tablesorter text-center">
                            <thead class="th-gradient">
                                <th class="th-text-color" scope="col"> {{ __('Nombre') }}</th>
                                <th class="th-text-color" scope="col">{{ __('Nivel') }}</th>
                                <th class="th-text-color" scope="col">{{ __('Vistas') }}</th>
                                <th class="th-text-color" scope="col">{{ __('Precio de unidad') }}</th>
                                <th class="th-text-color" scope="col">{{ __('Estatus') }}</th>
                                <th class="th-text-color" scope="col"></th>
                            </thead>
                            <tbody>
                                 @foreach ($units as $unit)
                                    <tr class="table-row-hover td-gradient">
                                        <td>
                                            <a class="d-block" href="{{ route('units.edit', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology, 'unit' => $unit]) }}">
                                              {{ $unit->name }}
                                            </a>
                                        </td>
                                        <td>
                                            <a class="d-block" href="{{ route('units.edit', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology, 'unit' => $unit]) }}">
                                                @if($houseDevelopment->type == 'v')
                                                    {{ $unit->levels }}
                                                @else
                                                    {{ __('Desarrollo Horizontal') }}
                                                @endif
                                            </a>
                                        </td>
                                        <td>
                                            @if ($unit->views()->exists())
                                                <a class="d-block" href="{{ route('unit-views.showByUnit', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology, 'unit' => $unit]) }}"
                                                    data-views="{{ json_encode($unit->views()->pluck('name')) }}"
                                                    onmouseover="showViewsTooltip(this)">
                                                    {{ __('Ver vistas') }}
                                                </a>
                                            @else
                                                <a class="d-block" href="{{ route('unit-views.showByUnit', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology, 'unit' => $unit]) }}">
                                                    {{ __('No tiene vistas') }} <i class="fa-solid fa-plus fa-2xl" style="color: #aa9d64;"></i>
                                                </a>
                                            @endif
                                        </td>
                                        <td>
                                            <a class="d-block" href="{{ route('units.edit', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology, 'unit' => $unit]) }}">
                                                ${{ number_format($unit->price, 2) }}
                                            </a>
                                        </td>
                                        <td>
                                            <a class="d-block" href="{{ route('units.edit', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology, 'unit' => $unit]) }}">
                                                {{ $unit->unitstage->name }}
                                            </a>
                                        </td>

                                        <td>
                                            <div class="row justify-content-center">
                                                <div class="dropdown">
                                                    <a class="btn btn-sm btn-icon-only text-light bw-btn-anchor" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <i class="tim-icons icon-settings-gear-63"></i>
                                                    </a>
                                                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                                                        <a class="dropdown-item" href="{{ route('units.show', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology, 'unit' => $unit]) }}">{{ __('Ver Detalle') }}</a>
                                                        <a class="dropdown-item" href="{{ route('unit-views.showByUnit', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology, 'unit' => $unit]) }}">{{ __('Vistas') }}</a>
                                                        <a class="dropdown-item" href="{{ route('unit-blueprints.showByUnit', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology, 'unit' => $unit]) }}">{{ __('Planos') }}</a>
                                                        <a class="dropdown-item {{ $unit->unitstage->id == '4' ? 'hidden-element' : '' }}" href="{{ route('units.edit', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology, 'unit' => $unit]) }}">{{ __('Editar') }}</a>
                                                        <form action="{{ route('units.destroy', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology, 'unit' => $unit]) }}" method="post">
                                                            @csrf
                                                            @method('delete')
                                                            <button type="button" class="dropdown-item" onclick="confirm('{{ __('Are you sure you want to delete this House Development?') }}') ? this.parentElement.submit() : ''">
                                                                    {{ __('Borrar') }}
                                                            </button>
                                                        </form>
                                                        <a class="dropdown-item" href="{{ route('units.prospectHistory', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology, 'unit' => $unit]) }}">{{ __('Historial de apartados') }}</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach

                                @if(count($units) == 0)
                                    <tr class="table-row-hover td-gradient"><td colspan="6">No hay unidades para esta Tipología.</td></tr>
                                @endif

                            </tbody>
                        </table>
                </div>
                <div class="card-footer py-4">
                    <nav class="d-flex justify-content-end" aria-label="...">
                        {{ $units->appends($_GET)->links() }}
                    </nav>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')

<script>
    function showViewsTooltip(element) {
        var views = JSON.parse(element.getAttribute('data-views'));
        var tooltipContent = '<ul class="list-unstyled mb-0">';
        views.forEach(function(view) {
            tooltipContent += '<li class="bw-white-text"><i class="fa-solid fa-angles-right"></i>&nbsp;&nbsp;' + view + '</li>';
        });
        tooltipContent += '</ul>';

        var tooltip = document.createElement('div');
        tooltip.className = 'custom-tooltip';
        tooltip.innerHTML = tooltipContent;

        document.body.appendChild(tooltip);

        var rect = element.getBoundingClientRect();
        tooltip.style.left = rect.left + 'px';
        tooltip.style.top = rect.top + window.scrollY + 'px';

        element.onmouseout = function() {
            document.body.removeChild(tooltip);
        };
    }
</script>


@endpush