@extends('dashboards.vendor.index')

@section('content')
    <div class="col-lg-9 layout">
        <h2 class="mainHeadig">QR Code</h2>
        <div class="profileSetting totalOrder">

            <div class="profileSetting totalOrder">
                {{-- <ul class="nav nav-pills" id="pills-tab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active generateQrBtn" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab"
                            aria-controls="pills-home" aria-selected="true">Generate Qr Code</a>
                    </li>

                </ul> --}}
                <div class="recentTable totalPayment-table tablecard">
                    <div class="table-responsive-lg">
                        <input type="hidden" id="qrText"
                            value="{{ route('front.vendor.shop', ['vendorId' => $user->id]) }}">
                        @if ($qr)
                            <h5>Your QR Code:</h5>
                            <div id="qrCodeOutput" >
                                {!! $qr->qr_svg !!}
                            </div>
                            <br>
                            <a href="{{ route('download.qr') }}" class="btn btn-primary">Download QR</a>
                        @else
                            <button class="btn btn-success generateQrBtn">Generate QR Code</button>
                            <div id="qrCodeOutput"  style="margin-top: 20px;"></div>
                        @endif


                    </div>
                </div>
            </div>
        </div>

        <!-- section css end -->
    </div>
    </div>
    </section>
    <script>
        $('.generateQrBtn').click(function(e) {
            e.preventDefault();

            let text = $('#qrText').val();

            $.ajax({
                url: '{{ route('generate.qr') }}',
                type: 'POST',
                data: {
                    text: text,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $('#qrCodeOutput').html(response.qr);
                    $('.generateQrBtn').hide();
                    toastr.success('QR Code generated successfully!');
                },
                error: function(xhr) {
                    if (xhr.status === 409) {
                    toastr.error('QR Code already exists!');
                } else {
                    toastr.error('Something went wrong!');
                }
                }
            });
        });
    </script>
@endsection