@extends('dashboard.layouts.app')

@section('title', 'Crear Factura')
@section('page-title', 'Crear Nueva Factura')

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

    <!-- Servicios Disponibles -->
    <div style="background: white; padding: 3rem; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 2rem;">
        <h3 style="font-size: 2rem; color: #043d13; margin-bottom: 1.5rem;">
            <i class="fas fa-list-check"></i> Tus Servicios Disponibles
        </h3>
        <p style="font-size: 1.4rem; color: #666; margin-bottom: 2rem;">
            Haz clic en cualquier servicio para agregarlo a la factura
        </p>

        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem;">
            <!-- Servidores -->
            @if($servers->count() > 0)
                <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 0.5rem; border-left: 4px solid #043d13;">
                    <h4 style="font-size: 1.5rem; color: #043d13; margin-bottom: 1rem;">
                        <i class="fas fa-server"></i> Servidores ({{ $servers->count() }})
                    </h4>
                    @foreach($servers as $server)
                        <button type="button" onclick="addServiceItem('Servidor: {{ $server->label ?? $server->vultr_instance_id }}', {{ $server->monthly_cost ?? 0 }})"
                                style="display: block; width: 100%; text-align: left; padding: 0.8rem; margin-bottom: 0.5rem; background: white; border: 1px solid #dee2e6; border-radius: 0.3rem; cursor: pointer; font-size: 1.3rem;">
                            <strong>{{ $server->label ?? 'Sin nombre' }}</strong><br>
                            <small style="color: #666;">{{ $server->plan }} - {{ $server->region }}</small><br>
                            <small style="color: #28a745; font-weight: 600;">${{ number_format($server->monthly_cost ?? 0, 2) }}/mes</small>
                        </button>
                    @endforeach
                </div>
            @endif

            <!-- Block Storage -->
            @if($blockStorage->count() > 0)
                <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 0.5rem; border-left: 4px solid #6f42c1;">
                    <h4 style="font-size: 1.5rem; color: #6f42c1; margin-bottom: 1rem;">
                        <i class="fas fa-hdd"></i> Block Storage ({{ $blockStorage->count() }})
                    </h4>
                    @foreach($blockStorage as $storage)
                        <button type="button" onclick="addServiceItem('Block Storage: {{ $storage->label ?? $storage->vultr_block_id }}', {{ $storage->monthly_cost ?? 0 }})"
                                style="display: block; width: 100%; text-align: left; padding: 0.8rem; margin-bottom: 0.5rem; background: white; border: 1px solid #dee2e6; border-radius: 0.3rem; cursor: pointer; font-size: 1.3rem;">
                            <strong>{{ $storage->label ?? 'Sin nombre' }}</strong><br>
                            <small style="color: #666;">{{ $storage->size_gb }}GB - {{ $storage->region }}</small><br>
                            <small style="color: #28a745; font-weight: 600;">${{ number_format($storage->monthly_cost ?? 0, 2) }}/mes</small>
                        </button>
                    @endforeach
                </div>
            @endif

            <!-- Bases de Datos -->
            @if($databases->count() > 0)
                <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 0.5rem; border-left: 4px solid #e83e8c;">
                    <h4 style="font-size: 1.5rem; color: #e83e8c; margin-bottom: 1rem;">
                        <i class="fas fa-database"></i> Bases de Datos ({{ $databases->count() }})
                    </h4>
                    @foreach($databases as $database)
                        <button type="button" onclick="addServiceItem('Base de Datos: {{ $database->label ?? $database->vultr_database_id }}', {{ $database->monthly_cost ?? 0 }})"
                                style="display: block; width: 100%; text-align: left; padding: 0.8rem; margin-bottom: 0.5rem; background: white; border: 1px solid #dee2e6; border-radius: 0.3rem; cursor: pointer; font-size: 1.3rem;">
                            <strong>{{ $database->label ?? 'Sin nombre' }}</strong><br>
                            <small style="color: #666;">{{ $database->database_engine }} - {{ $database->region }}</small><br>
                            <small style="color: #28a745; font-weight: 600;">${{ number_format($database->monthly_cost ?? 0, 2) }}/mes</small>
                        </button>
                    @endforeach
                </div>
            @endif

            <!-- File Systems -->
            @if($fileSystems->count() > 0)
                <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 0.5rem; border-left: 4px solid #20c997;">
                    <h4 style="font-size: 1.5rem; color: #20c997; margin-bottom: 1rem;">
                        <i class="fas fa-folder"></i> File Systems ({{ $fileSystems->count() }})
                    </h4>
                    @foreach($fileSystems as $fileSystem)
                        <button type="button" onclick="addServiceItem('File System: {{ $fileSystem->label ?? $fileSystem->vultr_block_id }}', {{ $fileSystem->monthly_cost ?? 0 }})"
                                style="display: block; width: 100%; text-align: left; padding: 0.8rem; margin-bottom: 0.5rem; background: white; border: 1px solid #dee2e6; border-radius: 0.3rem; cursor: pointer; font-size: 1.3rem;">
                            <strong>{{ $fileSystem->label ?? 'Sin nombre' }}</strong><br>
                            <small style="color: #666;">{{ $fileSystem->size_gb }}GB - {{ $fileSystem->region }}</small><br>
                            <small style="color: #28a745; font-weight: 600;">${{ number_format($fileSystem->monthly_cost ?? 0, 2) }}/mes</small>
                        </button>
                    @endforeach
                </div>
            @endif

            <!-- IPs Reservadas -->
            @if($reservedIps->count() > 0)
                <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 0.5rem; border-left: 4px solid #17a2b8;">
                    <h4 style="font-size: 1.5rem; color: #17a2b8; margin-bottom: 1rem;">
                        <i class="fas fa-network-wired"></i> IPs Reservadas ({{ $reservedIps->count() }})
                    </h4>
                    @foreach($reservedIps as $ip)
                        <button type="button" onclick="addServiceItem('IP Reservada: {{ $ip->subnet }}', 5.00)"
                                style="display: block; width: 100%; text-align: left; padding: 0.8rem; margin-bottom: 0.5rem; background: white; border: 1px solid #dee2e6; border-radius: 0.3rem; cursor: pointer; font-size: 1.3rem;">
                            <strong>{{ $ip->label ?? 'Sin nombre' }}</strong><br>
                            <small style="color: #666;">{{ $ip->subnet }} - {{ $ip->region }}</small><br>
                            <small style="color: #28a745; font-weight: 600;">$5.00/mes</small>
                        </button>
                    @endforeach
                </div>
            @endif

            <!-- Snapshots -->
            @if($snapshots->count() > 0)
                <div style="background: #f8f9fa; padding: 1.5rem; border-radius: 0.5rem; border-left: 4px solid #6c757d;">
                    <h4 style="font-size: 1.5rem; color: #6c757d; margin-bottom: 1rem;">
                        <i class="fas fa-camera"></i> Snapshots ({{ $snapshots->count() }})
                    </h4>
                    @foreach($snapshots as $snapshot)
                        <button type="button" onclick="addServiceItem('Snapshot: {{ $snapshot->description ?? $snapshot->vultr_snapshot_id }}', {{ $snapshot->monthly_cost ?? 0 }})"
                                style="display: block; width: 100%; text-align: left; padding: 0.8rem; margin-bottom: 0.5rem; background: white; border: 1px solid #dee2e6; border-radius: 0.3rem; cursor: pointer; font-size: 1.3rem;">
                            <strong>{{ $snapshot->description ?? 'Sin descripción' }}</strong><br>
                            <small style="color: #666;">{{ $snapshot->size }}GB</small><br>
                            <small style="color: #28a745; font-weight: 600;">${{ number_format($snapshot->monthly_cost ?? 0, 2) }}/mes</small>
                        </button>
                    @endforeach
                </div>
            @endif
        </div>

        @if($servers->count() === 0 && $blockStorage->count() === 0 && $databases->count() === 0 && $fileSystems->count() === 0 && $reservedIps->count() === 0 && $snapshots->count() === 0)
            <div style="text-align: center; padding: 2rem; color: #999;">
                <i class="fas fa-info-circle" style="font-size: 3rem; margin-bottom: 1rem;"></i>
                <p style="font-size: 1.5rem;">No tienes servicios disponibles para facturar</p>
            </div>
        @endif
    </div>

    <div style="background: white; padding: 3rem; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
        <h2 style="font-size: 2.4rem; color: #043d13; margin-bottom: 1rem;">
            <i class="fas fa-file-invoice-dollar"></i> Crear Factura Manual
        </h2>
        <p style="font-size: 1.4rem; color: #666; margin-bottom: 3rem;">
            Completa los datos para generar una nueva factura personalizada
        </p>

        <form method="POST" action="{{ route('invoices.store') }}" id="invoiceForm">
            @csrf

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem;">
                <div>
                    <label style="display: block; font-size: 1.5rem; color: #333; margin-bottom: 0.5rem;">Fecha de Emisi�n *</label>
                    <input type="date" name="issue_date" required value="{{ old('issue_date', date('Y-m-d')) }}"
                           style="width: 100%; padding: 1.5rem; font-size: 1.6rem; border: 1px solid #ccc; border-radius: 0.5rem;">
                </div>
                <div>
                    <label style="display: block; font-size: 1.5rem; color: #333; margin-bottom: 0.5rem;">Fecha de Vencimiento *</label>
                    <input type="date" name="due_date" required value="{{ old('due_date', date('Y-m-d', strtotime('+30 days'))) }}"
                           style="width: 100%; padding: 1.5rem; font-size: 1.6rem; border: 1px solid #ccc; border-radius: 0.5rem;">
                </div>
            </div>

            <div style="margin-bottom: 3rem; padding: 2rem; background: #f8f9fa; border-radius: 0.5rem;">
                <h3 style="font-size: 1.8rem; color: #043d13; margin-bottom: 1.5rem;">
                    <i class="fas fa-list"></i> Conceptos de Factura
                </h3>
                <div id="items-container">
                    <div class="invoice-item" style="display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 1rem; margin-bottom: 1rem; align-items: end;">
                        <div>
                            <label style="display: block; font-size: 1.4rem; color: #333; margin-bottom: 0.5rem;">Descripci�n *</label>
                            <input type="text" name="items[0][description]" required placeholder="ej: Servidor VPS 4GB RAM"
                                   style="width: 100%; padding: 1.2rem; font-size: 1.4rem; border: 1px solid #ccc; border-radius: 0.5rem;">
                        </div>
                        <div>
                            <label style="display: block; font-size: 1.4rem; color: #333; margin-bottom: 0.5rem;">Cantidad *</label>
                            <input type="number" name="items[0][quantity]" required min="1" value="1" class="quantity"
                                   style="width: 100%; padding: 1.2rem; font-size: 1.4rem; border: 1px solid #ccc; border-radius: 0.5rem;">
                        </div>
                        <div>
                            <label style="display: block; font-size: 1.4rem; color: #333; margin-bottom: 0.5rem;">Precio Unitario *</label>
                            <input type="number" name="items[0][unit_price]" required min="0" step="0.01" placeholder="0.00" class="unit-price"
                                   style="width: 100%; padding: 1.2rem; font-size: 1.4rem; border: 1px solid #ccc; border-radius: 0.5rem;">
                        </div>
                        <div>
                            <button type="button" onclick="removeItem(this)" style="padding: 1.2rem; background: #dc3545; color: white; border: none; border-radius: 0.5rem; cursor: pointer; font-size: 1.4rem; visibility: hidden;">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <button type="button" onclick="addItem()" style="padding: 1rem 2rem; background: #28a745; color: white; border: none; border-radius: 0.5rem; cursor: pointer; font-size: 1.4rem; font-weight: 600; margin-top: 1rem;">
                    <i class="fas fa-plus-circle"></i> Agregar Concepto
                </button>
            </div>

            <div style="margin-bottom: 2rem;">
                <label style="display: block; font-size: 1.5rem; color: #333; margin-bottom: 0.5rem;">Impuesto (Opcional)</label>
                <input type="number" name="tax" min="0" step="0.01" placeholder="0.00" value="{{ old('tax', 0) }}"
                       style="width: 100%; padding: 1.5rem; font-size: 1.6rem; border: 1px solid #ccc; border-radius: 0.5rem;">
            </div>

            <div style="margin-bottom: 2rem;">
                <label style="display: block; font-size: 1.5rem; color: #333; margin-bottom: 0.5rem;">Notas (Opcional)</label>
                <textarea name="notes" rows="3" placeholder="Notas adicionales sobre esta factura"
                          style="width: 100%; padding: 1.5rem; font-size: 1.6rem; border: 1px solid #ccc; border-radius: 0.5rem;">{{ old('notes') }}</textarea>
            </div>

            <div style="display: flex; gap: 1rem; justify-content: flex-end; margin-top: 3rem;">
                <a href="{{ route('invoices.index') }}" style="display: inline-block; padding: 1.5rem 3rem; background: #6c757d; color: white; text-decoration: none; border-radius: 0.5rem; font-size: 1.6rem;">
                    Cancelar
                </a>
                <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; cursor: pointer; font-weight: 600;">
                    <i class="fas fa-check"></i> Crear Factura
                </button>
            </div>
        </form>
    </div>
</div>

<script>
let itemCount = 1;

// Add a service item from the services list
function addServiceItem(description, price) {
    const container = document.getElementById('items-container');
    const newItem = document.createElement('div');
    newItem.className = 'invoice-item';
    newItem.style.cssText = 'display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 1rem; margin-bottom: 1rem; align-items: end;';
    newItem.innerHTML = `
        <div>
            <input type="text" name="items[${itemCount}][description]" required value="${description}"
                   style="width: 100%; padding: 1.2rem; font-size: 1.4rem; border: 1px solid #ccc; border-radius: 0.5rem;">
        </div>
        <div>
            <input type="number" name="items[${itemCount}][quantity]" required min="1" value="1" class="quantity"
                   style="width: 100%; padding: 1.2rem; font-size: 1.4rem; border: 1px solid #ccc; border-radius: 0.5rem;">
        </div>
        <div>
            <input type="number" name="items[${itemCount}][unit_price]" required min="0" step="0.01" value="${price.toFixed(2)}" class="unit-price"
                   style="width: 100%; padding: 1.2rem; font-size: 1.4rem; border: 1px solid #ccc; border-radius: 0.5rem;">
        </div>
        <div>
            <button type="button" onclick="removeItem(this)" style="padding: 1.2rem; background: #dc3545; color: white; border: none; border-radius: 0.5rem; cursor: pointer; font-size: 1.4rem;">
                <i class="fas fa-trash"></i>
            </button>
        </div>
    `;
    container.appendChild(newItem);
    itemCount++;

    // Scroll to the form
    document.getElementById('invoiceForm').scrollIntoView({ behavior: 'smooth', block: 'start' });
}

// Add an empty item
function addItem() {
    const container = document.getElementById('items-container');
    const newItem = document.createElement('div');
    newItem.className = 'invoice-item';
    newItem.style.cssText = 'display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 1rem; margin-bottom: 1rem; align-items: end;';
    newItem.innerHTML = `
        <div>
            <input type="text" name="items[${itemCount}][description]" required placeholder="ej: Servidor VPS 4GB RAM"
                   style="width: 100%; padding: 1.2rem; font-size: 1.4rem; border: 1px solid #ccc; border-radius: 0.5rem;">
        </div>
        <div>
            <input type="number" name="items[${itemCount}][quantity]" required min="1" value="1" class="quantity"
                   style="width: 100%; padding: 1.2rem; font-size: 1.4rem; border: 1px solid #ccc; border-radius: 0.5rem;">
        </div>
        <div>
            <input type="number" name="items[${itemCount}][unit_price]" required min="0" step="0.01" placeholder="0.00" class="unit-price"
                   style="width: 100%; padding: 1.2rem; font-size: 1.4rem; border: 1px solid #ccc; border-radius: 0.5rem;">
        </div>
        <div>
            <button type="button" onclick="removeItem(this)" style="padding: 1.2rem; background: #dc3545; color: white; border: none; border-radius: 0.5rem; cursor: pointer; font-size: 1.4rem;">
                <i class="fas fa-trash"></i>
            </button>
        </div>
    `;
    container.appendChild(newItem);
    itemCount++;
}

function removeItem(button) {
    button.closest('.invoice-item').remove();
}
</script>
@endsection