@extends('print.layout')

@section('content')
    <style>
        .header-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px 24px;
            margin-bottom: 16px;
            font-size: 12px;
        }

        .header-grid .field {
            display: flex;
            gap: 6px;
        }

        .header-grid .label {
            flex: 0 0 auto;
            color: #6b7280;
            white-space: nowrap;
        }

        .header-grid .value {
            flex: 1 1 auto;
            word-break: break-word;
        }

        .header-grid .field.full-width {
            grid-column: 1 / -1;
        }

        table.line-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 16px;
            font-size: 11px;
        }

        table.line-table th,
        table.line-table td {
            border: 1px solid #9ca3af;
            padding: 5px 6px;
            vertical-align: top;
        }

        table.line-table th {
            background: #f3f4f6;
            font-weight: 600;
            text-align: center;
        }

        table.line-table td.num {
            text-align: right;
            white-space: nowrap;
        }

        table.line-table td.center {
            text-align: center;
        }

        .totals {
            display: flex;
            justify-content: flex-end;
            gap: 24px;
            margin-bottom: 28px;
            font-size: 12px;
            font-weight: 600;
        }

        .signatures {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-top: 32px;
            font-size: 12px;
        }

        .signatures .slot {
            border-top: 1px solid #9ca3af;
            padding-top: 8px;
            min-height: 48px;
        }

        @media print {
            table.line-table thead {
                display: table-header-group;
            }

            table.line-table tr {
                page-break-inside: avoid;
            }
        }
    </style>

    <div class="header-grid">
        @foreach ($headerFields as $field)
            <div @class(['field', 'full-width' => strlen($field['value']) > 48])>
                <span class="label">{{ $field['label'] }}：</span>
                <span class="value">{{ $field['value'] }}</span>
            </div>
        @endforeach
    </div>

    <table class="line-table">
        <thead>
            <tr>
                <th style="width: 36px;">#</th>
                <th style="width: 88px;">{{ __('dberp.fields.product_code') }}</th>
                <th>{{ __('dberp.fields.product_name') }}</th>
                <th style="width: 100px;">{{ __('dberp.fields.spec_model') }}</th>
                <th style="width: 48px;">{{ __('dberp.fields.unit') }}</th>
                <th style="width: 72px;">{{ __('dberp.fields.quantity') }}</th>
                <th style="width: 80px;">{{ __('dberp.fields.unit_price') }}</th>
                <th style="width: 88px;">{{ __('dberp.fields.line_amount') }}</th>
                <th style="width: 72px;">{{ __('dberp.fields.remark') }}</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($lines as $line)
                <tr>
                    <td class="center">{{ $line['row_number'] }}</td>
                    <td>{{ $line['product_code'] }}</td>
                    <td>{{ $line['product_name'] }}</td>
                    <td>{{ $line['sku_spec'] }}</td>
                    <td class="center">{{ $line['unit_name'] }}</td>
                    <td class="num">{{ $line['quantity'] }}</td>
                    <td class="num">{{ $line['unit_price'] }}</td>
                    <td class="num">{{ $line['line_amount'] }}</td>
                    <td>{{ $line['remark'] }}</td>
                </tr>
            @empty
                <tr>
                    <td colspan="9" class="center" style="color: #6b7280;">—</td>
                </tr>
            @endforelse
        </tbody>
    </table>

    @if (! empty($totals))
        <div class="totals">
            @foreach ($totals as $total)
                <span>{{ $total['label'] }}：{{ $total['value'] }}</span>
            @endforeach
        </div>
    @endif

    <div class="signatures">
        <div class="slot">{{ __('dberp.print.signatures.maker') }}</div>
        <div class="slot">{{ __('dberp.print.signatures.reviewer') }}</div>
        <div class="slot">{{ __('dberp.print.signatures.supplier_confirm') }}</div>
        <div class="slot">{{ __('dberp.print.signatures.receiver_confirm') }}</div>
    </div>
@endsection
