@extends('layouts/fullLayoutMaster')

@section('title', 'PO-' . $vendor_po->our_po_number)

@section('page-style')
<link rel="stylesheet" href="{{ asset(mix('css/base/pages/app-invoice-print.css')) }}">
<style>
    @page { margin: 0; }              /* remove PDF white border */
    body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; color: #0b2e59; }
    .invoice-print { padding: 0 !important; }

    /* ===== HEADER (FULL WIDTH, NO BORDER) ===== */
    .cpw-header{
        width: 100%;
        background: #0b2e59;
        color: #fff !important;
        padding: 12px 22px;
        box-sizing: border-box;
    }
    .cpw-header *{ color:#fff !important; }

    .cpw-header-table{
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }
    .cpw-header-table td{ vertical-align: top; padding: 0; }
    .cpw-header-left{ width: 55%; }
    .cpw-header-right{
        width: 45%;
        text-align: left;
        font-size: 11px;
        line-height: 1.35;
    }
    .cpw-header-right div{ margin: 0; padding: 0; }

    .cpw-logo{
        display: block;
        height: 42px;
    }
    .cpw-po-title{
        margin-top: 6px;
        font-size: 20px;
        font-weight: 800;
        letter-spacing: .8px;
    }

    /* ===== TOP INFO (MATCH YOUR TEMPLATE ORDER) ===== */
    .top-area{
        padding: 18px 22px 0 22px;
        box-sizing: border-box;
    }

    .po-meta{
         width: max-content;     /* shrink to content width */
         margin-left: auto;      /* push block to the right */
         text-align: left;       /* text starts at same left edge */
         font-size: 13px;
         line-height: 1.55;
         margin-bottom: 6px;
         color: #0b2e59;
    }
    .po-meta b{ color:#000; }

    .info-grid{
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        margin-top: 4px;
    }
    .info-grid td{
        vertical-align: top;
        padding: 0;
    }
    .info-grid .colL{ width: 50%; padding-right: 18px; }
    .info-grid .colR{ width: 50%; padding-left: 18px; }

    .label{
        font-weight: 800;
        color: #000;
        font-size: 16px;
        margin: 0 0 6px 0;
    }
    .block{
        font-size: 12px;
        line-height: 1.45;
        margin: 0;
        color: #0b2e59;
    }
    .spacer16{ height: 16px; }

    /* ===== TABLE ===== */
    .table-wrap{ padding: 10px 22px 0 22px; box-sizing: border-box; }

    table.cpw-table{
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        margin-top: 12px;
    }
    table.cpw-table th{
        background: #0b2e59;
        color: #fff !important;
        border: 1px solid #0b2e59;
        padding: 8px 8px;
        font-size: 12px;
        font-weight: 800;
        text-align: center;
    }
    table.cpw-table td{
        border: 1px solid #999;
        padding: 8px 8px;
        font-size: 12px;
        vertical-align: top;
        color: #0b2e59;
    }
    .center{ text-align:center !important; }
    .num{
        text-align:center !important;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    /* ===== NOTES ===== */
    .notes{
        padding: 14px 22px 0 22px;
        box-sizing: border-box;
        font-size: 11px;
        color: #0b2e59;
    }
    .notes b{ color:#000; }
    .notes ul{ margin: 6px 0 0 18px; padding: 0; }
    .notes li{ margin: 2px 0; }

    /* ===== FOOTER (STICK TO BOTTOM) ===== */
    .footer{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 10px;
        text-align: center;
        font-size: 10px;
        color: #0b2e59;
    }
</style>
@endsection

@section('content')
<div class="invoice-print">

    {{-- ===== HEADER ===== --}}
    <div class="cpw-header">
        <table class="cpw-header-table">
            <tr>
                <td class="cpw-header-left">
                    {{-- logo path you mentioned: images/... --}}
                    <img class="cpw-logo" src="{{ asset('images/logo/logo-cpw.png') }}" alt="Capewing Aerospace">
                    <div class="cpw-po-title">PURCHASE ORDER</div>
                </td>
                <td class="cpw-header-right">
                    <div><b>Address:</b> Office No. 142, 1 Bentel Avenue, 1st Floor, Jansen Park, Johannesburg, South Africa 1501</div>
                    <div><b>Tell:</b>+27115680910</div>
                    <div>www.capewing.com |&nbsp; purchasing@capewing.com</div>
                </td>
            </tr>
        </table>
    </div>

    <div class="top-area">

        {{-- PO Number & Date UP ABOVE --}}
        <div class="po-meta">
            <div><b>PO Number:</b> {{ $vendor_po->our_po_number }}</div>
            <div><b>Date:</b> {{ \Carbon\Carbon::parse($vendor_po->date)->format('M-d-Y') }}</div>
        </div>

        {{-- Buyer/Vendor vs BillTo/ShipTo aligned and facing each other --}}
        <table class="info-grid">
            <tr>
                <td class="colL">
                    <p class="label">Buyer:</p>
                    {{-- Buyer EXACT same block as Bill To --}}
                    <p class="block"><b>CAPEWING AEROSPACE</b></p>
                    <p class="block">Office No. 142, 1 Bentel Avenue, 1st Floor</p>
                    <p class="block">Jansen Park, Johannesburg, South Africa 1501</p>
                    <p class="block">Tell:+27115680910</p>

                    <div class="spacer16"></div>

                    <p class="label">Vendor:</p>
                    <p class="block"><b>{{ $vendor_po->vendor->name }}</b></p>
                    <p class="block">{!! nl2br(e($vendor_po->vendor->address)) !!}</p>
                    @if(!empty($vendor_po->vendor->phone))
                        <p class="block">Tel: {{ $vendor_po->vendor->phone }}</p>
                    @endif
                    @if(!empty($vendor_po->vendor->email))
                        <p class="block">Email: {{ $vendor_po->vendor->email }}</p>
                    @endif
                </td>

                <td class="colR">
                    <p class="label">Bill To:</p>
                    <p class="block"><b>CAPEWING AEROSPACE</b></p>
                    <p class="block">Office No. 142, 1 Bentel Avenue, 1st Floor</p>
                    <p class="block">Jansen Park, Johannesburg, South Africa 1501</p>
                    <p class="block">Tell:+27115680910</p>

                    <div class="spacer16"></div>

                    <p class="label">Ship To:</p>
                    <p class="block"><b>CAPEWING AEROSPACE</b></p>
                    <p class="block">Office No. 142, 1 Bentel Avenue, 1st Floor</p>
                    <p class="block">Jansen Park, Johannesburg, South Africa 1501</p>
                    <p class="block">Tell:+27115680910</p>
                </td>
            </tr>
        </table>
    </div>

    {{-- ===== TABLE ===== --}}
    <div class="table-wrap">
        @php $sub_total = 0; @endphp

        <table class="cpw-table">
            <thead>
                <tr>
                    <th width="6%">Row</th>
                    <th width="14%">Part Number</th>
                    <th width="38%">Description</th>
                    <th width="8%">Cond</th>
                    <th width="8%">Qty</th>
                    <th width="13%">Unit Price</th>
                    <th width="13%">Total Price</th>
                </tr>
            </thead>
            <tbody>
                @foreach($VendorPOParts as $idx => $part)
                    @php
                        $line_total = $part->quantity * $part->unit_price;
                        $sub_total += $line_total;
                    @endphp
                    <tr>
                        <td class="center">{{ $idx + 1 }}</td>
                        <td><b>{{ $part->inventory->part_number }}</b></td>
                        <td>
                            {{ $part->inventory->description }}<br>
                            @if($part->cert)<b>Cert:</b> {{ $part->cert }}<br>@endif
                            @if($part->tag_date)<b>Tag Date:</b> {{ $part->tag_date }}<br>@endif
                            @if($part->lead_time)<b>Lead Time:</b> {{ $part->lead_time }}<br>@endif
                            @if($part->note)<b>Note:</b> {{ $part->note }}@endif
                        </td>
                        <td class="center">{{ $part->condition }}</td>
                        <td class="center">{{ $part->quantity }}</td>
                        <td class="num">${{ number_format($part->unit_price, 2) }}</td>
                        <td class="num">${{ number_format($line_total, 2) }}</td>
                    </tr>
                @endforeach

                <tr>
                    <td colspan="6" class="num" style="font-weight:800;background:#f2f2f2;">Total [USD]</td>
                    <td class="num" style="font-weight:800;background:#f2f2f2;">${{ number_format($sub_total, 2) }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    {{-- ===== NOTES ===== --}}
    <div class="notes">
        <p><b>Notes:</b></p>
        <ul>
            <li>All parts must comply with FAA/EASA certification standards.</li>
            <li>All shipments must include a copy of the purchase order and a detailed packing list.</li>
            <li>Any inquiries regarding this PO should be directed to purchasing@capewing.com.</li>
            <li>Certificate of Conformance and full traceability required.</li>
        </ul>
    </div>

    {{-- ===== FOOTER (BOTTOM OF PAGE) ===== --}}
    <div class="footer">
        Capewing Aerospace | Johannesburg, South Africa | www.capewing.com
    </div>

</div>
@endsection

@section('page-script')
<script src="{{ asset('js/scripts/pages/app-invoice-print.js') }}"></script>
@endsection