@extends('layout.main')
@section('main-container')
    <div class="mt-5 mb-5">
        <div class="row">
            <div class="col-md-6">
                <h2>QR Code Generator</h2>
                <form id="qrForm" action="{{ route('qr.text') }}" method="POST">
                    @csrf
                    <input type="hidden" name="url" value="{{$item->url}}">
                    <div class="form-group">
                        <label for="qr-text">Enter text to generate QR code</label>
                        <textarea name="qr_text" id="qr-text" class="form-control" rows="10"></textarea>
                    </div>
                    <button type="submit" class="btn btn-success">Generate QR Code</button>
                </form>
            </div>
            
            <!-- Loader (hidden initially) -->
            <div class="col-md-6 loader-dots" id="loader" style="display: none">    
                <div></div>
                <div></div>
                <div></div>
            </div>

            <div class="col-md-6 px-3" id="qrCodeDiv" style="display:none">
                <h2>QR Code</h2>
                <p>QR Code has been generated</p>
                <div class="qr-code">
                    <img id="QrCodeImage" alt="qr-code">
                </div>
                <a id="downloadLink" href="" download="" class="bs-btn bs-btn-success mt-3">
                    Download QR Code <i class="bi bi-download"></i>
                </a>
            </div>
            
        </div>
    </div>
@endsection

@section('script')
<script>
    $(document).ready(function () {
    $('#qrForm').submit(function (event) {
        event.preventDefault(); // Prevent the default form submission
        $('#loader').css('display','flex'); // Show the loader
        const formData = new FormData(this);

        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                if (response.path) {
                    $('#loader').css('display','none'); // Show the loader
                    $('#QrCodeImage').attr('src', response.path);
                    $('#qrCodeDiv').css('display', 'block');
                    $('#downloadLink').attr('href', response.path);
                    $('#downloadLink').attr('download', response.name);
                } else {
                    alert('QR code generation failed!');
                }
            },
            error: function (error) {
                alert('An error occurred while generating the QR code.');
                console.error(error);
            }
        });
    });
});
</script>
@endsection