@php
$title = 'Nova 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">Nova</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-plus-circle me-2 text-primary"></i>Nova 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="formNovaLocalizacao" novalidate>
        @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="{{ $proximoCodigo }}" readonly>
                    </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]" placeholder="Ex: Almoxarifado Central, Rua A, Prateleira 01" 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">Almoxarifado</option>
                            <option value="PRODUCAO">Produção</option>
                            <option value="EXPEDICAO">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"></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" selected>Ativo</option>
                            <option value="INATIVO">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 }}">{{ $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]" disabled>
                            <option value="">Nenhuma (Raiz)</option>
                        </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="0">
            </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">Palete</option>
                            <option value="RACK">Rack</option>
                            <option value="PRATELEIRA">Prateleira</option>
                            <option value="CHAO">Chão</option>
                            <option value="CONTAINER">Container</option>
                            <option value="OUTRO">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" 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" selected>Kg</option>
                            <option value="M3">m³</option>
                            <option value="UNIDADES">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" placeholder="Largura (m)">
                    </div>
                    <div class="col-md-4">
                        <input type="number" class="form-control" name="dados[dimensoes][altura]" step="0.01" placeholder="Altura (m)">
                    </div>
                    <div class="col-md-4">
                        <input type="number" class="form-control" name="dados[dimensoes][profundidade]" step="0.01" 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="salvar(`{{ route('suprimentos.localizacoes.store') }}`, 'formNovaLocalizacao')">
                <i class="bi bi-save me-2"></i>Salvar
            </button>
        </div>
    </form>
</div>

<script src="{{ asset('js/localizacoes.js') }}"></script>