@extends('dashboard.layouts.app')

@section('title', 'Facturas')
@section('page-title', 'Facturaci�n')

@section('content')
<div style="max-width: 1200px; 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

    @if ($errors->any())
        <div style="background: #f8d7da; color: #721c24; padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 2rem; border: 1px solid #f5c6cb;">
            @foreach ($errors->all() as $error)
                <p style="margin: 0.5rem 0;">{{ $error }}</p>
            @endforeach
        </div>
    @endif

    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
        <h2 style="font-size: 2rem; color: #043d13; margin: 0;">
            <i class="fas fa-file-invoice-dollar"></i> Facturas
        </h2>
        <div style="display: flex; gap: 1rem;">
            <form method="POST" action="{{ route('invoices.generate-automatic') }}" style="display: inline;">
                @csrf
                <button type="submit" style="padding: 1.5rem 3rem; background: linear-gradient(90deg, #043d13, #07941e); color: white; border: none; border-radius: 0.5rem; font-size: 1.6rem; font-weight: 600; cursor: pointer;">
                    <i class="fas fa-magic"></i> Generar Factura Automática
                </button>
            </form>
            <a href="{{ route('invoices.create') }}" style="display: inline-block; padding: 1.5rem 3rem; background: #6c757d; color: white; text-decoration: none; border-radius: 0.5rem; font-size: 1.6rem; font-weight: 600;">
                <i class="fas fa-plus-circle"></i> Nueva Factura Manual
            </a>
        </div>
    </div>

    @if($invoices->count() === 0)
        <div style="background: white; padding: 4rem; text-align: center; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
            <i class="fas fa-file-invoice" style="font-size: 5rem; color: #ccc; margin-bottom: 1.5rem;"></i>
            <h3 style="font-size: 2rem; color: #666; margin-bottom: 1rem;">No tienes facturas</h3>
            <p style="font-size: 1.5rem; color: #999; margin-bottom: 2rem;">Genera automáticamente una factura con tus servicios activos o crea una manual</p>
            <div style="display: flex; gap: 1rem; justify-content: center;">
                <form method="POST" action="{{ route('invoices.generate-automatic') }}" style="display: inline;">
                    @csrf
                    <button type="submit" style="padding: 1.5rem 3rem; background: linear-gradient(90deg, #043d13, #07941e); color: white; border: none; border-radius: 0.5rem; font-size: 1.6rem; font-weight: 600; cursor: pointer;">
                        <i class="fas fa-magic"></i> Generar Factura Automática
                    </button>
                </form>
                <a href="{{ route('invoices.create') }}" style="display: inline-block; padding: 1.5rem 3rem; background: #6c757d; color: white; text-decoration: none; border-radius: 0.5rem; font-size: 1.6rem; font-weight: 600;">
                    <i class="fas fa-plus-circle"></i> Crear Factura Manual
                </a>
            </div>
        </div>
    @else
        <div style="background: white; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden;">
            <table style="width: 100%; border-collapse: collapse;">
                <thead style="background: linear-gradient(90deg, #043d13, #07941e); color: white;">
                    <tr>
                        <th style="padding: 1.5rem; text-align: left; font-size: 1.5rem; font-weight: 600;">N�mero</th>
                        <th style="padding: 1.5rem; text-align: left; font-size: 1.5rem; font-weight: 600;">Fecha Emisi�n</th>
                        <th style="padding: 1.5rem; text-align: left; font-size: 1.5rem; font-weight: 600;">Vencimiento</th>
                        <th style="padding: 1.5rem; text-align: right; font-size: 1.5rem; font-weight: 600;">Total</th>
                        <th style="padding: 1.5rem; text-align: center; font-size: 1.5rem; font-weight: 600;">Estado</th>
                        <th style="padding: 1.5rem; text-align: right; font-size: 1.5rem; font-weight: 600;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($invoices as $invoice)
                        <tr style="border-bottom: 1px solid #eee;">
                            <td style="padding: 1.5rem; font-size: 1.5rem;">
                                <strong>{{ $invoice->invoice_number }}</strong>
                            </td>
                            <td style="padding: 1.5rem; font-size: 1.4rem;">
                                {{ $invoice->issue_date->format('d/m/Y') }}
                            </td>
                            <td style="padding: 1.5rem; font-size: 1.4rem;">
                                {{ $invoice->due_date->format('d/m/Y') }}
                            </td>
                            <td style="padding: 1.5rem; text-align: right; font-size: 1.5rem;">
                                <strong>${{ number_format($invoice->total, 2) }}</strong>
                            </td>
                            <td style="padding: 1.5rem; text-align: center;">
                                @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: 0.5rem 1rem; background: {{ $statusColors[$invoice->status] ?? '#6c757d' }}; color: white; border-radius: 0.3rem; font-size: 1.3rem; font-weight: 600; text-transform: uppercase;">
                                    {{ $statusLabels[$invoice->status] ?? $invoice->status }}
                                </span>
                            </td>
                            <td style="padding: 1.5rem; text-align: right;">
                                <div style="display: flex; gap: 1rem; justify-content: flex-end;">
                                    <a href="{{ route('invoices.show', $invoice->id) }}" style="padding: 0.8rem 1.5rem; background: #17a2b8; color: white; text-decoration: none; border-radius: 0.3rem; font-size: 1.4rem;">
                                        <i class="fas fa-eye"></i> Ver
                                    </a>
                                    <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: 0.8rem 1.5rem; background: #dc3545; color: white; border: none; border-radius: 0.3rem; font-size: 1.4rem; cursor: pointer;">
                                            <i class="fas fa-trash"></i> Eliminar
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>
@endsection