{% extends "base.html" %}
{% import 'macros/empresa.html' as empresa_ui %}

{% block title %}Abrir Caixa - PDV{% endblock %}

{% block content %}
<div class="container" style="max-width: 600px; margin-top: 50px;">
    <div class="card shadow">
        <div class="card-header bg-primary text-white text-center">
            <h3 class="mb-0">
                <i class="bi bi-cash-register"></i> Abrir Caixa
            </h3>
        </div>
        <div class="card-body p-4">
            {% if caixa_aberto %}
            <div class="alert alert-warning">
                <i class="bi bi-exclamation-triangle"></i> 
                Você já possui um caixa aberto (Caixa #{{ caixa_aberto.numero_caixa }}).
                <hr>
                <a href="{{ url_for('pdv') }}" class="btn btn-primary">
                    <i class="bi bi-arrow-right"></i> Ir para o PDV
                </a>
                <a href="{{ url_for('pdv_fechar_caixa', caixa_id=caixa_aberto.id) }}" class="btn btn-warning">
                    <i class="bi bi-box-arrow-right"></i> Fechar Caixa Atual
                </a>
            </div>
            {% else %}
            <form method="POST" action="{{ url_for('pdv_abrir_caixa') }}">
                <div class="mb-4">
                    <label for="empresa_id" class="form-label">
                        <i class="bi bi-buildings"></i> Empresa:
                    </label>
                    <select class="form-select form-select-lg" id="empresa_id" name="empresa_id" required>
                        <option value="">Selecione...</option>
                        {% for empresa in empresas %}
                        <option value="{{ empresa.id }}" {% if empresa_selecionada and empresa.id == empresa_selecionada.id %}selected{% elif loop.first %}selected{% endif %}>
                            {{ empresa_ui.nome(empresa) }}
                        </option>
                        {% endfor %}
                    </select>
                    <small class="form-text text-muted">Selecione a empresa associada ao caixa.</small>
                </div>
                
                <!-- Campo oculto para nome da máquina -->
                <input type="hidden" id="nome_maquina" name="nome_maquina" value="">
                
                <div class="mb-4">
                    <label for="numero_caixa" class="form-label">
                        <i class="bi bi-pc-display"></i> Identificação do Caixa:
                    </label>
                    <div class="input-group input-group-lg">
                        <input type="text" class="form-control" 
                               id="numero_caixa" name="numero_caixa" 
                               placeholder="Detectando..." readonly>
                        <button type="button" class="btn btn-outline-secondary" onclick="editarNomeCaixa()" title="Editar manualmente">
                            <i class="bi bi-pencil"></i>
                        </button>
                    </div>
                    <small class="form-text text-muted" id="info_maquina">
                        <i class="bi bi-info-circle"></i> Detectando nome da máquina...
                    </small>
                </div>

                <div class="mb-4">
                    <label for="valor_abertura" class="form-label">
                        <i class="bi bi-cash-coin"></i> Fundo Inicial:
                    </label>
                    <div class="input-group input-group-lg">
                        <span class="input-group-text">R$</span>
                        <input type="number" class="form-control" 
                               id="valor_abertura" name="valor_abertura" 
                               step="0.01" min="0" value="0.00" required>
                    </div>
                    <small class="form-text text-muted">
                        Valor em dinheiro disponível no caixa para o troco inicial
                    </small>
                </div>

                <div class="alert alert-info">
                    <strong><i class="bi bi-info-circle"></i> Informações:</strong>
                    <ul class="mb-0 mt-2">
                        <li>Usuário: <strong>{{ current_user.username }}</strong></li>
                        <li>Data/Hora: <strong>{{ now.strftime('%d/%m/%Y às %H:%M') }}</strong></li>
                    </ul>
                </div>

                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-success btn-lg">
                        <i class="bi bi-check-circle"></i> Abrir Caixa
                    </button>
                    <a href="{{ url_for('index') }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Cancelar
                    </a>
                </div>
            </form>
            {% endif %}
        </div>
    </div>
</div>

<script>
// Carregar terminal salvo ou mostrar campo para edição
document.addEventListener('DOMContentLoaded', function() {
    carregarTerminalSalvo();
});

function carregarTerminalSalvo() {
    // Tentar carregar do localStorage
    const terminalSalvo = localStorage.getItem('pdv_terminal_id');
    const inputCaixa = document.getElementById('numero_caixa');
    const infoMaquina = document.getElementById('info_maquina');
    
    if (terminalSalvo) {
        inputCaixa.value = terminalSalvo;
        inputCaixa.setAttribute('readonly', true);
        infoMaquina.innerHTML = 
            '<i class="bi bi-check-circle text-success"></i> Terminal configurado: <strong>' + terminalSalvo + '</strong>' +
            ' <a href="#" onclick="limparTerminalSalvo(); return false;" class="ms-2"><i class="bi bi-x-circle"></i> Alterar</a>';
    } else {
        // Primeira vez - pedir para configurar
        inputCaixa.value = '';
        inputCaixa.removeAttribute('readonly');
        inputCaixa.placeholder = 'Ex: PDV01, PDV02...';
        infoMaquina.innerHTML = 
            '<i class="bi bi-info-circle text-info"></i> Informe o identificador deste terminal (será salvo para próximas vezes)';
    }
}

function limparTerminalSalvo() {
    localStorage.removeItem('pdv_terminal_id');
    carregarTerminalSalvo();
    document.getElementById('numero_caixa').focus();
}

function editarNomeCaixa() {
    const input = document.getElementById('numero_caixa');
    input.removeAttribute('readonly');
    input.focus();
    input.select();
    document.getElementById('info_maquina').innerHTML = 
        '<i class="bi bi-pencil"></i> Modo de edição manual ativado.';
}

// Salvar terminal ao submeter o formulário
document.querySelector('form')?.addEventListener('submit', function(e) {
    const terminalId = document.getElementById('numero_caixa').value.trim().toUpperCase();
    if (terminalId) {
        localStorage.setItem('pdv_terminal_id', terminalId);
        // Atualizar o valor para uppercase
        document.getElementById('numero_caixa').value = terminalId;
    }
});
</script>
{% endblock %}