@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">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Veículo</h1>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mx-3 mt-3">
            <div class="card-header">
                <div class="row">
                    <div class="col-md-6">
                        <h4>Criar Veículo</h4>
                    </div>
                    <div class="col-md-6 text-right">
                        <a href="javascript:history.back()">
                            <button type="button" class="btn btn-primary d-print-none">Voltar</button>
                        </a>
                    </div>
                </div>
            </div>

            <div class="card-body">
                <form action="{{ route('cartrack_vehicles_store') }}" method="POST" class="pt-4">
                    @csrf

                    <div class="row m-0 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>ID Cartrack</label>
                            <input class="form-control" type="text" name="cartrack_vehicle_id" value="{{ old('cartrack_vehicle_id') }}">
                        </div>

                        <div class="col-md-3">
                            <label>Código Interno</label>
                            <input class="form-control" type="text" name="codigo_interno" value="{{ old('codigo_interno') }}">
                        </div> -->

                        <div class="col-md-3">
                            <label>Matrícula (Placa)</label>
                            <input class="form-control" type="text" name="matricula" value="{{ old('matricula') }}" required>
                        </div>

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

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

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

                        <div class="col-md-3 mt-3">
                            <label>Ano</label>
                            <input class="form-control" type="number" name="ano" value="{{ old('ano') }}" required>
                        </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">Rígido</option>
                                <option value="com_atrelado">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') == $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') == 'Active' ? 'selected' : '' }}>Ativo</option>
                                <option value="Inactive" {{ old('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') }}">
                        </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') }}">
                        </div>

                        <div class="col-md-3 mt-3">
                            <label>Proprietário</label>
                            <input class="form-control" type="text" name="proprietario" value="{{ old('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">Própria</option>
                                <option value="leasing">Leasing</option>
                                <option value="renting">Renting</option>
                            </select>
                        </div>

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

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

                        {{-- DADOS TÉCNICOS --}}
                        <div class="col-md-3 mt-3">
                            <label>Tara</label>
                            <input class="form-control" type="number" step="0.01" name="tara" value="{{ old('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') }}">
                        </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') }}">
                        </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') }}">
                            <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') }}">
                        </div>

                        <div class="col-md-3 mt-3">
                            <label>Tacógrafo</label>
                            <select class="form-control" name="tacografo">
                                <option value="0">Não</option>
                                <option value="1">Sim</option>
                            </select>
                        </div>

                        {{-- CISTERNAS --}}
                        <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') }}">
                        </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') }}">
                        </div>

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

                            <div id="compartimentos-wrapper">
                                @foreach(old('compartimentos', []) 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[]" placeholder="Capacidade (L)" value="{{ $comp }}">
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-danger btn-remove">X</button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

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

                        <div class="col-md-3 mt-3">
                            <label>Classificação ADR</label>
                            <input class="form-control" type="text" name="classificacao_adr" value="{{ old('classificacao_adr') }}">
                        </div>

                        <div class="col-12 text-center mt-4">
                            <button class="btn btn-primary px-5">Salvar 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[]" placeholder="Capacidade (L)" 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