@php
    $tiposInspecao = [
        'IPO',
        'Inspeção ADR',
        'Inspeções da Cisterna',
        'Verificação/Calibração do Tacógrafo',
        'Manutenção Preventiva',
        'Checklist Diária',
        'Controlo de Equipamentos de Emergência',
    ];

    $resultados = ['Aprovado', 'Aprovado com ressalvas', 'Reprovado', 'Pendente'];
    $unidadesPeriodicidade = ['dias' => 'Dias', 'semanas' => 'Semanas', 'meses' => 'Meses', 'anos' => 'Anos'];
    $opcoesDiasAlerta = [0, 7, 15, 30, 45, 60, 90, 120];
@endphp

<div class="modal fade" id="{{ $modalId }}" tabindex="-1" role="dialog" aria-labelledby="{{ $modalId }}Label" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="{{ $modalId }}Label">Inspeções e Vencimentos de {{ $titulo }}</h5>
                <button id="btnFecharModalInspesao" type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                @if($inspecoes->count() > 0)
                
                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="mb-0">Histórico registado</h6>
                            <span class="badge badge-secondary js-inspecoes-total">{{ $inspecoes->count() }} registo(s)</span>
                        </div>

                        <div class="alert alert-danger d-none js-inspecoes-errors"></div>
                        <div class="alert alert-success d-none js-inspecoes-success"></div>

                        <div class="table-responsive">
                            <table class="table table-sm table-striped table-bordered mb-0">
                                <thead>
                                    <tr>
                                        <th>Tipo</th>
                                        <th>Periodicidade</th>
                                        <th>Última</th>
                                        <th>Próxima</th>
                                        <th>Resultado</th>
                                        <th>Entidade</th>
                                        <th>Relatório</th>
                                        <th>Responsável</th>
                                        <th>Anexos</th>
                                        @if($podeGerir)
                                            <th>Ações</th>
                                        @endif
                                    </tr>
                                </thead>
                                <tbody class="js-inspecoes-tbody">
                                    @forelse($inspecoes as $inspecao)
                                        <tr data-inspecao-id="{{ $inspecao->id }}"
                                            data-inspecao="{{ json_encode([
                                                'id' => $inspecao->id,
                                                'tipo' => $inspecao->tipo,
                                                'periodicidade_valor' => $inspecao->periodicidade_valor,
                                                'periodicidade_unidade' => $inspecao->periodicidade_unidade,
                                                'periodicidade_descricao' => $inspecao->periodicidade_descricao,
                                                'data_ultima' => optional($inspecao->data_ultima)->format('Y-m-d'),
                                                'data_ultima_formatada' => optional($inspecao->data_ultima)->format('d/m/Y') ?: '-',
                                                'data_proxima' => optional($inspecao->data_proxima)->format('Y-m-d'),
                                                'data_proxima_formatada' => optional($inspecao->data_proxima)->format('d/m/Y') ?: '-',
                                                'dias_alerta_vencimento' => collect($inspecao->dias_alerta_vencimento ?? [])->map(fn ($dia) => (int) $dia)->values()->all(),
                                                'resultado' => $inspecao->resultado ?: '',
                                                'entidade_executante' => $inspecao->entidade_executante ?: '',
                                                'numero_relatorio' => $inspecao->numero_relatorio ?: '',
                                                'nao_conformidades' => $inspecao->nao_conformidades ?: '',
                                                'responsavel' => $inspecao->responsavel ?: '',
                                                'observacoes' => $inspecao->observacoes ?: '',
                                                'esta_vencida' => (bool) $inspecao->esta_vencida,
                                                'dias_para_vencer' => $inspecao->dias_para_vencer,
                                                'inspecionavel_valor' => $associationValue ?? null,
                                                'anexos' => $inspecao->anexos->map(fn ($anexo) => [
                                                    'nome' => $anexo->nome_original,
                                                    'url' => asset('storage/' . $anexo->ficheiro),
                                                ])->values()->all(),
                                            ]) }}">
                                            <td>
                                                <strong>{{ $inspecao->tipo }}</strong>
                                                @if($inspecao->observacoes)
                                                    <div><small class="text-muted">{{ $inspecao->observacoes }}</small></div>
                                                @endif
                                            </td>
                                            <td>{{ $inspecao->periodicidade_descricao }}</td>
                                            <td>{{ optional($inspecao->data_ultima)->format('d/m/Y') ?: '-' }}</td>
                                            <td>
                                                {{ optional($inspecao->data_proxima)->format('d/m/Y') ?: '-' }}
                                                @if($inspecao->esta_vencida)
                                                    <span class="badge badge-danger ml-1">Vencida</span>
                                                @elseif(!is_null($inspecao->dias_para_vencer) && $inspecao->dias_para_vencer <= 30)
                                                    <span class="badge badge-warning ml-1">A vencer</span>
                                                @endif
                                            </td>
                                            <td>
                                                {{ $inspecao->resultado ?: '-' }}
                                                @if($inspecao->nao_conformidades)
                                                    <div><small class="text-danger">NC: {{ $inspecao->nao_conformidades }}</small></div>
                                                @endif
                                            </td>
                                            <td>{{ $inspecao->entidade_executante ?: '-' }}</td>
                                            <td>{{ $inspecao->numero_relatorio ?: '-' }}</td>
                                            <td>{{ $inspecao->responsavel ?: '-' }}</td>
                                            <td>
                                                @if($inspecao->anexos->count())
                                                    @foreach($inspecao->anexos as $anexo)
                                                        <div>
                                                            <a href="{{ asset('storage/' . $anexo->ficheiro) }}" target="_blank">{{ $anexo->nome_original }}</a>
                                                        </div>
                                                    @endforeach
                                                @else
                                                    -
                                                @endif
                                            </td>
                                            @if($podeGerir)
                                                <td class="text-nowrap">
                                                    <button type="button" class="btn btn-warning btn-xs js-editar-inspecao" data-inspecao-id="{{ $inspecao->id }}">Editar</button>
                                                    <button type="button" class="btn btn-danger btn-xs js-excluir-inspecao" data-inspecao-id="{{ $inspecao->id }}">Excluir</button>
                                                </td>
                                            @endif
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="{{ $podeGerir ? 10 : 9 }}" class="text-center text-muted js-inspecoes-vazio">Nenhum registo cadastrado.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif

                @if($podeGerir)
                    <form method="POST" action="{{ route('cartrack_inspecoes_controles_store') }}" enctype="multipart/form-data" class="js-inspecao-form">
                        @csrf
                        <input type="hidden" name="inspecao_id" class="js-inspecao-id" value="">

                        @if(!empty($associationValue))
                            <input type="hidden" name="inspecionavel" value="{{ $associationValue }}">
                        @endif

                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="mb-0 js-inspecao-form-title">Novo registo</h6>
                            <button type="button" class="btn btn-secondary btn-sm d-none js-cancelar-edicao-inspecao">Cancelar edição</button>
                        </div>

                        @if(empty($associationValue))
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label>Ativo associado</label>
                                    <select name="inspecionavel" class="form-control" required>
                                        <option value="">Selecione o ativo</option>
                                        @if(!empty($opcoesAssociacao['drivers']))
                                            <optgroup label="Motoristas">
                                                @foreach($opcoesAssociacao['drivers'] as $opcao)
                                                    <option value="{{ $opcao['value'] }}">{{ $opcao['label'] }}</option>
                                                @endforeach
                                            </optgroup>
                                        @endif
                                        @if(!empty($opcoesAssociacao['veiculos']))
                                            <optgroup label="Veículos">
                                                @foreach($opcoesAssociacao['veiculos'] as $opcao)
                                                    <option value="{{ $opcao['value'] }}">{{ $opcao['label'] }}</option>
                                                @endforeach
                                            </optgroup>
                                        @endif
                                        @if(!empty($opcoesAssociacao['cisternas']))
                                            <optgroup label="Cisternas">
                                                @foreach($opcoesAssociacao['cisternas'] as $opcao)
                                                    <option value="{{ $opcao['value'] }}">{{ $opcao['label'] }}</option>
                                                @endforeach
                                            </optgroup>
                                        @endif
                                    </select>
                                </div>
                            </div>
                        @endif

                        <div class="row">
                            <div class="col-md-4 form-group">
                                <label>Tipo de inspeção</label>
                                <select name="tipo" class="form-control" required>
                                    <option value="">Selecione o tipo</option>
                                    @foreach($tiposInspecao as $tipoInspecao)
                                        <option value="{{ $tipoInspecao }}">{{ $tipoInspecao }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2 form-group">
                                <label>Periodicidade</label>
                                <input type="number" min="1" name="periodicidade_valor" class="form-control" value="">
                            </div>
                            <div class="col-md-2 form-group">
                                <label>Unidade</label>
                                <select name="periodicidade_unidade" class="form-control">
                                    <option value="">Selecione</option>
                                    @foreach($unidadesPeriodicidade as $valor => $label)
                                        <option value="{{ $valor }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2 form-group">
                                <label>Data da última</label>
                                <input type="date" name="data_ultima" class="form-control" value="">
                            </div>
                            <div class="col-md-2 form-group">
                                <label>Próxima data</label>
                                <input type="date" name="data_proxima" class="form-control" value="">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-3 form-group">
                                <label>Resultado</label>
                                <select name="resultado" class="form-control">
                                    <option value="">Selecione</option>
                                    @foreach($resultados as $resultado)
                                        <option value="{{ $resultado }}">{{ $resultado }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3 form-group">
                                <label>Entidade executante</label>
                                <input type="text" name="entidade_executante" class="form-control" value="">
                            </div>
                            <div class="col-md-3 form-group">
                                <label>Nº do relatório</label>
                                <input type="text" name="numero_relatorio" class="form-control" value="">
                            </div>
                            <div class="col-md-3 form-group">
                                <label>Responsável</label>
                                <input type="text" name="responsavel" class="form-control" value="">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label>Dias antes de vencer</label>
                                <select name="dias_alerta_vencimento[]" class="form-control" multiple size="4">
                                    @foreach($opcoesDiasAlerta as $diaAlerta)
                                        <option value="{{ $diaAlerta }}">{{ $diaAlerta }} dia(s)</option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Use Ctrl para selecionar múltiplos dias.</small>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 form-group">
                                <label>Não conformidades</label>
                                <textarea name="nao_conformidades" class="form-control" rows="3"></textarea>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Observações</label>
                                <textarea name="observacoes" class="form-control" rows="3"></textarea>
                            </div>
                        </div>

                        <div class="form-group mb-0">
                            <label>Anexos <small class="text-muted js-anexos-help">(novos ficheiros serão adicionados aos existentes)</small></label>
                            <input type="file" name="anexos[]" class="form-control-file" multiple accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx">
                        </div>

                        <div class="mt-3 text-right">
                            <button type="submit" class="btn btn-primary js-salvar-inspecao">Salvar registo</button>
                        </div>
                    </form>
                @else
                    <div class="alert alert-warning mb-0">
                        Você pode visualizar o histórico, mas não tem permissão para criar novos registos.
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        var modal = $('#{{ $modalId }}');
        var form = modal.find('.js-inspecao-form');
        var tbody = modal.find('.js-inspecoes-tbody');
        var totalBadge = modal.find('.js-inspecoes-total');
        var errorBox = modal.find('.js-inspecoes-errors');
        var successBox = modal.find('.js-inspecoes-success');
        var openerButton = $('[data-target="#{{ $modalId }}"]');
        var formTitle = modal.find('.js-inspecao-form-title');
        var cancelButton = modal.find('.js-cancelar-edicao-inspecao');
        var submitButton = modal.find('.js-salvar-inspecao');
        var inspecaoIdInput = modal.find('.js-inspecao-id');
        var emptyColspan = {{ $podeGerir ? 10 : 9 }};

        function escapeHtml(value) {
            return $('<div>').text(value || '').html();
        }

        function hideMessages() {
            errorBox.addClass('d-none').empty();
            successBox.addClass('d-none').empty();
        }

        function updateCount(total) {
            totalBadge.text(total + ' registo(s)');
            openerButton.find('span').text(total);
        }

        function renderPrazoBadge(inspecao) {
            if (inspecao.esta_vencida) {
                return ' <span class="badge badge-danger ml-1">Vencida</span>';
            }

            if (inspecao.dias_para_vencer !== null && inspecao.dias_para_vencer <= 30) {
                return ' <span class="badge badge-warning ml-1">A vencer</span>';
            }

            return '';
        }

        function renderAnexos(anexos) {
            if (!anexos || !anexos.length) {
                return '-';
            }

            return anexos.map(function (anexo) {
                return '<div><a href="' + escapeHtml(anexo.url) + '" target="_blank">' + escapeHtml(anexo.nome) + '</a></div>';
            }).join('');
        }

        function rowHtml(inspecao) {
            var payload = encodeURIComponent(JSON.stringify(inspecao));

            return '<tr data-inspecao-id="' + inspecao.id + '" data-inspecao="' + payload + '">'
                + '<td><strong>' + escapeHtml(inspecao.tipo) + '</strong>'
                + (inspecao.observacoes && inspecao.observacoes !== '-' ? '<div><small class="text-muted">' + escapeHtml(inspecao.observacoes) + '</small></div>' : '')
                + '</td>'
                + '<td>' + escapeHtml(inspecao.periodicidade_descricao || '-') + '</td>'
                + '<td>' + escapeHtml(inspecao.data_ultima_formatada || '-') + '</td>'
                + '<td>' + escapeHtml(inspecao.data_proxima_formatada || '-') + renderPrazoBadge(inspecao) + '</td>'
                + '<td>' + escapeHtml(inspecao.resultado || '-')
                + (inspecao.nao_conformidades && inspecao.nao_conformidades !== '-' ? '<div><small class="text-danger">NC: ' + escapeHtml(inspecao.nao_conformidades) + '</small></div>' : '')
                + '</td>'
                + '<td>' + escapeHtml(inspecao.entidade_executante || '-') + '</td>'
                + '<td>' + escapeHtml(inspecao.numero_relatorio || '-') + '</td>'
                + '<td>' + escapeHtml(inspecao.responsavel || '-') + '</td>'
                + '<td>' + renderAnexos(inspecao.anexos || []) + '</td>'
                + @if($podeGerir)
                                        '<td class="text-nowrap"><button type="button" class="btn btn-warning btn-xs js-editar-inspecao" data-inspecao-id="' + inspecao.id + '">Editar</button> <button type="button" class="btn btn-danger btn-xs js-excluir-inspecao" data-inspecao-id="' + inspecao.id + '">Excluir</button></td>'
                  @else
                    ''
                  @endif
                + '</tr>';
        }

        function showError(messages) {
            var html = '';

            if (Array.isArray(messages)) {
                html = '<ul class="mb-0 pl-3">' + messages.map(function (message) {
                    return '<li>' + escapeHtml(message) + '</li>';
                }).join('') + '</ul>';
            } else {
                html = escapeHtml(messages);
            }

            errorBox.html(html).removeClass('d-none');
        }

        function resetForm() {
            if (!form.length) {
                return;
            }

            form[0].reset();
            inspecaoIdInput.val('');
            formTitle.text('Novo registo');
            submitButton.text('Salvar registo');
            cancelButton.addClass('d-none');
            @if(!empty($associationValue))
                form.find('[name="inspecionavel"]').val('{{ $associationValue }}');
            @endif
        }

        function parseInspecaoFromRow(row) {
            var inspecao = row.data('inspecao');

            if (!inspecao) {
                return null;
            }

            if (typeof inspecao === 'string') {
                try {
                    return JSON.parse(decodeURIComponent(inspecao));
                } catch (error) {
                    return JSON.parse(inspecao);
                }
            }

            return inspecao;
        }

        function fillForm(inspecao) {
            if (!form.length || !inspecao) {
                return;
            }

            form.find('[name="inspecionavel"]').val(inspecao.inspecionavel_valor || form.find('[name="inspecionavel"]').val() || '');
            form.find('[name="tipo"]').val(inspecao.tipo || '');
            form.find('[name="periodicidade_valor"]').val(inspecao.periodicidade_valor || '');
            form.find('[name="periodicidade_unidade"]').val(inspecao.periodicidade_unidade || '');
            form.find('[name="data_ultima"]').val(inspecao.data_ultima || '');
            form.find('[name="data_proxima"]').val(inspecao.data_proxima || '');
            form.find('[name="dias_alerta_vencimento[]"]').val((inspecao.dias_alerta_vencimento || []).map(String));
            form.find('[name="resultado"]').val(inspecao.resultado === '-' ? '' : (inspecao.resultado || ''));
            form.find('[name="entidade_executante"]').val(inspecao.entidade_executante === '-' ? '' : (inspecao.entidade_executante || ''));
            form.find('[name="numero_relatorio"]').val(inspecao.numero_relatorio === '-' ? '' : (inspecao.numero_relatorio || ''));
            form.find('[name="responsavel"]').val(inspecao.responsavel === '-' ? '' : (inspecao.responsavel || ''));
            form.find('[name="nao_conformidades"]').val(inspecao.nao_conformidades === '-' ? '' : (inspecao.nao_conformidades || ''));
            form.find('[name="observacoes"]').val(inspecao.observacoes === '-' ? '' : (inspecao.observacoes || ''));
            inspecaoIdInput.val(inspecao.id);
            formTitle.text('Editar registo');
            submitButton.text('Salvar alterações');
            cancelButton.removeClass('d-none');
        }

        form.on('submit', function (event) {
            event.preventDefault();
            hideMessages();

            var formData = new FormData(this);
            var inspecaoId = inspecaoIdInput.val();
            var url = inspecaoId
                ? '{{ route('cartrack_inspecoes_controles_update', ['inspecaoControle' => '__ID__']) }}'.replace('__ID__', inspecaoId)
                : '{{ route('cartrack_inspecoes_controles_store') }}';

            $.ajax({
                url: url,
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                },
                success: function (response) {
                    tbody.find('.js-inspecoes-vazio').closest('tr').remove();
                    var existingRow = tbody.find('tr[data-inspecao-id="' + response.inspecao.id + '"]');

                    if (existingRow.length) {
                        existingRow.replaceWith(rowHtml(response.inspecao));
                    } else {
                        tbody.prepend(rowHtml(response.inspecao));
                    }

                    updateCount(response.total_inspecoes || tbody.find('tr[data-inspecao-id]').length);
                    successBox.text(response.message || 'Registo salvo com sucesso.').removeClass('d-none');
                    resetForm();
                    $('#btnFecharModalInspesao').click();
                    //atualiza a página
                    location.reload();
                },
                error: function (xhr) {
                    if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                        var messages = Object.values(xhr.responseJSON.errors).flat();
                        showError(messages);
                        return;
                    }

                    showError('Não foi possível salvar o registo.');
                }
            });
        });

        tbody.on('click', '.js-editar-inspecao', function () {
            hideMessages();

            var row = $(this).closest('tr');
            var inspecao = parseInspecaoFromRow(row);

            fillForm(inspecao);
        });

        cancelButton.on('click', function () {
            hideMessages();
            resetForm();
        });

        tbody.on('click', '.js-excluir-inspecao', function () {
            var button = $(this);
            var inspecaoId = button.data('inspecao-id');

            if (!confirm('Deseja realmente excluir este registo?')) {
                return;
            }

            hideMessages();

            $.ajax({
                url: '{{ route('cartrack_inspecoes_controles_destroy', ['inspecaoControle' => '__ID__']) }}'.replace('__ID__', inspecaoId),
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    _method: 'DELETE'
                },
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                },
                success: function (response) {
                    tbody.find('tr[data-inspecao-id="' + response.inspecao_id + '"]').remove();

                    if (!tbody.find('tr[data-inspecao-id]').length) {
                        tbody.html('<tr><td colspan="' + emptyColspan + '" class="text-center text-muted js-inspecoes-vazio">Nenhum registo cadastrado.</td></tr>');
                    }

                    updateCount(response.total_inspecoes || 0);
                    successBox.text(response.message || 'Registo removido com sucesso.').removeClass('d-none');
                },
                error: function () {
                    showError('Não foi possível excluir o registo.');
                }
            });
        });

        modal.on('hidden.bs.modal', function () {
            hideMessages();
            resetForm();
            
        });
    });
</script>