Rapport-Laravel/resources/views/form/download.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    @include('layouts.shared/title-meta', ['title' => "Form"])
    @include('layouts.shared/head-css', ["mode" => $mode ?? '', "demo" => $demo ?? ''])
    <link href="{{asset('assets/libs/sweetalert2/sweetalert2.min.css')}}" rel="stylesheet" type="text/css" />
    <!-- Jquery Toast css -->
    <!-- <link href="{{asset('assets/libs/toastr/toastr.min.css')}}" rel="stylesheet" type="text/css" /> -->
    <link href="{{ URL::asset('assets/libs/jquery-toast-plugin/jquery.toast.min.css')}}" rel="stylesheet" type="text/css" />

    <style>
        .helper-toast-msg {
            position: absolute;
            bottom: -10%;
            left: 0;
            right: 0;
            max-width: 175px;
            padding: 7px 5px;
            margin: auto;
            display: inline-block;
            text-align: center;
            font-size: 14px;
            background-color: rgba(0,0,0,0.65);
            color: #fff;
            border-radius: 6px;
            box-shadow: 0 1px 10px rgba(0,0,0,0.25);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease-in-out;
        }
        .helper-toast-msg.toast-active {
            opacity: 1 !important;
            visibility: visible !important;
            bottom: 60px !important;
        }

    </style>
    
</head>

<body>

        <div class="account-pages mt-2 mb-2">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-8 col-lg-6 col-xl-5">
                        <div class="card bg-pattern">
                            @foreach($images as $image)
                            <div class="card-body p-1">
                                <img src="/storage/{{$folder}}{{$image}}" class="img-fluid">
                                <div class="text-center">
                                    <p class="text-muted font-14 mt-2"> Now click below button to download </p>
                                    <a href="/storage/{{$folder}}{{$image}}" download class="btn btn-primary waves-effect waves-light mt-1">Download Image</a>
                                    <!-- <a href="/" class="btn btn-dark waves-effect waves-light mt-3">Homepage</a> -->
                                </div>
                            </div> <!-- end card-body -->
                            @endforeach
                            @if(isset($pdf_file) && $pdf_file != '')
                            <div class="card-body p-1 pt-0 pb-3">
                                <!-- <iframe src="/storage/{{$folder}}{{$pdf_file}}" style="border: none; width: 100%; height:70vh;"></iframe> -->
                                <div class="text-center">
                                    <p class="text-muted font-14 mt-2"> Click below button to download the PDF</p>
                                    <p><b>Note:</b> iPhone users are advised to use Copy PDF Link button to copy the link and paste it in the browser to download.</p>
                                    <a href="/storage/{{$folder}}{{$pdf_file}}" download class="btn btn-primary waves-effect waves-light mt-2">Download PDF</a>
                                    <button type="button" id="copylink" class="btn btn-success waves-effect waves-light mt-2">
                                        Copy PDF Link
                                    </button>
                                    <!-- <a href="/" class="btn btn-dark waves-effect waves-light mt-3">Homepage</a> -->
                                </div>
                            </div> <!-- end card-body -->
                            @endif
                            <div id="helper-toast-msg" class="helper-toast-msg">Link copied to clipboard.</div>
                        </div>
                        <!-- end card -->

                    </div> <!-- end col -->
                </div>
                <!-- end row -->
            </div>
            <!-- end container -->
        </div>
        <!-- end page -->
        @include('layouts.shared/footer-script')
        <!-- Tost-->
        <!-- <script src="{{asset('assets/libs/toastr/toastr.min.js')}}"></script> -->
        <script src="{{ URL::asset('assets/libs/jquery-toast-plugin/jquery.toast.min.js')}}"></script>
        <!-- <script src="{{asset('assets/js/pages/toastr.init.js')}}"></script> -->

        <script type="text/javascript">
            jQuery(document).ready(function ($) {
                // let copylink_btn = document.getElementById("copylink");
                let toastMsg = document.querySelector('#helper-toast-msg'); 
                $('#copylink').on('click', function(){
                    // var textArea = document.getElementById('linkcontainer');
                    // textArea.focus();
                    // textArea.select();
                    try {
                        //var successful = document.execCommand('copy');
                        //domain link: https://web.buildrapport.co/
                        copyToClipboard('https://stage.buildrapport.co/storage/{{$folder}}{{isset($pdf_file)?$pdf_file:''}}');
                        console.log('Success! Copied the link to your Clipboard');
                        $(toastMsg).html('Link copied to clipboard!');
                        $(toastMsg).addClass('toast-active');
                        setTimeout(()=> {
                            console.log('about to hide the toast msg...')
                            $(toastMsg).removeClass('toast-active');
                        }, 3000)

                        $.NotificationApp.send("success!", "Copied the link to your Clipboard", 'top-center', '#5ba035', 'success');
                    } catch (err) {
                        // $(toastMsg).html('Unable to copy link!');
                        // $(toastMsg).addClass('toast-active');
                        // setTimeout(()=> {
                        //     $(toastMsg).removeClass('toast-active');
                        // }, 3000)
                        $.NotificationApp.send("Oops, unable to copy!", "Please copy the link manually.", 'top-center', '#bf441d', 'error');
                        console.log('Oops, unable to copy');
                    }
                });   

                /** Copy text/link to clipboard **/
                function copyToClipboard(textToCopy) {
                  var textArea;

                  function isOS() {
                    //can use a better detection logic here
                    return navigator.userAgent.match(/ipad|iphone/i);
                  }

                  function createTextArea(text) {
                    textArea = document.createElement('textArea');
                    textArea.readOnly = true;
                    textArea.contentEditable = true;
                    textArea.value = text;
                    document.body.appendChild(textArea);
                  }

                  function selectText() {
                    var range, selection;

                    if (isOS()) {
                      range = document.createRange();
                      range.selectNodeContents(textArea);
                      selection = window.getSelection();
                      selection.removeAllRanges();
                      selection.addRange(range);
                      textArea.setSelectionRange(0, 999999);
                    } else {
                      textArea.select();
                    }
                  }

                  function copyTo() {
                    document.execCommand('copy');
                    document.body.removeChild(textArea);
                  }

                  createTextArea(textToCopy);
                  selectText();
                  copyTo();
                }
            });

        </script>



</body>

</html>