@php
    $cisterna = $cisterna ?? null;
    $compartimentos = old('compartimentos', $cisterna?->capacidade_por_compartimento ?? []);

    if (empty($compartimentos)) {
        $compartimentos = [''];
    }
@endphp

<div class="row p-3">
    @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

    <div class="col-md-4">
        <label>Matrícula</label>
        <input class="form-control" type="text" name="matricula" maxlength="10"
            value="{{ old('matricula', $cisterna?->matricula) }}">
    </div>

    <div class="col-md-8">
        <label>Descrição</label>
        <input class="form-control" type="text" name="descricao" maxlength="100"
            value="{{ old('descricao', $cisterna?->descricao) }}">
    </div>

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

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

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

        <div id="compartimentos-wrapper">
            @foreach($compartimentos as $compartimento)
                <div class="row mb-2 compartimento-item">
                    <div class="col-md-4">
                        <input type="number" min="0" step="0.01" class="form-control" name="compartimentos[]"
                            value="{{ $compartimento }}" placeholder="Capacidade do compartimento">
                    </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-12 text-center mt-4">
        <button class="btn btn-primary px-5">{{ $submitLabel }}</button>
    </div>
</div>

<script>
document.getElementById('add-compartimento').addEventListener('click', function () {
    var wrapper = document.getElementById('compartimentos-wrapper');

    var html = `
        <div class="row mb-2 compartimento-item">
            <div class="col-md-4">
                <input type="number" min="0" step="0.01" class="form-control" name="compartimentos[]" placeholder="Capacidade do compartimento">
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-danger btn-remove">X</button>
            </div>
        </div>
    `;

    wrapper.insertAdjacentHTML('beforeend', html);
});

document.addEventListener('click', function (event) {
    if (!event.target.classList.contains('btn-remove')) {
        return;
    }

    var item = event.target.closest('.compartimento-item');
    var wrapper = document.getElementById('compartimentos-wrapper');

    if (wrapper.querySelectorAll('.compartimento-item').length === 1) {
        item.querySelector('input').value = '';
        return;
    }

    item.remove();
});
</script>