Default page

View File Name : 5926d956739cc6e0b261c94bedaad9d711c8f9c4.php

<?php $__env->startSection('styles'); ?>
    <style>
      @font-face {
        font-family: "Lato-Regular";
        src: url(<?php echo e(asset('assets/front/fonts/Lato-Regular.ttf')); ?>);
      }
    </style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div class="page-header">
    <h4 class="page-title"><?php echo e(__('QR Code Builder')); ?></h4>
    <ul class="breadcrumbs">
        <li class="nav-home">
            <a href="<?php echo e(route('user-dashboard')); ?>">
            <i class="flaticon-home"></i>
            </a>
        </li>
        <li class="separator">
            <i class="flaticon-right-arrow"></i>
        </li>
        <li class="nav-item">
            <a href="#"><?php echo e(__('QR Code Builder')); ?></a>
        </li>
    </ul>
</div>
<div class="row">
    <div class="col-lg-7">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title"><?php echo e(__('Qr Code Generator')); ?></h4>
            </div>
            <div class="card-body">
                <form id="qrGeneratorForm" method="POST" enctype="multipart/form-data">
                    <?php echo csrf_field(); ?>
                    <div class="row">
                      <div class="col-lg-6">
                        <div class="form-group">
                          <?php
                              $qrUrl = !empty($abs->qr_url) ? $abs->qr_url : url(Auth::user()->username);
                          ?>
                          <label for=""><?php echo e(__('URL')); ?> **</label>
                          <input type="text" class="form-control" name="url" value="<?php echo e($qrUrl); ?>" onchange="generateQr()">
                          <p class="text-warning mb-0"><?php echo e(__('QR Code will be generated for this URL')); ?></p>
                        </div>
                      </div>
                      <div class="col-lg-6">
                        <div class="form-group">
                            <label for=""><?php echo e(__('Color')); ?></label>
                            <?php
                            if(empty($abs->qr_color)) {
                              $qrColor = '000000';
                            } else {
                              $qrColor = $abs->qr_color;
                            }
                            ?>
                            <input type="text" class="form-control jscolor" name="color" value="<?php echo e($qrColor); ?>" onchange="generateQr()">
                            <p class="mb-0 text-warning"><?php echo e(__('If the QR Code cannot be scanned, then choose a darker color')); ?></p>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-lg-6">
                        <div class="form-group">
                            <label for=""><?php echo e(__('Size')); ?></label>
                            <input class="form-control p-0 range-slider" name="size" type="range" min="200" max="350" value="<?php echo e($abs->qr_size); ?>" onchange="generateQr()">
                            <span class="text-dark size-text float-right"><?php echo e($abs->qr_size); ?></span>
                        </div>
                      </div>
                      <div class="col-lg-6">
                        <div class="form-group">
                            <label for=""><?php echo e(__('White Space')); ?></label>
                            <input class="form-control p-0 range-slider" name="margin" type="range" min="0" max="5" value="<?php echo e($abs->qr_margin); ?>" onchange="generateQr()">
                            <span class="text-dark size-text float-right"><?php echo e($abs->qr_margin); ?></span>
                        </div>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-lg-6">
                        <div class="form-group">
                            <label for=""><?php echo e(__('Style')); ?></label>
                            <select name="style" class="form-control" onchange="generateQr()">
                            <option value="square" <?php echo e($abs->qr_style == 'square' ? 'selected' : ''); ?>><?php echo e(__('Square')); ?></option>
                            <option value="round" <?php echo e($abs->qr_style == 'round' ? 'selected' : ''); ?>><?php echo e(__('Round')); ?></option>
                            </select>
                        </div>
                      </div>
                      <div class="col-lg-6">
                        <div class="form-group">
                            <label for=""><?php echo e(__('Eye Style')); ?></label>
                            <select name="eye_style" class="form-control" onchange="generateQr()">
                            <option value="square" <?php echo e($abs->qr_eye_style == 'square' ? 'selected' : ''); ?>><?php echo e(__('Square')); ?></option>
                            <option value="circle" <?php echo e($abs->qr_eye_style == 'circle' ? 'selected' : ''); ?>><?php echo e(__('Circle')); ?></option>
                            </select>
                        </div>
                      </div>
                    </div>

                    <div class="form-group">
                        <label for=""><?php echo e(__('Type')); ?></label>
                        <select name="type" class="form-control" onchange="generateQr()">
                        <option value="default" <?php echo e($abs->qr_type == 'default' ? 'selected' : ''); ?>><?php echo e(__('Default')); ?></option>
                        <option value="image" <?php echo e($abs->qr_type == 'image' ? 'selected' : ''); ?>><?php echo e(__('Image')); ?></option>
                        <option value="text" <?php echo e($abs->qr_type == 'text' ? 'selected' : ''); ?>><?php echo e(__('Text')); ?></option>
                        </select>
                    </div>
                    <div id="type-image" class="types">
                        <div class="form-group">
                            <div class="col-12 mb-2">
                                <label for="image"><strong> <?php echo e(__('Image')); ?></strong></label>
                            </div>
                            <div class="col-md-12 showImage mb-3">
                                <img src="<?php echo e($abs->qr_inserted_image ? asset('assets/user/img/qr/'.$abs->qr_inserted_image) :  asset('assets/admin/img/noimage.jpg')); ?>" alt="..." class="img-thumbnail qr">
                            </div>
                            <input type="file" name="image" id="image" class="form-control" onchange="generateQr()">
                        </div>
                        <div class="form-group">
                            <label for=""><?php echo e(__('Image Size')); ?></label>
                            <input class="form-control p-0 range-slider" name="image_size" type="range" min="1" max="20" value="<?php echo e($abs->qr_inserted_image_size); ?>" onchange="generateQr()">
                            <span class="text-dark size-text float-right d-block"><?php echo e($abs->qr_inserted_image_size); ?></span>
                            <p class="mb-0 text-warning"><?php echo e(__('If the QR Code cannot be scanned, then reduce this size')); ?></p>
                        </div>
                        <div class="form-group">
                            <label for=""><?php echo e(__('Image Horizontal Position')); ?></label>
                            <input class="form-control p-0 range-slider" name="image_x" type="range" min="0" max="100" value="<?php echo e($abs->qr_inserted_image_x); ?>" onchange="generateQr()">
                            <span class="text-dark size-text float-right"><?php echo e($abs->qr_inserted_image_x); ?></span>
                        </div>
                        <div class="form-group">
                            <label for=""><?php echo e(__('Image Vertical Position')); ?></label>
                            <input class="form-control p-0 range-slider" name="image_y" type="range" min="0" max="100" value="<?php echo e($abs->qr_inserted_image_y); ?>" onchange="generateQr()">
                            <span class="text-dark size-text float-right"><?php echo e($abs->qr_inserted_image_y); ?></span>
                        </div>
                    </div>
                    <div id="type-text" class="types">
                        <div class="form-group">
                            <label>Text</label>
                            <input type="text" name="text" value="<?php echo e($abs->qr_text); ?>" class="form-control" onchange="generateQr()">
                        </div>
                        <div class="form-group">
                            <label>Text Color</label>
                            <?php
                            if (empty($abs->qr_text_color)) {
                            $qrTextColor = '000000';
                            } else {
                            $qrTextColor = $abs->qr_text_color;
                            }
                            ?>
                            <input type="text" name="text_color" value="<?php echo e($qrTextColor); ?>" class="form-control jscolor" onchange="generateQr()">
                        </div>
                        <div class="form-group">
                            <label for=""><?php echo e(__('Text Size')); ?></label>
                            <input class="form-control p-0 range-slider" name="text_size" type="range" min="1" max="15" value="<?php echo e($abs->qr_text_size); ?>" onchange="generateQr()">
                            <span class="text-dark size-text float-right d-block"><?php echo e($abs->qr_text_size); ?></span>
                            <p class="mb-0 text-warning"><?php echo e(__('If the QR Code cannot be scanned, then reduce this size')); ?></p>
                        </div>
                        <div class="form-group">
                            <label for=""><?php echo e(__('Text Horizontal Position')); ?></label>
                            <input class="form-control p-0 range-slider" name="text_x" type="range" min="0" max="100" value="<?php echo e($abs->qr_text_x); ?>" onchange="generateQr()">
                            <span class="text-dark size-text float-right"><?php echo e($abs->qr_text_x); ?></span>
                        </div>
                        <div class="form-group">
                            <label for=""><?php echo e(__('Text Vertical Position')); ?></label>
                            <input class="form-control p-0 range-slider" name="text_y" type="range" min="0" max="100" value="<?php echo e($abs->qr_text_y); ?>" onchange="generateQr()">
                            <span class="text-dark size-text float-right"><?php echo e($abs->qr_text_y); ?></span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="card bg-white">
            <div class="card-header border-bottom">
                <h4 class="card-title d-inline-block text-dark"><?php echo e(__('Preview')); ?></h4>
                <button class="btn btn-success float-right" data-toggle="modal" data-target="#saveModal"><?php echo e(__('Save')); ?></button>
                <form action="<?php echo e(route('user.qrcode.clear')); ?>" class="d-inline-block float-right mr-2">
                  <button class="btn btn-danger" type="submit"><?php echo e(__('Clear')); ?></button>
                </form>
            </div>
            <div class="card-body text-center py-5">
                <div class="p-3 border-rounded d-inline-block border bg-light">
                    <img id="preview" src="<?php echo e(asset('assets/user/img/qr/' . $abs->qr_image)); ?>" alt="">
                </div>
            </div>
            <div class="card-footer text-center border-top">
                <a id="downloadBtn" class="btn btn-success" download="qr-image.png" href="<?php echo e(asset('assets/user/img/qr/' . $abs->qr_image)); ?>">Download Image</a>
            </div>
        </div>
        <span id="text-size" class="invisible"><?php echo e($abs->text); ?></span>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="saveModal" tabindex="-1" role="dialog" aria-labelledby="saveModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle"><?php echo e(__('Save QR Code')); ?></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="<?php echo e(route('user.qrcode.save')); ?>" method="POST" id="qrSaveForm">
          <?php echo csrf_field(); ?>
          <label for=""><?php echo e(__('Name')); ?> **</label>
          <input name="name" type="text" class="form-control" required>
          <p class="text-warning mb-0"><?php echo e(__('This name will be used to identify this specific QR Code from the QR Codes List')); ?></p>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal"><?php echo e(__('Close')); ?></button>
        <button type="submit" form="qrSaveForm" class="btn btn-success"><?php echo e(__('Save')); ?></button>
      </div>
    </div>
  </div>
</div>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('scripts'); ?>
<script type="text/javascript">
    function loadDiv(type) {
      $(".types").removeClass('d-block');
      $(".types").addClass('d-none');
      $("#" + "type-" + type).removeClass("d-none");
      $("#" + "type-" + type).addClass("d-block");
    }


    $(document).ready(function() {
      let type = $("select[name='type']").val();
      loadDiv(type);

      $(".range-slider").on("input", function() {
          $(this).next(".size-text").html($(this).val());
      });

    });

    function generateQr() {

        loadDiv($("select[name='type']").val());
        $(".request-loader").addClass('show');

        let fd = new FormData(document.getElementById('qrGeneratorForm'));
        fd.append('size', $("input[name='size']").val());
        fd.append('margin', $("input[name='margin']").val());
        fd.append('image_size', $("input[name='image_size']").val());
        fd.append('image_x', $("input[name='image_x']").val());
        fd.append('image_y', $("input[name='image_y']").val());
        if ($("select[name='type']").val() == 'text') {
          $("#text-size").text($("input[name='text']").val());
          let fontSize = ($("input[name='size']").val() * $("input[name='text_size']").val()) / 100;
          $("#text-size").css({"font-size": fontSize, "font-family": "Lato-Regular"});
          let textWidth = $("#text-size").width() == 0 ? 1 : $("#text-size").width();
          fd.append('text_width', textWidth);
        }

        $(".range-slider").attr('disabled', true);

        $.ajax({
            url: "<?php echo e(route('user.qrcode.generate')); ?>",
            type: 'POST',
            data: fd,
            contentType: false,
            processData: false,
            success: function(data) {
              $(".request-loader").removeClass('show');
              $(".range-slider").attr('disabled', false);

              if(data == "url_empty") {
                bootnotify("URL field cannot be empty", "Warning", "warning");
              } else {
                $("#preview").attr('src', data);
                $("#downloadBtn").attr('href', data);
              }

            }
        });

    }

</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('user.layout', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/webstoremaker/public_html/resources/views/user/qr/generate.blade.php ENDPATH**/ ?>