<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print Client Card - {{ $client->client_name }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { background: #f8f9fa; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; }
        .client-card { background: #fff; border: 2px solid #333; padding: 20px; border-radius: 8px; width: 650px; max-width: 100%; display: flex; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
        .left-info { width: 50%; padding-right: 15px; border-right: 1px dashed #ccc; display: flex; flex-direction: column; justify-content: center; }
        .right-qr { width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-left: 15px; }
        .info-item { font-size: 14px; margin-bottom: 4px; line-height: 1.4; }
        @media print {
            body { background: #fff; height: auto; }
            .client-card { box-shadow: none; border: 2px solid #000; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
            .no-print { display: none !important; }
        }
    </style>
</head>
<body onload="window.print()">

    <div class="client-card">
        <div class="left-info">
            <h5 class="text-primary mb-2" style="font-weight: 700;">{{ $client->client_name }}</h5>
            <div class="info-item"><strong>Guardian:</strong> {{ $client->guardian_name }}</div>
            <div class="info-item"><strong>NID:</strong> {{ $client->nid_number }}</div>
            <div class="info-item"><strong>Mobile:</strong> {{ $client->mobile_number ?? 'N/A' }}</div>
            <div class="info-item"><strong>Product:</strong> {{ $client->product_name ?? 'N/A' }}</div>
            <div class="info-item"><strong>Dealer:</strong> {{ $client->dealer->dealer_name ?? 'N/A' }}</div>
            <div class="info-item text-muted" style="font-size: 12px; margin-top: 5px;">Date: {{ \Carbon\Carbon::parse($client->date)->format('d-m-Y') }}</div>
        </div>

        <div class="right-qr">
            <div class="mb-2">{!! QrCode::size(140)->encoding('UTF-8')->generate($client->nid_number) !!}</div>
            <small class="text-muted text-uppercase" style="font-size: 11px; letter-spacing: 1px;">Scan for NID Verification</small>
        </div>
    </div>

    <div class="position-fixed bottom-0 mb-4 no-print">
        <button onclick="window.print()" class="btn btn-primary px-4">Print Card</button>
    </div>

</body>
</html>