{% extends "base.html" %}

{% block title %}Fichas Técnicas - CapeFood{% endblock %}

{% block extra_css %}
<style>
    .ficha-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        overflow: hidden;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .ficha-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    }
    
    .ficha-header {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: white;
        padding: 1rem;
    }
    
    .ficha-header h5 {
        margin: 0;
        font-weight: 600;
    }
    
    .ficha-body {
        padding: 1rem;
    }
    
    .ficha-stat {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f1f5f9;
    }
    
    .ficha-stat:last-child {
        border-bottom: none;
    }
    
    .ficha-stat .label {
        color: #64748b;
        font-size: 0.85rem;
    }
    
    .ficha-stat .value {
        font-weight: 600;
    }
    
    .badge-margem {
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
    }
    
    .badge-margem.alta { background: #dcfce7; color: #166534; }
    .badge-margem.media { background: #fef3c7; color: #92400e; }
    .badge-margem.baixa { background: #fee2e2; color: #991b1b; }
    
    .ingrediente-item {
        display: flex;
        align-items: center;
        padding: 0.5rem;
        border-radius: 8px;
        background: #f8fafc;
        margin-bottom: 0.5rem;
    }
    
    .ingrediente-item .qtd {
        background: #3b82f6;
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-weight: 600;
        margin-right: 0.75rem;
        min-width: 60px;
        text-align: center;
    }
    
    .ingrediente-item .nome {
        flex: 1;
    }
    
    .ingrediente-item .custo {
        color: #64748b;
        font-size: 0.85rem;
    }
    
    .modo-preparo {
        background: #fffbeb;
        border-left: 4px solid #f59e0b;
        padding: 1rem;
        border-radius: 0 8px 8px 0;
        white-space: pre-line;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1"><i class="fas fa-clipboard-list text-warning me-2"></i>Fichas Técnicas</h4>
            <p class="text-muted mb-0">Receitas e controle de custos</p>
        </div>
        <div>
            <button class="btn btn-warning" onclick="abrirModalNovaFicha()">
                <i class="fas fa-plus me-2"></i>Nova Ficha Técnica
            </button>
            <a href="{{ url_for('food.dashboard_food') }}" class="btn btn-outline-secondary ms-2">
                <i class="fas fa-arrow-left me-2"></i>Voltar
            </a>
        </div>
    </div>
    
    <!-- Lista de Fichas -->
    <div class="row" id="fichas-container">
        <div class="col-12 text-center py-5">
            <div class="spinner-border text-warning" role="status"></div>
            <p class="mt-2 text-muted">Carregando fichas técnicas...</p>
        </div>
    </div>
</div>

<!-- Modal Nova/Editar Ficha -->
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalFicha" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-warning text-white">
                <h5 class="modal-title"><i class="fas fa-clipboard-list me-2"></i><span id="modal-titulo">Nova Ficha Técnica</span></h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="formFicha">
                    <input type="hidden" id="ficha-id">
                    
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label class="form-label">Produto Final *</label>
                            <select class="form-select" id="produto-id" required>
                                <option value="">Selecione o produto...</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Nome da Ficha</label>
                            <input type="text" class="form-control" id="ficha-nome" placeholder="Opcional - usa nome do produto">
                        </div>
                    </div>
                    
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <label class="form-label">Rendimento</label>
                            <input type="number" class="form-control" id="rendimento" value="1" min="0.1" step="0.1">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Unidade</label>
                            <select class="form-select" id="unidade-rendimento">
                                <option value="UN">Unidade</option>
                                <option value="KG">Quilograma</option>
                                <option value="L">Litro</option>
                                <option value="PORÇÃO">Porção</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Tempo Preparo (min)</label>
                            <input type="number" class="form-control" id="tempo-preparo" placeholder="Ex: 30">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Custo Mão de Obra</label>
                            <input type="number" class="form-control" id="custo-mao-obra" value="0" min="0" step="0.01">
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <label class="form-label mb-0"><i class="fas fa-carrot me-2"></i>Ingredientes</label>
                            <button type="button" class="btn btn-sm btn-outline-success" onclick="adicionarIngrediente()">
                                <i class="fas fa-plus me-1"></i>Adicionar
                            </button>
                        </div>
                        <div id="ingredientes-container">
                            <!-- Ingredientes serão adicionados aqui -->
                        </div>
                        <div class="text-end mt-2">
                            <strong>Custo Total Ingredientes: <span id="custo-total-ingredientes">R$ 0,00</span></strong>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="form-label"><i class="fas fa-book me-2"></i>Modo de Preparo</label>
                        <textarea class="form-control" id="modo-preparo" rows="4" placeholder="Descreva o passo a passo..."></textarea>
                    </div>
                    
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="baixa-estoque" checked>
                        <label class="form-check-label" for="baixa-estoque">
                            Baixar estoque automaticamente ao vender
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-warning" onclick="salvarFicha()">
                    <i class="fas fa-save me-2"></i>Salvar Ficha
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Detalhes -->
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalDetalhes" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-warning text-white">
                <h5 class="modal-title"><i class="fas fa-eye me-2"></i><span id="detalhe-nome">Ficha Técnica</span></h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="detalhe-conteudo">
                <!-- Conteúdo será preenchido via JS -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" onclick="recalcularCustos()">
                    <i class="fas fa-sync me-2"></i>Recalcular Custos
                </button>
                <button type="button" class="btn btn-primary" onclick="editarFicha()">
                    <i class="fas fa-edit me-2"></i>Editar
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let fichas = [];
let produtos = [];
let fichaAtual = null;

document.addEventListener('DOMContentLoaded', function() {
    carregarFichas();
    carregarProdutos();
});

function carregarFichas() {
    fetch('/food/api/fichas-tecnicas')
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                fichas = data.fichas;
                renderizarFichas();
            }
        });
}

function carregarProdutos() {
    fetch('/food/produtos?format=json')
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                produtos = data.produtos;
                
                const select = document.getElementById('produto-id');
                select.innerHTML = '<option value="">Selecione o produto...</option>';
                produtos.forEach(p => {
                    select.innerHTML += `<option value="${p.id}">${p.nome} - R$ ${(p.valor_venda || 0).toFixed(2)}</option>`;
                });
            }
        });
}

function renderizarFichas() {
    const container = document.getElementById('fichas-container');
    
    if (fichas.length === 0) {
        container.innerHTML = `
            <div class="col-12 text-center py-5">
                <i class="fas fa-clipboard-list fa-4x text-muted mb-3"></i>
                <h5 class="text-muted">Nenhuma ficha técnica cadastrada</h5>
                <p class="text-muted">Clique em "Nova Ficha Técnica" para começar</p>
            </div>
        `;
        return;
    }
    
    container.innerHTML = fichas.map(f => {
        const margemClass = f.margem_lucro >= 40 ? 'alta' : (f.margem_lucro >= 20 ? 'media' : 'baixa');
        
        return `
            <div class="col-md-4 col-lg-3 mb-4">
                <div class="ficha-card" onclick="verDetalhes(${f.id})" style="cursor: pointer;">
                    <div class="ficha-header">
                        <h5>${f.nome || f.produto_nome}</h5>
                        <small class="opacity-75">${f.qtd_ingredientes} ingrediente(s)</small>
                    </div>
                    <div class="ficha-body">
                        <div class="ficha-stat">
                            <span class="label">Custo Total</span>
                            <span class="value">R$ ${f.custo_total.toFixed(2)}</span>
                        </div>
                        <div class="ficha-stat">
                            <span class="label">Rendimento</span>
                            <span class="value">${f.rendimento} ${f.unidade_rendimento}</span>
                        </div>
                        <div class="ficha-stat">
                            <span class="label">Margem</span>
                            <span class="badge-margem ${margemClass}">${f.margem_lucro.toFixed(1)}%</span>
                        </div>
                        ${f.tempo_preparo ? `
                        <div class="ficha-stat">
                            <span class="label">Tempo</span>
                            <span class="value"><i class="fas fa-clock me-1"></i>${f.tempo_preparo} min</span>
                        </div>
                        ` : ''}
                    </div>
                </div>
            </div>
        `;
    }).join('');
}

function abrirModalNovaFicha() {
    document.getElementById('modal-titulo').textContent = 'Nova Ficha Técnica';
    document.getElementById('formFicha').reset();
    document.getElementById('ficha-id').value = '';
    document.getElementById('ingredientes-container').innerHTML = '';
    
    new bootstrap.Modal(document.getElementById('modalFicha')).show();
}

function adicionarIngrediente(dados = {}) {
    const container = document.getElementById('ingredientes-container');
    const id = Date.now();
    
    const html = `
        <div class="ingrediente-row row mb-2" id="ing-${id}">
            <div class="col-md-5">
                <select class="form-select form-select-sm" onchange="atualizarCustoIngrediente(${id})">
                    <option value="">Selecione o insumo...</option>
                    ${produtos.map(p => `<option value="${p.id}" data-custo="${p.preco_custo || 0}" ${dados.insumo_id == p.id ? 'selected' : ''}>${p.nome}</option>`).join('')}
                </select>
            </div>
            <div class="col-md-2">
                <input type="number" class="form-control form-control-sm" placeholder="Qtd" 
                       value="${dados.quantidade || ''}" step="0.001" min="0" onchange="calcularCustoTotal()">
            </div>
            <div class="col-md-2">
                <select class="form-select form-select-sm">
                    <option value="UN" ${dados.unidade == 'UN' ? 'selected' : ''}>UN</option>
                    <option value="KG" ${dados.unidade == 'KG' ? 'selected' : ''}>KG</option>
                    <option value="G" ${dados.unidade == 'G' ? 'selected' : ''}>G</option>
                    <option value="L" ${dados.unidade == 'L' ? 'selected' : ''}>L</option>
                    <option value="ML" ${dados.unidade == 'ML' ? 'selected' : ''}>ML</option>
                </select>
            </div>
            <div class="col-md-2">
                <input type="number" class="form-control form-control-sm" placeholder="Custo" 
                       value="${dados.custo_unitario || ''}" step="0.01" min="0" onchange="calcularCustoTotal()">
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removerIngrediente(${id})">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    `;
    
    container.insertAdjacentHTML('beforeend', html);
    calcularCustoTotal();
}

function removerIngrediente(id) {
    document.getElementById(`ing-${id}`).remove();
    calcularCustoTotal();
}

function atualizarCustoIngrediente(id) {
    const row = document.getElementById(`ing-${id}`);
    const select = row.querySelector('select');
    const custoInput = row.querySelectorAll('input')[1];
    const option = select.options[select.selectedIndex];
    
    if (option && option.dataset.custo) {
        custoInput.value = parseFloat(option.dataset.custo).toFixed(2);
    }
    
    calcularCustoTotal();
}

function calcularCustoTotal() {
    let total = 0;
    const rows = document.querySelectorAll('.ingrediente-row');
    
    rows.forEach(row => {
        const qtd = parseFloat(row.querySelectorAll('input')[0].value) || 0;
        const custo = parseFloat(row.querySelectorAll('input')[1].value) || 0;
        total += qtd * custo;
    });
    
    document.getElementById('custo-total-ingredientes').textContent = `R$ ${total.toFixed(2)}`;
}

function salvarFicha() {
    const fichaId = document.getElementById('ficha-id').value;
    const ingredientes = [];
    
    document.querySelectorAll('.ingrediente-row').forEach(row => {
        const selects = row.querySelectorAll('select');
        const inputs = row.querySelectorAll('input');
        
        if (selects[0].value) {
            ingredientes.push({
                insumo_id: parseInt(selects[0].value),
                quantidade: parseFloat(inputs[0].value) || 0,
                unidade: selects[1].value,
                custo_unitario: parseFloat(inputs[1].value) || 0
            });
        }
    });
    
    const dados = {
        produto_id: parseInt(document.getElementById('produto-id').value),
        nome: document.getElementById('ficha-nome').value,
        rendimento: parseFloat(document.getElementById('rendimento').value) || 1,
        unidade_rendimento: document.getElementById('unidade-rendimento').value,
        tempo_preparo: parseInt(document.getElementById('tempo-preparo').value) || null,
        custo_mao_obra: parseFloat(document.getElementById('custo-mao-obra').value) || 0,
        modo_preparo: document.getElementById('modo-preparo').value,
        baixa_estoque: document.getElementById('baixa-estoque').checked,
        ingredientes: ingredientes
    };
    
    const url = fichaId ? `/food/api/fichas-tecnicas/${fichaId}` : '/food/api/fichas-tecnicas';
    const method = fichaId ? 'PUT' : 'POST';
    
    fetch(url, {
        method: method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(dados)
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            bootstrap.Modal.getInstance(document.getElementById('modalFicha')).hide();
            carregarFichas();
        } else {
            alert(data.message);
        }
    });
}

function verDetalhes(fichaId) {
    fetch(`/food/api/fichas-tecnicas/${fichaId}`)
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                fichaAtual = data.ficha;
                
                document.getElementById('detalhe-nome').textContent = data.ficha.nome || data.ficha.produto_nome;
                
                const margemClass = data.ficha.margem_lucro >= 40 ? 'alta' : (data.ficha.margem_lucro >= 20 ? 'media' : 'baixa');
                
                document.getElementById('detalhe-conteudo').innerHTML = `
                    <div class="row mb-4">
                        <div class="col-md-3 text-center">
                            <h3 class="text-warning">R$ ${data.ficha.custo_total.toFixed(2)}</h3>
                            <small class="text-muted">Custo Total</small>
                        </div>
                        <div class="col-md-3 text-center">
                            <h3 class="text-primary">R$ ${data.ficha.produto_valor_venda.toFixed(2)}</h3>
                            <small class="text-muted">Preço Venda</small>
                        </div>
                        <div class="col-md-3 text-center">
                            <h3><span class="badge-margem ${margemClass}">${data.ficha.margem_lucro.toFixed(1)}%</span></h3>
                            <small class="text-muted">Margem Lucro</small>
                        </div>
                        <div class="col-md-3 text-center">
                            <h3>${data.ficha.rendimento} ${data.ficha.unidade_rendimento}</h3>
                            <small class="text-muted">Rendimento</small>
                        </div>
                    </div>
                    
                    <h6 class="mb-3"><i class="fas fa-carrot me-2 text-success"></i>Ingredientes</h6>
                    ${data.ficha.ingredientes.map(i => `
                        <div class="ingrediente-item">
                            <span class="qtd">${i.quantidade} ${i.unidade}</span>
                            <span class="nome">${i.insumo_nome}</span>
                            <span class="custo">R$ ${i.custo_total.toFixed(2)}</span>
                        </div>
                    `).join('')}
                    
                    ${data.ficha.modo_preparo ? `
                        <h6 class="mt-4 mb-3"><i class="fas fa-book me-2 text-warning"></i>Modo de Preparo</h6>
                        <div class="modo-preparo">${data.ficha.modo_preparo}</div>
                    ` : ''}
                `;
                
                new bootstrap.Modal(document.getElementById('modalDetalhes')).show();
            }
        });
}

function editarFicha() {
    if (!fichaAtual) return;
    
    bootstrap.Modal.getInstance(document.getElementById('modalDetalhes')).hide();
    
    document.getElementById('modal-titulo').textContent = 'Editar Ficha Técnica';
    document.getElementById('ficha-id').value = fichaAtual.id;
    document.getElementById('produto-id').value = fichaAtual.produto_id;
    document.getElementById('ficha-nome').value = fichaAtual.nome || '';
    document.getElementById('rendimento').value = fichaAtual.rendimento;
    document.getElementById('unidade-rendimento').value = fichaAtual.unidade_rendimento;
    document.getElementById('tempo-preparo').value = fichaAtual.tempo_preparo || '';
    document.getElementById('custo-mao-obra').value = fichaAtual.custo_mao_obra;
    document.getElementById('modo-preparo').value = fichaAtual.modo_preparo || '';
    document.getElementById('baixa-estoque').checked = fichaAtual.baixa_estoque;
    
    const container = document.getElementById('ingredientes-container');
    container.innerHTML = '';
    fichaAtual.ingredientes.forEach(i => adicionarIngrediente(i));
    
    setTimeout(() => {
        new bootstrap.Modal(document.getElementById('modalFicha')).show();
    }, 300);
}

function recalcularCustos() {
    if (!fichaAtual) return;
    
    fetch(`/food/api/fichas-tecnicas/${fichaAtual.id}/recalcular`, { method: 'POST' })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                alert(`Custos recalculados!\nCusto: R$ ${data.custo_total.toFixed(2)}\nMargem: ${data.margem_lucro.toFixed(1)}%`);
                bootstrap.Modal.getInstance(document.getElementById('modalDetalhes')).hide();
                carregarFichas();
            }
        });
}
</script>
{% endblock %}