@extends('layouts.app')

@section('titulo', 'Nova Ordem de Produção')
@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
    $produtosJson = $produtos->map(function ($p) {
        return [
            'id' => $p->id,
            'descricao' => $p->descricao,
            'unidade' => $p->unidade->sigla ?? 'UN',
            'rendimento' => (float) ($p->fichaTecnica->rendimento_quantidade ?? 1),
            'itens' => $p->fichaTecnica?->itens->map(fn($i) => [
                'descricao' => $i->produto->descricao,
                'quantidade' => (float) $i->quantidade,
                'percentual_perda' => (float) $i->percentual_perda,
                'unidade' => $i->produto->unidade->sigla ?? 'UN',
            ])->values() ?? [],
        ];
    });
@endphp

@if ($produtos->isEmpty())
    <div class="alert alert-warning">
        Nenhum produto acabado com ficha técnica cadastrada. Cadastre uma ficha técnica antes de criar uma ordem de produção.
    </div>
@else
<div class="row">
    <div class="col-lg-7">
        <form method="POST" action="{{ route('producao.store') }}"
              x-data="producaoForm({ produtos: {{ $produtosJson->toJson() }}, produtoInicial: '{{ old('produto_id', $produtoPreSelecionado ?: '') }}' })">
            @csrf

            <div class="card mb-3">
                <div class="card-header">Dados da Ordem</div>
                <div class="card-body row g-3">
                    <div class="col-12">
                        <label class="form-label small fw-semibold">Produto *</label>
                        <select name="produto_id" class="form-select" x-model="produtoId" required>
                            <option value="">Selecione...</option>
                            <template x-for="p in produtos" :key="p.id">
                                <option :value="p.id" x-text="p.descricao"></option>
                            </template>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small fw-semibold">Quantidade Planejada *</label>
                        <input type="number" step="0.001" min="0.001" name="quantidade_planejada" class="form-control" x-model.number="quantidade" required>
                        <div class="text-muted-sm" x-show="produtoSelecionado">Unidade: <span x-text="produtoSelecionado?.unidade"></span> · Rendimento da ficha: <span x-text="produtoSelecionado?.rendimento"></span></div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small fw-semibold">Data Planejada *</label>
                        <input type="date" name="data_planejada" class="form-control" value="{{ old('data_planejada', now()->toDateString()) }}" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label small fw-semibold">Responsável</label>
                        <select name="responsavel_id" class="form-select">
                            <option value="">— Não definido —</option>
                            @foreach ($responsaveis as $resp)
                                <option value="{{ $resp->id }}" {{ (string) old('responsavel_id') === (string) $resp->id ? 'selected' : '' }}>{{ $resp->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label small fw-semibold">Observações</label>
                        <textarea name="observacoes" class="form-control" rows="2">{{ old('observacoes') }}</textarea>
                    </div>
                </div>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary">Criar Ordem</button>
                <a href="{{ route('producao.index') }}" class="btn btn-outline-secondary">Cancelar</a>
            </div>
        </form>
    </div>

    <div class="col-lg-5">
        <div class="card" x-data="producaoForm({ produtos: {{ $produtosJson->toJson() }}, produtoInicial: '{{ old('produto_id', $produtoPreSelecionado ?: '') }}' })">
            <div class="card-header">Necessidade de Matéria-Prima (estimativa)</div>
            <div class="card-body p-0">
                <template x-if="!produtoSelecionado">
                    <div class="empty-state"><p class="mb-0">Selecione um produto para ver a necessidade de insumos.</p></div>
                </template>
                <template x-if="produtoSelecionado">
                    <table class="table table-sm mb-0">
                        <thead><tr><th>Insumo</th><th class="text-end">Necessário</th></tr></thead>
                        <tbody>
                            <template x-for="item in necessidades()" :key="item.descricao">
                                <tr>
                                    <td x-text="item.descricao"></td>
                                    <td class="text-end" x-text="item.quantidade.toLocaleString('pt-BR', {minimumFractionDigits: 3}) + ' ' + item.unidade"></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </template>
            </div>
        </div>
    </div>
</div>
@endif
@endsection

@push('scripts')
<script>
    function producaoForm({ produtos, produtoInicial }) {
        return {
            produtos,
            produtoId: produtoInicial || '',
            quantidade: 1,

            get produtoSelecionado() {
                return this.produtos.find(p => p.id == this.produtoId) || null;
            },

            necessidades() {
                const p = this.produtoSelecionado;
                if (!p || !p.rendimento) return [];

                const fator = (this.quantidade || 0) / p.rendimento;

                return p.itens.map(item => ({
                    descricao: item.descricao,
                    unidade: item.unidade,
                    quantidade: (item.quantidade * fator) * (1 + (item.percentual_perda || 0) / 100),
                }));
            }
        };
    }
</script>
@endpush