@extends('layouts.app')

@section('content')
    <div class="fdb-box row mx-1 py-4">
        <div class="container">
            <div>
                <h2 class="text-gray-700 uppercase font-bold">Members List</h2>
            </div>
            <br>
            <div class="border-l-4 border-gray-600 pl-2">
            </div>

        @include('layouts.messages')
            <table class="table table-sm">
                <thead class="thead-light">
                    <tr>
                        <th scope="col">No.</th>
                        <th scope="col">No. MARA</th>
                        <th scope="col">Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Phone Mo.</th>
                        <th scope="col">QR Code</th>
                        <th scope="col">Action</th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($membersdata as $rowId => $members)
                    <tr>
                        <td style="width: 5%;"><strong>{{ $loop->iteration }}.</strong></td>
                        <td> {{ $members->no_mara }}</strong></td>
                        <td>{{ $members->name }}</td>
                        <td>{{ $members->email }}</td>
                        <td>{{ $members->mobile_no }}</td>
                        <td>{!! QrCode::size(80)->generate($members->mobile_no) !!}</td>
                        <td><button onclick="downloadqr('{{ $rowId }}','{{ $members->mobile_no }}')" target="_blank">Download QR</button></td>
                        <td>
                            <div class="card" id="printqr{{ $rowId }}" style="display: none;">
                                {!! QrCode::size(600)->generate($members->mobile_no) !!}
                            </div>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
            <div class="d-flex justify-content-center">
                {!! $membersdata->links() !!}
            </div>
        </div>
    </div>
    <script>
    function downloadqr(rowId, mobile_no) {
        var container = document.getElementById("printqr" + rowId); // "printqr" div with the specified rowId
        container.style.display = "block";

        html2canvas(container, { allowTaint: true }).then(function (canvas) {
            var link = document.createElement("a");
            document.body.appendChild(link);
            link.download = "ansarapay_" + mobile_no + "_qrcode.png";
            link.href = canvas.toDataURL();
            link.target = "_blank";
            link.click();
        });
        container.style.display = "none";

    }
    </script>
@endsection