@extends('adminlte.app')

@section('content')

<link rel="stylesheet" href="{{ asset('css/tfds.css') }}">
<div class="content-wrapper tfds-root">
    <div class="tfds-header-row">
        <div>
            <h1 class="tfds-h1">Detalhe da OS {{ $manutencao->numero_os }}</h1>
            <p class="tfds-sub">Acompanhamento completo da manutenção</p>
        </div>
        <div class="tfds-i17">
            <a class="tfds-btn tfds-btn-ghost" href="{{ route('manutencoes.index') }}"><i class="fas fa-arrow-left"></i> Voltar</a>
            <a class="tfds-btn tfds-btn-primary" href="{{ route('manutencoes.edit', $manutencao) }}"><i class="fas fa-pen"></i> Editar</a>
        </div>
    </div>

        @if(session('success'))
            <div class="tfds-alert ok">{{ session('success') }}</div>
        @endif

        @if(session('error'))
            <div class="tfds-alert err">{{ session('error') }}</div>
        @endif

        @if ($errors->any())
            <div class="tfds-alert err">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="tfds-card">
            <p class="tfds-card-title">Resumo</p>
                <div class="row">
                    <div class="col-md-3"><strong>Status:</strong> <span class="tfds-badge">{{ ucfirst(str_replace('_', ' ', (string) $manutencao->status)) }}</span></div>
                    <div class="col-md-3"><strong>Tipo:</strong> {{ $manutencao->tipo }}</div>
                    <div class="col-md-3"><strong>Prioridade:</strong> {{ $manutencao->prioridade }}</div>
                    <div class="col-md-3"><strong>Centro Custo:</strong> {{ optional($manutencao->centroCusto)->nome_centro_custo }}</div>
                </div>
                <div class="row mt-3">
                    <div class="col-md-4"><strong>Custo peças:</strong> € {{ number_format((float) $manutencao->custo_pecas, 2, ',', '.') }}</div>
                    <div class="col-md-4"><strong>Custo mão de obra:</strong> € {{ number_format((float) $manutencao->custo_mao_obra, 2, ',', '.') }}</div>
                    <div class="col-md-4"><strong>Custo total:</strong> € {{ number_format((float) $manutencao->custo_total, 2, ',', '.') }}</div>
                </div>
                <hr>
                <p><strong>Problema:</strong><br>{{ $manutencao->descricao_problema ?: '—' }}</p>
                <p><strong>Serviço:</strong><br>{{ $manutencao->descricao_servico ?: '—' }}</p>
        </div>

        @if(in_array($manutencao->status, [\App\Models\Manutencao\Manutencao::STATUS_APROVADA, \App\Models\Manutencao\Manutencao::STATUS_EM_EXECUCAO], true))
            <div class="tfds-card">
                <p class="tfds-card-title">Lançamento de execução e custos</p>
                    <form method="POST" action="{{ route('manutencoes.execucao', $manutencao) }}" id="form-execucao-manutencao">
                        @csrf
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label>Descrição do serviço executado</label>
                                <textarea name="descricao_servico"  rows="3" class="form-control tfds-i5">{{ old('descricao_servico', $manutencao->descricao_servico) }}</textarea>
                            </div>
                            <div class="col-md-2 form-group">
                                <label>KM atual</label>
                                <input type="number" step="0.01" name="km_atual" class="form-control" value="{{ old('km_atual', $manutencao->km_atual) }}">
                            </div>
                            <div class="col-md-2 form-group">
                                <label>Horas atual</label>
                                <input type="number" step="0.01" name="horas_atual" class="form-control" value="{{ old('horas_atual', $manutencao->horas_atual) }}">
                            </div>
                            <div class="col-md-2 form-group">
                                <label>Início paragem</label>
                                <input type="datetime-local" name="paralisacao_inicio" class="form-control" value="{{ old('paralisacao_inicio', optional($manutencao->paralisacao_inicio)->format('Y-m-d\TH:i')) }}">
                            </div>
                            <div class="col-md-2 form-group">
                                <label>Fim paragem</label>
                                <input type="datetime-local" name="paralisacao_fim" class="form-control" value="{{ old('paralisacao_fim', optional($manutencao->paralisacao_fim)->format('Y-m-d\TH:i')) }}">
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-bordered align-middle" id="tabela-itens-execucao">
                                <thead>
                                    <tr>
                                        <th class="tfds-i48">Tipo</th>
                                        <th>Descrição</th>
                                        <th class="tfds-i46">Qtd</th>
                                        <th class="tfds-i46">Horas</th>
                                        <th class="tfds-i47">Valor unit.</th>
                                        <th class="tfds-i47">Subtotal</th>
                                        <th class="tfds-i49"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $itensOld = old('itens', []);
                                    @endphp
                                    @forelse($itensOld as $index => $item)
                                        <tr>
                                            <td>
                                                <select name="itens[{{ $index }}][tipo_item]" class="form-control js-tipo-item">
                                                    <option value="peca" @selected(($item['tipo_item'] ?? '') === 'peca')>Peça</option>
                                                    <option value="mao_obra" @selected(($item['tipo_item'] ?? '') === 'mao_obra')>Mão de obra</option>
                                                    <option value="servico_externo" @selected(($item['tipo_item'] ?? '') === 'servico_externo')>Serviço externo</option>
                                                </select>
                                            </td>
                                            <td><input type="text" name="itens[{{ $index }}][descricao]" class="form-control" value="{{ $item['descricao'] ?? '' }}"></td>
                                            <td><input type="number" step="0.01" min="0.01" name="itens[{{ $index }}][quantidade]" class="form-control js-quantidade" value="{{ $item['quantidade'] ?? 1 }}"></td>
                                            <td><input type="number" step="0.01" min="0" name="itens[{{ $index }}][horas]" class="form-control" value="{{ $item['horas'] ?? '' }}"></td>
                                            <td><input type="number" step="0.01" min="0" name="itens[{{ $index }}][valor_unitario]" class="form-control js-valor-unitario" value="{{ $item['valor_unitario'] ?? '' }}"></td>
                                            <td class="text-right js-subtotal">€ 0,00</td>
                                            <td class="text-center"><button type="button" class="btn btn-sm btn-outline-danger js-remover-item">×</button></td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td>
                                                <select name="itens[0][tipo_item]" class="form-control js-tipo-item">
                                                    <option value="peca">Peça</option>
                                                    <option value="mao_obra">Mão de obra</option>
                                                    <option value="servico_externo">Serviço externo</option>
                                                </select>
                                            </td>
                                            <td><input type="text" name="itens[0][descricao]" class="form-control" placeholder="Descrição do item"></td>
                                            <td><input type="number" step="0.01" min="0.01" name="itens[0][quantidade]" class="form-control js-quantidade" value="1"></td>
                                            <td><input type="number" step="0.01" min="0" name="itens[0][horas]" class="form-control"></td>
                                            <td><input type="number" step="0.01" min="0" name="itens[0][valor_unitario]" class="form-control js-valor-unitario" value="0"></td>
                                            <td class="text-right js-subtotal">€ 0,00</td>
                                            <td class="text-center"><button type="button" class="btn btn-sm btn-outline-danger js-remover-item">×</button></td>
                                        </tr>
                                    @endforelse
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="5" class="text-right">Total desta operação</th>
                                        <th class="text-right" id="total-itens-execucao">€ 0,00</th>
                                        <th></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>

                        <div class="d-flex justify-content-between mt-3 tfds-i23">
                            <button type="button" class="tfds-btn tfds-btn-ghost" id="btn-adicionar-item">Adicionar item</button>
                            <button type="submit" class="tfds-btn tfds-btn-primary">Registar execução e custos</button>
                        </div>
                    </form>
            </div>
        @endif

        <div class="tfds-card">
            <p class="tfds-card-title">Itens de execução</p>
            <div class="table-responsive">
                <table class="tfds-tbl">
                    <thead><tr><th>Tipo</th><th>Descrição</th><th>Qtd</th><th class="text-right">Unit.</th><th class="text-right">Total</th></tr></thead>
                    <tbody>
                    @forelse($manutencao->itens as $item)
                        <tr>
                            <td>{{ $item->tipo_item }}</td>
                            <td>{{ $item->descricao }}</td>
                            <td>{{ number_format((float)$item->quantidade, 2, ',', '.') }}</td>
                            <td class="text-right">€ {{ number_format((float)$item->valor_unitario, 2, ',', '.') }}</td>
                            <td class="text-right">€ {{ number_format((float)$item->valor_total, 2, ',', '.') }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="text-center tfds-i9">Sem itens registados.</td></tr>
                    @endforelse
                    </tbody>
                    <tfoot>
                        <tr>
                            <th colspan="3" class="text-right">Totais</th>
                            <th class="text-right">€ {{ number_format((float) $manutencao->custo_mao_obra, 2, ',', '.') }}</th>
                            <th class="text-right">€ {{ number_format((float) $manutencao->custo_total, 2, ',', '.') }}</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        <div class="tfds-card">
            <p class="tfds-card-title">Ações rápidas</p>
            <div class="d-flex tfds-i23">
                <form method="POST" action="{{ route('manutencoes.aprovar', $manutencao) }}">@csrf<button class="tfds-btn tfds-i2">Aprovar</button></form>
                <form method="POST" action="{{ route('manutencoes.reprovar', $manutencao) }}">@csrf<input type="hidden" name="observacao_reprovacao" value="Reprovada na tela de detalhe."><button class="tfds-btn tfds-i4">Reprovar</button></form>
                <form method="POST" action="{{ route('manutencoes.concluir', $manutencao) }}">@csrf<button class="tfds-btn tfds-btn-primary">Concluir e Gerar Despesa</button></form>
            </div>
        </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const tabela = document.getElementById('tabela-itens-execucao');
    const botaoAdicionar = document.getElementById('btn-adicionar-item');

    if (!tabela || !botaoAdicionar) {
        return;
    }

    const corpo = tabela.querySelector('tbody');
    const totalEl = document.getElementById('total-itens-execucao');

    function moeda(valor) {
        return '€ ' + valor.toLocaleString('pt-PT', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    function recalcularLinha(linha) {
        const quantidade = parseFloat(linha.querySelector('.js-quantidade')?.value || 0);
        const valorUnitario = parseFloat(linha.querySelector('.js-valor-unitario')?.value || 0);
        const subtotal = (isNaN(quantidade) ? 0 : quantidade) * (isNaN(valorUnitario) ? 0 : valorUnitario);
        linha.querySelector('.js-subtotal').textContent = moeda(subtotal);
        return subtotal;
    }

    function recalcularTabela() {
        let total = 0;
        corpo.querySelectorAll('tr').forEach(function (linha) {
            total += recalcularLinha(linha);
        });
        totalEl.textContent = moeda(total);
    }

    function atualizarIndices() {
        corpo.querySelectorAll('tr').forEach(function (linha, index) {
            linha.querySelectorAll('input, select').forEach(function (campo) {
                campo.name = campo.name.replace(/itens\[\d+\]/, 'itens[' + index + ']');
            });
        });
    }

    function bindLinha(linha) {
        linha.querySelectorAll('.js-quantidade, .js-valor-unitario').forEach(function (campo) {
            campo.addEventListener('input', recalcularTabela);
        });

        linha.querySelector('.js-remover-item')?.addEventListener('click', function () {
            if (corpo.querySelectorAll('tr').length === 1) {
                linha.querySelectorAll('input').forEach(function (campo) {
                    if (campo.type === 'number') {
                        campo.value = campo.classList.contains('js-quantidade') ? '1' : '0';
                    } else {
                        campo.value = '';
                    }
                });
                linha.querySelector('.js-tipo-item').value = 'peca';
            } else {
                linha.remove();
                atualizarIndices();
            }
            recalcularTabela();
        });
    }

    botaoAdicionar.addEventListener('click', function () {
        const index = corpo.querySelectorAll('tr').length;
        const linha = document.createElement('tr');
        linha.innerHTML = `
            <td>
                <select name="itens[${index}][tipo_item]" class="form-control js-tipo-item">
                    <option value="peca">Peça</option>
                    <option value="mao_obra">Mão de obra</option>
                    <option value="servico_externo">Serviço externo</option>
                </select>
            </td>
            <td><input type="text" name="itens[${index}][descricao]" class="form-control" placeholder="Descrição do item"></td>
            <td><input type="number" step="0.01" min="0.01" name="itens[${index}][quantidade]" class="form-control js-quantidade" value="1"></td>
            <td><input type="number" step="0.01" min="0" name="itens[${index}][horas]" class="form-control"></td>
            <td><input type="number" step="0.01" min="0" name="itens[${index}][valor_unitario]" class="form-control js-valor-unitario" value="0"></td>
            <td class="text-right js-subtotal">€ 0,00</td>
            <td class="text-center"><button type="button" class="btn btn-sm btn-outline-danger js-remover-item">×</button></td>
        `;
        corpo.appendChild(linha);
        bindLinha(linha);
        recalcularTabela();
    });

    corpo.querySelectorAll('tr').forEach(bindLinha);
    recalcularTabela();
});
</script>
@endsection