@extends('layouts.app')

@section('titulo', 'Ficha Técnica — '.$produto->descricao)
@section('subtitulo', 'Produção')

@push('styles')
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.10/dist/cdn.min.js"></script>
@endpush

@section('conteudo')
@php
    $materiasJson = $materiasPrimas->map(fn($p) => [
        'id' => $p->id,
        'descricao' => $p->descricao,
        'unidade' => $p->unidade->sigla ?? 'UN',
    ]);

    $itensIniciais = $produto->fichaTecnica
        ? $produto->fichaTecnica->itens->map(fn($i) => [
            'produto_id' => $i->produto_id,
            'quantidade' => (float) $i->quantidade,
            'percentual_perda' => (float) $i->percentual_perda,
        ])->values()
        : collect([['produto_id' => '', 'quantidade' => 0, 'percentual_perda' => 0]]);
@endphp

<form method="POST" action="{{ route('producao.fichas.salvar', $produto) }}"
      x-data="fichaForm({ itens: {{ $itensIniciais->toJson() }} })">
    @csrf

    <div class="row g-3">
        <div class="col-lg-8">
            <div class="card mb-3">
                <div class="card-header">Rendimento</div>
                <div class="card-body row g-3">
                    <div class="col-md-6">
                        <label class="form-label small fw-semibold">Rendimento (em {{ $produto->unidade->sigla ?? 'UN' }}) *</label>
                        <input type="number" step="0.001" min="0.001" name="rendimento_quantidade" class="form-control"
                               value="{{ old('rendimento_quantidade', $produto->fichaTecnica->rendimento_quantidade ?? 1) }}" required>
                        <div class="text-muted-sm">Quantidade do produto final gerada pelas quantidades de insumos abaixo.</div>
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    Insumos / Matérias-Primas
                    <button type="button" class="btn btn-sm btn-outline-secondary" @click="adicionar()">+ Adicionar Insumo</button>
                </div>
                <div class="card-body p-0">
                    <table class="table mb-0">
                        <thead>
                            <tr>
                                <th>Insumo</th>
                                <th style="width:140px;">Quantidade</th>
                                <th style="width:120px;">Perda %</th>
                                <th style="width:40px;"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="(item, index) in itens" :key="index">
                                <tr>
                                    <td>
                                        <select class="form-select form-select-sm" :name="'itens['+index+'][produto_id]'" x-model="item.produto_id" required>
                                            <option value="">Selecione...</option>
                                            <template x-for="mp in materias" :key="mp.id">
                                                <option :value="mp.id" x-text="mp.descricao"></option>
                                            </template>
                                        </select>
                                    </td>
                                    <td>
                                        <input type="number" step="0.0001" min="0.0001" class="form-control form-control-sm" :name="'itens['+index+'][quantidade]'" x-model.number="item.quantidade" required>
                                    </td>
                                    <td>
                                        <input type="number" step="0.01" min="0" max="100" class="form-control form-control-sm" :name="'itens['+index+'][percentual_perda]'" x-model.number="item.percentual_perda">
                                    </td>
                                    <td class="text-end">
                                        <button type="button" class="btn btn-sm btn-outline-danger" @click="remover(index)" x-show="itens.length > 1">&times;</button>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header">Observações</div>
                <div class="card-body">
                    <textarea name="observacoes" class="form-control" rows="2">{{ old('observacoes', $produto->fichaTecnica->observacoes ?? '') }}</textarea>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary flex-fill">Salvar Ficha Técnica</button>
                <a href="{{ route('produtos.show', $produto) }}" class="btn btn-outline-secondary">Cancelar</a>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
    function fichaForm({ itens }) {
        return {
            materias: {{ $materiasJson->toJson() }},
            itens,

            adicionar() {
                this.itens.push({ produto_id: '', quantidade: 0, percentual_perda: 0 });
            },

            remover(index) {
                this.itens.splice(index, 1);
            }
        };
    }
</script>
@endpush