netgescon-day0/resources/views/admin/palazzine/show.blade.php

1050 lines
54 KiB
PHP
Executable File

@extends('admin.layouts.netgescon')
@section('title', 'Dettaglio Palazzina')
@section('content')
<div class="container-fluid">
<!-- Header -->
<div class="row mb-4">
<div class="col-12">
<div class="d-flex justify-content-between align-items-start">
<div>
<h1 class="h2 mb-2">
<i class="fas fa-building me-3 text-primary"></i>
{{ $palazzina->denominazione ?? 'Palazzina ' . $palazzina->codice_palazzina }}
</h1>
<p class="text-muted">
<i class="fas fa-map-marker-alt me-2"></i>
{{ $palazzina->indirizzo ?? $palazzina->stabile?->indirizzo ?? 'Indirizzo non disponibile' }}
</p>
</div>
<div class="d-flex gap-2">
<a href="{{ route('admin.palazzine.edit', $palazzina) }}"
class="btn btn-netgescon-primary">
<i class="fas fa-edit me-2"></i>
Modifica
</a>
@if($palazzina->stabile)
<a href="{{ route('admin.stabili.show', $palazzina->stabile->id) }}"
class="btn btn-outline-secondary">
<i class="fas fa-arrow-left me-2"></i>
Torna allo Stabile
</a>
@endif
</div>
</div>
</div>
</div>
<!-- Statistiche Overview -->
<div class="row g-4 mb-4">
<!-- Unità Teoriche -->
<div class="col-xl-3 col-lg-6">
<div class="card card-netgescon bg-primary bg-opacity-10 border-primary">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="bg-primary text-white rounded-circle p-3">
<i class="fas fa-calculator"></i>
</div>
</div>
<div class="ms-3">
<p class="small text-primary mb-1">Unità Teoriche</p>
<h4 class="mb-0 text-primary">{{ $statistiche['unita_teoriche'] }}</h4>
</div>
</div>
</div>
</div>
</div>
<!-- Unità Effettive -->
<div class="col-xl-3 col-lg-6">
<div class="card card-netgescon bg-success bg-opacity-10 border-success">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="bg-success text-white rounded-circle p-3">
<i class="fas fa-home"></i>
</div>
</div>
<div class="ms-3">
<p class="small text-success mb-1">Unità Effettive</p>
<h4 class="mb-0 text-success">{{ $statistiche['totale_unita_effettive'] }}</h4>
</div>
</div>
</div>
</div>
</div>
<!-- Unità Occupate -->
<div class="col-xl-3 col-lg-6">
<div class="card card-netgescon bg-warning bg-opacity-10 border-warning">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="bg-warning text-white rounded-circle p-3">
<i class="fas fa-users"></i>
</div>
</div>
<div class="ms-3">
<p class="small text-warning mb-1">Occupate</p>
<h4 class="mb-0 text-warning">{{ $statistiche['unita_occupate'] }}</h4>
</div>
</div>
</div>
</div>
</div>
<!-- Unità Libere -->
<div class="col-xl-3 col-lg-6">
<div class="card card-netgescon bg-info bg-opacity-10 border-info">
<div class="card-body">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="bg-info text-white rounded-circle p-3">
<i class="fas fa-key"></i>
</div>
</div>
<div class="ms-3">
<p class="small text-info mb-1">Libere</p>
<h4 class="mb-0 text-info">{{ $statistiche['unita_libere'] }}</h4>
</div>
</div>
</div>
</div>
</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="informazioni-generali"
role="tab">
<i class="fas fa-info-circle mr-2"></i>
Informazioni Generali
</button>
<button class="netgescon-tab-btn"
data-tab="caratteristiche-tecniche"
role="tab">
<i class="fas fa-tools mr-2"></i>
Caratteristiche Tecniche
</button>
<button class="netgescon-tab-btn"
data-tab="scale-appartamenti"
role="tab">
<i class="fas fa-building mr-2"></i>
Scale e Appartamenti
</button>
<button class="netgescon-tab-btn"
data-tab="locali-condominiali"
role="tab">
<i class="fas fa-warehouse mr-2"></i>
Locali Condominiali
</button>
<button class="netgescon-tab-btn"
data-tab="spazi-comuni"
role="tab">
<i class="fas fa-users mr-2"></i>
Spazi Comuni
</button>
</nav>
</div>
<!-- Tab Content -->
<div class="p-6">
<!-- Tab Informazioni Generali -->
<div id="informazioni-generali" class="netgescon-tab-content">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Dati Identificativi -->
<div class="space-y-6">
<h3 class="text-lg font-semibold text-gray-900 border-b pb-2">
<i class="fas fa-id-card mr-2 text-blue-600"></i>
Dati Identificativi
</h3>
<div class="space-y-3">
<div class="flex justify-between">
<span class="font-medium text-gray-700">Codice Palazzina:</span>
<span class="text-gray-900">{{ $palazzina->codice_palazzina }}</span>
</div>
<div class="flex justify-between">
<span class="font-medium text-gray-700">Denominazione:</span>
<span class="text-gray-900">{{ $palazzina->denominazione ?? '-' }}</span>
</div>
<div class="flex justify-between">
<span class="font-medium text-gray-700">Tipo:</span>
<span class="text-gray-900">{{ ucfirst($palazzina->tipo ?? 'principale') }}</span>
</div>
<div class="flex justify-between">
<span class="font-medium text-gray-700">Anno Costruzione:</span>
<span class="text-gray-900">{{ $palazzina->anno_costruzione ?? '-' }}</span>
</div>
</div>
</div>
<!-- Struttura Fisica -->
<div class="space-y-6">
<h3 class="text-lg font-semibold text-gray-900 border-b pb-2">
<i class="fas fa-building mr-2 text-green-600"></i>
Struttura Fisica
</h3>
<div class="space-y-3">
<div class="flex justify-between">
<span class="font-medium text-gray-700">Numero Scale:</span>
<span class="text-gray-900">{{ $palazzina->numero_scale ?? '-' }}</span>
</div>
<div class="flex justify-between">
<span class="font-medium text-gray-700">Piani Fuori Terra:</span>
<span class="text-gray-900">{{ $palazzina->numero_piani_fuori_terra ?? '-' }}</span>
</div>
<div class="flex justify-between">
<span class="font-medium text-gray-700">Piani Interrati:</span>
<span class="text-gray-900">{{ $palazzina->numero_piani_interrati ?? '-' }}</span>
</div>
<div class="flex justify-between">
<span class="font-medium text-gray-700">Appartamenti per Piano:</span>
<span class="text-gray-900">{{ $palazzina->appartamenti_per_piano ?? '-' }}</span>
</div>
</div>
</div>
</div>
@if($palazzina->note)
<div class="mt-8">
<h3 class="text-lg font-semibold text-gray-900 border-b pb-2 mb-4">
<i class="fas fa-sticky-note mr-2 text-yellow-600"></i>
Note
</h3>
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
<p class="text-gray-800">{{ $palazzina->note }}</p>
</div>
</div>
@endif
</div>
<!-- Tab Caratteristiche Tecniche -->
<div id="caratteristiche-tecniche" class="netgescon-tab-content hidden">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Impianti -->
<div class="space-y-6">
<h3 class="text-lg font-semibold text-gray-900 border-b pb-2">
<i class="fas fa-cogs mr-2 text-purple-600"></i>
Impianti e Servizi
</h3>
<div class="space-y-3">
<div class="flex items-center justify-between">
<span class="font-medium text-gray-700">Ascensore:</span>
<span class="flex items-center">
@if($palazzina->ha_ascensore)
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span class="text-green-600"> ({{ $palazzina->numero_ascensori ?? 1 }})</span>
@else
<i class="fas fa-times-circle text-red-500 mr-2"></i>
<span class="text-red-600">No</span>
@endif
</span>
</div>
<div class="flex items-center justify-between">
<span class="font-medium text-gray-700">Videocitofono:</span>
<span class="flex items-center">
@if($palazzina->ha_videocitofono)
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span class="text-green-600"></span>
@else
<i class="fas fa-times-circle text-red-500 mr-2"></i>
<span class="text-red-600">No</span>
@endif
</span>
</div>
<div class="flex items-center justify-between">
<span class="font-medium text-gray-700">Accessibile Disabili:</span>
<span class="flex items-center">
@if($palazzina->accessibile_disabili)
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span class="text-green-600"></span>
@else
<i class="fas fa-times-circle text-red-500 mr-2"></i>
<span class="text-red-600">No</span>
@endif
</span>
</div>
</div>
</div>
<!-- Superfici -->
<div class="space-y-6">
<h3 class="text-lg font-semibold text-gray-900 border-b pb-2">
<i class="fas fa-ruler-combined mr-2 text-orange-600"></i>
Superfici
</h3>
<div class="space-y-3">
<div class="flex justify-between">
<span class="font-medium text-gray-700">Superficie Totale:</span>
<span class="text-gray-900">{{ $palazzina->superficie_totale ? $palazzina->superficie_totale . ' m²' : '-' }}</span>
</div>
<div class="flex justify-between">
<span class="font-medium text-gray-700">Spazi Comuni:</span>
<span class="text-gray-900">{{ $statistiche['superficie_spazi_comuni'] ? $statistiche['superficie_spazi_comuni'] . ' m²' : '-' }}</span>
</div>
</div>
</div>
</div>
</div>
<!-- Tab Scale e Appartamenti -->
<div id="scale-appartamenti" class="netgescon-tab-content hidden">
<div class="space-y-6">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-900">
<i class="fas fa-building mr-2 text-blue-600"></i>
Scale, Palazzine e Appartamenti
</h3>
</div>
<!-- Sub-Tab Navigation per Scale e Appartamenti -->
<div class="border-b border-gray-200">
<nav class="-mb-px flex space-x-8" aria-label="Sub Tabs" role="tablist">
<button class="netgescon-subtab-btn active"
data-subtab="unita-immobiliari-view"
role="tab">
<i class="fas fa-home mr-2"></i>
Unità Immobiliari
</button>
<button class="netgescon-subtab-btn"
data-subtab="scale-appartamenti-view"
role="tab">
<i class="fas fa-stairs mr-2"></i>
Scale e Appartamenti
</button>
</nav>
</div>
<!-- Sub-Tab Content -->
<div class="mt-6">
<!-- Sub-Tab Unità Immobiliari -->
<div id="unita-immobiliari-view" class="netgescon-subtab-content">
<div class="space-y-4">
<div class="flex items-center justify-between">
<h4 class="text-md font-semibold text-gray-800">
<i class="fas fa-list mr-2 text-green-600"></i>
Vista Unità Immobiliari per Palazzina e Piani
</h4>
<button onclick="aggiungiUnitaImmobiliare()" class="netgescon-btn netgescon-btn-primary">
<i class="fas fa-plus mr-2"></i>
Nuova Unità
</button>
</div>
@include('admin.stabili.tabs.unita-immobiliari', [
'stabile' => $palazzina->stabile,
'palazzina_filter' => $palazzina->id,
'tipo_filter' => 'appartamenti',
'vista_tipo' => 'palazzina_piani'
])
</div>
</div>
<!-- Sub-Tab Scale e Appartamenti -->
<div id="scale-appartamenti-view" class="netgescon-subtab-content hidden">
<div class="space-y-4">
<div class="flex items-center justify-between">
<h4 class="text-md font-semibold text-gray-800">
<i class="fas fa-building mr-2 text-blue-600"></i>
Vista Scale della Palazzina e Appartamenti
</h4>
<button onclick="aggiungiScala()" class="netgescon-btn netgescon-btn-primary">
<i class="fas fa-plus mr-2"></i>
Nuova Scala
</button>
</div>
<!-- Vista Scale della Palazzina -->
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
@forelse($palazzina->scale ?? [] as $scala)
<div class="bg-white rounded-lg shadow-md border border-gray-200 p-6">
<div class="flex items-center justify-between mb-4">
<h5 class="text-lg font-semibold text-gray-900">
<i class="fas fa-stairs mr-2 text-blue-600"></i>
Scala {{ $scala->denominazione ?? $scala->numero ?? 'N/A' }}
</h5>
<div class="flex space-x-2">
<button onclick="editScala({{ $scala->id }})"
class="text-blue-600 hover:text-blue-800">
<i class="fas fa-edit"></i>
</button>
<button onclick="deleteScala({{ $scala->id }})"
class="text-red-600 hover:text-red-800">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<div class="grid grid-cols-2 gap-4 text-sm">
<div>
<span class="text-gray-500">Piani:</span>
<span class="font-medium">{{ $scala->numero_piani ?? 'N/A' }}</span>
</div>
<div>
<span class="text-gray-500">Appartamenti:</span>
<span class="font-medium">{{ $scala->appartamenti->count() ?? 0 }}</span>
</div>
</div>
<!-- Lista Appartamenti per questa Scala -->
@if($scala->appartamenti && $scala->appartamenti->count() > 0)
<div class="mt-4">
<h6 class="text-sm font-medium text-gray-700 mb-2">Appartamenti:</h6>
<div class="space-y-2">
@foreach($scala->appartamenti->sortBy('piano') as $appartamento)
<div class="flex items-center justify-between p-2 bg-gray-50 rounded">
<div class="flex items-center space-x-2">
<i class="fas fa-door-open text-green-600"></i>
<span class="text-sm font-medium">
{{ $appartamento->denominazione ?? 'App. N/A' }}
</span>
<span class="text-xs text-gray-500">
Piano {{ $appartamento->piano ?? 'N/A' }}
</span>
</div>
<div class="flex space-x-1">
<button onclick="editAppartamento({{ $appartamento->id }})"
class="text-blue-600 hover:text-blue-800 text-xs">
<i class="fas fa-edit"></i>
</button>
<button onclick="viewAppartamento({{ $appartamento->id }})"
class="text-green-600 hover:text-green-800 text-xs">
<i class="fas fa-eye"></i>
</button>
</div>
</div>
@endforeach
</div>
</div>
@else
<div class="mt-4 text-center text-gray-500 text-sm">
<i class="fas fa-home-alt text-gray-400 mb-2"></i>
<p>Nessun appartamento assegnato</p>
</div>
@endif
</div>
@empty
<div class="col-span-full text-center py-12">
<i class="fas fa-stairs text-gray-400 text-4xl mb-4"></i>
<h4 class="text-lg font-medium text-gray-600 mb-2">Nessuna Scala Configurata</h4>
<p class="text-gray-500 mb-4">Inizia aggiungendo la prima scala per questa palazzina</p>
<button onclick="aggiungiScala()" class="netgescon-btn netgescon-btn-primary">
<i class="fas fa-plus mr-2"></i>
Aggiungi Prima Scala
</button>
</div>
@endforelse
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tab Locali Condominiali -->
<div id="locali-condominiali" class="netgescon-tab-content hidden">
<div class="space-y-6">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-900">
<i class="fas fa-warehouse mr-2 text-purple-600"></i>
Locali Condominiali
</h3>
<button onclick="openLocaleModal()" class="netgescon-btn netgescon-btn-primary">
<i class="fas fa-plus mr-2"></i>
Nuovo Locale
</button>
</div>
<!-- Filtri Locali -->
<div class="bg-gray-50 rounded-lg p-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Tipo Locale</label>
<select id="filtro-tipo-locale" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500">
<option value="">Tutti i tipi</option>
<option value="cantina">Cantina</option>
<option value="soffitta">Soffitta</option>
<option value="terrazza">Terrazza</option>
<option value="locale_tecnico">Locale Tecnico</option>
<option value="posto_auto">Posto Auto</option>
<option value="fontana">Fontana</option>
<option value="altro">Altro</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Stato Locazione</label>
<select id="filtro-stato-locazione" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500">
<option value="">Tutti</option>
<option value="libero">Libero</option>
<option value="affittato">Affittato</option>
<option value="non_affittabile">Non Affittabile</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Gestione Chiavi</label>
<select id="filtro-chiavi" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-purple-500">
<option value="">Tutte</option>
<option value="amministratore">Amministratore</option>
<option value="portiere">Portiere</option>
<option value="condomino">Condomino</option>
</select>
</div>
<div class="flex items-end">
<button onclick="applicaFiltriLocali()" class="w-full netgescon-btn netgescon-btn-secondary">
<i class="fas fa-filter mr-2"></i>
Filtra
</button>
</div>
</div>
</div>
<!-- Lista Locali Condominiali -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6" id="locali-container">
<!-- Placeholder per i locali - saranno caricati via AJAX -->
<div class="col-span-2 text-center py-12">
<div class="text-gray-500">
<i class="fas fa-warehouse text-4xl mb-4 opacity-50"></i>
<p class="text-lg font-medium">Caricamento locali condominiali...</p>
</div>
</div>
</div>
<!-- Statistiche Locali -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-8">
<div class="bg-green-50 border border-green-200 rounded-lg p-4">
<div class="flex items-center">
<i class="fas fa-check-circle text-green-600 text-xl mr-3"></i>
<div>
<h4 class="font-medium text-green-800">Liberi</h4>
<p class="text-2xl font-bold text-green-600" id="stat-liberi">-</p>
</div>
</div>
</div>
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
<div class="flex items-center">
<i class="fas fa-handshake text-blue-600 text-xl mr-3"></i>
<div>
<h4 class="font-medium text-blue-800">Affittati</h4>
<p class="text-2xl font-bold text-blue-600" id="stat-affittati">-</p>
</div>
</div>
</div>
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
<div class="flex items-center">
<i class="fas fa-euro-sign text-yellow-600 text-xl mr-3"></i>
<div>
<h4 class="font-medium text-yellow-800">Rendita Mensile</h4>
<p class="text-2xl font-bold text-yellow-600" id="stat-rendita">€0</p>
</div>
</div>
</div>
<div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
<div class="flex items-center">
<i class="fas fa-key text-purple-600 text-xl mr-3"></i>
<div>
<h4 class="font-medium text-purple-800">Chiavi Gestite</h4>
<p class="text-2xl font-bold text-purple-600" id="stat-chiavi">-</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tab Spazi Comuni -->
<div id="spazi-comuni" class="netgescon-tab-content hidden">
<div class="space-y-6">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-900">
<i class="fas fa-users mr-2 text-blue-600"></i>
Spazi e Servizi Comuni
</h3>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@if($palazzina->ha_giardino_comune)
<div class="bg-green-50 border border-green-200 rounded-lg p-4">
<div class="flex items-center">
<i class="fas fa-tree text-green-600 text-xl mr-3"></i>
<div>
<h4 class="font-medium text-green-800">Giardino Comune</h4>
<p class="text-sm text-green-600">{{ $palazzina->mq_giardino_comune ?? '-' }} </p>
</div>
</div>
</div>
@endif
@if($palazzina->posti_auto_coperti > 0)
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
<div class="flex items-center">
<i class="fas fa-car text-blue-600 text-xl mr-3"></i>
<div>
<h4 class="font-medium text-blue-800">Posti Auto Coperti</h4>
<p class="text-sm text-blue-600">{{ $palazzina->posti_auto_coperti }} posti</p>
</div>
</div>
</div>
@endif
@if($palazzina->ha_locale_caldaia)
<div class="bg-orange-50 border border-orange-200 rounded-lg p-4">
<div class="flex items-center">
<i class="fas fa-fire text-orange-600 text-xl mr-3"></i>
<div>
<h4 class="font-medium text-orange-800">Locale Caldaia</h4>
<p class="text-sm text-orange-600">Presente</p>
</div>
</div>
</div>
@endif
@if($palazzina->ha_locale_contatori)
<div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
<div class="flex items-center">
<i class="fas fa-tachometer-alt text-purple-600 text-xl mr-3"></i>
<div>
<h4 class="font-medium text-purple-800">Locale Contatori</h4>
<p class="text-sm text-purple-600">Presente</p>
</div>
</div>
</div>
@endif
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Gestione Locale Condominiale -->
<div id="localeModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
<div class="relative top-20 mx-auto p-5 border w-11/12 md:w-2/3 lg:w-1/2 shadow-lg rounded-md bg-white">
<div class="mt-3">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-medium text-gray-900" id="locale-modal-title">Nuovo Locale Condominiale</h3>
<button onclick="closeLocaleModal()" class="text-gray-400 hover:text-gray-600">
<i class="fas fa-times"></i>
</button>
</div>
<form id="localeForm" method="POST">
@csrf
<div class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700">Tipo Locale</label>
<select name="tipo_locale" required class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
<option value="">Seleziona tipo...</option>
<option value="cantina">Cantina</option>
<option value="soffitta">Soffitta</option>
<option value="terrazza">Terrazza</option>
<option value="locale_tecnico">Locale Tecnico</option>
<option value="posto_auto">Posto Auto</option>
<option value="fontana">Fontana</option>
<option value="altro">Altro</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Identificativo</label>
<input type="text" name="identificativo" required placeholder="es. C01, P15, T2..."
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Descrizione</label>
<input type="text" name="descrizione"
placeholder="es. Cantina piano seminterrato, Posto auto coperto..."
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
</div>
<div class="grid grid-cols-3 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700">Superficie ()</label>
<input type="number" name="superficie" step="0.01" min="0"
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Piano</label>
<input type="text" name="piano" placeholder="S1, T, P..."
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Numero Chiavi</label>
<input type="number" name="numero_chiavi" min="0" value="0"
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
</div>
</div>
<!-- Sezione Locazione -->
<div class="border-t pt-4">
<h4 class="font-medium text-gray-900 mb-3">Gestione Locazione</h4>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700">Stato</label>
<select name="stato_locazione" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
<option value="libero">Libero</option>
<option value="affittato">Affittato</option>
<option value="non_affittabile">Non Affittabile</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Canone Mensile ()</label>
<input type="number" name="canone_mensile" step="0.01" min="0"
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
</div>
</div>
<div class="grid grid-cols-2 gap-4 mt-4">
<div>
<label class="block text-sm font-medium text-gray-700">Data Inizio Locazione</label>
<input type="date" name="data_inizio_locazione"
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Data Fine Locazione</label>
<input type="date" name="data_fine_locazione"
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mt-4">Locatario</label>
<input type="text" name="locatario" placeholder="Nome e cognome del locatario"
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
</div>
</div>
<!-- Sezione Gestione Chiavi -->
<div class="border-t pt-4">
<h4 class="font-medium text-gray-900 mb-3">Gestione Chiavi</h4>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700">Responsabile Chiavi</label>
<select name="responsabile_chiavi" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
<option value="amministratore">Amministratore</option>
<option value="portiere">Portiere</option>
<option value="condomino">Condomino Referente</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Note Chiavi</label>
<input type="text" name="note_chiavi" placeholder="es. Doppione presso..."
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Note Generali</label>
<textarea name="note" rows="3"
class="mt-1 block w-full border-gray-300 rounded-md shadow-sm"></textarea>
</div>
</div>
<div class="flex justify-end space-x-2 mt-6">
<button type="button" onclick="closeLocaleModal()"
class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300">
Annulla
</button>
<button type="submit"
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-md hover:bg-purple-700">
Salva Locale
</button>
</div>
</form>
</div>
</div>
</div>
@push('scripts')
<style>
/* Stili per i sub-tab */
.netgescon-subtab-btn {
@apply whitespace-nowrap border-b-2 border-transparent py-4 px-1 text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 transition-colors duration-200;
}
.netgescon-subtab-btn.active {
@apply border-blue-500 text-blue-600;
}
.netgescon-subtab-content {
@apply block;
}
.netgescon-subtab-content.hidden {
@apply hidden;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize tabs
const tabButtons = document.querySelectorAll('.netgescon-tab-btn');
const tabContents = document.querySelectorAll('.netgescon-tab-content');
tabButtons.forEach(button => {
button.addEventListener('click', function() {
const targetTab = this.getAttribute('data-tab');
// Remove active class from all buttons and contents
tabButtons.forEach(btn => btn.classList.remove('active'));
tabContents.forEach(content => content.classList.add('hidden'));
// Add active class to clicked button and show corresponding content
this.classList.add('active');
document.getElementById(targetTab).classList.remove('hidden');
// Se stiamo aprendo il tab locali condominiali, carica i dati
if (targetTab === 'locali-condominiali') {
caricaLocaliCondominiali();
}
});
});
// Initialize sub-tabs
const subtabButtons = document.querySelectorAll('.netgescon-subtab-btn');
const subtabContents = document.querySelectorAll('.netgescon-subtab-content');
subtabButtons.forEach(button => {
button.addEventListener('click', function() {
const targetSubtab = this.getAttribute('data-subtab');
// Remove active class from all subtab buttons and contents
subtabButtons.forEach(btn => btn.classList.remove('active'));
subtabContents.forEach(content => content.classList.add('hidden'));
// Add active class to clicked button and show corresponding content
this.classList.add('active');
document.getElementById(targetSubtab).classList.remove('hidden');
});
});
});
// Funzioni per la gestione dei locali condominiali
function openLocaleModal(localeId = null) {
const modal = document.getElementById('localeModal');
const title = document.getElementById('locale-modal-title');
const form = document.getElementById('localeForm');
if (localeId) {
title.textContent = 'Modifica Locale Condominiale';
form.action = `/admin/palazzine/{{ $palazzina->id }}/locali/${localeId}`;
// Carica i dati del locale
caricaDatiLocale(localeId);
} else {
title.textContent = 'Nuovo Locale Condominiale';
form.action = `/admin/palazzine/{{ $palazzina->id }}/locali`;
form.reset();
}
modal.classList.remove('hidden');
}
function closeLocaleModal() {
document.getElementById('localeModal').classList.add('hidden');
}
function caricaLocaliCondominiali() {
const container = document.getElementById('locali-container');
// Mostra loading
container.innerHTML = `
<div class="col-span-2 text-center py-12">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-500 mx-auto mb-4"></div>
<p class="text-gray-500">Caricamento locali...</p>
</div>
`;
fetch(`/admin/palazzine/{{ $palazzina->id }}/locali-condominiali`)
.then(response => response.json())
.then(data => {
if (data.locali && data.locali.length > 0) {
let html = '';
data.locali.forEach(locale => {
html += generaCardLocale(locale);
});
container.innerHTML = html;
// Aggiorna statistiche
aggiornaStatisticheLocali(data.statistiche);
} else {
container.innerHTML = `
<div class="col-span-2 text-center py-12">
<div class="text-gray-500">
<i class="fas fa-warehouse text-4xl mb-4 opacity-50"></i>
<p class="text-lg font-medium">Nessun locale condominiale</p>
<p class="text-sm mt-2">Aggiungi il primo locale per iniziare</p>
</div>
</div>
`;
}
})
.catch(error => {
console.error('Errore nel caricamento dei locali:', error);
container.innerHTML = `
<div class="col-span-2 text-center py-12">
<div class="text-red-500">
<i class="fas fa-exclamation-triangle text-4xl mb-4 opacity-50"></i>
<p class="text-lg font-medium">Errore nel caricamento</p>
</div>
</div>
`;
});
}
function generaCardLocale(locale) {
const tipoIcons = {
'cantina': 'fas fa-archive',
'soffitta': 'fas fa-warehouse',
'terrazza': 'fas fa-tree',
'locale_tecnico': 'fas fa-tools',
'posto_auto': 'fas fa-car',
'fontana': 'fas fa-fountain',
'altro': 'fas fa-cube'
};
const statoColors = {
'libero': 'green',
'affittato': 'blue',
'non_affittabile': 'gray'
};
const icon = tipoIcons[locale.tipo_locale] || 'fas fa-cube';
const color = statoColors[locale.stato_locazione] || 'gray';
return `
<div class="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
<div class="flex items-start justify-between mb-3">
<div class="flex items-center">
<i class="${icon} text-${color}-600 text-xl mr-3"></i>
<div>
<h4 class="font-medium text-gray-900">${locale.identificativo}</h4>
<p class="text-sm text-gray-500 capitalize">${locale.tipo_locale.replace('_', ' ')}</p>
</div>
</div>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-${color}-100 text-${color}-800 capitalize">
${locale.stato_locazione.replace('_', ' ')}
</span>
</div>
<p class="text-sm text-gray-600 mb-3">${locale.descrizione || 'Nessuna descrizione'}</p>
<div class="grid grid-cols-2 gap-2 text-xs text-gray-500 mb-3">
<div><i class="fas fa-ruler-combined mr-1"></i>${locale.superficie || '-'} m²</div>
<div><i class="fas fa-layer-group mr-1"></i>Piano ${locale.piano || '-'}</div>
<div><i class="fas fa-key mr-1"></i>${locale.numero_chiavi || 0} chiavi</div>
<div><i class="fas fa-euro-sign mr-1"></i>€${locale.canone_mensile || '0'}/mese</div>
</div>
${locale.locatario ? `
<div class="text-xs text-gray-600 mb-3">
<i class="fas fa-user mr-1"></i>
Locatario: ${locale.locatario}
</div>
` : ''}
<div class="text-xs text-gray-500 mb-3">
<i class="fas fa-user-cog mr-1"></i>
Chiavi: ${locale.responsabile_chiavi || 'Non specificato'}
</div>
<div class="flex justify-end space-x-2">
<button onclick="openLocaleModal(${locale.id})" class="text-blue-600 hover:text-blue-800 text-sm">
<i class="fas fa-edit mr-1"></i>Modifica
</button>
<button onclick="eliminaLocale(${locale.id})" class="text-red-600 hover:text-red-800 text-sm">
<i class="fas fa-trash mr-1"></i>Elimina
</button>
</div>
</div>
`;
}
function aggiornaStatisticheLocali(stats) {
if (stats) {
document.getElementById('stat-liberi').textContent = stats.liberi || 0;
document.getElementById('stat-affittati').textContent = stats.affittati || 0;
document.getElementById('stat-rendita').textContent = '€' + (stats.rendita_mensile || 0);
document.getElementById('stat-chiavi').textContent = stats.totale_chiavi || 0;
}
}
function applicaFiltriLocali() {
// Implementa il filtro dei locali
caricaLocaliCondominiali();
}
function eliminaLocale(localeId) {
if (confirm('Sei sicuro di voler eliminare questo locale?')) {
fetch(`/admin/palazzine/{{ $palazzina->id }}/locali/${localeId}`, {
method: 'DELETE',
headers: {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
caricaLocaliCondominiali();
} else {
alert('Errore nell\'eliminazione del locale');
}
})
.catch(error => {
console.error('Errore:', error);
alert('Errore nell\'eliminazione del locale');
});
}
}
// Funzioni per gestione Unità Immobiliari e Scale
function aggiungiUnitaImmobiliare() {
// TODO: Implementare modal per aggiungere unità immobiliare
alert('Funzione in sviluppo: Aggiungi Unità Immobiliare');
}
function aggiungiScala() {
// TODO: Implementare modal per aggiungere scala
alert('Funzione in sviluppo: Aggiungi Scala');
}
function editScala(scalaId) {
// TODO: Implementare modal per modificare scala
alert('Funzione in sviluppo: Modifica Scala ' + scalaId);
}
function deleteScala(scalaId) {
if (confirm('Sei sicuro di voler eliminare questa scala e tutti i suoi appartamenti?')) {
// TODO: Implementare eliminazione scala
alert('Funzione in sviluppo: Elimina Scala ' + scalaId);
}
}
function editAppartamento(appartamentoId) {
// TODO: Implementare modal per modificare appartamento
alert('Funzione in sviluppo: Modifica Appartamento ' + appartamentoId);
}
function viewAppartamento(appartamentoId) {
// TODO: Implementare vista dettagli appartamento
alert('Funzione in sviluppo: Visualizza Appartamento ' + appartamentoId);
}
// Chiudi modal cliccando fuori
document.addEventListener('click', function(event) {
const modal = document.getElementById('localeModal');
if (event.target === modal) {
closeLocaleModal();
}
});
</script>
@endpush
@endsection