@extends('template_pages.session')

@section('page_title', 'Detalhes da Cobrança #' . request()->route('id'))
@section('page_icon', 'badge-dollar-sign')
@section('navbar', 'finance.navbar')

@section('content_page')
<div class="card-body">
    <div class="ibox-content">
        <div class="row">
            <!-- Project Main Details -->
            <div class="col-xl-8">
                <div class="card rounded-start">
                    <div class="card-header align-items-center p-3">
                        <div>
                            <h3 class="mb-0 d-flex fs-xl align-items-center">Cobrança #{{ $charge->id }}</h3>
                        </div>
                        @if ($charge->bill_stage <= 2)
                        <div class="ms-auto">
                            <a href="{{ route('finance.charges.edit', ['id' => $charge->id]) }}" class="btn btn-light"><i class="ti ti-pencil me-1"></i> Editar</a>
                        </div>
                        @endif
                    </div>
                    <div class="card-body px-3">
                        <div class="col-12">
                            <div data-table data-table-rows-per-page="10" class="card mb-0">
                                    <div class="table-responsive">
                                    <table class="table table-custom table-centered table-select table-hover w-100 mb-0">
                                        <thead class="bg-light align-middle bg-opacity-25 thead-sm">
                                            <tr class="text-uppercase fs-xxs">
                                                <th>Vencimento</th>
                                                <th>Descrição</th>
                                                <th>Valor</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>{{ \App\Helpers\FormatHelper::dateToDisplay($charge->due_date) ?? '-' }}</td>
                                                <td>{{ $charge->description ?? '-' }}</td>
                                                <td>{{ \App\Helpers\FormatHelper::formatCurrency($charge->value) ?? '-' }}</td>
                                                <td>{!! \App\Helpers\FormatHelper::getStatusBadge($charge->bill_status) !!}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div><!-- end col -->
                    </div> <!-- end card-body -->
                </div> <!-- end card -->

                @php
                    $fineAmount = !is_null($charge->fine_value)
                        ? (float) $charge->fine_value
                        : (!is_null($charge->fine_percentage) ? ($charge->value * ($charge->fine_percentage / 100)) : 0);
                    $subtotalAmount = (float) $charge->value - $fineAmount;
                    $totalAmount = (float) $charge->value;
                @endphp
                @if($fineAmount > 0)
                <div class="card rounded-start">
                    <div class="card-header align-items-center p-3">
                        <div>
                            <h4 class="mb-0 d-flex align-items-center">Valor total com multa</h4>
                        </div>
                    </div>
                    <div class="card-body px-3">
                        <div class="col-12">
                            <div data-table data-table-rows-per-page="10" class="card mb-0">
                                    <div class="table-responsive">
                                    <table class="table table-custom table-centered table-select table-hover w-100 mb-0">
                                        <tbody>
                                            <tr>
                                                <td>Subtotal</td>
                                                <td id="subtotal">{{ \App\Helpers\FormatHelper::formatCurrency($subtotalAmount) }}</td>
                                            </tr>
                                            <tr>
                                                <td>Multas/Juros (+)</td>
                                                <td id="fines">{{ \App\Helpers\FormatHelper::formatCurrency($fineAmount) }}</td>
                                            </tr>
                                            <tr>
                                                <td class="fw-semibold">Total</td>
                                                <td id="total" class="fw-semibold">{{ \App\Helpers\FormatHelper::formatCurrency($totalAmount) }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div><!-- end col -->
                    </div> <!-- end card-body -->
                </div> <!-- end card -->
                @endif
                <div class="row">
                    <div class="accordion" id="accordionExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                                Histórico
                            </button>
                            </h2>
                            <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
                                <div id="history-container" class="p-3">
                                    <em>Clique para carregar o histórico...</em>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>  
            </div> <!-- end col-xl-8 -->

            <!-- Team Sidebar -->
            <div class="col-xl-4 mt-xl-0 mt-3">
                <div class="card">
                    <div class="card-body p-0">
                        <div class="p-3 border-bottom border-dashed">
                            <h5 class="mb-0">Informações da Cobrança</h5>
                        </div>
                        <div class="p-3 border-bottom border-dashed">
                            <div class="mb-2">
                                <small class="text-muted">Projeto</small>
                                <div>{{ $charge->project->name ?? '-' }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Cliente Faturável</small>
                                <div>{{ ($charge->financeClient && $charge->financeClient->coreClient) ? $charge->financeClient->coreClient->name : '-' }}</div>
                            </div>
                            @if($fineAmount > 0)
                            <div class="mb-2">
                                <small class="text-muted">Valor Original</small>
                                <div>{{ \App\Helpers\FormatHelper::formatCurrency($subtotalAmount) }}</div>
                            </div>
                            @endif
                            <div class="mb-2">
                                <small class="text-muted">Valor Total</small>
                                <div>{{ \App\Helpers\FormatHelper::formatCurrency($totalAmount) }}</div>
                            </div>
                        </div>
                        <div class="p-3 border-bottom border-dashed">
                            <div class="mb-2">
                                <small class="text-muted">Data da Cobrança</small>
                                <div>{{ \App\Helpers\FormatHelper::dateToDisplay($charge->issue_day) ?? '-' }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Vencimento</small>
                                <div>{{ \App\Helpers\FormatHelper::dateToDisplay($charge->due_date) ?? '-' }}</div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Última Atualização</small>
                                <div>{{ \Carbon\Carbon::parse($charge->updated_at)->format('d/m/Y H:i:s') }}</div>
                            </div>
                        </div>
                        <div class="p-3">
                            <div class="mb-2">
                                <small class="text-muted">Link do Boleto</small>
                                <div>
                                    @if(!empty($charge->bill_url))
                                        <a href="{{ $charge->bill_url }}" target="_blank"><i data-lucide="globe"></i> Acessar</a>
                                    @else
                                        <span class="badge bg-secondary">Aguardando</span>
                                    @endif
                                </div>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">Link da NFS-e</small>
                                <div>
                                    @if(!empty($charge->nfs_url))
                                        <a href="{{ $charge->nfs_url }}" target="_blank"><i data-lucide="globe"></i> Acessar</a>
                                    @else
                                        <span class="badge bg-secondary">Aguardando</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div> <!-- end card-body -->
                </div> <!-- end card -->
            </div> <!-- end col-xl-4 -->
        </div>       
    </div> <!-- end row -->
</div>

<script>
    (function() {
        const collapseEl = document.getElementById('flush-collapseOne');
        const container = document.getElementById('history-container');
        let loaded = false;

        collapseEl.addEventListener('show.bs.collapse', function() {
            if (loaded) return;
            container.innerHTML = '<span>Carregando histórico...</span>';

            const url = '{{ route('finance.charges.details.ajax') }}';
            const chargeId = {{ $charge->id }};
            const payload = { charge_id: chargeId, _token: '{{ csrf_token() }}' };

            fetch(url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                body: JSON.stringify(payload)
            })
            .then(res => res.json())
            .then(data => {
                let log = data.log;
                let entries = [];
                // Try parse if stringified JSON
                if (typeof log === 'string') {
                    try { const parsed = JSON.parse(log); if (Array.isArray(parsed)) { entries = parsed; } else if (parsed) { entries = [parsed]; } }
                    catch(e) { entries = [{ type: 'info', message: log, date: null }]; }
                } else if (Array.isArray(log)) {
                    entries = log;
                } else if (log && typeof log === 'object') {
                    entries = [log];
                }

                if (!entries.length) {
                    container.innerHTML = '<em>Sem histórico para esta cobrança.</em>';
                    loaded = true;
                    return;
                }

                // Ordenar: mais recente primeiro (DD/MM/YYYY - HH:mm:ss suportado)
                entries.sort((a, b) => {
                    const toTs = (val) => {
                        if (!val) return -Infinity;                 // sem data: vai para o final
                        if (typeof val === 'number') return val;
                        if (val instanceof Date) return val.getTime();
                        if (typeof val === 'string') {
                            // Formato: DD/MM/YYYY - HH:mm:ss
                            const m = val.match(/^(\d{2})\/(\d{2})\/(\d{4})\s*-\s*(\d{2}):(\d{2}):(\d{2})$/);
                            if (m) {
                                const [, dd, MM, yyyy, hh, mm, ss] = m;
                                return new Date(+yyyy, +MM - 1, +dd, +hh, +mm, +ss).getTime();
                            }
                            // Tentar ISO ou 'YYYY-MM-DD HH:mm:ss'
                            const isoLike = val.includes('T') ? val : val.replace(' ', 'T');
                            const t = Date.parse(isoLike);
                            if (!isNaN(t)) return t;
                        }
                        return -Infinity;
                    };
                    return toTs(b.date) - toTs(a.date); // mais recente primeiro
                });

                const formatDisplayDate = (val) => {
                    if (!val) return '';
                    if (typeof val === 'string') {
                        const br = val.match(/^(\d{2})\/(\d{2})\/(\d{4})\s*-\s*(\d{2}):(\d{2}):(\d{2})$/);
                        if (br) return val;
                        const isoLike = val.includes('T') ? val : val.replace(' ', 'T');
                        const d = new Date(isoLike);
                        if (!isNaN(d)) {
                            const pad = (n) => (n < 10 ? '0' + n : '' + n);
                            return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()} - ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
                        }
                        return val;
                    }
                    if (typeof val === 'number') {
                        const d = new Date(val);
                        const pad = (n) => (n < 10 ? '0' + n : '' + n);
                        return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()} - ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
                    }
                    if (val instanceof Date) {
                        const d = val;
                        const pad = (n) => (n < 10 ? '0' + n : '' + n);
                        return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()} - ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
                    }
                    return '';
                };
                const html = entries.map((entry, index) => {
                    const type = (entry.type || '').toLowerCase();
                    const icon = type === 'mail' ? 'mail' : (type === 'system' ? 'monitor-cog' : 'circle-dot');
                    const label = type === 'mail' ? 'Email' : (type === 'system' ? 'Sistema' : 'Info');
                    const message = entry.message || '-';
                    const dateStr = formatDisplayDate(entry.date);
                    return `
                        <div class="accordion-body" style="display: flex; justify-content: space-between; align-items: center;">
                            <div>
                                <i data-lucide="${icon}"></i> <strong>${label}</strong> - ${message}
                            </div>
                            <div style="font-size: 0.9em; color: #6c757d;">
                                ${dateStr}
                            </div>
                        </div>
                        ${index < entries.length - 1 ? '<hr class="m-0">' : ''}  <!-- somente o último sem HR -->
                    `;
                }).join('');
                container.innerHTML = html;
                if (window.lucide && window.lucide.createIcons) { window.lucide.createIcons(); }
                loaded = true;
            })
            .catch(() => {
                container.innerHTML = '<span class="text-danger">Falha ao carregar histórico.</span>';
            });
        });
    })();
</script>
@endsection