@extends('admin::curd.blank')


@section('content')
    @foreach ($sub_locations['available'] as $key => $value)
        <div class="content">
            <p>

            <table width="100%" border="0" cellspacing="0" cellpadding="10" align="center">
                <tr>
                    <td colspan="4" border="0">
                        <h1 style="text-align:center; font-size:16px;"><span class="logo-lg">
                                {!! user('admin.web')->currentCompany->logo
                                    ? user('admin.web')->currentCompany->fileShow('logo')->view('admin::general.logo')
                                    : trans('cms.name.html') !!}</span></h1>
                    </td>
                </tr>
            </table>

            <div style="border: 0px ; background-color:#2276b2; padding: 10px;">
                <p style="color:#ffff; text-align:center; font-size:14px;">Scan the below QR code to raise requests for
                </p>
                <p style="color:#ffff; text-align:center;font-family: 'Noto Serif Malayalam'; font-size:14px;">റിക്വസ്റ്റ് നൽകുവാൻ താഴെയുള്ള QR കോഡ് സ്കാൻ
                    ചെയ്യുക</p>
            </div>


            <table width="100%" border="0" cellspacing="0" cellpadding="10" align="center">
                <tr>
                    <td colspan="4" border="0">
                        <p style=" text-align:center; font-size:12px;">
                            <strong>{{ $value->name }} ({{ $value->section_id }}, {{ $value->block_id }})</strong></p>
                    </td>
                </tr>
                <tr>
                    <td colspan="4" style="border: 0px ; text-align:center;">
                        {{-- <img src="data:image/svg;base64, {!!base64_encode(QrCode::size(170)->generate(trans_url('insta_complaint?sublocation_id='.$sub_locations['getRouteKey'][$value->id])))!!}"> --}}
                        <img src="{{ $sub_locations['qr'][$value->id] }}" alt="QR Code">
                    </td>
                </tr>
            </table>
            <p style="border:#2276b2 solid 7.5px;"></p>
            <table width="100%" border="0" cellspacing="0" cellpadding="10" align="center">
                <tr style="height: 50%;">
                    <td colspan="2" border="0">
                        <p style="font-size:12px;"><strong>Instructions:</strong></p>
                    </td>
                    <td colspan="2" border="0">
                        <p style="font-size:12px;"><strong>നിർദ്ദേശങ്ങൾ:</strong></p>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="border: 0px ; font-size:10px "><b>1. Scan QR code.</b></td>
                    <td colspan="2" style="border: 0px ; font-size:10px"><b>1. QR കോഡ് സ്കാൻ ചെയ്യുക.</b></td>
                </tr>
                <tr>
                    <td colspan="2" style="border: 0px ; font-size:10px"><b>2. Ensure Room and Bed number.</b></td>
                    <td colspan="2" style="border: 0px ; font-size:10px"><b>2. മുറിയും ബെഡ് നമ്പറും ഉറപ്പാക്കുക.</b>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="border: 0px ; font-size:10px"><b>3. Enter your phone number.</b></td>
                    <td colspan="2" style="border: 0px ; font-size:10px"><b>3. നിങ്ങളുടെ ഫോൺ നമ്പർ നൽകുക.</b></td>
                </tr>
                <tr>
                    <td colspan="2" style="border: 0px ; font-size:10px"><b>4. Enter Request.</b></td>
                    <td colspan="2" style="border: 0px ; font-size:10px"><b>4. അഭ്യർത്ഥന നൽകുക.</b></td>
                </tr>
                <tr>
                    <td colspan="2" style="border: 0px ; font-size:10px"><b>5. Add Notes or Upload
                            files/photos if required.</b></td>
                    <td colspan="2" style="border: 0px ; font-size:10px"><b>5. കുറിപ്പുകൾ ചേർക്കുക അല്ലെങ്കിൽ
                            ആവശ്യമെങ്കിൽ ഫയലുകൾ/ഫോട്ടോകൾ അപ്‌ലോഡ് ചെയ്യുക.</b></td>
                </tr>
            </table>
            <p style="border:#2276b2 solid 7.5px;"></p>
            <table width="100%" border="0" cellspacing="0" cellpadding="10" align="center">
                <tr>
                    <td colspan="4" style="border: 0px ; text-align:center;">
                        <h1 style="text-align:center; font-size:12px;"><span class="logo-lg">
                                {!! user('admin.web')->currentCompany->logo
                                    ? user('admin.web')->currentCompany->fileShow('logo')->view('admin::general.logo')
                                    : trans('cms.name.html') !!}</span></h1>
                    </td>
                </tr>
            </table>
            </p>

        </div>
    @endforeach
@stop

@section('style')
<style type="text/css">
    body {
        margin: 10px;
    }
    @font-face {
        font-family: 'Noto Serif Malayalam';
        font-style: normal;
        font-weight: 100 900;
        font-display: swap;
        src: url('{{ url() }}/NotoSerifMalayalam-VariableFont_wght.ttf') format('truetype');
        unicode-range: U+0307, U+0323, U+0951-0952, U+0964-0965, U+0D00-0D7F, U+1CDA, U+1CF2, U+200C-200D, U+20B9, U+25CC, U+A830-A832;
    }
    body,
    td,
    th {
        font-family: "Noto Serif Malayalam";
        font-size: 10px;

    }

    tr {
        vertical-align: middle;
        height: 10px;
    }

    th {
        font-weight: bold;
        border: 1px solid #000;
        height: 10px;
    }

    @page {
        margin: 10px 0px 10px 0px;
    }

    @page {
        size: A4;
        margin: 0;
    }
    @media print {
    html, body {
        width: 210mm;
        height: 297mm;
    }
    /* ... the rest of the rules ... */
    }

    @page Sect {
        margin: 10px 0px 10px 0px;
    }

    div.Sector {
        page: Sect;
    }

    th {
        background-color: #a985cd;
        color: #fff;
    }

    .td1 {
        color: #fff;
        background: #2184e7;
        padding: 0px 10px;
        font-size: 14px;
    }

    .td2 {
        color: #fff;
        background: #2184e7;
        padding: 0px 10px;
        font-size: 14px;
        height: 25px;
    }

    .content {
        border: #2276b2 solid 15px;
    }
</style>
@stop

<script type="text/javascript">
    window.print();
</script>