@php
$title = 'Editar Localização';
@endphp

<div class="container-fluid pt-1" style="margin-top: -32px;">
    <nav aria-label="breadcrumb" class="mb-2" style="margin-top: -18px;">
        <ol class="breadcrumb bg-transparent px-0 py-1 mb-1" style="font-size: 0.98rem;">
            <li class="breadcrumb-item"><a href="/" class="text-decoration-none text-secondary">Início</a></li>
            <li class="breadcrumb-item"><a href="#" onclick="carregarConteudo(`{{ route('suprimentos.estoque') }}`)" class="text-decoration-none text-secondary">Estoque</a></li>
            <li class="breadcrumb-item"><a href="#" onclick="carregarConteudo(`{{ route('suprimentos.localizacoes') }}`)" class="text-decoration-none text-secondary">Localizações</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Editar</li>
        </ol>
    </nav>
    
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="fw-bold mb-0" style="font-size:2.1rem; letter-spacing:1px;">
            <i class="bi bi-pencil-square me-2 text-primary"></i>Editar Localização
        </h1>
        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="carregarConteudo(`{{ route('suprimentos.localizacoes') }}`)">
            <i class="bi bi-arrow-left me-2"></i>Voltar
        </button>
    </div>

    <form id="formEditarLocalizacao">
        @csrf
        
        <div class="card shadow border-0 mb-4">
            <div class="card-header bg-white border-0 pb-1">
                <span class="fw-bold">Dados Básicos</span>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="codigo" class="form-label">Código</label>
                        <input type="text" class="form-control" id="codigo" name="dados[codigo]" value="{{ $localizacao->codigo }}" readonly>
                        <small class="text-muted">Não pode ser alterado</small>
                    </div>
                    <div class="col-md-6">
                        <label for="nome" class="form-label">Nome <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="nome" name="dados[nome]" value="{{ $localizacao->nome }}" required>
                    </div>
                    <div class="col-md-3">
                        <label for="tipo" class="form-label">Tipo <span class="text-danger">*</span></label>
                        <select class="form-select" id="tipo" name="dados[tipo]" required>
                            <option value="">Selecione...</option>
                            <option value="ALMOXARIFADO" {{ $localizacao->tipo == 'ALMOXARIFADO' ? 'selected' : '' }}>Almoxarifado</option>
                            <option value="PRODUCAO" {{ $localizacao->tipo == 'PRODUCAO' ? 'selected' : '' }}>Produção</option>
                            <option value="EXPEDICAO" {{ $localizacao->tipo == 'EXPEDICAO' ? 'selected' : '' }}>Expedição</option>
                        </select>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-12">
                        <label for="descricao" class="form-label">Descrição</label>
                        <textarea class="form-control" id="descricao" name="dados[descricao]" rows="2" placeholder="Ex: Corredor A, Prateleira 3, Altura 2">{{ $localizacao->descricao }}</textarea>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="ativo" class="form-label">Status <span class="text-danger">*</span></label>
                        <select class="form-select" id="ativo" name="dados[ativo]" required>
                            <option value="ATIVO" {{ $localizacao->ativo === 'ATIVO' ? 'selected' : '' }}>Ativo</option>
                            <option value="INATIVO" {{ $localizacao->ativo === 'INATIVO' ? 'selected' : '' }}>Inativo</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow border-0 mb-4">
            <div class="card-header bg-white border-0 pb-1">
                <span class="fw-bold">Hierarquia e Site</span>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="site_id" class="form-label">Site</label>
                        <select class="form-select" id="site_id" name="dados[site_id]">
                            <option value="">Nenhum (Localização sem site)</option>
                            @if(isset($sites))
                                @foreach($sites as $site)
                                    <option value="{{ $site->id }}" {{ $localizacao->site_id == $site->id ? 'selected' : '' }}>
                                        {{ $site->codigo }} - {{ $site->nome }}
                                    </option>
                                @endforeach
                            @endif
                        </select>
                        <small class="text-muted">Selecione um site para habilitar recursos hierárquicos</small>
                    </div>
                    <div class="col-md-6">
                        <label for="parent_id" class="form-label">Localização Pai</label>
                        <select class="form-select" id="parent_id" name="dados[parent_id]" {{ $localizacao->site_id ? '' : 'disabled' }}>
                            <option value="">Nenhuma (Raiz)</option>
                            @if(isset($localizacoesPorSite))
                                @foreach($localizacoesPorSite as $loc)
                                    @if($loc->id != $localizacao->id)
                                        <option value="{{ $loc->id }}" {{ $localizacao->parent_id == $loc->id ? 'selected' : '' }}>
                                            {{ $loc->codigo }} - {{ $loc->nome }}
                                        </option>
                                    @endif
                                @endforeach
                            @endif
                        </select>
                        <small class="text-muted">Deixe vazio para criar uma localização raiz</small>
                    </div>
                </div>
                <input type="hidden" name="dados[nivel_hierarquia]" id="nivel_hierarquia" value="{{ $localizacao->nivel_hierarquia }}">
            </div>
        </div>

        <div class="card shadow border-0 mb-4">
            <div class="card-header bg-white border-0 pb-1">
                <span class="fw-bold">Capacidade e Armazenamento</span>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label for="tipo_armazenamento" class="form-label">Tipo de Armazenamento</label>
                        <select class="form-select" id="tipo_armazenamento" name="dados[tipo_armazenamento]">
                            <option value="">Selecione...</option>
                            <option value="PALETE" {{ $localizacao->tipo_armazenamento == 'PALETE' ? 'selected' : '' }}>Palete</option>
                            <option value="RACK" {{ $localizacao->tipo_armazenamento == 'RACK' ? 'selected' : '' }}>Rack</option>
                            <option value="PRATELEIRA" {{ $localizacao->tipo_armazenamento == 'PRATELEIRA' ? 'selected' : '' }}>Prateleira</option>
                            <option value="CHAO" {{ $localizacao->tipo_armazenamento == 'CHAO' ? 'selected' : '' }}>Chão</option>
                            <option value="CONTAINER" {{ $localizacao->tipo_armazenamento == 'CONTAINER' ? 'selected' : '' }}>Container</option>
                            <option value="OUTRO" {{ $localizacao->tipo_armazenamento == 'OUTRO' ? 'selected' : '' }}>Outro</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="capacidade_maxima" class="form-label">Capacidade Máxima</label>
                        <input type="number" class="form-control" id="capacidade_maxima" name="dados[capacidade_maxima]" step="0.01" value="{{ $localizacao->capacidade_maxima }}" placeholder="1000.00">
                    </div>
                    <div class="col-md-4">
                        <label for="unidade_capacidade" class="form-label">Unidade</label>
                        <select class="form-select" id="unidade_capacidade" name="dados[unidade_capacidade]">
                            <option value="KG" {{ $localizacao->unidade_capacidade == 'KG' ? 'selected' : '' }}>Kg</option>
                            <option value="M3" {{ $localizacao->unidade_capacidade == 'M3' ? 'selected' : '' }}>m³</option>
                            <option value="UNIDADES" {{ $localizacao->unidade_capacidade == 'UNIDADES' ? 'selected' : '' }}>Unidades</option>
                        </select>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-12">
                        <label class="form-label">Dimensões Físicas (metros)</label>
                    </div>
                    <div class="col-md-4">
                        <input type="number" class="form-control" name="dados[dimensoes][largura]" step="0.01" value="{{ $localizacao->dimensoes['largura'] ?? '' }}" placeholder="Largura (m)">
                    </div>
                    <div class="col-md-4">
                        <input type="number" class="form-control" name="dados[dimensoes][altura]" step="0.01" value="{{ $localizacao->dimensoes['altura'] ?? '' }}" placeholder="Altura (m)">
                    </div>
                    <div class="col-md-4">
                        <input type="number" class="form-control" name="dados[dimensoes][profundidade]" step="0.01" value="{{ $localizacao->dimensoes['profundidade'] ?? '' }}" placeholder="Profundidade (m)">
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-end gap-2 mb-4">
            <button type="button" class="btn btn-secondary" onclick="carregarConteudo(`{{ route('suprimentos.localizacoes') }}`)">
                <i class="bi bi-x-circle me-2"></i>Cancelar
            </button>
            <button type="button" class="btn btn-primary" onclick="atualizar(`{{ route('suprimentos.localizacoes.update', $localizacao->id) }}`, 'formEditarLocalizacao')">
                <i class="bi bi-save me-2"></i>Atualizar
            </button>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const siteSelect = document.getElementById('site_id');
    const parentSelect = document.getElementById('parent_id');
    const nivelInput = document.getElementById('nivel_hierarquia');
    const localizacaoId = {{ $localizacao->id }};

    if (siteSelect && parentSelect) {
        // Quando site mudar, carregar localizações do site via AJAX
        siteSelect.addEventListener('change', function() {
            const siteId = this.value;
            
            if (!siteId) {
                parentSelect.disabled = true;
                parentSelect.innerHTML = '<option value="">Nenhuma (Raiz)</option>';
                nivelInput.value = '';
                return;
            }

            // Buscar localizações do site
            fetch(`/api/sites/${siteId}/localizacoes`)
                .then(response => response.json())
                .then(data => {
                    parentSelect.innerHTML = '<option value="">Nenhuma (Raiz)</option>';
                    data.forEach(loc => {
                        // Não pode ser pai de si mesmo
                        if (loc.id !== localizacaoId) {
                            const option = document.createElement('option');
                            option.value = loc.id;
                            option.textContent = `${loc.codigo} - ${loc.nome}`;
                            option.dataset.nivel = loc.nivel_hierarquia;
                            parentSelect.appendChild(option);
                        }
                    });
                    parentSelect.disabled = false;
                })
                .catch(error => {
                    console.error('Erro ao carregar localizações:', error);
                    toastr.error('Erro ao carregar localizações do site');
                });
        });

        // Quando parent mudar, calcular nível hierárquico
        parentSelect.addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            if (selectedOption.value) {
                const parentNivel = parseInt(selectedOption.dataset.nivel) || 0;
                nivelInput.value = parentNivel + 1;
            } else {
                nivelInput.value = 0;
            }
        });
    }
});
</script>