<div x-data="{ formFullscreen: $wire.entangle('formFullscreen') }"
     class="flex flex-col lg:flex-row gap-0 h-screen p-1">
    <!-- Columna izquierda: Mapa -->
    <div x-show="!formFullscreen" x-cloak x-data="{ showLayers: true }" class="w-full lg:w-2/3 flex-1 relative">
        <div id="map" style="height: 100%; min-height: 500px; width: 100%;" wire:ignore></div>

        <!-- Botón para reabrir el panel (solo cuando está colapsado) -->
        <button x-show="!showLayers" x-cloak @click="showLayers = true"
                class="absolute top-2 right-2 z-[1001] btn btn-sm btn-circle shadow-lg"
                title="{{ __('Show/hide panel') }}">
            <x-heroicon-o-bars-3 class="w-5 h-5" />
        </button>

        <!-- Panel lateral de capas -->
        <div x-show="showLayers" x-transition
             class="absolute top-2 right-2 z-[1000] bg-base-100 rounded-box shadow-xl p-4 w-72 border border-base-300 text-sm max-h-[calc(100vh-4rem)] overflow-y-auto">
            <div class="flex items-center justify-between mb-2">
                <h3 class="font-semibold text-base">{{ __('Phases and layers') }}</h3>
                <button @click="showLayers = false" class="btn btn-xs btn-circle btn-ghost" title="{{ __('Show/hide panel') }}">
                    <x-heroicon-o-x-mark class="w-4 h-4" />
                </button>
            </div>
            <div class="space-y-3">
                @foreach($phases as $phase)
                    @php
                        $phaseLayerIds = $phase->layers->pluck('id')->map(fn($i) => (int) $i)->all();
                        $phaseAllActive = count($phaseLayerIds) > 0 && collect($phaseLayerIds)->every(fn($i) => in_array($i, $activeLayers));
                    @endphp
                    <div class="border rounded-lg p-2 {{ $phaseAllActive ? 'bg-base-200' : '' }}">
                        {{-- Fase: el toggle muestra/oculta TODAS sus capas --}}
                        <div class="flex items-center gap-2">
                            <input type="checkbox"
                                wire:change="togglePhase({{ $phase->id }})"
                                @if($phaseAllActive) checked @endif
                                class="toggle toggle-xs toggle-primary"
                                title="{{ __('Show/hide all layers of this phase') }}">
                            <span style="color: {{ $phase->color }};" class="text-lg">⬤</span>
                            <span class="flex-1 font-medium text-sm truncate">{{ $phase->name }}</span>
                            <span class="badge badge-sm {{ $phase->progress_percent >= 100 ? 'badge-success' : 'badge-ghost' }}">{{ $phase->progress_percent }}</span>
                        </div>

                        {{-- Capas de esta fase: cada una con su propio toggle independiente --}}
                        @if($phase->layers->isNotEmpty())
                            <div class="ml-7 mt-1 space-y-1">
                                @foreach($phase->layers as $layer)
                                    <div class="flex items-center gap-2 text-xs text-gray-600">
                                        <input type="checkbox"
                                            wire:change="toggleLayer({{ $layer->id }})"
                                            @if(in_array((int) $layer->id, $activeLayers)) checked @endif
                                            class="toggle toggle-xs toggle-primary"
                                            title="{{ __('Show/hide layer') }}">
                                        <span class="w-2 h-2 rounded-full inline-block shrink-0" style="background: {{ $layer->color ?? '#ccc' }}"></span>
                                        <span class="flex-1 truncate">{{ $layer->name }}</span>
                                        <span class="badge badge-xs">{{ $layer->features_count ?? $layer->features->count() }} {{ __('elem.') }}</span>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        {{-- Botón para ir a gestión de capas de esta fase --}}
                        <div class="mt-1 ml-7">
                            <a href="{{ route('layers.manage', [$project, $phase]) }}" class="btn btn-xs btn-outline btn-primary gap-1">
                                <x-heroicon-o-pencil-square class="w-3.5 h-3.5" /> {{ __('Manage Layers') }}
                            </a>
                            <a href="{{ route('phases.progress', $phase) }}" class="btn btn-xs btn-outline gap-1">
                                <x-heroicon-o-chart-bar class="w-3.5 h-3.5" /> {{ __('Progress') }}
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Checkbox imágenes en mapa --}}
            <div class="mt-3">
                <label class="flex items-center gap-2 text-xs cursor-pointer">
                    <input type="checkbox" wire:change="toggleFeatureImages" @if($showFeatureImages) checked @endif class="checkbox checkbox-xs checkbox-primary" />
                    <x-heroicon-o-photo class="w-4 h-4" /> {{ __('Show images on map') }}
                    @if($featureImageMarkers)
                        <span class="badge badge-xs">{{ count($featureImageMarkers) }}</span>
                    @endif
                </label>
            </div>

            {{-- Botones generales --}}
            <div class="mt-2 space-y-1">
                <a href="{{ route('projects.media', $project) }}" class="btn btn-sm btn-outline w-full gap-1">
                    <x-heroicon-o-folder class="w-4 h-4" /> {{ __('Project files') }}
                </a>
                <button wire:click="$dispatch('centerMap')" class="btn btn-sm btn-outline w-full gap-1">
                    <x-heroicon-o-map-pin class="w-4 h-4" /> {{ __('Centered in project') }}
                </button>
                <button onclick="getUserLocation()" class="btn btn-sm btn-outline w-full gap-1">
                    <x-heroicon-o-viewfinder-circle class="w-4 h-4" /> {{ __('My location') }}
                </button>
            </div>
        </div>
    </div>

<!-- Columna derecha: {{ __('Edit') }} de progreso / inspecciones -->
<div class="w-full lg:w-1/3 transition-all duration-300" :class="{'lg:w-full': formFullscreen}">
    <div class="card bg-base-100 shadow-xl h-full flex flex-col">
        <div class="card-body overflow-y-auto flex-1">
            <div class="flex justify-between items-center gap-4 mb-4">
                <!-- Tabs -->
                <div class="flex flex-wrap gap-3">
                    <button role="tab" wire:click="setActiveTab('edit')" class="btn btn-sm {{ $activeTab === 'edit' ? 'btn-primary' : 'btn-ghost' }}">{{ __('Edit') }}</button>
                    <button role="tab" wire:click="setActiveTab('features')" class="btn btn-sm {{ $activeTab === 'features' ? 'btn-primary' : 'btn-ghost' }}">{{ __('Features') }}</button>
                    <button role="tab" wire:click="setActiveTab('inspections')" class="btn btn-sm {{ $activeTab === 'inspections' ? 'btn-primary' : 'btn-ghost' }}">{{ __('Inspections') }}</button>
                    <button role="tab" wire:click="setActiveTab('issues')" class="btn btn-sm gap-1 {{ $activeTab === 'issues' ? 'btn-primary' : 'btn-ghost' }}">
                        {{ __('Issues') }}
                        @if($openIssuesCount > 0)
                            <span class="badge badge-error badge-xs">{{ $openIssuesCount }}</span>
                        @endif
                    </button>
                </div>
                <button wire:click="toggleFullscreen" class="btn btn-circle btn-sm shrink-0" title="{{ __('Fullscreen') }}">
                    <span x-text="formFullscreen ? '✕' : '⤢'"></span>
                </button>
            </div>

            <!-- Project navigation bar (hidden for now, kept for later) -->
            <div class="hidden flex-wrap gap-1 mb-3">
                <a href="{{ route('projects.dashboard', $project) }}"
                   class="btn btn-xs gap-1 {{ request()->routeIs('projects.dashboard') ? 'btn-primary' : 'btn-outline' }}">
                    <x-heroicon-o-squares-2x2 class="w-3.5 h-3.5" /> {{ __('Dashboard') }}
                </a>
                <a href="{{ route('projects.map', $project) }}"
                   class="btn btn-xs gap-1 {{ request()->routeIs('projects.map') ? 'btn-primary' : 'btn-outline' }}">
                    <x-heroicon-o-map class="w-3.5 h-3.5" /> {{ __('Map') }}
                </a>
                <a href="{{ route('projects.gantt', $project) }}"
                   class="btn btn-xs gap-1 {{ request()->routeIs('projects.gantt') ? 'btn-primary' : 'btn-outline' }}">
                    <x-heroicon-o-calendar-days class="w-3.5 h-3.5" /> {{ __('Gantt') }}
                </a>
                <a href="{{ route('projects.report', $project) }}"
                   class="btn btn-xs gap-1 {{ request()->routeIs('projects.report') ? 'btn-primary' : 'btn-outline' }}">
                    <x-heroicon-o-document-text class="w-3.5 h-3.5" /> {{ __('Report') }}
                </a>
                <a href="{{ route('projects.issues', $project) }}"
                   class="btn btn-xs gap-1 {{ request()->routeIs('projects.issues') ? 'btn-error' : 'btn-outline' }}">
                    <x-heroicon-o-exclamation-triangle class="w-3.5 h-3.5" /> {{ __('Issues') }}
                    @if($openIssuesCount > 0)
                        <span class="badge badge-error badge-xs">{{ $openIssuesCount }}</span>
                    @endif
                </a>
            </div>

            <!-- Tab Content: visibility controlled by Livewire conditionals, not DaisyUI -->
            <div class="mt-2">
                @if($activeTab === 'edit')
                    @if($selectedFeature)
                        {{-- Título a todo el ancho: progreso (solo número) a la izquierda + nombre --}}
                        <div class="flex items-center gap-3 mb-4 pb-2 border-b border-base-300">
                            <span class="badge badge-lg shrink-0 {{ $editProgress >= 100 ? 'badge-success' : ($editProgress > 0 ? 'badge-warning' : 'badge-ghost') }}">{{ $editProgress }}%</span>
                            <div class="flex-1 min-w-0">
                                <h3 class="font-bold text-base truncate">{{ $selectedFeature->name ?? __('Feature') }}</h3>
                                <p class="text-xs text-gray-500 truncate">{{ __('Phase') }}: {{ $selectedFeature->layer?->phase?->name ?? '—' }} · {{ __('Layer') }}: {{ $selectedFeature->layer?->name ?? '—' }}</p>
                            </div>
                            @can('create issues')
                                <a href="{{ route('projects.issues.create', ['project' => $project, 'feature' => $selectedFeature->id]) }}"
                                   wire:navigate
                                   class="btn btn-xs btn-error btn-outline gap-1 shrink-0" title="{{ __('Reportar incidencia') }}">
                                    <x-heroicon-o-exclamation-triangle class="w-3.5 h-3.5" />
                                    {{ __('Incidencia') }}
                                </a>
                            @endcan
                        </div>

                        {{-- En pantalla completa el contenido se reparte en columnas --}}
                        <div :class="formFullscreen ? 'grid grid-cols-1 lg:grid-cols-2 gap-x-8 items-start' : ''">
                          <div>
                            {{-- Responsable (se guarda al salir del campo) --}}
                            <div class="form-control mb-3">
                                <label class="label-text">{{ __('Responsible') }}</label>
                                <input type="text" wire:model="editResponsible" wire:blur="saveFeatureProgress" class="input input-bordered input-sm" placeholder="{{ __('Name of responsible') }}" />
                            </div>

                        {{-- Gestor de archivos del feature --}}
                        <details class="mb-3 border rounded-lg">
                            <summary class="text-xs font-semibold cursor-pointer p-2 bg-base-200 rounded-t-lg">
                                <x-heroicon-o-paper-clip class="w-4 h-4 inline" /> {{ __('Files of element') }}
                            </summary>
                            <div class="p-2">
                                @livewire('media.media-manager', [
                                    'mediableType' => 'App\\Models\\Feature',
                                    'mediableId' => $selectedFeature->id,
                                ], key('media-feature-' . $selectedFeature->id))
                            </div>
                        </details>
                          </div>

                          <div>
                        {{-- Templates / Inspecciones --}}
                        @if($templates->isNotEmpty())
                            <div class="divider text-xs">{{ __('Inspection') }}</div>
                            <div class="form-control mb-2">
                                <div class="flex items-center justify-between">
                                    <label class="label-text">{{ __('Template') }}</label>
                                    @can('edit projects')
                                        <a href="{{ route('projects.templates', $project) }}"
                                           class="btn btn-ghost btn-xs gap-1" title="{{ __('Manage templates') }}">
                                            <x-heroicon-o-cog-6-tooth class="w-3.5 h-3.5" /> {{ __('Manage templates') }}
                                        </a>
                                    @endcan
                                </div>
                                <select wire:model.live="selectedTemplateId" wire:change="onTemplateChange" class="select select-bordered select-sm">
                                    <option value="">{{ __('Select template...') }}</option>
                                    @foreach($templates as $t)
                                        <option value="{{ $t->id }}">{{ $t->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            @if($selectedTemplateId && !empty($inspectionFormData))
                                @php $template = $templates->firstWhere('id', $selectedTemplateId); @endphp
                                @if($template)
                                    @php $grouped = collect($template->fields)->groupBy(fn ($f) => trim($f['group'] ?? '') !== '' ? $f['group'] : __('General')); @endphp
                                    @foreach($grouped as $groupName => $groupFields)
                                        <div class="mb-3">
                                            <div class="text-xs font-semibold uppercase tracking-wide text-base-content/60 border-b border-base-300 pb-1 mb-2">{{ $groupName }}</div>
                                            @foreach($groupFields as $field)
                                                <div class="mb-2">
                                                    <label class="label-text text-xs font-medium">
                                                        {{ ($field['question'] ?? '') ?: $field['label'] }}
                                                        @if($field['required'] ?? false)<span class="text-error">*</span>@endif
                                                    </label>
                                                    @if(!empty($field['question']) && !empty($field['label']) && $field['question'] !== $field['label'])
                                                        <div class="text-[11px] text-base-content/40">{{ $field['label'] }}</div>
                                                    @endif
                                                    @switch($field['type'] ?? 'text')
                                                        @case('percentage')
                                                            <div class="flex items-center gap-1">
                                                                <input type="number" wire:model="inspectionFormData.{{ $field['name'] }}" min="0" max="100" class="input input-bordered input-sm w-16" />
                                                                <span class="text-xs">%</span>
                                                                <input type="range" min="0" max="100" wire:model.live="inspectionFormData.{{ $field['name'] }}" class="range range-primary range-xs flex-1" />
                                                            </div>
                                                            @break
                                                        @case('boolean')
                                                            <input type="checkbox" wire:model="inspectionFormData.{{ $field['name'] }}" class="checkbox checkbox-sm" />
                                                            @break
                                                        @case('select')
                                                            <select wire:model="inspectionFormData.{{ $field['name'] }}" class="select select-bordered select-sm w-full">
                                                                <option value="">{{ __('Select') }}</option>
                                                                @foreach(explode(',', $field['options'] ?? '') as $opt)
                                                                    <option value="{{ trim($opt) }}">{{ trim($opt) }}</option>
                                                                @endforeach
                                                            </select>
                                                            @break
                                                        @case('textarea')
                                                            <textarea wire:model="inspectionFormData.{{ $field['name'] }}" rows="2" class="textarea textarea-bordered textarea-sm w-full"></textarea>
                                                            @break
                                                        @default
                                                            <input type="{{ $field['type'] ?? 'text' }}" wire:model="inspectionFormData.{{ $field['name'] }}" class="input input-bordered input-sm w-full" />
                                                    @endswitch
                                                    @if(!empty($field['help']))
                                                        <div class="text-[11px] text-base-content/50 mt-0.5">{{ $field['help'] }}</div>
                                                    @endif
                                                </div>
                                            @endforeach
                                        </div>
                                    @endforeach

                                    {{-- Comentarios + fotos de la inspección --}}
                                    <div class="border-t border-base-300 pt-2 mt-2 space-y-2">
                                        <div>
                                            <label class="label-text text-xs font-medium">{{ __('Comments') }}</label>
                                            <textarea wire:model="inspectionNotes" rows="2" class="textarea textarea-bordered textarea-sm w-full" placeholder="{{ __('General comments...') }}"></textarea>
                                        </div>
                                        <div>
                                            <label class="label-text text-xs font-medium">{{ __('Photos') }}</label>
                                            <input type="file" wire:model="inspectionPhotos" multiple accept="image/*" class="file-input file-input-bordered file-input-sm w-full" />
                                            <div wire:loading wire:target="inspectionPhotos" class="text-[11px] text-base-content/50">{{ __('Uploading…') }}</div>
                                            @error('inspectionPhotos.*')<div class="text-[11px] text-error">{{ $message }}</div>@enderror
                                            @if($inspectionPhotos)<div class="text-[11px] text-base-content/60 mt-0.5">{{ count($inspectionPhotos) }} {{ __('photo(s) ready') }}</div>@endif
                                        </div>
                                    </div>

                                    <button wire:click="saveInspection" class="btn btn-primary btn-xs w-full mt-2" wire:loading.attr="disabled" wire:target="saveInspection,inspectionPhotos">{{ __('Register inspection') }}</button>
                                @endif
                            @endif

                            {{-- Historial de inspecciones --}}
                            @if($inspectionHistory->isNotEmpty())
                                <div class="divider text-xs">{{ __('History') }}</div>
                                <div class="space-y-1 max-h-40 overflow-y-auto">
                                    @foreach($inspectionHistory as $ins)
                                        <div class="border rounded p-2 text-xs" wire:key="hist-{{ $ins->id }}">
                                            <div class="flex justify-between">
                                                <span class="font-medium">{{ $ins->template?->name ?? __('Inspection') }}</span>
                                                <span class="text-gray-400">{{ $ins->created_at->diffForHumans() }}</span>
                                            </div>
                                            @if($ins->user)<span class="text-gray-500">{{ __('by') }} {{ $ins->user->name }}</span>@endif
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        @else
                            <div role="alert" class="alert alert-vertical sm:alert-horizontal">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info h-6 w-6 shrink-0">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <div>
                                    <h3 class="font-bold">{{ __('No templates yet') }}</h3>
                                    <div class="text-xs">{{ __('Create an inspection template') }}.</div>
                                </div>
                                <a href="{{ route('projects.templates', $project) }}" class="btn btn-primary btn-sm">{{ __('Create') }}</a>
                            </div>
                        @endif
                          </div>
                        </div>
                    @else
                        <div class="text-center text-gray-400 py-8">
                            <x-heroicon-o-cursor-arrow-rays class="w-10 h-10 mx-auto opacity-30" />
                            <p>{{ __('Click on a map element or search above to edit it') }}</p>
                        </div>
                    @endif
                @elseif($activeTab === 'features')
                    <!-- Elementos (tabla Rappasoft) -->
                    <livewire:projects.feature-table :project-id="$project->id" :key="'feature-table-'.$project->id" />
                @elseif($activeTab === 'inspections')
                    <!-- Inspecciones (tabla Rappasoft) -->
                    <livewire:projects.inspection-table :project-id="$project->id" :key="'inspection-table-'.$project->id" />
                @elseif($activeTab === 'issues')
                    <!-- Issues tab: render embedded IssueManager component -->
                    @livewire('issues.issue-manager', ['project' => $project], key('issues-tab-' . $project->id))
                @endif
            </div>

            {{-- Visor de inspección --}}
            @if($viewingInspection)
                <div class="modal modal-open z-[2000]" wire:key="ins-viewer-{{ $viewingInspection['id'] }}">
                    <div class="modal-box max-w-lg">
                        <div class="flex justify-between items-start mb-3">
                            <h3 class="font-bold text-lg">{{ __('Inspection') }} #{{ $viewingInspection['id'] }}</h3>
                            <button wire:click="closeViewInspection" class="btn btn-sm btn-circle btn-ghost">
                                <x-heroicon-o-x-mark class="w-5 h-5" />
                            </button>
                        </div>

                        <div class="grid grid-cols-2 gap-2 text-sm mb-2">
                            <div><span class="text-gray-500">{{ __('Feature') }}:</span> {{ $viewingInspection['feature_name'] }}</div>
                            <div><span class="text-gray-500">{{ __('Template') }}:</span> {{ $viewingInspection['template_name'] }}</div>
                            <div><span class="text-gray-500">{{ __('Phase') }}:</span> {{ $viewingInspection['phase_name'] }}</div>
                            <div><span class="text-gray-500">{{ __('Layer') }}:</span> {{ $viewingInspection['layer_name'] }}</div>
                            <div><span class="text-gray-500">{{ __('User') }}:</span> {{ $viewingInspection['user_name'] }}</div>
                            <div><span class="text-gray-500">{{ __('Date') }}:</span> {{ $viewingInspection['date'] }}</div>
                        </div>

                        @if(!empty($viewingInspection['fields']))
                            <div class="divider text-xs">{{ __('Data') }}</div>
                            @php $vGrouped = collect($viewingInspection['fields'])->groupBy(fn ($f) => trim($f['group'] ?? '') !== '' ? $f['group'] : __('General')); @endphp
                            @foreach($vGrouped as $gName => $gFields)
                                <div class="mb-2">
                                    <div class="text-[11px] font-semibold uppercase tracking-wide text-base-content/50 mb-1">{{ $gName }}</div>
                                    <div class="space-y-1 text-sm">
                                        @foreach($gFields as $field)
                                            @php $val = $viewingInspection['data'][$field['name']] ?? null; @endphp
                                            <div class="flex justify-between gap-3 border-b border-base-200 py-1">
                                                <span class="text-gray-500">{{ ($field['question'] ?? '') ?: ($field['label'] ?? ($field['name'] ?? '')) }}</span>
                                                <span class="font-medium text-right">
                                                    @if(($field['type'] ?? '') === 'boolean'){{ $val ? '✓' : '—' }}@else{{ ($val === '' || $val === null) ? '—' : $val }}@endif
                                                </span>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        @endif

                        @if(!empty($viewingInspection['notes']))
                            <div class="divider text-xs">{{ __('Comments') }}</div>
                            <p class="text-sm whitespace-pre-line">{{ $viewingInspection['notes'] }}</p>
                        @endif

                        @if(!empty($viewingInspection['photos']))
                            <div class="divider text-xs">{{ __('Photos') }}</div>
                            <div class="grid grid-cols-3 gap-2" x-data="{ lightboxOpen: false, lightboxIndex: 0 }">
                                @foreach($viewingInspection['photos'] as $idx => $ph)
                                    <button 
                                        type="button"
                                        @click="lightboxOpen = true; lightboxIndex = {{ $idx }}"
                                        class="relative w-full h-20 overflow-hidden rounded border border-base-300"
                                    >
                                        <img src="{{ $ph['url'] }}" class="w-full h-full object-cover" alt="{{ $ph['name'] }}" />
                                    </button>
                                @endforeach
                            </div>
                            
                            {{-- Lightbox Modal --}}
                            <div x-show="lightboxOpen" x-transition x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/90">
                                <button @click="lightboxOpen = false" class="absolute top-4 right-4 text-white/70 hover:text-white text-3xl" aria-label="Close">&times;</button>
                                <button @click="lightboxIndex = (lightboxIndex - 1 + {{ count($viewingInspection['photos']) }}) % {{ count($viewingInspection['photos']) }}" class="absolute left-4 text-white/70 hover:text-white text-4xl" aria-label="Previous" x-show="{{ count($viewingInspection['photos']) > 1 }}">&#8249;</button>
                                <button @click="lightboxIndex = (lightboxIndex + 1) % {{ count($viewingInspection['photos']) }}" class="absolute right-4 text-white/70 hover:text-white text-4xl" aria-label="Next" x-show="{{ count($viewingInspection['photos']) > 1 }}">&#8250;</button>
                                
                                <template x-for="(ph, i) in @js($viewingInspection['photos'])" :key="i">
                                    <img 
                                        x-show="lightboxIndex === i"
                                        :src="ph.url" 
                                        class="max-h-[80vh] max-w-[90vw] object-contain rounded"
                                        :alt="ph.name"
                                    >
                                </template>
                                
                                <div x-show="lightboxIndex !== null" class="absolute bottom-4 left-1/2 -translate-x-1/2 text-white/70 text-sm">
                                    <span x-text="lightboxIndex + 1"></span> / {{ count($viewingInspection['photos']) }}
                                </div>
                            </div>
                        @endif

                        <div class="modal-action">
                            <button wire:click="closeViewInspection" class="btn btn-sm">{{ __('Close') }}</button>
                            @can('edit inspections')
                                <button 
                                    wire:click="$dispatch('edit-inspection', { id: {{ $viewingInspection['id'] }} })"
                                    wire:loading.attr="disabled"
                                    class="btn btn-primary btn-sm"
                                >
                                    <x-heroicon-o-pencil class="w-4 h-4 mr-1" /> {{ __('Edit') }}
                                </button>
                            @endcan
                            @can('delete inspections')
                                <button 
                                    wire:click="$dispatch('delete-inspection', { id: {{ $viewingInspection['id'] }} })"
                                    wire:loading.attr="disabled"
                                    class="btn btn-error btn-sm"
                                    onclick="return confirm('{{ __('Delete this inspection? This cannot be undone.') }}');"
                                >
                                    <x-heroicon-o-trash class="w-4 h-4 mr-1" /> {{ __('Delete') }}
                                </button>
                            @endcan
                        </div>
                    </div>
                    <div class="modal-backdrop bg-black/40" wire:click="closeViewInspection"></div>
                </div>
            @endif

            {{-- Modal Editar Inspección --}}
            @if($editingInspection)
                <div class="modal modal-open z-[2000]" wire:key="edit-inspection-{{ $editingInspection->id }}">
                    <div class="modal-box max-w-2xl max-h-[90vh] overflow-y-auto">
                        <div class="flex justify-between items-start mb-3">
                            <h3 class="font-bold text-lg">{{ __('Edit Inspection') }} #{{ $editingInspection->id }}</h3>
                            <button wire:click="closeEditInspection" class="btn btn-sm btn-circle btn-ghost">
                                <x-heroicon-o-x-mark class="w-5 h-5" />
                            </button>
                        </div>

                        <div class="grid grid-cols-2 gap-2 text-sm mb-2">
                            <div><span class="text-gray-500">{{ __('Feature') }}:</span> {{ $editingInspection->feature?->name ?? '—' }}</div>
                            <div><span class="text-gray-500">{{ __('Template') }}:</span> {{ $editingInspection->template?->name ?? '—' }}</div>
                            <div><span class="text-gray-500">{{ __('Phase') }}:</span> {{ $editingInspection->feature?->layer?->phase?->name ?? '—' }}</div>
                            <div><span class="text-gray-500">{{ __('Layer') }}:</span> {{ $editingInspection->feature?->layer?->name ?? '—' }}</div>
                        </div>

                        @if($editingInspection->template && !empty($editingInspection->template->fields))
                            <div class="divider text-xs">{{ __('Data') }}</div>
                            @php $eGrouped = collect($editingInspection->template->fields)->groupBy(fn ($f) => trim($f['group'] ?? '') !== '' ? $f['group'] : __('General')); @endphp
                            @foreach($eGrouped as $gName => $gFields)
                                <div class="mb-3">
                                    <div class="text-[11px] font-semibold uppercase tracking-wide text-base-content/50 mb-1">{{ $gName }}</div>
                                    <div class="space-y-1 text-sm">
                                        @foreach($gFields as $field)
                                            <div class="mb-2">
                                                <label class="label-text text-xs font-medium">
                                                    {{ ($field['question'] ?? '') ?: $field['label'] }}
                                                    @if($field['required'] ?? false)<span class="text-error">*</span>@endif
                                                </label>
                                                @switch($field['type'] ?? 'text')
                                                    @case('percentage')
                                                        <div class="flex items-center gap-1">
                                                            <input type="number" wire:model="editInspectionFormData.{{ $field['name'] }}" min="0" max="100" class="input input-bordered input-sm w-16" />
                                                            <span class="text-xs">%</span>
                                                            <input type="range" min="0" max="100" wire:model.live="editInspectionFormData.{{ $field['name'] }}" class="range range-primary range-xs flex-1" />
                                                        </div>
                                                        @break
                                                    @case('boolean')
                                                        <input type="checkbox" wire:model="editInspectionFormData.{{ $field['name'] }}" class="checkbox checkbox-sm" />
                                                        @break
                                                    @case('select')
                                                        <select wire:model="editInspectionFormData.{{ $field['name'] }}" class="select select-bordered select-sm w-full">
                                                            <option value="">{{ __('Select') }}</option>
                                                            @foreach(explode(',', $field['options'] ?? '') as $opt)
                                                                <option value="{{ trim($opt) }}">{{ trim($opt) }}</option>
                                                            @endforeach
                                                        </select>
                                                        @break
                                                    @case('textarea')
                                                        <textarea wire:model="editInspectionFormData.{{ $field['name'] }}" rows="2" class="textarea textarea-bordered textarea-sm w-full"></textarea>
                                                        @break
                                                    @default
                                                        <input type="{{ $field['type'] ?? 'text' }}" wire:model="editInspectionFormData.{{ $field['name'] }}" class="input input-bordered input-sm w-full" />
                                                @endswitch
                                                @if(!empty($field['help']))
                                                    <div class="text-[11px] text-base-content/50 mt-0.5">{{ $field['help'] }}</div>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        @endif

                        <div class="border-t border-base-300 pt-2 mt-2 space-y-2">
                            <div>
                                <label class="label-text text-xs font-medium">{{ __('Result') }}</label>
                                <select wire:model="editInspectionResult" class="select select-bordered select-sm w-full">
                                    <option value="">{{ __('Select result') }}</option>
                                    <option value="pass">{{ __('Pass') }}</option>
                                    <option value="fail">{{ __('Fail') }}</option>
                                    <option value="conditional">{{ __('Conditional') }}</option>
                                </select>
                            </div>
                            <div>
                                <label class="label-text text-xs font-medium">{{ __('Comments') }}</label>
                                <textarea wire:model="editInspectionNotes" rows="2" class="textarea textarea-bordered textarea-sm w-full" placeholder="{{ __('General comments...') }}"></textarea>
                            </div>
                            <div>
                                <label class="label-text text-xs font-medium">{{ __('Photos') }}</label>
                                <input type="file" wire:model="editInspectionPhotos" multiple accept="image/*" class="file-input file-input-bordered file-input-sm w-full" />
                                <div wire:loading wire:target="editInspectionPhotos" class="text-[11px] text-base-content/50">{{ __('Uploading…') }}</div>
                                @error('editInspectionPhotos.*')<div class="text-[11px] text-error">{{ $message }}</div>@enderror
                                @if($editInspectionPhotos)<div class="text-[11px] text-base-content/60 mt-0.5">{{ count($editInspectionPhotos) }} {{ __('photo(s) ready') }}</div>@endif
                            </div>
                        </div>

                        {{-- Fotos existentes --}}
                        @if($editingInspection->media->isNotEmpty())
                            <div class="divider text-xs">{{ __('Current photos') }}</div>
                            <div class="grid grid-cols-3 gap-2" x-data="{ lightboxOpen: false, lightboxIndex: 0 }">
                                @foreach($editingInspection->media as $idx => $m)
                                    <div class="relative border border-base-300 rounded">
                                        <button 
                                            type="button"
                                            @click="lightboxOpen = true; lightboxIndex = {{ $idx }}"
                                            class="w-full h-20 overflow-hidden rounded-t"
                                        >
                                            <img src="{{ $m->url }}" class="w-full h-full object-cover" alt="{{ $m->name }}" />
                                        </button>
                                        <div class="p-1 flex justify-between">
                                            <span class="text-[10px] truncate">{{ $m->name }}</span>
                                            <button wire:click="deleteEditPhoto({{ $idx }})" class="btn btn-xs btn-error btn-circle" title="{{ __('Delete photo') }}">
                                                <x-heroicon-o-trash class="w-3 h-3" />
                                            </button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            
                            {{-- Lightbox Modal --}}
                            <div x-show="lightboxOpen" x-transition x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/90">
                                <button @click="lightboxOpen = false" class="absolute top-4 right-4 text-white/70 hover:text-white text-3xl" aria-label="Close">&times;</button>
                                <button @click="lightboxIndex = (lightboxIndex - 1 + {{ $editingInspection->media->count() }}) % {{ $editingInspection->media->count() }}" class="absolute left-4 text-white/70 hover:text-white text-4xl" aria-label="Previous" x-show="{{ $editingInspection->media->count() > 1 }}">&#8249;</button>
                                <button @click="lightboxIndex = (lightboxIndex + 1) % {{ $editingInspection->media->count() }}" class="absolute right-4 text-white/70 hover:text-white text-4xl" aria-label="Next" x-show="{{ $editingInspection->media->count() > 1 }}">&#8250;</button>
                                
                                <template x-for="(m, i) in @js($editingInspection->media)" :key="i">
                                    <img 
                                        x-show="lightboxIndex === i"
                                        :src="m.url" 
                                        class="max-h-[80vh] max-w-[90vw] object-contain rounded"
                                        :alt="m.name"
                                    >
                                </template>
                                
                                <div x-show="lightboxIndex !== null" class="absolute bottom-4 left-1/2 -translate-x-1/2 text-white/70 text-sm">
                                    <span x-text="lightboxIndex + 1"></span> / {{ $editingInspection->media->count() }}
                                </div>
                            </div>
                        @endif

                        <div class="modal-action mt-3">
                            <button wire:click="closeEditInspection" class="btn btn-sm">{{ __('Cancel') }}</button>
                            <button wire:click="saveEditInspection" class="btn btn-primary btn-sm" wire:loading.attr="disabled" wire:target="saveEditInspection,editInspectionPhotos">{{ __('Save changes') }}</button>
                        </div>
                    </div>
                    <div class="modal-backdrop bg-black/40" wire:click="closeEditInspection"></div>
                </div>
            @endif
        </div>
    </div>
</div>

@push('styles')
    <style>
        .leaflet-container { z-index: 0 !important; }
    </style>
@endpush

@push('scripts')
    <script>
        let map;
        const layers = {};
        let imageMarkersLayer = null;
        let imageViewerModal = null;
        let mapInitialized = false;
        let combinedBounds = null;

        // Utility function to escape HTML
        function escapeHtml(text) {
            if (text === null || text === undefined) return '';
            return String(text)
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#039;');
        }

        // Utility function to validate URL
        function isValidUrl(string) {
            try {
                new URL(string);
                return true;
            } catch (_) {
                return false;
            }
        }

        function initMap() {
            // Prevent multiple initializations
            if (mapInitialized || map) return;
            mapInitialized = true;

            const center = [{{ $project->lat }}, {{ $project->lng }}];
            map = L.map('map').setView(center, 16);

            // Capas base seleccionables (calles / OSM / satélite)
            const baseLayers = {
                '{{ __('Streets') }}': L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> & CartoDB'
                }),
                'OpenStreetMap': L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
                }),
                '{{ __('Satellite') }}': L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                    attribution: 'Tiles &copy; Esri — Source: Esri, Maxar, Earthstar Geographics'
                }),
            };
            baseLayers['{{ __('Streets') }}'].addTo(map);
            L.control.layers(baseLayers, null, { position: 'topleft' }).addTo(map);

            // Cargar capas y sus features (cada capa = un grupo Leaflet independiente)
            @foreach($phases as $phase)
                @foreach($phase->layers as $layer)
                    @php
                        $fc = [
                            'type' => 'FeatureCollection',
                            'features' => $layer->features->map(function($f) {
                                return [
                                    'type' => 'Feature',
                                    'id' => $f->id,
                                    'geometry' => $f->geometry,
                                    'properties' => array_merge($f->properties ?? [], [
                                        'name' => $f->name,
                                        'progress' => $f->progress,
                                        'responsible' => $f->responsible,
                                        'template_id' => $f->template_id,
                                        '_feature_id' => $f->id,
                                    ])
                                ];
                            })->values()->toArray()
                        ];
                    @endphp
                    (function() {
                        const data = @json($fc);
                        if (data && data.features && data.features.length > 0) {
                            const layerGroup = L.geoJSON(data, {
                                style: { color: '{{ $layer->color ?? $phase->color }}', weight: 3, opacity: 0.8, fillOpacity: 0.3 },
                                onEachFeature: function(feature, lyr) {
                                    const props = feature.properties || {};
                                    const featId = props._feature_id || feature.id;
                                    const safeName = escapeHtml(props.name || '{{ __('Feature') }}');
                                    const safeProgress = escapeHtml(props.progress || 0);
                                    const safeResponsible = escapeHtml(props.responsible || '-');
                                    let content = `<b>${safeName}</b><br>
                                                {{ __('Progress') }}: ${safeProgress}%<br>
                                                {{ __('Responsible') }}: ${safeResponsible}<br>
                                                <button class="btn btn-xs btn-primary mt-1" onclick="selectFeature('${featId}')">{{ __('Edit') }}</button>`;
                                    lyr.bindPopup(content);
                                    lyr.on('click', function() { selectFeature(featId); });
                                }
                            });
                            layers[{{ $layer->id }}] = layerGroup;
                            @if(in_array((int) $layer->id, $activeLayers))
                                layerGroup.addTo(map);
                            @endif
                        }
                    })()
                @endforeach
            @endforeach

            // Initialize combined bounds
            updateCombinedBounds();

            setTimeout(() => {
                map.invalidateSize();
                zoomToAllFeatures();
            }, 100);
        }

        function updateCombinedBounds() {
            if (!map) return;
            combinedBounds = L.latLngBounds();
            let hasBounds = false;
            for (let id in layers) {
                const layer = layers[id];
                if (map.hasLayer(layer) && typeof layer.getBounds === 'function') {
                    const b = layer.getBounds();
                    if (b.isValid()) {
                        combinedBounds.extend(b);
                        hasBounds = true;
                    }
                }
            }
            return hasBounds;
        }

        function zoomToAllFeatures() {
            if (!map) return;
            updateCombinedBounds();
            if (combinedBounds && combinedBounds.isValid()) {
                map.fitBounds(combinedBounds, { padding: [20, 20] });
            } else {
                map.setView([{{ $project->lat }}, {{ $project->lng }}], 16);
            }
        }

        function getUserLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition((pos) => {
                    const latlng = [pos.coords.latitude, pos.coords.longitude];
                    L.marker(latlng).addTo(map).bindPopup('{{ __('My location') }}').openPopup();
                    map.setView(latlng, 16);
                }, () => alert('{{ __('No results') }}'));
            } else {
                alert('{{ __('No results') }}');
            }
        }

        document.addEventListener('livewire:init', function () {
            setTimeout(initMap, 50);

            // Define selectFeature here so Livewire is guaranteed to be available
            window.selectFeature = function(featureId) {
                console.log('[ProjectMap] selectFeature called with:', featureId, typeof featureId);
                if (typeof Livewire !== 'undefined' && Livewire.emit) {
                    Livewire.emit('map-select-feature', { featureId: featureId });
                    console.log('[ProjectMap] Livewire.emit executed');
                } else {
                    console.error('[ProjectMap] Livewire not available or emit not a function');
                }
            };

            Livewire.on('layersUpdated', (activeIds) => {
                const ids = Array.isArray(activeIds) ? activeIds[0] : activeIds;
                for (let id in layers) {
                    const lid = parseInt(id);
                    if (ids.includes(lid)) {
                        if (!map.hasLayer(layers[id])) {
                            layers[id].addTo(map);
                            updateCombinedBounds();
                        }
                    } else {
                        if (map.hasLayer(layers[id])) {
                            map.removeLayer(layers[id]);
                            updateCombinedBounds();
                        }
                    }
                }
                zoomToAllFeatures();
            });

            Livewire.on('centerMap', zoomToAllFeatures);
            Livewire.on('mapResize', () => {
                if (map) {
                    if (!this.resizeTimeout) {
                        this.resizeTimeout = setTimeout(() => {
                            map.invalidateSize();
                            this.resizeTimeout = null;
                        }, 100);
                    }
                }
            });

            Livewire.on('featureImagesToggled', (show, markers) => {
                const m = Array.isArray(markers) ? markers : markers[1];
                const s = Array.isArray(show) ? show[0] : show;
                if (imageMarkersLayer) {
                    map.removeLayer(imageMarkersLayer);
                    imageMarkersLayer = null;
                    updateCombinedBounds();
                }
                if (s && m && m.length > 0) {
                    imageMarkersLayer = L.layerGroup().addTo(map);
                    const photoIcon = L.divIcon({
                        html: '<span style="font-size: 20px; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));">&#128252;</span>',
                        className: '',
                        iconSize: [20, 20],
                        iconAnchor: [10, 10]
                    });
                    m.forEach(marker => {
                        const safeUrl = isValidUrl(marker.image_url) ? marker.image_url : '';
                        const safeName = escapeHtml(marker.image_name || '');
                        if (safeUrl) {
                            const popupContent = `<b>${safeName}</b><br>
                                            <img src="${safeUrl}" class="max-w-[200px] max-h-[150px] rounded cursor-pointer"
                                                onclick="window.openViewer('${safeUrl}', '${safeName}')" />`;
                            L.marker([marker.lat, marker.lng], { icon: photoIcon })
                                .bindPopup(popupContent)
                                .addTo(imageMarkersLayer);
                        }
                    });
                    updateCombinedBounds();
                }
            });

            window.openViewer = function(url, name) {
                if (!isValidUrl(url)) {
                    console.error('Invalid URL provided to openViewer:', url);
                    return;
                }
                const safeName = escapeHtml(name);
                if (imageViewerModal) imageViewerModal.remove();
                const overlay = document.createElement('div');
                overlay.id = 'imageViewerModal';
                overlay.style.cssText = 'position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,0.85);display:flex;align-items:center;justify-content:center;padding:20px;cursor:pointer';
                overlay.innerHTML = `<div style="position:relative;max-width:90vw;max-height:90vh">
                    <button onclick="this.closest('#imageViewerModal').remove()" style="position:absolute;top:-30px;right:0;color:white;font-size:24px;background:none;border:none;cursor:pointer">✕</button>
                    <img src="${url}" alt="${safeName}" style="max-width:100%;max-height:85vh;object-fit:contain;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.5)" />
                    <p style="color:white;text-align:center;margin-top:8px;font-size:14px">${safeName}</p>
                </div>`;
                overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
                document.body.appendChild(overlay);
                imageViewerModal = overlay;
            };
        });
    </script>
@endpush
