@extends('admin.layouts.app')

@section('content')
    <div class="page-header">
        <div class="page-title">
            <h4>Requirement Report</h4>
            <ul class="breadcrumb">
                <li class="breadcrumb-item active">Requirement Report</li>
            </ul>
        </div>
        <div class="text-right">
            <button class="btn btn-primary" onclick="printWithTimestamp()">Print Requirement Report</button>
        </div>
    </div>

    <div class="card">
        <div class="card-body p-0">
            <h4 class="card-header text-center">Requirement Report</h4>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-primary">
                        <tr class="">
                            <th colspan="2" class=""></th>
                            <th class="text-center" colspan="3">Level</th>
                            {{-- <th rowspan="2">Max.<br>Level</th>
                            <th rowspan="2">Min.<br>Level</th>
                            <th rowspan="2">Current<br>Level</th> --}}
                            <th></th>
                            <th colspan="4" class="text-center">In Process PR's</th>
                        </tr>
                        <tr class="">
                            <th class="">Code</th>
                            <th class="">Item</th>
                            <th>Max</th>
                            <th>Min</th>
                            <th>Current</th>
                            <th>Reorder<br>Qty</th>
                            <th>PR#</th>
                            <th>PR Qty</th>
                            <th>Qty Recv</th>
                            <th>Qty Bal</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($requirementReport as $requirement)
                            <tr>
                                <td>{{ $requirement->code }}</td>
                                <td>{{ $requirement->name }}</td>
                                <td>{{ $requirement->max_level ?? 0 }}</td>
                                <td>{{ $requirement->min_level ?? 0 }}</td>
                                <td>{{ $requirement->balance() ?? 0 }}</td>
                                <td>{{ $requirement->ordered_quantity ?? 0 }}</td>
                                <td>
                                    @if (isset($requirement->invoice_codes) && is_array($requirement->invoice_codes))
                                        @foreach ($requirement->invoice_codes as $invoice_code)
                                            {{ $invoice_code }}@if (!$loop->last)
                                                ,
                                            @endif
                                        @endforeach
                                    @else
                                        No invoices
                                    @endif
                                </td>
                                <td>{{ $requirement->ordered_quantity ?? 0 }}</td>
                                <td>{{ $requirement->received_quantity ?? 0 }}</td>
                                <td>{{ $requirement->ordered_quantity - $requirement->received_quantity ?? 0 }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Print timestamp will be added here -->
    <div id="printTimestampContainer"></div>
    </div>
    </div>
@endsection

<style>
    .card-header {
        display: none !important;
    }

    /* Print layout — targeted and predictable */
    @media print {
        .card-header {
            display: block !important;
        }

        .page-header,
        .no-print,
        button,
        .btn {
            display: none !important;
        }

        /* page settings */
        @page {
            size: auto;
            margin: 3% !important;
        }

        html,
        body {
            background: none !important;
            height: auto !important;
            margin: 0;
            padding: 0;
        }

        .non-pdf-content {
            display: none !important;
            visibility: hidden !important;
        }

        /* make the main card take normal flow in print */
        /* #main_card, */
        .card,
        .card-body {
            position: static !important;
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            box-shadow: none !important;
            border: none !important;
        }

        .card {
            margin-top: -2.5rem !important;
        }

        /* Keep table colors */
        .table-primary th {
            background-color: #cfe2ff !important;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
            color: #000 !important;
        }

        .approved-target {
            background-color: #198754 !important;
            color: white !important;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }

        #printTimestampContainer {
            display: block !important;
            text-align: right !important;
            margin-top: 10px !important;
            font-size: 12px !important;
            color: #666 !important;
        }

        /* small helper: prevent table rows from splitting awkwardly */
        table {
            border: 1px solid #000 !important;
            page-break-inside: auto !important;
        }

        th,
        td {
            border: 1px solid #000 !important;
        }

        tr {
            border: 1px solid #000 !important;
            page-break-inside: avoid !important;
            page-break-after: auto !important;
        }
    }
</style>
{{-- <style>
    @media print {
        @page {
            margin: 0;
        }

        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        body * {
            visibility: hidden;
        }

        table,
        table * {
            visibility: visible;
        }

        table {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
        }

        .table-primary th {
            background-color: transparent !important;
            -webkit-print-color-adjust: exact;
            color-adjust: exact;
        }
    }
</style> --}}
