@extends('layouts.app')

@section('titulo', 'Novo Pedido de Compra')
@section('subtitulo', 'Compras')

@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(fn($p) => [
        'id' => $p->id,
        'descricao' => $p->descricao,
        'custo_medio' => (float) $p->custo_medio,
        'unidade' => $p->unidade->sigla ?? 'UN',
    ]);
@endphp

<form method="POST" action="{{ route('compras.pedidos.store') }}"
      x-data="compraForm({ produtos: {{ $produtosJson->toJson() }} })">
    @csrf

    <div class="row g-3">
        <div class="col-lg-8">
            <div class="card mb-3">
                <div class="card-header">Dados do Pedido</div>
                <div class="card-body row g-3">
                    <div class="col-md-6">
                        <label class="form-label small fw-semibold">Fornecedor *</label>
                        <select name="fornecedor_id" class="form-select" required>
                            <option value="">Selecione...</option>
                            @foreach ($fornecedores as $fornecedor)
                                <option value="{{ $fornecedor->id }}" {{ (string) old('fornecedor_id', $fornecedorPreSelecionado) === (string) $fornecedor->id ? 'selected' : '' }}>
                                    {{ $fornecedor->nome_fantasia ?: $fornecedor->razao_social }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small fw-semibold">Data do Pedido *</label>
                        <input type="date" name="data_pedido" class="form-control" value="{{ old('data_pedido', now()->toDateString()) }}" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small fw-semibold">Previsão de Entrega</label>
                        <input type="date" name="previsao_entrega" class="form-control" value="{{ old('previsao_entrega') }}">
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    Itens do Pedido
                    <button type="button" class="btn btn-sm btn-outline-secondary" @click="adicionar()">+ Adicionar Item</button>
                </div>
                <div class="card-body p-0">
                    <table class="table mb-0">
                        <thead>
                            <tr>
                                <th style="min-width:220px;">Produto</th>
                                <th style="width:120px;">Qtd.</th>
                                <th style="width:160px;">Preço Unit.</th>
                                <th class="text-end" style="width:130px;">Total</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" @change="aoSelecionar(index)" 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>
                                    </td>
                                    <td>
                                        <input type="number" step="0.001" min="0.001" class="form-control form-control-sm" :name="'itens['+index+'][quantidade]'" x-model.number="item.quantidade" required>
                                    </td>
                                    <td>
                                        <div class="input-group input-group-sm">
                                            <span class="input-group-text">R$</span>
                                            <input type="number" step="0.0001" min="0" class="form-control" :name="'itens['+index+'][preco_unitario]'" x-model.number="item.preco_unitario" required>
                                        </div>
                                    </td>
                                    <td class="text-end text-money align-middle" x-text="formatarMoeda((item.quantidade||0) * (item.preco_unitario||0))"></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>
                        <tfoot>
                            <tr>
                                <td colspan="3" class="text-end fw-bold">Total</td>
                                <td class="text-end text-money fw-bold" x-text="formatarMoeda(total())"></td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </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') }}</textarea>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary flex-fill">Criar Pedido de Compra</button>
                <a href="{{ route('compras.index') }}" class="btn btn-outline-secondary">Cancelar</a>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
    function compraForm({ produtos }) {
        return {
            produtos,
            itens: [{ produto_id: '', quantidade: 1, preco_unitario: 0 }],

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

            remover(index) {
                this.itens.splice(index, 1);
            },

            aoSelecionar(index) {
                const item = this.itens[index];
                const produto = this.produtos.find(p => p.id == item.produto_id);

                if (produto && (!item.preco_unitario || item.preco_unitario == 0)) {
                    item.preco_unitario = produto.custo_medio;
                }
            },

            total() {
                return this.itens.reduce((acc, item) => acc + (item.quantidade||0) * (item.preco_unitario||0), 0);
            },

            formatarMoeda(valor) {
                return 'R$ ' + (valor || 0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            }
        };
    }
</script>
@endpush