@extends('layouts.app')

@section('title', 'Factura ' . $invoice->document_number . ' — ' . \App\Models\Setting::get('app_name', 'TI Manager'))

@section('content')
<div class="animate-fadeIn" x-data="{ openReceipt: null }">
    
    <div class="page-header" style="margin-bottom: 24px;">
        <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px;">
            <div style="display: flex; align-items: center; gap: 10px;">
                <a href="{{ route('invoices.index') }}" class="btn btn-ghost" style="padding: 8px; color: var(--text-muted);"><i class="ph ph-arrow-left" style="font-size: 1.5rem;"></i></a>
                <div>
                    <h1 class="page-title" style="margin: 0;">Factura DIAN {{ $invoice->document_number }}</h1>
                    <p class="text-muted" style="margin-top: 4px; font-size: 0.95rem;">Cliente: {{ $invoice->company ? $invoice->company->name : ($invoice->customer ? $invoice->customer->name : 'N/A') }}</p>
                </div>
            </div>
            <div style="display: flex; gap: 10px;">
                @if(auth()->user()->isAdmin())
                    <form method="POST" action="{{ route('invoices.toggle-status', $invoice) }}" style="display: inline-block;">
                        @csrf
                        <button type="submit" class="btn btn-outline" style="border-color: var(--primary); color: var(--primary);">
                            <i class="ph ph-arrows-left-right"></i> Marcar como {{ $invoice->status === 'Pagado' ? 'Sin Pagar' : 'Pagado' }}
                        </button>
                    </form>
                    <form method="POST" action="{{ route('invoices.destroy', $invoice) }}" onsubmit="return confirmDelete(event, '¿Estás seguro de eliminar esta factura? Esto borrará el archivo y el historial de pagos asociados.');" style="display: inline-block;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-outline" style="border-color: #ef4444; color: #ef4444;">
                            <i class="ph ph-trash"></i> Eliminar Factura
                        </button>
                    </form>
                @endif
                <a href="{{ route('invoices.download', $invoice) }}" target="_blank" class="btn btn-outline">
                    <i class="ph ph-download-simple"></i> Descargar PDF Original
                </a>
            </div>
        </div>
    </div>

    <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start;">
        
        <div style="display: flex; flex-direction: column; gap: 24px;">
            <div class="card-glass">
                <h3 style="border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 10px; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;">
                    <i class="ph ph-info" style="color: var(--primary);"></i> Detalles del Documento
                </h3>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                    <div>
                        <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 4px;">Número de Factura</p>
                        <p style="font-weight: 600; font-size: 1.1rem; color: var(--text-primary);">{{ $invoice->document_number }}</p>
                    </div>
                    <div>
                        <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 4px;">Fecha de Emisión</p>
                        <p style="font-weight: 600; font-size: 1.1rem; color: var(--text-primary);">{{ $invoice->issue_date ? $invoice->issue_date->format('d/m/Y') : 'N/A' }}</p>
                    </div>
                    <div>
                        <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 4px;">Valor Total</p>
                        <p style="font-weight: 700; font-size: 1.2rem; color: var(--primary);">${{ number_format($invoice->total_amount, 0) }}</p>
                    </div>
                    <div>
                        <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 4px;">Saldo Pendiente</p>
                        @php
                            $totalPaidAmount = $invoice->payments()->where('status', 'Aprobado')->sum('amount');
                            $balance = max(0, $invoice->total_amount - $totalPaidAmount);
                        @endphp
                        <p style="font-weight: 700; font-size: 1.2rem; color: {{ $balance > 0 ? '#ef4444' : '#91c849' }};">${{ number_format($balance, 0) }}</p>
                    </div>
                    <div>
                        <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 4px;">Estado</p>
                        @php
                            $color = $invoice->status === 'Pagado' ? ['bg' => 'rgba(145, 200, 73, 0.1)', 'color' => '#91c849'] : ['bg' => 'rgba(239, 68, 68, 0.1)', 'color' => '#ef4444'];
                        @endphp
                        <span style="display: inline-block; padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; background: {{ $color['bg'] }}; color: {{ $color['color'] }};">
                            {{ $invoice->status }}
                        </span>
                    </div>
                </div>
            </div>

            <div class="card-glass">
                <h3 style="border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 10px; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;">
                    <i class="ph ph-receipt" style="color: var(--primary);"></i> Vista Previa del PDF
                </h3>
                <div style="width: 100%; height: 600px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-color);">
                    <iframe src="{{ route('invoices.preview', $invoice) }}#toolbar=0" style="width: 100%; height: 100%; border: none;"></iframe>
                </div>
            </div>
        </div>

        <div style="display: flex; flex-direction: column; gap: 24px;">
            <div class="card-glass" style="background: var(--primary-light);">
                <h3 style="margin-top: 0; color: var(--primary); display: flex; align-items: center; gap: 8px; font-size: 1.1rem; margin-bottom: 15px;">
                    <i class="ph ph-wallet"></i> Pagos y Comprobantes
                </h3>
                
                @if($invoice->status === 'Sin Pagar')
                    <div style="text-align: center; padding: 20px 0;">
                        <i class="ph ph-warning-circle" style="font-size: 3rem; color: #ef4444; opacity: 0.5; margin-bottom: 10px; display: block;"></i>
                        <p style="color: var(--text-secondary); margin-bottom: 15px;">Esta factura tiene un saldo pendiente de pago.</p>
                        @if(auth()->user()->isClient())
                            <button type="button" class="btn btn-primary" style="width: 100%;" onclick="document.getElementById('paymentForm').style.display = 'block'; this.style.display = 'none';">
                                <i class="ph ph-upload-simple"></i> Reportar Pago
                            </button>
                            <p style="font-size: 0.75rem; color: var(--text-muted); margin-top: 8px;">(Sube tu comprobante de transferencia)</p>
                        @else
                            <button type="button" class="btn btn-primary" style="width: 100%;" onclick="document.getElementById('paymentForm').style.display = 'block'; this.style.display = 'none';">
                                <i class="ph ph-plus-circle"></i> Registrar Abono
                            </button>
                            <p style="font-size: 0.75rem; color: var(--text-muted); margin-top: 8px;">(Añadir un pago al historial)</p>
                        @endif

                        <div id="paymentForm" style="display: none; text-align: left; background: var(--card-bg); padding: 15px; border-radius: var(--radius-md); border: 1px solid var(--border-color); margin-top: 15px;">
                            <form action="{{ route('payments.store', $invoice) }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <div class="form-group" style="margin-bottom: 10px;">
                                    <label class="form-label" style="font-size: 0.85rem;">Monto {{ auth()->user()->isClient() ? 'Pagado' : 'del Abono' }} *</label>
                                    <input type="number" name="amount" required min="1" step="0.01" class="form-control" placeholder="Ej: {{ $balance > 0 ? $balance : $invoice->total_amount }}" value="{{ $balance > 0 ? $balance : '' }}" style="padding: 8px;">
                                </div>
                                <div class="form-group" style="margin-bottom: 10px;">
                                    <label class="form-label" style="font-size: 0.85rem;">Comprobante (Imagen){{ auth()->user()->isClient() ? ' *' : ' (Opcional)' }}</label>
                                    
                                    <div style="display: flex; gap: 10px; align-items: center;">
                                        <button type="button" class="btn btn-sm btn-outline" onclick="askImageUploadSource('receipt')">
                                            <i class="ph ph-upload-simple"></i> Seleccionar Imagen
                                        </button>
                                        <span id="receipt-filename" style="font-size: 0.8rem; color: var(--text-muted); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 150px;">Ningún archivo seleccionado</span>
                                    </div>
                                    
                                    <input type="file" id="receipt" name="receipt" {{ auth()->user()->isClient() ? 'required' : '' }} accept="image/*" style="display: none;" onchange="document.getElementById('receipt-filename').textContent = this.files[0] ? this.files[0].name : 'Ningún archivo seleccionado'">
                                </div>
                                <div class="form-group" style="margin-bottom: 15px;">
                                    <label class="form-label" style="font-size: 0.85rem;">Notas (Opcional)</label>
                                    <textarea name="notes" class="form-control" rows="2" style="padding: 8px;"></textarea>
                                </div>
                                <button type="submit" class="btn btn-primary btn-sm" style="width: 100%;">{{ auth()->user()->isClient() ? 'Enviar Comprobante' : 'Guardar Abono' }}</button>
                            </form>
                        </div>
                    </div>
                @else
                    <div style="text-align: center; padding: 20px 0;">
                        <i class="ph ph-check-circle" style="font-size: 3rem; color: #91c849; opacity: 0.5; margin-bottom: 10px; display: block;"></i>
                        <p style="color: var(--text-secondary); font-weight: 600;">Factura Pagada</p>
                    </div>
                @endif
            </div>

            @if(count($invoice->payments) > 0)
            <div class="card-glass">
                <h4 style="margin-top: 0; margin-bottom: 15px; font-size: 1rem; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 10px;">Historial de Pagos</h4>
                <div style="display: flex; flex-direction: column; gap: 15px;">
                    @foreach($invoice->payments as $payment)
                        <div style="border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 12px; background: rgba(0,0,0,0.01);">
                            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
                                <div>
                                    <div style="font-weight: 600; font-size: 1.05rem;">${{ number_format($payment->amount, 0) }}</div>
                                    <div style="font-size: 0.8rem; color: var(--text-muted);">{{ $payment->created_at->format('d/m/Y H:i') }}</div>
                                </div>
                                @php
                                    $pColor = $payment->status === 'Aprobado' ? '#91c849' : ($payment->status === 'Rechazado' ? '#ef4444' : '#f59e0b');
                                @endphp
                                <span style="font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 12px; border: 1px solid {{ $pColor }}; color: {{ $pColor }};">
                                    {{ $payment->status }}
                                </span>
                            </div>
                            
                            @if($payment->receipt_path)
                                <button type="button" @click="openReceipt = '{{ asset('storage/' . $payment->receipt_path) }}'" style="background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; color: var(--primary); padding: 0; margin-bottom: 10px;">
                                    <i class="ph ph-image"></i> Ver Comprobante adjunto
                                </button>
                            @else
                                <div style="font-size: 0.85rem; color: var(--text-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 4px;">
                                    <i class="ph ph-money"></i> Abono en efectivo / transferencia directa
                                </div>
                            @endif
                            
                            @if($payment->notes)
                                <div style="font-size: 0.85rem; color: var(--text-secondary); background: rgba(0,0,0,0.03); padding: 8px; border-radius: 4px; margin-bottom: 10px;">
                                    "{{ $payment->notes }}"
                                </div>
                            @endif

                            @if(auth()->user()->isAdmin())
                                <div style="display: flex; gap: 8px; margin-top: 10px; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 10px;">
                                    @if($payment->status === 'Pendiente')
                                        <form action="{{ route('payments.update', $payment) }}" method="POST" style="flex: 1;">
                                            @csrf
                                            @method('PUT')
                                            <input type="hidden" name="status" value="Aprobado">
                                            <button type="submit" class="btn btn-sm" style="width: 100%; background: #91c849; color: white; border: none;">Aprobar</button>
                                        </form>
                                        <form action="{{ route('payments.update', $payment) }}" method="POST" style="flex: 1;">
                                            @csrf
                                            @method('PUT')
                                            <input type="hidden" name="status" value="Rechazado">
                                            <button type="submit" class="btn btn-sm" style="width: 100%; background: #f59e0b; color: white; border: none;">Rechazar</button>
                                        </form>
                                    @endif
                                    <form action="{{ route('payments.destroy', $payment) }}" method="POST" style="flex: {{ $payment->status === 'Pendiente' ? '0 0 auto' : '1' }};" onsubmit="return confirmDelete(event, '¿Estás seguro de eliminar este abono? El saldo de la factura se recalculará.');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm" style="width: 100%; background: #ef4444; color: white; border: none; padding: 4px 8px;" title="Eliminar Abono">
                                            <i class="ph ph-trash"></i> {{ $payment->status === 'Pendiente' ? '' : 'Eliminar Abono' }}
                                        </button>
                                    </form>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
    </div>

    <!-- Image Modal -->
    <template x-teleport="body">
        <div x-show="openReceipt" 
             style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); z-index: 999999;" 
             x-transition.opacity>
            
            <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
                <div style="position: relative; max-width: 90vw; max-height: 90vh; display: flex; align-items: center; justify-content: center;" @click.away="openReceipt = null">
                    <button @click="openReceipt = null" style="position: absolute; top: -40px; right: -40px; background: none; border: none; color: white; font-size: 2.5rem; cursor: pointer; padding: 10px; line-height: 1;">&times;</button>
                    <img :src="openReceipt" style="max-width: 100%; max-height: 90vh; border-radius: var(--radius-md); box-shadow: 0 10px 25px rgba(0,0,0,0.5);">
                </div>
            </div>
        </div>
    </template>
</div>
@endsection