@extends('layouts.app', ['page' => __('Vistas de unidades'), 'pageSlug' => 'units', 'section' => 'units'])

@section('content')

    @component('components.searchBar', ['fields' => $fields , 'action' => route('unit-views.showByUnit', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology, 'unit' => $unit]), '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 de la unidad') }}</span>
                            <span class="bw-card-title-bold">
                                <i class="fa-solid fa-circle-right fa-lg" style="color: #aa9d64;"></i>
                                {{ $unit->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('units.index', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology]) }}" class="btn btn-sm btn-primary btn-gradient">
                                {{ __('Regresar a listado de unidades') }}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                        <table class="table tablesorter text-center">
                            <thead class="th-gradient">
                                <th class="th-text-color"> {{ __('Nombre') }}</th>
                                <th class="th-text-color" scope="col"></th>
                            </thead>
                            <tbody>
                                @foreach ($unitViews as $unitView)
                                    <tr class="table-row-hover td-gradient">
                                        <td>
                                            <input type="text" name="name" class="form-control" value="{{ $unitView->name }}" id="view-name-{{ $unitView->id }}">
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-sm btn-danger bw-btn-danger-gradient delete-view" data-id="{{ $unitView->id }}">
                                                {{ __('Borrar') }}
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach

                                @if(count($unitViews) == 0)
                                    <tr class="table-row-hover td-gradient"><td>No hay vistas disponibles para esta unidad.</td><td></td></tr>
                                @endif
                            </tbody>
                        </table>
                </div>
                <div class="card-footer py-4">
                    <nav class="d-flex justify-content-end" aria-label="...">
                        {{ $unitViews->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">{{ __('Seleccionar Vistas para la Unidad') }}</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('unit-views.addView', ['houseDevelopment' => $houseDevelopment->id, 'unit' => $unit->id]) }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label>{{ __('Selecciona las vistas que quieres añadir:') }}</label>
                            <div class="form-check" style="padding-left: 20px;">
                                @foreach ($houseDevelopmentViews as $houseDevelopmentView)
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="houseDevelopmentViews[]" value="{{ $houseDevelopmentView->id }}" id="view-{{ $houseDevelopmentView->id }}">
                                        <label class="form-check-label" for="view-{{ $houseDevelopmentView->id }}">
                                            {{ $houseDevelopmentView->name }}
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </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('.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(`/admin/unit-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