@php
    $tiposDocumento = [
        'DUA/Livrete',
        'Seguro',
        'Inspeção Periódica',
        'Certificado ADR da Viatura',
        'Documentos da Cisterna',
        'Tacógrafo',
        'Carta de Condução',
        'CAM',
        'Cartão de Condutor',
        'ADR',
        'Ficha Médica',
        'Certificados de Formação',
    ];

    $estadosDocumento = ['Válido', 'Vencido', 'A vencer'];
    $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">Documentos de {{ $titulo }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <div class="mb-4">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="mb-0">Anexos cadastrados</h6>
                        <span class="badge badge-secondary js-documentos-total">{{ $documentos->count() }} documento(s)</span>
                    </div>

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

                    <div class="table-responsive">
                        <table class="table table-sm table-striped table-bordered mb-0">
                            <thead>
                                <tr>
                                    <th>Tipo</th>
                                    <th>Número</th>
                                    <th>Emissão</th>
                                    <th>Validade</th>
                                    <th>Estado</th>
                                    <th>Observações</th>
                                    <th>Anexo</th>
                                    @if($podeAnexar)
                                        <th>Ações</th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody class="js-documentos-tbody">
                                @forelse($documentos as $documento)
                                    <tr data-documento-id="{{ $documento->id }}"
                                        data-documento="{{json_encode([
                                            'id' => $documento->id,
                                            'tipo' => $documento->tipo,
                                            'numero' => $documento->numero,
                                            'entidade_emissora' => $documento->entidade_emissora,
                                            'data_emissao' => optional($documento->data_emissao)->format('Y-m-d'),
                                            'data_emissao_formatada' => optional($documento->data_emissao)->format('d/m/Y') ?: '-',
                                            'data_validade' => optional($documento->data_validade)->format('Y-m-d'),
                                            'data_validade_formatada' => optional($documento->data_validade)->format('d/m/Y') ?: '-',
                                            'dias_alerta_vencimento' => collect($documento->dias_alerta_vencimento ?? [])->map(fn ($dia) => (int) $dia)->values()->all(),
                                            'estado' => $documento->estado,
                                            'estado_valor' => $documento->estado,
                                            'observacoes' => $documento->observacoes,
                                            'observacoes_valor' => $documento->observacoes,
                                            'anexo_url' => $documento->anexo ? asset('storage/' . $documento->anexo) : null,
                                            'esta_vencido' => (bool) $documento->esta_vencido,
                                            'dias_para_vencer' => $documento->dias_para_vencer,
                                        ]) }}">
                                        <td>{{ $documento->tipo }}</td>
                                        <td>{{ $documento->numero ?: '-' }}</td>
                                        <td>{{ optional($documento->data_emissao)->format('d/m/Y') ?: '-' }}</td>
                                        <td>
                                            {{ optional($documento->data_validade)->format('d/m/Y') ?: '-' }}
                                            @if($documento->esta_vencido)
                                                <span class="badge badge-danger ml-1">Vencido</span>
                                            @elseif(!is_null($documento->dias_para_vencer) && $documento->dias_para_vencer <= 30)
                                                <span class="badge badge-warning ml-1">A vencer</span>
                                            @endif
                                        </td>
                                        <td>{{ $documento->estado ?: '-' }}</td>
                                        <td>{{ $documento->observacoes ?: '-' }}</td>
                                        <td>
                                            @if($documento->anexo)
                                                <a href="{{ asset('storage/' . $documento->anexo) }}" target="_blank" class="btn btn-xs btn-outline-primary">
                                                    Ver arquivo
                                                </a>
                                            @else
                                                -
                                            @endif
                                        </td>
                                        @if($podeAnexar)
                                            <td class="text-nowrap">
                                                <button type="button" class="btn btn-danger btn-xs js-excluir-documento" data-documento-id="{{ $documento->id }}">Excluir</button>
                                            </td>
                                        @endif
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="{{ $podeAnexar ? 8 : 7 }}" class="text-center text-muted js-documentos-vazio">Nenhum documento cadastrado.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                @if($podeAnexar)
                    <form method="POST" action="{{ route('cartrack_documentos_store') }}" enctype="multipart/form-data" class="js-documento-form">
                        @csrf
                        <input type="hidden" name="documentavel_type" value="{{ $documentavelType }}">
                        <input type="hidden" name="documentavel_id" value="{{ $documentavelId }}">
                        <input type="hidden" name="documento_modal_id" value="{{ $modalId }}">
                        <input type="hidden" name="documento_id" class="js-documento-id" value="">

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

                        <div class="row">
                            <div class="col-md-4 form-group">
                                <label>Tipo</label>
                                <select name="tipo" class="form-control" required>
                                    <option value="">Selecione o tipo de documento</option>
                                    @foreach($tiposDocumento as $tipoDocumento)
                                        <option value="{{ $tipoDocumento }}">{{ $tipoDocumento }}</option>
                                    @endforeach
                                </select>   
                            </div>
                            <div class="col-md-4 form-group">
                                <label>Número</label>
                                <input type="text" name="numero" class="form-control" value="">
                            </div>
                            <div class="col-md-4 form-group">
                                <label>Entidade emissora</label>
                                <input type="text" name="entidade_emissora" class="form-control" value="">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-3 form-group">
                                <label>Data de emissão</label>
                                <input type="date" name="data_emissao" class="form-control" value="">
                            </div>
                            <div class="col-md-3 form-group">
                                <label>Data de validade</label>
                                <input type="date" name="data_validade" class="form-control" value="">
                            </div>
                            <div class="col-md-3 form-group">
                                <label>Estado</label>
                                <select name="estado" class="form-control">
                                    <option value="">Selecione o estado do documento</option>
                                    @foreach($estadosDocumento as $estadoDocumento)
                                        <option value="{{ $estadoDocumento }}">{{ $estadoDocumento }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3 form-group">
                                <label>Anexo <small class="text-muted js-anexo-help">(opcional no cadastro)</small></label>
                                <input type="file" name="anexo" class="form-control-file" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx">
                            </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="form-group mb-0">
                            <label>Observações</label>
                            <textarea name="observacoes" class="form-control" rows="3"></textarea>
                        </div>

                        <div class="mt-3 text-right">
                            <button type="submit" class="btn btn-primary js-salvar-documento">Salvar documento</button>
                        </div>
                    </form>
                @else
                    <div class="alert alert-warning mb-0">
                        Você pode visualizar os documentos, mas não tem permissão para anexar novos registros.
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        var modal = $('#{{ $modalId }}');
        var form = modal.find('.js-documento-form');
        var tbody = modal.find('.js-documentos-tbody');
        var totalBadge = modal.find('.js-documentos-total');
        var errorBox = modal.find('.js-documentos-errors');
        var successBox = modal.find('.js-documentos-success');
        var formTitle = modal.find('.js-documento-form-title');
        var cancelButton = modal.find('.js-cancelar-edicao');
        var submitButton = modal.find('.js-salvar-documento');
        var documentoIdInput = modal.find('.js-documento-id');
        var openerButton = $('[data-target="#{{ $modalId }}"]');
        var emptyColspan = {{ $podeAnexar ? 8 : 7 }};

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

        function getStatusBadge(documento) {
            if (documento.esta_vencido) {
                return ' <span class="badge badge-danger ml-1">Vencido</span>';
            }

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

            return '';
        }

        function getAnexoHtml(documento) {
            if (!documento.anexo_url) {
                return '-';
            }

            return '<a href="' + documento.anexo_url + '" target="_blank" class="btn btn-xs btn-outline-primary">Ver arquivo</a>';
        }

        function getActionsHtml(documento) {
            @if($podeAnexar)
                return '<td class="text-nowrap">'
                    + '<button type="button" class="btn btn-warning btn-xs js-editar-documento" data-documento-id="' + documento.id + '">Editar</button> '
                    + '<button type="button" class="btn btn-danger btn-xs js-excluir-documento" data-documento-id="' + documento.id + '">Excluir</button>'
                    + '</td>';
            @else
                return '';
            @endif
        }

        function rowHtml(documento) {
            var jsonDocumento = encodeURIComponent(JSON.stringify(documento));

            return '<tr data-documento-id="' + documento.id + '" data-documento="' + jsonDocumento + '">'
                + '<td>' + escapeHtml(documento.tipo) + '</td>'
                + '<td>' + escapeHtml(documento.numero || '-') + '</td>'
                + '<td>' + escapeHtml(documento.data_emissao_formatada || '-') + '</td>'
                + '<td>' + escapeHtml(documento.data_validade_formatada || '-') + getStatusBadge(documento) + '</td>'
                + '<td>' + escapeHtml(documento.estado || '-') + '</td>'
                + '<td>' + escapeHtml(documento.observacoes || '-') + '</td>'
                + '<td>' + getAnexoHtml(documento) + '</td>'
                + getActionsHtml(documento)
                + '</tr>';
        }

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

        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 hideMessages() {
            errorBox.addClass('d-none').empty();
            successBox.addClass('d-none').empty();
        }

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

            form[0].reset();
            documentoIdInput.val('');
            formTitle.text('Novo documento');
            submitButton.text('Salvar documento');
            cancelButton.addClass('d-none');
        }

        function fillForm(documento) {
            form.find('[name="tipo"]').val(documento.tipo || '');
            form.find('[name="numero"]').val(documento.numero === '-' ? '' : (documento.numero || ''));
            form.find('[name="entidade_emissora"]').val(documento.entidade_emissora || '');
            form.find('[name="data_emissao"]').val(documento.data_emissao || '');
            form.find('[name="data_validade"]').val(documento.data_validade || '');
            form.find('[name="dias_alerta_vencimento[]"]').val((documento.dias_alerta_vencimento || []).map(String));
            form.find('[name="estado"]').val(documento.estado_valor || documento.estado || '');
            form.find('[name="observacoes"]').val(documento.observacoes_valor || documento.observacoes || '');
            documentoIdInput.val(documento.id);
            formTitle.text('Editar documento');
            submitButton.text('Salvar alterações');
            cancelButton.removeClass('d-none');
        }

        function parseDocumentoFromRow(row) {
            // O .data('documento') do jQuery já faz o JSON.parse internamente
            var documento = row.data('documento');
            
            if (!documento) {
                console.error("Atributo data-documento não encontrado ou inválido na linha.");
                return null;
            }
            
            // Caso o jQuery retorne como string por algum motivo, forçamos o parse
            if (typeof documento === 'string') {
                try {
                    return JSON.parse(documento);
                } catch (e) {
                    console.error("Erro ao processar JSON:", e);
                    return null;
                }
            }

            return documento;
        }

        function syncRow(documento) {
            tbody.find('.js-documentos-vazio').closest('tr').remove();

            var existingRow = tbody.find('tr[data-documento-id="' + documento.id + '"]');
            var html = rowHtml(documento);

            if (existingRow.length) {
                existingRow.replaceWith(html);
            } else {
                tbody.prepend(html);
            }
        }

        function ensureEmptyState() {
            if (tbody.find('tr[data-documento-id]').length === 0) {
                tbody.html('<tr><td colspan="' + emptyColspan + '" class="text-center text-muted js-documentos-vazio">Nenhum documento cadastrado.</td></tr>');
            }
        }

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

        modal.on('click', '.js-editar-documento', function () {
            hideMessages();
            var row = $(this).closest('tr');

            var documento = parseDocumentoFromRow(row);

            if (!documento) {
                showError('Não foi possível carregar os dados do documento para edição.');
                return;
            }

            fillForm(documento);
        });

        modal.on('click', '.js-excluir-documento', function () {
            hideMessages();

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

            var documentoId = $(this).data('documento-id');

            $.ajax({
                url: '{{ route('cartrack_documentos_destroy', ['documento' => '__ID__']) }}'.replace('__ID__', documentoId),
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    _method: 'DELETE'
                },
                success: function (response) {
                    tbody.find('tr[data-documento-id="' + response.documento_id + '"]').remove();
                    ensureEmptyState();
                    updateCount(response.total_documentos || 0);
                    resetForm();
                },
                error: function (xhr) {
                    showError(xhr.responseJSON?.message || 'Erro ao excluir documento.');
                }
            });
        });

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

            var documentoId = documentoIdInput.val();
            var isEdit = !!documentoId;
            var formData = new FormData(form[0]);
            var url = isEdit
                ? '{{ route('cartrack_documentos_update', ['documento' => '__ID__']) }}'.replace('__ID__', documentoId)
                : '{{ route('cartrack_documentos_store') }}';

            if (isEdit) {
                formData.append('_method', 'PUT');
            }

            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    syncRow(response.documento);
                    updateCount(response.total_documentos || tbody.find('tr[data-documento-id]').length);
                    resetForm();

                    if (response.close_modal) {
                        modal.modal('hide');
                    }
                },
                error: function (xhr) {
                    if (xhr.status === 422 && xhr.responseJSON?.errors) {
                        showError(Object.values(xhr.responseJSON.errors).flat());
                        return;
                    }

                    showError(xhr.responseJSON?.message || 'Erro ao salvar documento.');
                }
            });
        });

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