@extends('dashboard.layouts.app')

@section('content')
    <style>
        @media print {
            body * {
                visibility: hidden !important;
            }

            #invoice,
            #invoice * {
                visibility: visible !important;
            }


            #invoice {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                background-color: white;
                color: black;
            }


            .no-print {
                display: none !important;
            }


            .table-invoice {
                width: 100%;
                font-size: 12pt;
                border-collapse: collapse;
            }

            .table-invoice th,
            .table-invoice td {
                border: 1px solid #000 !important;
                padding: 8px;
            }
        }

        .invoice-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
        }

        .invoice-header {
            background-color: #f8f9fa;
            padding: 20px;
            border-bottom: 2px solid #dee2e6;
        }

        .invoice-logo {
            max-width: 150px;
        }

        .table-invoice th,
        .table-invoice td {
            vertical-align: middle;
        }

        .table-invoice th {
            background-color: #e9ecef;
            font-weight: 600;
        }

        .invoice-footer {
            background-color: #f8f9fa;
            padding: 15px;
            border-top: 2px solid #dee2e6;
        }
    </style>

    <div class="my-5">
        <div class="card shadow border-0" id="invoice">
            <div class="invoice-header d-flex justify-content-between align-items-center">
                <div>
                    <img src="{{ asset('assets/images/logo.png') }}" alt="Logo" class="invoice-logo">
                    <div class="mt-2 mb-0">Upedia</div>
                    <small class="text-muted">123 Academy Street, City, Country</small>
                </div>
                <div class="text-end">
                    <div class="mb-0">Payroll Invoice <span class="text-primary">{{ $payrollInvoice->invoice_no }}</span>
                    </div>
                    <small class="text-muted">Invoice Date: {{ $payrollInvoice->created_at->format('Y-m-d') }}</small><br>
                    <small class="text-muted">Payroll Period:
                        {{ $payrollInvoice->month }}/{{ $payrollInvoice->year }}</small>
                </div>
            </div>
            <div class="card-body p-3">
                <div class="mb-4">
                    <div class="fw-bold text-primary">Information</div>
                    <div class="row">
                        <div class="col-md-6">
                            @if ($payrollInvoice)
                                <p class="mb-1"><strong>Invoice Number:</strong> {{ $payrollInvoice->invoice_no ?? '' }}
                                </p>
                                <p class="mb-1"><strong>Month:</strong> {{ $payrollInvoice->month ?? '' }}</p>
                                <p class="mb-1"><strong>Year:</strong> {{ $payrollInvoice->year ?? '' }}</p>
                                <p class="mb-1"><strong>Total:</strong> {{ $payrollInvoice->total ?? '' }}</p>
                            @else
                                <p class="mb-1">No information available.</p>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="fw-bold mt-4 text-primary">Payroll Details</div>
                <table class="table table-bordered table-invoice mt-3">
                    <thead>
                        <tr>
                            <th>Staff</th>
                            <th>Basic Salary</th>
                            <th>Total Earnings</th>
                            <th>Total Deductions</th>
                            <th>Tax</th>
                            <th>Net Salary</th>
                            <th>Payment Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($payrollInvoice->payrollGenerates as $generate)
                            <tr>
                                <td>
                                    <a href="{{ env('TEACHER_URL_IN_HR_SYSTEM') }}/{{ $generate->staff->id }}">
                                        {{ $generate->staff->first_name ?? '' }} {{ $generate->staff->last_name ?? '' }}
                                    </a>
                                </td>
                                <td>{{ number_format($generate->basic_salary, 2) }}</td>
                                <td>{{ number_format($generate->total_earning, 2) }}</td>
                                <td>{{ number_format($generate->total_deduction, 2) }}</td>
                                <td>{{ number_format($generate->tax, 2) }}</td>
                                <td>{{ number_format($generate->net_salary, 2) }}</td>
                                <td>{{ ucfirst($generate->payroll_status) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="mt-4 text-end">
                    <p><strong>Invoice Total:</strong> {{ number_format($payrollInvoice->total, 2) }}</p>
                    <div class="fw-bold text-primary"><strong>Final Total:</strong>
                        {{ number_format($payrollInvoice->total, 2) }}</div>
                </div>
            </div>
            <div class="invoice-footer text-end">
                <button onclick="window.print()" class="btn btn-primary no-print me-2">
                    <i class="bi bi-printer"></i> Print Invoice
                </button>
                <button class="btn btn-success no-print">
                    <i class="bi bi-download"></i> Download PDF
                </button>
            </div>
        </div>
    </div>
@endsection