@extends('layouts.pdf')

@section('title', 'Meja QR Code')

@push('style')
<style>
    .card {
        display: inline-block;
        width: 260px;
        background: #fff;
        border: 2px solid #b30026;
        border-radius: 16px;
        padding: 11px;
        margin: 5px;
        box-sizing: border-box;
        vertical-align: top;
        page-break-inside: avoid;
    }

    .brand-name {
        font-size: 15px;
        font-weight: bold;
        text-align: left;
        margin-bottom: 5px;
    }

    .title {
        text-align: center;
        background-color: #b30026;
        color: #fff;
        padding: 8px 8px;
        border-radius: 10px;
        font-size: 20px;
        font-weight: bold;
    }

    .subtitle {
        text-align: center;
        color: #b30026;
        font-size: 14px;
        margin: 2px 0 15px;
    }

    .qr-section {
        text-align: center;
        background: #fef2f4;
        padding: 11px;
        border-radius: 12px;
        margin-bottom: 15px;
        border: 1px dashed #b30026;
    }

    .qr-section img {
        width: 150px;
        height: 150px;
        object-fit: contain;
    }

    .separator {
        border-top: 1px dashed #b30026;
        margin: 8px 0;
    }

    .steps {
        font-size: 14px;
        color: #000000;
        padding: 10px;
        border-bottom: 1px dashed #b30026;
        background: #fff8f8;
        list-style-position: inside;
        margin: 0;
    }

    .steps li {
        margin: 3px 0;
        font-weight: bold;
    }

    .instruction {
        font-size: 12px;
        background: #fff1f1;
        color: #b30026;
        padding: 8px;
        border-radius: 8px;
        font-weight: bold;
        margin-top: 10px;
    }

    .meja {
        text-align: center;
        background: #b30026;
        color: #fff;
        padding: 10px;
        font-size: 18px;
        font-weight: bold;
        border-radius: 8px;
        margin-top: 8px;
    }

</style>
@endpush
@section('main')
<div class="container">
    @foreach ($tables as $table)
    <div class="card">
        <div class="brand-name">RA KOPIRAN</div>
        <div class="title">PESAN DI SINI</div>
        <div class="subtitle">Tanpa Antri, Tanpa Ribet</div>

        <div class="qr-section">
            @if ($table->qr_code)
            @php
            $path = public_path('storage/' . $table->qr_code);
            $type = pathinfo($path, PATHINFO_EXTENSION);
            $data = file_get_contents($path);
            $base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
            @endphp
            <img src="{{ $base64 }}" alt="QR Meja {{ $table->table_number }}">
            @else
            <p>QR Code tidak tersedia</p>
            @endif
        </div>

        <div class="separator"></div>
        <table width="100%">
            <tr valign="top">
                <td width="50%">
                    <ol class="steps">
                        <li>Scan QR Code</li>
                        <li>Pilih Menu & Bayar</li>
                        <li>Pesanan Akan Diantar</li>
                    </ol>
                </td>
                <td width="50%">
                    <div class="instruction">
                        Setelah Order,<br> Mohon Untuk Tidak Pindah Meja.
                    </div>
                    <div class="meja">No. Meja {{ $table->table_number }}</div>
                </td>
            </tr>
        </table>
    </div>
    @endforeach
</div>
@endsection