@extends('layouts.app')

@section('title', 'Editar Conta a Receber')

@push('styles-custom')
    <link href="{{ asset('vendors/select2/css/select2.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
    <style>
        /* Estilos aprimorados para o Select2 */
        .select2-container {
            width: 100% !important;
        }

        /* Container principal melhorado */
        .select2-container--default .select2-selection--single {
            height: 38px !important;
            border: 1px solid #ced4da !important;
            border-radius: 0.25rem !important;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
            display: flex !important;
            align-items: center !important;
        }

        /* Melhor aparência no hover */
        .select2-container--default .select2-selection--single:hover {
            border-color: #a9b1b8 !important;
        }

        /* Melhor aparência no foco */
        .select2-container--default.select2-container--focus .select2-selection--single,
        .select2-container--default.select2-container--open .select2-selection--single {
            border-color: #80bdff !important;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
        }

        /* Texto dentro da seleção - AJUSTE CRÍTICO para alinhamento*/
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 1.5 !important;
            padding-left: 12px !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            padding-right: 30px !important; /* Espaço para a seta */
            height: auto !important;
            color: #495057 !important;
            text-overflow: ellipsis !important;
            overflow: hidden !important;
            display: flex !important;
            align-items: center !important;
            min-height: 36px !important;
        }

        /* Ajuste da seta */
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px !important;
            top: 1px !important;
            right: 5px !important;
        }

        /* Estilo do dropdown */
        .select2-dropdown {
            border-color: #80bdff !important;
            border-radius: 0 0 0.25rem 0.25rem !important;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1) !important;
            z-index: 1060 !important; /* Aparecer acima de outros elementos */
        }

        /* Opções no dropdown */
        .select2-results__option {
            padding: 8px 12px !important;
            font-size: 0.875rem !important;
        }

        /* Opção em hover */
        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: #007bff !important;
            color: white !important;
        }

        /* Ajuste para o placeholder */
        .select2-container--default .select2-selection--single .select2-selection__placeholder {
            color: #6c757d !important;
        }

        /* Ajuste para campo de busca no dropdown */
        .select2-search--dropdown .select2-search__field {
            padding: 8px !important;
            border-radius: 4px !important;
        }
    </style>
@endpush

@section('content')
<div class="content pt-3">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-3">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('contas-a-receber.index') }}">Contas a Receber</a></li>
            <li class="breadcrumb-item active" aria-current="page">Editar Conta a Receber</li>
        </ol>
    </nav>

    @if ($errors->any())
        <div class="alert alert-danger mb-3">
            <h5><i class="fas fa-exclamation-triangle me-2"></i>Atenção!</h5>
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="row mb-4">
        <div class="col-lg-8">
            @include('contas_a_receber.partials.form', [
                'action' => route('contas-a-receber.update', $conta->id),
                'method' => 'PUT',
                'title' => 'Editar Conta a Receber',
                'subtitle' => 'Atualize os dados da conta a receber.',
                'conta' => $conta,
                'permiteEdicaoValor' => true,  // Sempre permite edição
                'filters' => $filters ?? []
            ])
        </div>

        <div class="col-lg-4">
            <!-- Card de Status -->
            <div class="card mb-4 border-light">
                <div class="card-header bg-light d-flex align-items-center">
                    <i class="fas fa-chart-pie me-2 text-primary"></i>
                    <h5 class="mb-0">Status de Recebimento</h5>
                </div>
                <div class="card-body">
                    @php
                        $percentualRecebido = isset($conta) ? $conta->percentualRecebido() : 0;
                        $statusClass = $percentualRecebido == 100 ? 'bg-success' : ($percentualRecebido > 0 ? 'bg-warning' : 'bg-danger');
                        $statusText = $percentualRecebido == 100 ? 'Recebido' : ($percentualRecebido > 0 ? 'Parcial' : 'Em Aberto');
                    @endphp

                    <div class="progress mb-3" style="height: 20px;">
                        <div class="progress-bar {{ $statusClass }}" role="progressbar"
                            style="width: {{ $percentualRecebido }}%;"
                            aria-valuenow="{{ $percentualRecebido }}"
                            aria-valuemin="0"
                            aria-valuemax="100">
                            {{ $percentualRecebido }}%
                        </div>
                    </div>

                    <div class="row g-2 text-center">
                        <div class="col-4">
                            <div class="p-2 border rounded">
                                <small class="d-block text-muted">Valor Total</small>
                                <span class="h6 mb-0">R$ {{ isset($conta) ? number_format($conta->valor, 2, ',', '.') : '0,00' }}</span>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="p-2 border rounded">
                                <small class="d-block text-muted">Recebido</small>
                                <span class="h6 mb-0 text-success">R$ {{ isset($conta) ? number_format($conta->totalRecebido(), 2, ',', '.') : '0,00' }}</span>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="p-2 border rounded">
                                <small class="d-block text-muted">Restante</small>
                                <span class="h6 mb-0 text-danger">R$ {{ isset($conta) ? number_format($conta->valor - $conta->totalRecebido(), 2, ',', '.') : '0,00' }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-light text-center">
                    <span class="badge bg-{{ $statusClass == 'bg-success' ? 'success' : ($statusClass == 'bg-warning' ? 'warning' : 'danger') }} py-2 px-3">
                        <i class="fas fa-{{ $statusClass == 'bg-success' ? 'check-circle' : ($statusClass == 'bg-warning' ? 'exclamation-circle' : 'times-circle') }} me-1"></i>
                        {{ $statusText }}
                    </span>
                </div>
            </div>

            <!-- Card de Informações -->
            <div class="card mb-4 border-light">
                <div class="card-header bg-light d-flex align-items-center">
                    <i class="fas fa-info-circle me-2 text-primary"></i>
                    <h5 class="mb-0">Informações da Conta</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Empresa</label>
                        <p class="form-control-plaintext border-bottom py-2">
                            <i class="fas fa-building text-secondary me-2"></i>
                            {{ optional($conta->contaBancaria->empresa)->nome_fantasia ?? 'Empresa não encontrada' }}
                        </p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Cliente</label>
                        <p class="form-control-plaintext border-bottom py-2">
                            <i class="fas fa-user text-secondary me-2"></i>
                            {{ optional($conta->cliente)->razao_social ?? 'Cliente não encontrado' }}
                        </p>
                    </div>
                    @if(isset($isFilhaDeContrato) && $isFilhaDeContrato)
                        <div class="mb-0">
                            <label class="form-label fw-bold">Contrato Vinculado</label>
                            <p class="form-control-plaintext border-bottom py-2">
                                <i class="fas fa-file-contract text-warning me-2"></i>
                                <a href="{{ route('contratos.edit', $conta->contrato_id) }}" class="text-decoration-none">
                                    Contrato #{{ $conta->contrato_id }}
                                    <i class="fas fa-external-link-alt ms-1"></i>
                                </a>
                            </p>
                        </div>
                    @endif
                </div>
                <div class="card-footer bg-light">
                    <div class="d-flex justify-content-between">
                        <div>
                            <small class="text-muted">ID da Conta:</small>
                            <span class="badge bg-secondary">{{ $conta->id ?? 'Nova' }}</span>
                        </div>
                        <div>
                            <small class="text-muted">Criada em:</small>
                            <span class="text-secondary">{{ isset($conta->created_at) ? $conta->created_at->format('d/m/Y') : '-' }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Painel de Recebimentos -->
    <div class="card mb-4">
        <div class="card-header bg-light d-flex align-items-center">
            <i class="fas fa-money-bill-wave me-2 text-success"></i>
            <h5 class="mb-0">Recebimentos Registrados</h5>
        </div>
        <div class="card-body">
            @if($conta->recebimentos->count() > 0)
                <div class="table-responsive">
                    <table class="table table-striped table-hover table-sm fs-9 mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Tipo</th>
                                <th>Valor</th>
                                <th>Data de Pagamento</th>
                                <th>Transferência</th>
                                <th>Observação</th>
                                <th class="text-center">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($conta->recebimentos->sortByDesc('data_pagamento') as $recebimento)
                                <tr class="{{ $recebimento->valor < 0 ? 'table-danger' : '' }}">
                                    <th scope="row">{{ $recebimento->id }}</th>
                                    <td>
                                        @if($recebimento->valor < 0)
                                            <span class="badge bg-danger">Estorno</span>
                                        @elseif($recebimento->transferencia_id)
                                            <span class="badge bg-info">Transferência</span>
                                        @else
                                            <span class="badge bg-success">Recebimento</span>
                                        @endif
                                    </td>
                                    <td class="{{ $recebimento->valor < 0 ? 'text-danger fw-bold' : 'text-success' }}">
                                        R$ {{ number_format(abs($recebimento->valor), 2, ',', '.') }}
                                        @if($recebimento->valor < 0) <i class="fas fa-minus-circle ms-1"></i> @endif
                                    </td>
                                    <td>{{ $recebimento->data_pagamento ? $recebimento->data_pagamento->format('d/m/Y') : '-' }}</td>
                                    <td>
                                        @if($recebimento->transferencia_id)
                                            <a href="#" class="text-decoration-none" title="{{ optional($recebimento->transferencia)->descricao ?? 'N/A' }}">
                                                #{{ $recebimento->transferencia_id }}
                                            </a>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($recebimento->observacao)
                                            <span class="text-truncate d-inline-block" style="max-width: 150px;" title="{{ $recebimento->observacao }}">
                                                {{ $recebimento->observacao }}
                                            </span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        @if($recebimento->valor > 0)
                                            <a
                                                href="{{ route('contas-a-receber.recebimentos.edit', [$conta->id, $recebimento->id]) }}"
                                                class="btn btn-sm btn-falcon-primary me-1"
                                            >
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <button
                                                class="btn btn-sm btn-falcon-danger"
                                                type="button"
                                                data-bs-toggle="modal"
                                                data-bs-target="#estornarModal{{ $recebimento->id }}"
                                            >
                                                <i class="fas fa-undo-alt"></i>
                                            </button>
                                        @else
                                            <span class="badge bg-secondary">
                                                <i class="fas fa-check me-1"></i>Estornado
                                            </span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="table-light">
                            <tr class="fw-bold">
                                <td colspan="2">Total:</td>
                                <td class="{{ $conta->totalRecebido() < 0 ? 'text-danger' : 'text-success' }}">
                                    R$ {{ number_format($conta->totalRecebido(), 2, ',', '.') }}
                                </td>
                                <td colspan="4"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            @else
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    Nenhum recebimento registrado para esta conta.
                </div>
            @endif
        </div>
        <div class="card-footer bg-light">
            <button
                type="button"
                class="btn btn-falcon-success"
                data-bs-toggle="modal"
                data-bs-target="#moda_baixar{{ $conta->id }}"
            >
                <i class="fas fa-plus me-1"></i>Registrar Novo Recebimento
            </button>
        </div>
    </div>

    <!-- Painel de Notas Fiscais -->
    <div class="card mb-4">
        <div class="card-header bg-light d-flex align-items-center">
            <i class="fas fa-file-invoice me-2 text-primary"></i>
            <h5 class="mb-0">Notas Fiscais Anexadas</h5>
        </div>
        <div class="card-body">
            @if($conta->notasFiscaisAnexas->count() > 0)
                <div class="table-responsive">
                    <table class="table table-striped table-hover table-sm fs-9 mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Número da NF</th>
                                <th>Descrição</th>
                                <th>Data da NF</th>
                                <th>Arquivo</th>
                                <th class="text-end">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($conta->notasFiscaisAnexas as $index => $nota)
                                <tr id="nota-fiscal-{{ $nota->id }}">
                                    <th scope="row">{{ $index + 1 }}</th>
                                    <td>{{ $nota->numero }}</td>
                                    <td>{{ $nota->descricao }}</td>
                                    <td>{{ $nota->data ? $nota->data->format('d/m/Y') : '-' }}</td>
                                    <td>
                                        @if($nota->caminho)
                                            <a href="{{ asset('storage/' . $nota->caminho) }}" target="_blank" class="btn btn-sm btn-falcon-info">
                                                <i class="fas fa-file-pdf me-1"></i>Visualizar
                                            </a>
                                        @else
                                            <span class="badge bg-secondary">Sem arquivo</span>
                                        @endif
                                    </td>
                                    <td class="text-end">
                                        <button
                                            type="button"
                                            class="btn btn-sm btn-falcon-danger excluir-nota-fiscal"
                                            data-id="{{ $nota->id }}"
                                            data-url="{{ route('notas-fiscais-anexas.destroy', $nota->id) }}"
                                        >
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    Nenhuma nota fiscal anexada.
                </div>
            @endif
        </div>
        <div class="card-footer bg-light">
            <button
                type="button"
                class="btn btn-falcon-primary"
                data-bs-toggle="modal"
                data-bs-target="#modal_anexar_notaS{{ $conta->id }}"
            >
                <i class="fas fa-file-upload me-1"></i>Anexar Nota Fiscal
            </button>
        </div>
    </div>

    <!-- Incluir os modais necessários -->
    @include('contas_a_receber.recebimentos.partials.modal_baixar', [
        'conta' => $conta,
        'transferencias' => $transferencias
    ])

    @foreach($conta->recebimentos as $recebimento)
        @include('contas_a_receber.recebimentos.partials.modal_estornar', [
            'conta' => $conta,
            'recebimento' => $recebimento
        ])
    @endforeach

    @include('notas_fiscais_anexas.partials.modal_anexar_nota', [
        'tipo' => 'S',
        'conta' => $conta
    ])
</div>
@endsection

@push('scripts-custom')
    <script src="{{ asset('vendors/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('vendors/flatpickr/flatpickr.min.js') }}"></script>
    <script src="{{ asset('vendors/inputmask/jquery.inputmask.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Debug do formulário
            $('#contaForm').on('submit', function(e) {
                console.log('Formulário enviado!');
                console.log('Action:', $(this).attr('action'));
                console.log('Method:', $(this).attr('method'));
                console.log('Dados:', $(this).serialize());

                // Verifica se há erros de validação do navegador
                const formElement = document.getElementById('contaForm');
                if(formElement && !formElement.checkValidity()) {
                    console.error('Erros de validação do formulário encontrados.');
                    // Não previne o comportamento padrão para que o navegador mostre os erros
                } else {
                    console.log('Formulário é válido, prosseguindo com o envio');
                }
            });

            // Inicialização aprimorada do Select2
            $(document).ready(function() {
                // Inicializar todos os selects com Select2
                $('select.select2-basic, select[name="evento_id"], select[name="contas_bancarias_id"], select[name="plano_de_conta_id"]').select2({
                    width: '100%',
                    placeholder: "Selecione uma opção",
                    allowClear: true,
                    // Ajuste para garantir que os campos fiquem bem formatados
                    templateResult: formatResult,
                    templateSelection: formatSelection
                });

                // Função para formatar as opções no dropdown
                function formatResult(option) {
                    if (!option.id) return option.text;
                    return $("<span class='select-option'>" + option.text + "</span>");
                }

                // Função para formatar a opção selecionada
                function formatSelection(option) {
                    if (!option.id) return option.text;
                    return $("<span class='select-selection' title='" + option.text + "'>" + option.text + "</span>");
                }

                // Ajustes após inicialização
                setTimeout(function() {
                    $('.select2-selection__rendered').each(function() {
                        $(this).css('overflow', 'hidden');
                    });
                }, 100);
            });
            // Inicializar Flatpickr para campos de data
            $('.datepicker').flatpickr({
                dateFormat: 'd/m/Y',
                locale: 'pt',
                allowInput: true,
                // Permitir que o flatpickr aceite datas no formato brasileiro
                parseDate: (datestr, format) => {
                    if (!datestr) return null;
                    // Suporte para formato brasileiro d/m/Y
                    const regex = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
                    if (datestr.match(regex)) {
                        const [, day, month, year] = datestr.match(regex);
                        return new Date(year, month - 1, day);
                    }
                    return null;
                },
                formatDate: (date, format) => {
                    // Formatar para padrão brasileiro
                        const day = date.getDate().toString().padStart(2, '0');
                    const month = (date.getMonth() + 1).toString().padStart(2, '0');
                    const year = date.getFullYear();
                    return `${day}/${month}/${year}`;
                }
            });

            // Máscara para valor monetário
            $('.valor-input').inputmask({
                alias: 'numeric',
                groupSeparator: '.',
                radixPoint: ',',
                autoGroup: true,
                digits: 2,
                digitsOptional: false,
                prefix: '',
                placeholder: '0',
                rightAlign: false,
                autoUnmask: true,
                removeMaskOnSubmit: true,
                unmaskAsNumber: true
            });

            // Carregar detalhes do evento quando selecionado
            $('#evento_id').on('change', function() {
                const eventoId = $(this).val();
                if (eventoId) {
                    console.log("Evento selecionado: ", eventoId);
                    // Exibe detalhes do evento se disponível
                    $('#evento-detalhes').html(`
                        <div class="alert alert-info mt-2">
                            <strong>Evento ID: ${eventoId}</strong> - Detalhes do evento selecionado
                        </div>
                    `).show();
                } else {
                    $('#evento-detalhes').html('').hide();
                }
            });

            // Disparar o evento change se já tiver um evento selecionado
            if ($('#evento_id').val()) {
                $('#evento_id').trigger('change');
            }

            // Função para formatar data YYYY-MM-DD para DD/MM/YYYY
            function formatarData(dataStr) {
                if (!dataStr) return '';

                try {
                    const data = new Date(dataStr);
                    return data.toLocaleDateString('pt-BR');
                } catch (e) {
                    return dataStr;
                }
            }
        });

        // Script para excluir nota fiscal
        document.addEventListener('click', function(e) {
            if (e.target.closest('.excluir-nota-fiscal')) {
                const button = e.target.closest('.excluir-nota-fiscal');
                const notaId = button.dataset.id;
                const url = button.dataset.url;

                if (confirm('Deseja realmente excluir esta nota fiscal?')) {
                    fetch(url, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'X-Requested-With': 'XMLHttpRequest',
                            'Content-Type': 'application/json',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({ _method: 'DELETE' })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            document.getElementById('nota-fiscal-' + notaId).remove();
                            toastr.success('Nota fiscal excluída com sucesso!');
                        } else {
                            toastr.error(data.message || 'Erro ao excluir a nota fiscal.');
                        }
                    })
                    .catch(() => toastr.error('Erro inesperado ao excluir a nota fiscal.'));
                }
            }
        });
    </script>
    @include('contas_a_receber.scripts.recebimentos')
@endpush