@extends('layouts.app')
@section('title', 'Measurement Report')

@section('content')

<style>
    .report-container {
        margin: 20px;
        padding: 2rem;
        background: #fff;
    }

    h2 {
        text-align: center;
        margin-bottom: 2rem;
    }

    .report-meta {
        margin-bottom: 2rem;
        font-size: 1rem;
        color: #374151;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }

    th, td {
        border: 1px solid #e5e7eb;
        padding: 6px;
        text-align: left;
        font-size: 12px;
        word-wrap: break-word;
    }

    th {
        background-color: #f3f4f6;
        text-transform: uppercase;
        font-weight: 600;
    }

    tbody tr:nth-child(even) {
        background-color: #f9fafb;
    }

    .print-btn {
        margin-bottom: 1rem;
        padding: 0.5rem 1rem;
        background-color: #2563eb;
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
    }

    .print-btn:hover {
        background-color: #1d4ed8;
    }

    /* ================= PRINT ================= */
    @media print {

        @page {
            size: A4 portrait;
            margin: 10mm;
        }

        body {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        .report-container {
            margin: 0;
            padding: 0;
        }

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

        h2 {
            font-size: 16px;
            margin-bottom: 10px;
        }

        .report-meta {
            font-size: 11px;
            margin-bottom: 10px;
        }

        th, td {
            font-size: 10px;
            padding: 4px;
        }

        body {
            transform: scale(0.98);
            transform-origin: top left;
        }
    }

    /* ===== COLUMN WIDTH CONTROL ===== */
    .col-sl {
        width: 3%;
    }

    .col-date { width: 10%; }
    .col-small { width: 8%; }
    .col-medium { width: 10%; }
    .col-remarks { width: 20%; }
</style>

<div class="report-container">

    <h2>Measurement Report</h2>

    <div class="report-meta">
        <p><strong>Name:</strong> {{ $member->name ?? 'All Members' }}</p>
        <p><strong>Member ID:</strong> {{ $member->contact_id ?? '-' }}</p>
        <p><strong>Start Date:</strong> {{ $startDate ?? '-' }}</p>
        <p><strong>End Date:</strong> {{ $endDate ?? '-' }}</p>
    </div>

    <button class="print-btn" onclick="window.print()">Print Report</button>

    <table>
        <thead>
            <tr>
                <th class="col-sl">SL</th>
                <th class="col-date">Date</th>
                <th class="col-small">Height</th>
                <th class="col-small">Weight</th>
                <th class="col-small">Chest</th>
                <th class="col-small">Neck</th>
                <th class="col-small">Waist</th>
                <th class="col-small">Thigh</th>
                <th class="col-small">Arm</th>
                <th class="col-small">Fat</th>
                <th class="col-remarks">Remarks</th>
            </tr>
        </thead>

        <tbody>
            @forelse($measurements as $index => $measurement)
                <tr>
                    <td class="col-sl">{{ $index + 1 }}</td>
                    <td class="col-date">
                        {{ \Carbon\Carbon::parse($measurement->measurement_date)->format('d-m-Y') }}
                    </td>
                    <td class="col-small">{{ $measurement->height }}</td>
                    <td class="col-small">{{ $measurement->weight }}</td>
                    <td class="col-small">{{ $measurement->chest }}</td>
                    <td class="col-small">{{ $measurement->neck }}</td>
                    <td class="col-small">{{ $measurement->waist }}</td>
                    <td class="col-small">{{ $measurement->thigh }}</td>
                    <td class="col-small">{{ $measurement->arm }}</td>
                    <td class="col-small">{{ $measurement->fat }}</td>
                    <td class="col-remarks">{{ $measurement->remarks }}</td>
                </tr>
            @empty
                <tr>
                    <td colspan="11" style="text-align:center;">No records found.</td>
                </tr>
            @endforelse
        </tbody>
    </table>

</div>

@endsection