@extends('adminlte.app')

@section('content')

    @if ($message = Session::get('success'))
        <div class="alert alert-success">
            <p>{{ $message }}</p>
        </div>
    @endif

    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <h1>Editar Veículo</h1>
            </div>
        </div>

        <div class="card mx-3 mt-3">
            <div class="card-header d-flex justify-content-between">
                <h4>Editar Veículo</h4>
                <a href="javascript:history.back()" class="btn btn-primary">Voltar</a>
            </div>

            <div class="card-body">
                @if($alertaResumo['bloqueado'])
                    <div class="alert alert-danger mx-3 mt-3 mb-0">
                        <strong>Bloqueio operacional ativo.</strong>
                        @foreach($alertaResumo['bloqueios'] as $bloqueio)
                            <div>{{ $bloqueio['mensagem'] }}</div>
                        @endforeach
                    </div>
                @elseif($alertaResumo['tem_alertas'])
                    <div class="alert alert-warning mx-3 mt-3 mb-0">
                        <strong>Alertas automáticos de vencimento.</strong>
                        @foreach($alertaResumo['alertas'] as $alerta)
                            <div>{{ $alerta['mensagem'] }}</div>
                        @endforeach
                    </div>
                @else
                    <div class="alert alert-success mx-3 mt-3 mb-0">
                        Sem alertas operacionais para documentos e inspeções críticas.
                    </div>
                @endif

                <div class="card border mx-3 mt-3 mb-0">
                    <div class="card-header">
                        <h5 class="mb-0">Alocação Atual</h5>
                    </div>
                    <div class="card-body">
                        @if($veiculo->motorista_atual)
                            <strong>{{ trim(($veiculo->motorista_atual->first_name ?? '') . ' ' . ($veiculo->motorista_atual->last_name ?? '')) }}</strong>
                        @else
                            <span class="text-muted">Nenhum motorista alocado.</span>
                        @endif
                    </div>
                </div>

                <form action="{{ route('cartrack_vehicles_update', $veiculo->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="row p-3">

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

                        {{-- IDENTIFICAÇÃO --}}
                        <div class="col-md-3">
                            <label>Matrícula</label>
                            <input class="form-control" type="text" name="matricula"
                                value="{{ old('matricula', $veiculo->matricula) }}">
                        </div>

                        <div class="col-md-3">
                            <label>VIN</label>
                            <input class="form-control" type="text" name="vin"
                                value="{{ old('vin', $veiculo->vin) }}">
                        </div>

                        {{-- CARACTERÍSTICAS --}}
                        <div class="col-md-3 mt-3">
                            <label>Marca</label>
                            <input class="form-control" type="text" name="marca"
                                value="{{ old('marca', $veiculo->marca) }}">
                        </div>

                        <div class="col-md-3 mt-3">
                            <label>Modelo</label>
                            <input class="form-control" type="text" name="modelo"
                                value="{{ old('modelo', $veiculo->modelo) }}">
                        </div>

                        <div class="col-md-3 mt-3">
                            <label>Ano</label>
                            <input class="form-control" type="number" name="ano"
                                value="{{ old('ano', $veiculo->ano) }}">
                        </div>

                        <div class="col-md-3 mt-3">
                            <label>Tipo Viatura</label>
                            <select class="form-control" name="tipo_viatura">
                                <option value="">Selecione</option>
                                <option value="rigido" {{ old('tipo_viatura', $veiculo->tipo_viatura) == 'rigido' ? 'selected' : '' }}>Rígido</option>
                                <option value="com_atrelado" {{ old('tipo_viatura', $veiculo->tipo_viatura) == 'com_atrelado' ? 'selected' : '' }}>Com Atrelado</option>
                            </select>
                        </div>

                        <div class="col-md-3 mt-3">
                            <label>Categoria</label>
                            <select class="form-control" name="categoria_id">
                                <option value="">Selecione</option>
                                @foreach($tipoViaturas as $tipo)
                                    <option value="{{ $tipo->id }}" {{ old('categoria_id', $veiculo->categoria_id) == $tipo->id ? 'selected' : '' }}>{{ $tipo->nome }}</option>
                                @endforeach
                            </select>
                        </div>


                        <div class="col-md-3 mt-3">
                            <label>Estado</label>
                            <select class="form-control" name="estado" required>
                                <option value="Active" {{ old('estado', $veiculo->estado) == 'Active' ? 'selected' : '' }}>Ativo</option>
                                <option value="Inactive" {{ old('estado', $veiculo->estado) == 'Inactive' ? 'selected' : '' }}>Inativo</option>
                            </select>
                        </div>

                        {{-- ORGANIZAÇÃO --}}
                        <div class="col-md-3 mt-3">
                            <label>Base Operacional</label>
                            <input class="form-control" type="text" name="base_operacional"
                                value="{{ old('base_operacional', $veiculo->base_operacional) }}">
                        </div>

                        <div class="col-md-3 mt-3">
                            <label>Centro de Custo</label>
                            <input class="form-control" type="text" name="centro_custo_id"
                                value="{{ old('centro_custo_id', $veiculo->centro_custo_id) }}">
                        </div>

                        <div class="col-md-3 mt-3">
                            <label>Proprietário</label>
                            <input class="form-control" type="text" name="proprietario"
                                value="{{ old('proprietario', $veiculo->proprietario) }}">
                        </div>

                        <div class="col-md-3 mt-3">
                            <label>Regime</label>
                            <select class="form-control" name="regime">
                                <option value="">Selecione</option>
                                <option value="propria" {{ old('regime', $veiculo->regime) == 'propria' ? 'selected' : '' }}>Própria</option>
                                <option value="leasing" {{ old('regime', $veiculo->regime) == 'leasing' ? 'selected' : '' }}>Leasing</option>
                                <option value="renting" {{ old('regime', $veiculo->regime) == 'renting' ? 'selected' : '' }}>Renting</option>
                            </select>
                        </div>

                        <div class="col-md-3 mt-3">
                            <label>Seguro</label>
                            <input class="form-control" type="text" name="seguro"
                                value="{{ old('seguro', $veiculo->seguro) }}">
                        </div>

                        <div class="col-md-3 mt-3">
                            <label>Apólice</label>
                            <input class="form-control" type="text" name="apolice"
                                value="{{ old('apolice', $veiculo->apolice) }}">
                        </div>

                        <div class="col-md-3 mt-3">
                            <label>Tara</label>
                            <input class="form-control" type="number" step="0.01" name="tara"
                                value="{{ old('tara', $veiculo->tara) }}">
                        </div>

                        <div class="col-md-3 mt-3">
                            <label>Peso Bruto</label>
                            <input class="form-control" type="number" step="0.01" name="peso_bruto"
                                value="{{ old('peso_bruto', $veiculo->peso_bruto) }}">
                        </div>

                        <div class="col-md-3 mt-3">
                            <label>Capacidade de Carga</label>
                            <input class="form-control" type="number" step="0.01" name="capacidade_carga"
                                value="{{ old('capacidade_carga', $veiculo->capacidade_carga) }}">
                        </div>

                        <div class="col-md-3 mt-3">
                            <label>Capacidade do Depósito (L)</label>
                            <input class="form-control" type="number" step="0.01" name="capacidade_deposito"
                                value="{{ old('capacidade_deposito', $veiculo->capacidade_deposito) }}">
                            <small class="text-muted">Usada no cálculo de consumo (Completo/Parcial)</small>
                        </div>

                        <div class="col-md-3 mt-3">
                            <label>Eixos</label>
                            <input class="form-control" type="number" name="eixos"
                                value="{{ old('eixos', $veiculo->eixos) }}">
                        </div>

                        <div class="col-md-3 mt-3">
                            <label>Tacógrafo</label>
                            <select class="form-control" name="tacografo">
                                <option value="0" {{ old('tacografo', $veiculo->tacografo) == 0 ? 'selected' : '' }}>Não</option>
                                <option value="1" {{ old('tacografo', $veiculo->tacografo) == 1 ? 'selected' : '' }}>Sim</option>
                            </select>
                        </div>

                        <div class="col-md-3 mt-3">
                            <label>Capacidade Total</label>
                            <input class="form-control" type="number" step="0.01" name="capacidade_total"
                                value="{{ old('capacidade_total', $veiculo->capacidade_total) }}">
                        </div>

                        <div class="col-md-3 mt-3">
                            <label>Nº Compartimentos</label>
                            <input class="form-control" type="number" id="numero_compartimentos" name="numero_compartimentos"
                                value="{{ old('numero_compartimentos', $veiculo->numero_compartimentos) }}">
                        </div>

                        {{-- COMPARTIMENTOS --}}
                        <div class="col-12 mt-3">
                            <label>Capacidade por Compartimento</label>

                            <div id="compartimentos-wrapper">

                                @if(!empty($veiculo->capacidade_por_compartimento))
                                    @foreach(json_decode($veiculo->capacidade_por_compartimento, true) as $comp)
                                        <div class="row mb-2 compartimento-item">
                                            <div class="col-md-4">
                                                <input type="number" step="0.01" class="form-control"
                                                    name="compartimentos[]" value="{{ $comp }}">
                                            </div>
                                            <div class="col-md-2">
                                                <button type="button" class="btn btn-danger btn-remove">X</button>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif

                            </div>

                            <button type="button" class="btn btn-success mt-2" id="add-compartimento">
                                + Adicionar Compartimento
                            </button>
                        </div>

                        <div class="col-12 text-center mt-4">
                            <button class="btn btn-primary px-5">Atualizar Veículo</button>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>

<script>
    (function () {
        const wrapper = document.getElementById('compartimentos-wrapper');
        const numeroCompartimentosInput = document.getElementById('numero_compartimentos');
        const addCompartimentoBtn = document.getElementById('add-compartimento');

        function createCompartimentoRow(value = '') {
            const row = document.createElement('div');
            row.className = 'row mb-2 compartimento-item';
            row.innerHTML = `
                <div class="col-md-4">
                    <input type="number" step="0.01" class="form-control" name="compartimentos[]" value="${value}">
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-danger btn-remove">X</button>
                </div>
            `;
            return row;
        }

        function syncCompartimentosByCount() {
            const target = Math.max(0, parseInt(numeroCompartimentosInput.value || '0', 10) || 0);
            const currentRows = Array.from(wrapper.querySelectorAll('.compartimento-item'));
            const currentValues = currentRows.map((row) => row.querySelector('input[name="compartimentos[]"]').value || '');

            wrapper.innerHTML = '';
            for (let i = 0; i < target; i++) {
                wrapper.appendChild(createCompartimentoRow(currentValues[i] || ''));
            }
        }

        addCompartimentoBtn.addEventListener('click', function () {
            wrapper.appendChild(createCompartimentoRow());
            numeroCompartimentosInput.value = wrapper.querySelectorAll('.compartimento-item').length;
        });

        numeroCompartimentosInput.addEventListener('input', syncCompartimentosByCount);
        numeroCompartimentosInput.addEventListener('change', syncCompartimentosByCount);

        document.addEventListener('click', function (e) {
            if (e.target.classList.contains('btn-remove')) {
                e.target.closest('.compartimento-item').remove();
                numeroCompartimentosInput.value = wrapper.querySelectorAll('.compartimento-item').length;
            }
        });

        if (numeroCompartimentosInput.value) {
            syncCompartimentosByCount();
        }
    })();
</script>

@endsection