netgescon-master/resources/views/admin/stabili/show.blade.php

232 lines
9.7 KiB
PHP

@extends('admin.layouts.netgescon')
@section('title', 'Dettagli Stabile')
@section('page-title', 'Dettagli Stabile')
@section('breadcrumb')
<li class="text-gray-600">
<a href="{{ route('admin.stabili.index') }}" class="hover:text-blue-600">
<i class="fas fa-building mr-2"></i>
Stabili
</a>
</li>
<li class="text-gray-600">
<i class="fas fa-chevron-right mx-2"></i>
{{ Str::limit($stabile->denominazione, 40) }}
</li>
@endsection
@section('content')
<div class="space-y-6">
<!-- Header con azioni -->
<div class="flex justify-between items-center">
<div>
<h1 class="text-2xl font-bold text-gray-900">{{ $stabile->denominazione }}</h1>
<p class="text-gray-600 mt-1">
<i class="fas fa-map-marker-alt mr-1"></i>
{{ $stabile->indirizzo }}, {{ $stabile->citta }}
</p>
</div>
<div class="flex space-x-3">
<a href="{{ route('admin.stabili.edit', $stabile) }}"
class="netgescon-btn netgescon-btn-primary">
<i class="fas fa-edit mr-2"></i>
Modifica
</a>
<a href="{{ route('admin.stabili.index') }}"
class="netgescon-btn netgescon-btn-secondary">
<i class="fas fa-arrow-left mr-2"></i>
Torna alla Lista
</a>
</div>
</div>
<!-- Tabs Container -->
<div class="bg-white rounded-lg shadow-sm border">
<!-- Tab Navigation -->
<div class="border-b border-gray-200 px-6 pt-6">
<nav class="-mb-px flex space-x-8" aria-label="Tabs" role="tablist">
<button class="netgescon-tab-btn active"
data-tab="dati-generali"
type="button"
role="tab">
<i class="fas fa-info-circle mr-2"></i>
Dati Generali
</button>
<button class="netgescon-tab-btn"
data-tab="palazzine"
type="button"
role="tab">
<i class="fas fa-building mr-2"></i>
Palazzine
</button>
<button class="netgescon-tab-btn"
data-tab="dati-bancari"
type="button"
role="tab">
<i class="fas fa-university mr-2"></i>
Dati Bancari
</button>
<button class="netgescon-tab-btn"
data-tab="tabelle-millesimali"
type="button"
role="tab">
<i class="fas fa-table mr-2"></i>
Tabelle Millesimali
</button>
<button class="netgescon-tab-btn"
data-tab="unita-immobiliari"
type="button"
role="tab">
<i class="fas fa-home mr-2"></i>
Unità Immobiliari
</button>
<button class="netgescon-tab-btn"
data-tab="gestione-documentale"
type="button"
role="tab">
<i class="fas fa-folder-open mr-2"></i>
Gestione Documentale
</button>
</nav>
</div>
<!-- Tab Content -->
<div class="px-6 pb-6">
<!-- Tab Dati Generali -->
<div id="dati-generali" class="netgescon-tab-content active">
@include('admin.stabili.tabs.dati-generali', ['stabile' => $stabile])
</div>
<!-- Tab Palazzine -->
<div id="palazzine" class="netgescon-tab-content hidden">
@include('admin.stabili.tabs.palazzine', ['stabile' => $stabile])
</div>
<!-- Tab Dati Bancari -->
<div id="dati-bancari" class="netgescon-tab-content hidden">
@include('admin.stabili.tabs.dati-bancari', ['stabile' => $stabile])
</div>
<!-- Tab Tabelle Millesimali -->
<div id="tabelle-millesimali" class="netgescon-tab-content hidden">
@include('admin.stabili.tabs.tabelle-millesimali', ['stabile' => $stabile])
</div>
<!-- Tab Unità Immobiliari -->
<div id="unita-immobiliari" class="netgescon-tab-content hidden">
@include('admin.stabili.tabs.unita-immobiliari', ['stabile' => $stabile])
</div>
<!-- Tab Gestione Documentale -->
<div id="gestione-documentale" class="netgescon-tab-content hidden">
@include('admin.stabili.tabs.gestione-documentale', ['stabile' => $stabile])
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CSS per i tab -->
<style>
.netgescon-tab-btn {
@apply px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 border-b-2 border-transparent hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 transition-colors duration-200;
}
.netgescon-tab-btn.active {
@apply text-blue-600 dark:text-blue-400 border-blue-500 dark:border-blue-400;
}
.netgescon-tab-content {
@apply hidden;
}
.netgescon-tab-content.active {
@apply block;
}
</style>
<!-- JavaScript per i tab -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const tabButtons = document.querySelectorAll('.netgescon-tab-btn');
const tabContents = document.querySelectorAll('.netgescon-tab-content');
tabButtons.forEach(button => {
button.addEventListener('click', function() {
const targetTab = this.dataset.tab;
// Rimuovi classe active da tutti i bottoni
tabButtons.forEach(btn => btn.classList.remove('active'));
// Nascondi tutti i contenuti dei tab
tabContents.forEach(content => {
content.classList.remove('active');
content.classList.add('hidden');
});
// Aggiungi classe active al bottone cliccato
this.classList.add('active');
// Mostra il contenuto del tab selezionato
const targetContent = document.getElementById(targetTab);
if (targetContent) {
targetContent.classList.add('active');
targetContent.classList.remove('hidden');
}
// Carica contenuto dinamico per la tab Unità Immobiliari
if (targetTab === 'unita-immobiliari') {
loadUnitaImmobiliari();
}
});
});
// Funzione per caricare dinamicamente le Unità Immobiliari
function loadUnitaImmobiliari() {
const contentContainer = document.getElementById('unita-immobiliari-content');
const stabileId = {{ $stabile->id }};
// Mostra loading se non già caricato
if (!contentContainer.dataset.loaded) {
fetch(`/admin/stabili/${stabileId}/unita-immobiliari`, {
method: 'GET',
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Accept': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
contentContainer.innerHTML = data.html;
contentContainer.dataset.loaded = 'true';
} else {
contentContainer.innerHTML = `
<div class="text-center py-8">
<div class="text-red-600">
<i class="fas fa-exclamation-triangle text-2xl mb-2"></i>
<p>Errore nel caricamento delle unità immobiliari</p>
</div>
</div>
`;
}
})
.catch(error => {
console.error('Errore:', error);
contentContainer.innerHTML = `
<div class="text-center py-8">
<div class="text-red-600">
<i class="fas fa-exclamation-triangle text-2xl mb-2"></i>
<p>Errore di connessione</p>
</div>
</div>
`;
});
}
}
});
</script>
@endsection