@extends('layouts.app', ['page' => __('Vistas de desarrollos'), 'pageSlug' => 'house-developments', 'section' => 'house-developments'])

@section('content')

    @component('components.searchBar', ['fields' => $fields , 'action' => route('house-development-views.showByDevelopment', $houseDevelopment), '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">
                            <span class="bw-card-title">{{ __('Vistas del desarrollo') }}</span>
                            <span class="bw-card-title-bold">
                                <i class="fa-solid fa-circle-right fa-lg" style="color: #aa9d64;"></i>
                                {{ $houseDevelopment->name }}
                            </span>
                        </div>
                        <div class="col-4 text-right">
                            <a href="#" class="btn btn-sm btn-gradient" data-toggle="modal" data-target="#createViewModal">
                                {{ __('Alta de Vista') }}
                            </a>
                            <a href="{{ route('house-developments.index') }}" class="btn btn-sm btn-primary btn-gradient">
                                {{ __('Regresar a listado') }}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="">
                        <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"></th>
                            </thead>
                            <tbody>
                                @foreach ($houseDevelopmentViews as $houseDevelopmentView)
                                    <tr class="table-row-hover td-gradient">
                                        <td>
                                            <input type="text" name="name" class="form-control" value="{{ $houseDevelopmentView->name }}" id="view-name-{{ $houseDevelopmentView->id }}">
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-success btn-gradient update-view" data-id="{{ $houseDevelopmentView->id }}">
                                                {{ __('Actualizar') }}
                                            </button>
                                            <button type="button" class="btn btn-sm btn-danger bw-btn-danger-gradient delete-view" data-id="{{ $houseDevelopmentView->id }}">
                                                {{ __('Borrar') }}
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card-footer py-4">
                    <nav class="d-flex justify-content-end" aria-label="...">
                        {{ $houseDevelopmentViews->appends($_GET)->links() }}
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for Creating a New View -->
    <div class="modal fade" id="createViewModal" tabindex="-1" role="dialog" aria-labelledby="createViewModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createViewModalLabel">{{ __('Crear Nueva Vista') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Cerrar') }}">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="create-view-form" action="{{ route('house-development-views.store') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="view-name">{{ __('Nombre de la Vista') }}</label>
                            <input type="text" class="form-control" id="view-name" name="name" required>
                        </div>
                        <input type="hidden" name="house_development_id" value="{{ $houseDevelopment->id }}">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-gradient" data-dismiss="modal">{{ __('Cerrar') }}</button>
                        <button type="submit" class="btn btn-primary btn-gradient">{{ __('Guardar') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@push('js')
<script>
    document.querySelectorAll('.update-view').forEach(button => {
        button.addEventListener('click', function() {
            const viewId = this.getAttribute('data-id');
            const viewName = document.getElementById('view-name-' + viewId).value;
            const token = '{{ csrf_token() }}';
            fetch(`{{ url('house-development-views') }}/${viewId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': token
                },
                body: JSON.stringify({
                    name: viewName,
                }),
            })
            .then(response => response.json())
            .then(data => {
                Swal.fire({
                    title: '¡Éxito!',
                    text: data.message || 'Vista actualizada correctamente',
                    icon: 'success',
                    confirmButtonText: 'OK'
                }).then(() => {
                    location.reload();
                });
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    title: 'Error',
                    text: 'Hubo un problema al actualizar la vista.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            });
        });
    });

    // Handle the AJAX delete
    document.querySelectorAll('.delete-view').forEach(button => {
        button.addEventListener('click', function() {
            if (!confirm('{{ __('¿Estás seguro de eliminar esta vista?') }}')) return;

            const viewId = this.getAttribute('data-id');
            const token = '{{ csrf_token() }}';
            fetch(`{{ url('house-development-views') }}/${viewId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': token
                },
            })
            .then(response => response.json())
            .then(data => {
                Swal.fire({
                    title: '¡Eliminado!',
                    text: data.message || 'Vista borrada correctamente',
                    icon: 'success',
                    confirmButtonText: 'OK'
                }).then(() => {
                    location.reload();
                });
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire({
                    title: 'Error',
                    text: 'Hubo un problema al borrar la vista.',
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            });
        });
    });


</script>
@endpush