@extends('layouts.app')

@section('title', 'Print Invoice')

@push('styles')
<style>
@media print {
    body { background: white; }
    nav, header, .sidebar, .sticky, .lg\\:hidden, button, .no-print { display: none !important; }
    main { margin: 0 !important; padding: 0 !important; overflow: visible !important; }
    .flex.h-full { display: block !important; }
    .min-w-0 { margin-left: 0 !important; }
    .border, .shadow-sm, .rounded-lg { border: none !important; box-shadow: none !important; }
    @page { margin: 10mm; }
}
</style>
@endpush

@section('content')
<div class="no-print mb-6 flex items-center justify-between">
    <div>
        <h2 class="page-title">Print: {{ $invoice->invoice_number }}</h2>
        <p class="page-subtitle">Print or download this invoice</p>
    </div>
    <div class="flex items-center gap-3">
        <button onclick="window.print()" class="btn-secondary">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
            Print
        </button>
        <a href="{{ route('invoices.pdf', $invoice->id) }}" class="btn-primary">Download PDF</a>
    </div>
</div>
<div class="bg-white">
    {!! $html !!}
</div>
@endsection