@extends('layouts.app', ['page' => __('Listado De Desarrollos'), 'pageSlug' => 'house-developments', 'section' => 'house-developments'])

@section('content')

    @component('components.searchBar', ['fields' => $fields , 'action' => route('house-developments.index'), '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 Desarrollos') }}</h2>
                        </div>
                        <div class="col-4 text-right">
                            <a href="{{ route('house-developments.create') }}" class="btn btn-sm btn-gradient">{{ __('Alta Desarrollo') }}</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="">
                        <table class="table tablesorter text-center" id="">
                            <thead class="th-gradient">
                                <th class="th-text-color" scope="col"> {{ __('Desarrollo') }}</th>
                                <th class="th-text-color" scope="col"> {{ __('Ubicación') }}</th>
                                                                <th class="th-text-color" scope="col">{{ __('Niveles') }}</th>
                                                                <th class="th-text-color" scope="col">{{ __('Fecha de entrega') }}</th>
                                <th class="th-text-color" scope="col"></th>
                            </thead>
                            <tbody>
                                 @foreach ($houseDevelopments as $houseDevelopment)
                                    <tr class="table-row-hover td-gradient">
                                        <td>
                                            <a class="d-block" href="{{ route('house-developments.edit', $houseDevelopment) }}">
                                              {{ $houseDevelopment->name }}
                                            </a>
                                        </td>
                                        <td>
                                            <a class="d-block" href="{{ route('house-developments.edit', $houseDevelopment) }}">
                                              {{ $houseDevelopment->address }}
                                            </a>
                                        </td>
                                                                                <td>
                                            <a class="d-block" href="{{ route('house-developments.edit', $houseDevelopment) }}">
                                                {{ $houseDevelopment->levels }}
                                            </a>
                                        </td>
                                        
                                        <td>
                                            <a class="d-block" href="{{ route('house-developments.edit', $houseDevelopment) }}">
                                                {{ $houseDevelopment->delivery_date_index }}
                                            </a>
                                        </td>

                                        <td>
                                            <div class="row justify-content-center">
                                                <div class="col-sm-2">
                                                    <button class="btn btn-sm btn-icon-only text-light bw-btn-anchor toggle-visibility"
                                                            data-id="{{ $houseDevelopment->id }}"
                                                            title="{{ $houseDevelopment->is_visible ? 'Ocultar' : 'Mostrar' }}"
                                                            data-visible="{{ $houseDevelopment->is_visible ? 'true' : 'false' }}">
                                                        <i class="fa-solid fa-eye" style="color: {{ $houseDevelopment->is_visible ? '#00ff13' : '#ffffff' }};"></i>
                                                    </button>
                                                </div>
                                                <div class="col-sm-2">
                                                    <a class="btn btn-sm btn-icon-only text-light bw-btn-anchor" title="Avances" href="{{ route('house-development-report-progress.showByDevelopment', $houseDevelopment) }}">
                                                        <i class="fa-solid fa-folder-plus"></i>
                                                    </a>
                                                </div>
                                                <div class="col-sm-2">
                                                    <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('payment-plans.showByDevelopment', $houseDevelopment) }}">{{ __('Planes de pago') }}</a>
                                                            <a class="dropdown-item" href="{{ route('house-development-views.showByDevelopment', $houseDevelopment) }}">{{ __('Vistas') }}</a>
                                                            <a class="dropdown-item" href="{{ route('house-development-images.indexv2', $houseDevelopment) }}">{{ __('Galería de fotos') }}</a>
                                                            <a class="dropdown-item" href="{{ route('house-development-highlights.showByDevelopment', $houseDevelopment) }}">{{ __('HighLights') }}</a>
                                                            <a class="dropdown-item" href="{{ route('house-development-amenities.showByDevelopment', $houseDevelopment) }}">{{ __('Amenidades') }}</a>
                                                            <a class="dropdown-item" href="{{ route('house-development-blueprints.showByDevelopment', $houseDevelopment) }}">{{ __('Planos') }}</a>
                                                            <a class="dropdown-item" href="{{ route('typologies.index', ['houseDevelopmentId' => $houseDevelopment->id]) }}">{{ __('Tipologías') }}</a>
                                                            <a class="dropdown-item" href="{{ route('house-developments.edit', $houseDevelopment) }}">{{ __('Editar') }}</a>
                                                            <button type="button" class="dropdown-item" onclick="deleteHouseDevelopment('{{ $houseDevelopment->id }}','{{ $houseDevelopment->name }}')">
                                                                {{ __('Borrar') }}
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer py-4">
                    <nav class="d-flex justify-content-end" aria-label="...">
                        {{ $houseDevelopments->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);
        };
    }

    $(document).ready(function() {
        $('.toggle-visibility').click(function() {
            var button = $(this);
            var id = button.data('id');
            var isVisible = button.data('visible');
            var newVisibility = !isVisible;

            var message = isVisible ?
                '¿Estás seguro de que quieres ocultar este desarrollo?' :
                '¿Estás seguro de que quieres mostrar este desarrollo?';

            Swal.fire({
                title: '¿Estás seguro?',
                text: message,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Sí, cambiar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: `/admin/house-developments/${id}/toggle-visibility`,
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            is_visible: newVisibility
                        },
                        success: function(response) {
                            if(response.success) {
                                button.data('visible', newVisibility);
                                button.find('i').css('color', newVisibility ? '#00ff13' : '#ffffff');
                                Swal.fire(
                                    '¡Actualizado!',
                                    'La visibilidad del desarrollo ha sido actualizada.',
                                    'success'
                                );

                                location.reload();
                            } else {
                                Swal.fire(
                                    'Error',
                                    'Hubo un problema al actualizar la visibilidad.',
                                    'error'
                                );
                            }
                        },
                        error: function() {
                            Swal.fire(
                                'Error',
                                'Hubo un problema al actualizar la visibilidad.',
                                'error'
                            );
                        }
                    });
                }
            });
        });

    });


    function deleteHouseDevelopment(houseDevelopmentId, houseDevelopmentName) {
        Swal.fire({
            title: '¿Estás seguro?',
            text: `¿Deseas eliminar el desarrollo "${houseDevelopmentName}"? Esta acción no se puede deshacer.`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                // Realiza la solicitud con fetch
                fetch(`/admin/house-developments/${houseDevelopmentId}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => {
                    if (response.ok) {
                        Swal.fire(
                            'Eliminado',
                            'El desarrollo ha sido eliminado exitosamente.',
                            'success'
                        ).then(() => {
                            location.reload(); // Recargar la página para reflejar los cambios
                        });
                    } else {
                        Swal.fire(
                            'Error',
                            'Hubo un error al intentar eliminar el desarrollo. Por favor, inténtalo de nuevo.',
                            'error'
                        );
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    Swal.fire(
                        'Error',
                        'Hubo un problema con la solicitud. Por favor, inténtalo más tarde.',
                        'error'
                    );
                });
            }
        });
    }
</script>


@endpush