@extends('dashboard.layouts.app')

@section('title', 'Factura ' . $invoice->invoice_number)
@section('page-title', 'Detalles de Factura')

@section('content')
<div style="max-width: 1000px; margin: 0 auto;">
    @if (session('success'))
        <div style="background: #d4edda; color: #155724; padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 2rem; border: 1px solid #c3e6cb;">
            {{ session('success') }}
        </div>
    @endif

    <div style="margin-bottom: 2rem;">
        <a href="{{ route('invoices.index') }}" style="padding: 1rem 2rem; background: #6c757d; color: white; text-decoration: none; border-radius: 0.5rem; font-size: 1.4rem;">
            <i class="fas fa-arrow-left"></i> Volver a Facturas
        </a>
    </div>

    <div style="background: white; padding: 3rem; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
        <!-- Invoice Header -->
        <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 2px solid #dee2e6;">
            <div>
                <h2 style="font-size: 2.4rem; color: #043d13; margin-bottom: 0.5rem;">
                    <i class="fas fa-file-invoice-dollar"></i> {{ $invoice->invoice_number }}
                </h2>
                <p style="font-size: 1.4rem; color: #666; margin: 0;">
                    Fecha de emisión: {{ $invoice->issue_date->format('d/m/Y') }}
                </p>
            </div>
            <div style="text-align: right;">
                @php
                    $statusColors = [
                        'draft' => '#6c757d',
                        'pending' => '#ffc107',
                        'paid' => '#28a745',
                        'overdue' => '#dc3545',
                        'cancelled' => '#dc3545'
                    ];
                    $statusLabels = [
                        'draft' => 'Borrador',
                        'pending' => 'Pendiente',
                        'paid' => 'Pagado',
                        'overdue' => 'Vencido',
                        'cancelled' => 'Cancelado'
                    ];
                @endphp
                <span style="display: inline-block; padding: 1rem 2rem; background: {{ $statusColors[$invoice->status] ?? '#6c757d' }}; color: white; border-radius: 0.5rem; font-size: 1.5rem; font-weight: 600; text-transform: uppercase; margin-bottom: 1rem;">
                    {{ $statusLabels[$invoice->status] ?? $invoice->status }}
                </span>
                <p style="font-size: 1.4rem; color: #666; margin: 0;">
                    Vencimiento: {{ $invoice->due_date->format('d/m/Y') }}
                </p>
            </div>
        </div>

        <!-- Invoice Items -->
        <div style="margin-bottom: 3rem;">
            <h3 style="font-size: 1.8rem; color: #043d13; margin-bottom: 1.5rem;">
                <i class="fas fa-list"></i> Conceptos
            </h3>
            <table style="width: 100%; border-collapse: collapse;">
                <thead style="background: #f8f9fa;">
                    <tr>
                        <th style="padding: 1rem; text-align: left; border-bottom: 2px solid #dee2e6; font-size: 1.4rem;">Descripción</th>
                        <th style="padding: 1rem; text-align: center; border-bottom: 2px solid #dee2e6; font-size: 1.4rem;">Cantidad</th>
                        <th style="padding: 1rem; text-align: right; border-bottom: 2px solid #dee2e6; font-size: 1.4rem;">Precio Unit.</th>
                        <th style="padding: 1rem; text-align: right; border-bottom: 2px solid #dee2e6; font-size: 1.4rem;">Total</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($invoice->items as $item)
                        <tr style="border-bottom: 1px solid #dee2e6;">
                            <td style="padding: 1rem; font-size: 1.4rem;">{{ $item->description }}</td>
                            <td style="padding: 1rem; text-align: center; font-size: 1.4rem;">{{ $item->quantity }}</td>
                            <td style="padding: 1rem; text-align: right; font-size: 1.4rem;">${{ number_format($item->unit_price, 2) }}</td>
                            <td style="padding: 1rem; text-align: right; font-size: 1.4rem;"><strong>${{ number_format($item->total, 2) }}</strong></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Invoice Totals -->
        <div style="display: flex; justify-content: flex-end; margin-bottom: 3rem;">
            <div style="width: 400px; background: #f8f9fa; padding: 2rem; border-radius: 0.5rem;">
                <div style="display: flex; justify-content: space-between; margin-bottom: 1rem; font-size: 1.5rem;">
                    <span>Subtotal:</span>
                    <strong>${{ number_format($invoice->subtotal, 2) }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between; margin-bottom: 1rem; font-size: 1.5rem;">
                    <span>Impuesto:</span>
                    <strong>${{ number_format($invoice->tax, 2) }}</strong>
                </div>
                <div style="display: flex; justify-content: space-between; padding-top: 1rem; border-top: 2px solid #dee2e6; font-size: 1.8rem; color: #043d13;">
                    <span><strong>Total:</strong></span>
                    <strong>${{ number_format($invoice->total, 2) }}</strong>
                </div>
            </div>
        </div>

        <!-- Notes -->
        @if($invoice->notes)
            <div style="background: #e7f3ff; border-left: 4px solid #2196F3; padding: 1.5rem; margin-bottom: 3rem; border-radius: 0.5rem;">
                <h4 style="font-size: 1.6rem; color: #043d13; margin-bottom: 0.5rem;">
                    <i class="fas fa-sticky-note"></i> Notas
                </h4>
                <p style="font-size: 1.4rem; color: #666; margin: 0;">{{ $invoice->notes }}</p>
            </div>
        @endif

        <!-- Actions -->
        <div style="display: flex; gap: 1rem; justify-content: flex-end; padding-top: 2rem; border-top: 2px solid #dee2e6;">
            @if($invoice->status === 'pending' || $invoice->status === 'overdue')
                <form method="POST" action="{{ route('invoices.mark-paid', $invoice->id) }}" style="display: inline;">
                    @csrf
                    <button type="submit" style="padding: 1.2rem 2rem; background: #28a745; color: white; border: none; border-radius: 0.5rem; cursor: pointer; font-size: 1.4rem; font-weight: 600;">
                        <i class="fas fa-check-circle"></i> Marcar como Pagada
                    </button>
                </form>
            @endif

            <button onclick="window.print()" style="padding: 1.2rem 2rem; background: #17a2b8; color: white; border: none; border-radius: 0.5rem; cursor: pointer; font-size: 1.4rem; font-weight: 600;">
                <i class="fas fa-print"></i> Imprimir
            </button>

            <form method="POST" action="{{ route('invoices.destroy', $invoice->id) }}" style="display: inline;" onsubmit="return confirm('¿Estás seguro de eliminar esta factura?');">
                @csrf
                @method('DELETE')
                <button type="submit" style="padding: 1.2rem 2rem; background: #dc3545; color: white; border: none; border-radius: 0.5rem; cursor: pointer; font-size: 1.4rem; font-weight: 600;">
                    <i class="fas fa-trash"></i> Eliminar Factura
                </button>
            </form>
        </div>
    </div>
</div>

<style>
@media print {
    body * {
        visibility: hidden;
    }
    .invoice-print, .invoice-print * {
        visibility: visible;
    }
    .invoice-print {
        position: absolute;
        left: 0;
        top: 0;
    }
}
</style>
@endsection