@extends('layouts.app')

@section('titulo', $pedido->exists ? "Editar Pedido {$pedido->numero}" : 'Novo Pedido')
@section('subtitulo', 'Pedidos')

@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,
        'preco_base' => (float) $p->preco_base,
        'unidade' => $p->unidade->sigla ?? 'UN',
    ]);

    $itensIniciais = $pedido->exists
        ? $pedido->itens->map(fn($i) => [
            'id' => $i->id,
            'produto_id' => $i->produto_id,
            'quantidade' => (float) $i->quantidade,
            'preco_unitario' => (float) $i->preco_unitario,
            'desconto_percentual' => (float) $i->desconto_percentual,
        ])->values()
        : collect([['id' => null, 'produto_id' => '', 'quantidade' => 1, 'preco_unitario' => 0, 'desconto_percentual' => 0]]);
@endphp

<form method="POST" action="{{ $pedido->exists ? route('pedidos.update', $pedido) : route('pedidos.store') }}"
      x-data="pedidoForm({
          produtos: {{ $produtosJson->toJson() }},
          itens: {{ $itensIniciais->toJson() }},
          descontoPercentual: {{ old('desconto_percentual', $pedido->desconto_percentual ?? 0) }},
          descontoValor: {{ old('desconto_valor', $pedido->desconto_valor ?? 0) }},
      })">
    @csrf
    @if ($pedido->exists) @method('PUT') @endif

    <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">
                    @if (! $pedido->exists)
                    <div class="col-md-6">
                        <label class="form-label small fw-semibold">Cliente *</label>
                        <select name="cliente_id" class="form-select" required>
                            <option value="">Selecione...</option>
                            @foreach ($clientes as $cliente)
                                <option value="{{ $cliente->id }}" {{ (string) old('cliente_id', $clientePreSelecionado) === (string) $cliente->id ? 'selected' : '' }}>
                                    {{ $cliente->nome_fantasia ?: $cliente->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>
                    @else
                    <div class="col-md-6">
                        <label class="form-label small fw-semibold">Cliente</label>
                        <input type="text" class="form-control" value="{{ $pedido->cliente->nome_fantasia ?: $pedido->cliente->razao_social }}" disabled>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label small fw-semibold">Data do Pedido</label>
                        <input type="text" class="form-control" value="{{ $pedido->data_pedido->format('d/m/Y') }}" disabled>
                    </div>
                    @endif

                    <div class="col-md-3">
                        <label class="form-label small fw-semibold">Entrega Prevista</label>
                        <input type="date" name="data_entrega_prevista" class="form-control" value="{{ old('data_entrega_prevista', $pedido->data_entrega_prevista?->toDateString()) }}">
                    </div>

                    <div class="col-md-4">
                        <label class="form-label small fw-semibold">Vendedor *</label>
                        <select name="vendedor_id" class="form-select" required>
                            @foreach ($vendedores as $vendedor)
                                <option value="{{ $vendedor->id }}" {{ (string) old('vendedor_id', $pedido->vendedor_id ?? auth()->id()) === (string) $vendedor->id ? 'selected' : '' }}>
                                    {{ $vendedor->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small fw-semibold">Tabela de Preço</label>
                        <select name="tabela_preco_id" class="form-select">
                            <option value="">— Do cliente (padrão) —</option>
                            @foreach ($tabelasPreco as $tabela)
                                <option value="{{ $tabela->id }}" {{ (string) old('tabela_preco_id', $pedido->tabela_preco_id) === (string) $tabela->id ? 'selected' : '' }}>
                                    {{ $tabela->nome }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small fw-semibold">Forma de Pagamento</label>
                        <select name="forma_pagamento" class="form-select">
                            <option value="">— Não informado —</option>
                            @foreach (['dinheiro'=>'Dinheiro','pix'=>'PIX','cartao_credito'=>'Cartão de Crédito','cartao_debito'=>'Cartão de Débito','boleto'=>'Boleto','transferencia'=>'Transferência','cheque'=>'Cheque','outros'=>'Outros'] as $valor => $label)
                                <option value="{{ $valor }}" {{ old('forma_pagamento', $pedido->forma_pagamento) === $valor ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </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="adicionarItem()">+ Adicionar Item</button>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table mb-0">
                            <thead>
                                <tr>
                                    <th style="min-width:220px;">Produto</th>
                                    <th style="width:110px;">Qtd.</th>
                                    <th style="width:140px;">Preço Unit.</th>
                                    <th style="width:90px;">Desc. %</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="aoSelecionarProduto(index)" required>
                                                <option value="">Selecione...</option>
                                                <template x-for="produto in produtos" :key="produto.id">
                                                    <option :value="produto.id" x-text="produto.descricao"></option>
                                                </template>
                                            </select>
                                            <input type="hidden" :name="'itens['+index+'][id]'" x-model="item.id">
                                        </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">
                                            </div>
                                        </td>
                                        <td>
                                            <input type="number" step="0.01" min="0" max="100" class="form-control form-control-sm" :name="'itens['+index+'][desconto_percentual]'" x-model.number="item.desconto_percentual">
                                        </td>
                                        <td class="text-end text-money align-middle" x-text="formatarMoeda(totalItem(item))"></td>
                                        <td class="text-end">
                                            <button type="button" class="btn btn-sm btn-outline-danger" @click="removerItem(index)" x-show="itens.length > 1">&times;</button>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </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', $pedido->observacoes) }}</textarea>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card mb-3">
                <div class="card-header">Totais</div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted-sm">Valor Bruto</span>
                        <span class="text-money" x-text="formatarMoeda(valorBruto())"></span>
                    </div>

                    <div class="mb-2">
                        <label class="form-label small fw-semibold">Desconto (%)</label>
                        <input type="number" step="0.01" min="0" max="100" name="desconto_percentual" class="form-control form-control-sm" x-model.number="descontoPercentual">
                    </div>
                    <div class="mb-2">
                        <label class="form-label small fw-semibold">Desconto (R$)</label>
                        <input type="number" step="0.01" min="0" name="desconto_valor" class="form-control form-control-sm" x-model.number="descontoValor">
                    </div>

                    <hr>
                    <div class="d-flex justify-content-between">
                        <strong>Valor Líquido</strong>
                        <strong class="text-money" x-text="formatarMoeda(valorLiquido())"></strong>
                    </div>
                </div>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary flex-fill">{{ $pedido->exists ? 'Salvar alterações' : 'Criar pedido' }}</button>
                <a href="{{ $pedido->exists ? route('pedidos.show', $pedido) : route('pedidos.index') }}" class="btn btn-outline-secondary">Cancelar</a>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
    function pedidoForm({ produtos, itens, descontoPercentual, descontoValor }) {
        return {
            produtos,
            itens: itens.map(i => ({...i, id: i.id ?? ''})),
            descontoPercentual,
            descontoValor,

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

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

            aoSelecionarProduto(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.preco_base;
                }
            },

            totalItem(item) {
                const bruto = (item.quantidade || 0) * (item.preco_unitario || 0);
                const desconto = bruto * ((item.desconto_percentual || 0) / 100);
                return bruto - desconto;
            },

            valorBruto() {
                return this.itens.reduce((acc, item) => acc + this.totalItem(item), 0);
            },

            valorLiquido() {
                const bruto = this.valorBruto();
                const descontoPerc = bruto * ((this.descontoPercentual || 0) / 100);
                return Math.max(bruto - descontoPerc - (this.descontoValor || 0), 0);
            },

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