@extends('admin.master')
@section('title')
    {{ 'View QR' }}
@endsection
@section('styles')
    <style>
        .qr-card {
            border: 1px solid transparent;
            transition: all 0.3s ease-in-out;
        }

        .qr-card:hover {
            border: 1px solid #c7c7c7;
        }

        .image-qr {
            min-width: 120px;
            max-width: 120px;
        }

        .shadow-custom:hover {
            box-shadow: 6px 6px 5px -1px #8b89894a;
            /* transition: 0.5s; */
        }

        .fix-height {
            min-height: 12em;
            /* max-height: 171px; */
        }

        .title-overflow {
            white-space: nowrap;
            width: 8em;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 700;
        }

        .url-overflow {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .loader {
            background: url("{{ asset('loader.gif') }}") 50% 50% no-repeat rgb(249, 249, 249);
        }
    </style>
@endsection
@section('view-qr')
    <div class="container-xxl flex-grow-1 container-p-y">
        {{-- {{ dd($qrCodeCount) }} --}}
        @if ($qrCodeCount == 0)
            <center>
                <p>No QR code found</p>
            </center>
        @endif
        <form method="POST">
            @csrf
            <div class="row d-flex">
                <div class="col-md-4">
                    <input class="form-control form-control-solid" placeholder="Pick date rage" id="kt_daterangepicker_1" />
                </div>
                <div class="col-md-4">
                    <select class="form-select" name="qr_type" id="qr_type">
                        <option value=""> All QR Types </option>
                        <option value="1">Dynamic</option>
                        <option value="0">Static</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <input class="form-control me-2" type="search" id="search" placeholder="Search" aria-label="Search">
                </div>
            </div>
        </form>

        <div class="row mt-4" id="qrCodeContainer">
            @foreach ($qr_codes as $qr_code)
                <div class="col-lg-12 col-md-6 mb-3">
                    <div class="card shadow-custom">
                        <div class="card-body">
                            <div class="col-md-12 d-flex">
                                <div class="col-md-2 text-center m-auto">
                                    <img src="{{ asset($qr_code->qr_code) }}" class="image-qr" alt="QR Code Image">
                                </div>
                                <div class="col-md-6">
                                    <a href="{{ $qr_code->url }}" target="_blank">
                                        <h4 class="title-overflow text-dark" title="google">{{ ucfirst($qr_code->title) }}
                                        </h4>
                                    </a>
                                    <p class="text-dark">
                                        Website<br />
                                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24"
                                            role="graphics-document" aria-hidden="true" height="15" width="15"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path fill="none" d="M0 0h24v24H0V0z"></path>
                                            <path d="M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9l6 6z">
                                            </path>
                                        </svg><a href="{{ $qr_code->url }}"
                                            style="color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity))"
                                            target="_blank">{{ $qr_code->url }}</a>
                                        <br />
                                    </p>
                                    <p class="text-dark">
                                        QR Type :
                                        @if ($qr_code->qr_type == '0')
                                            Static
                                        @else
                                            Dynamic
                                        @endif
                                    </p>
                                    <div style="display: flex;">
                                        <p class="text-dark"><svg stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 24 24" role="graphics-document" aria-hidden="true"
                                                height="16" width="16" xmlns="http://www.w3.org/2000/svg">
                                                <path fill="none" d="M0 0h24v24H0z"></path>
                                                <path d="M4 9h4v11H4zM16 13h4v7h-4zM10 4h4v16h-4z"></path>
                                            </svg> Scan data</p>
                                        <p class="text-dark"> <svg stroke="currentColor" fill="currentColor"
                                                stroke-width="0" viewBox="0 0 24 24" role="graphics-document"
                                                aria-hidden="true" height="16" width="16"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path fill="none" d="M0 0h24v24H0z"></path>
                                                <path
                                                    d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z">
                                                </path>
                                            </svg> {{ $qr_code->created_at->format('M d,Y') }}</p>
                                        <p class="text-dark">
                                            @if (!empty($qr_code->short_link_code))
                                                <svg viewBox="0 0 20 20" height="16" width="16" aria-hidden="false">
                                                    <path fill="#273144"
                                                        d="M4.917 8.833c-.5-.583-.75-1.25-.75-1.916 0-.75.25-1.417.833-1.917 1-1 2.833-1 3.833 0l1.834 1.833a.805.805 0 001.166 0 .805.805 0 000-1.166L10 3.75C9.167 3 8 2.5 6.833 2.5c-1.166 0-2.25.5-3.083 1.25-.833.833-1.25 2-1.25 3.167 0 1.166.417 2.25 1.25 3.083l1.833 1.833a.9.9 0 00.584.25.9.9 0 00.583-.25.805.805 0 000-1.166L4.917 8.833zM16.25 10l-1.833-1.833a.806.806 0 00-1.167 0 .806.806 0 000 1.166l1.833 1.917c.5.5.834 1.167.834 1.917s-.25 1.416-.834 1.916c-1.083 1.084-2.75 1.084-3.833 0L9.417 13.25a.806.806 0 00-1.167 0 .806.806 0 000 1.167l1.833 1.833c.834.833 2 1.25 3.084 1.25 1.083 0 2.25-.417 3.083-1.25.833-.833 1.25-1.917 1.25-3.083 0-1.25-.417-2.334-1.25-3.167z">
                                                    </path>
                                                    <path fill="#273144"
                                                        d="M12.25 12.25a.756.756 0 01-.583.25.757.757 0 01-.584-.25L7.75 8.917a.806.806 0 010-1.167.806.806 0 011.167 0l3.333 3.333a.806.806 0 010 1.167z">
                                                    </path>
                                                </svg>
                                                <a class="text-dark" id="short_link_text"
                                                    href="{{ asset($qr_code->short_link_code) }}" target="_blank"
                                                    rel="noopener noreferrer">{{ asset($qr_code->short_link_code) }}</a>
                                            @endif
                                        </p>
                                    </div>
                                </div>
                                <div class="col-md-4" style="text-align: right;">
                                    <div class="btn btn-outline-primary btn-group" role="group"
                                        style="margin-right: 7px;">

                                        <i class="fa fa-ellipsis-v p-1" id="btnGroupDrop1" type="button"
                                            class="btn btn-outline-secondary" data-bs-toggle="dropdown"
                                            aria-haspopup="flase" aria-expanded="false" style="rotate: 90deg"></i>

                                        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1" style="">
                                            <a class="dropdown-item"
                                                @if (empty($qr_code->short_link_code)) id="create_link" data-bs-uuid="{{ $qr_code->uuid }}"
                                                    data-bs-toggle="modal" data-bs-target="#modalCenter"
                                                @else 
                                                    href="{{ route('admin.qr.links', ['uuid' => $qr_code->uuid]) }}" @endif>

                                                <svg viewBox="0 0 20 20" height="20" width="20"
                                                    aria-hidden="true">
                                                    <path fill="#273144"
                                                        d="M4.917 8.833c-.5-.583-.75-1.25-.75-1.916 0-.75.25-1.417.833-1.917 1-1 2.833-1 3.833 0l1.834 1.833a.805.805 0 001.166 0 .805.805 0 000-1.166L10 3.75C9.167 3 8 2.5 6.833 2.5c-1.166 0-2.25.5-3.083 1.25-.833.833-1.25 2-1.25 3.167 0 1.166.417 2.25 1.25 3.083l1.833 1.833a.9.9 0 00.584.25.9.9 0 00.583-.25.805.805 0 000-1.166L4.917 8.833zM16.25 10l-1.833-1.833a.806.806 0 00-1.167 0 .806.806 0 000 1.166l1.833 1.917c.5.5.834 1.167.834 1.917s-.25 1.416-.834 1.916c-1.083 1.084-2.75 1.084-3.833 0L9.417 13.25a.806.806 0 00-1.167 0 .806.806 0 000 1.167l1.833 1.833c.834.833 2 1.25 3.084 1.25 1.083 0 2.25-.417 3.083-1.25.833-.833 1.25-1.917 1.25-3.083 0-1.25-.417-2.334-1.25-3.167z">
                                                    </path>
                                                    <path fill="#273144"
                                                        d="M12.25 12.25a.756.756 0 01-.583.25.757.757 0 01-.584-.25L7.75 8.917a.806.806 0 010-1.167.806.806 0 011.167 0l3.333 3.333a.806.806 0 010 1.167z">
                                                    </path>
                                                </svg>

                                                @if (empty($qr_code->short_link_code))
                                                    Create Link
                                                @else
                                                    View Short Link
                                                @endif
                                            </a>
                                            <a class="dropdown-item text-danger" data-bs-uuid="{{ $qr_code->uuid }}"
                                                id="deletebtn"><svg stroke="currentColor" fill="currentColor"
                                                    stroke-width="0" viewBox="0 0 24 24" role="graphics-document"
                                                    height="20" width="20" xmlns="http://www.w3.org/2000/svg">
                                                    <path fill="none" d="M0 0h24v24H0z"></path>
                                                    <path
                                                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z">
                                                    </path>
                                                </svg>
                                                Delete QR Code</a>
                                        </div>
                                    </div>

                                    <div class="btn btn-outline-primary" style="margin-right: 7px;">
                                        <a id="custom_edit_button" data-bs-uuid="{{ $qr_code->uuid }}"
                                            data-bs-title="{{ $qr_code->title }}" data-bs-url="{{ $qr_code->url }}">
                                            <svg stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 24 24" role="graphics-document" aria-hidden="true"
                                                height="20" width="20" xmlns="http://www.w3.org/2000/svg">
                                                <path fill="none" d="M0 0h24v24H0z"></path>
                                                <path
                                                    d="M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.04 10 9c0 3.31-2.69 6-6 6h-1.77c-.28 0-.5.22-.5.5 0 .12.05.23.13.33.41.47.64 1.06.64 1.67A2.5 2.5 0 0112 22zm0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8c.28 0 .5-.22.5-.5a.54.54 0 00-.14-.35c-.41-.46-.63-1.05-.63-1.65a2.5 2.5 0 012.5-2.5H16c2.21 0 4-1.79 4-4 0-3.86-3.59-7-8-7z">
                                                </path>
                                                <circle cx="6.5" cy="11.5" r="1.5"></circle>
                                                <circle cx="9.5" cy="7.5" r="1.5"></circle>
                                                <circle cx="14.5" cy="7.5" r="1.5"></circle>
                                                <circle cx="17.5" cy="11.5" r="1.5"></circle>
                                            </svg></a>
                                    </div>

                                    <div class="btn btn-outline-primary" style="margin-right: 7px;">
                                        <a id="editbutton" data-bs-uuid="{{ $qr_code->uuid }}"
                                            data-bs-title="{{ $qr_code->title }}" data-bs-type="{{ $qr_code->qr_type }}"
                                            data-bs-url="{{ $qr_code->url }}">
                                            <svg stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 24 24" role="graphics-document" aria-hidden="true"
                                                height="20" width="20" xmlns="http://www.w3.org/2000/svg">
                                                <path fill="none" d="M0 0h24v24H0z"></path>
                                                <path
                                                    d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 000-1.41l-2.34-2.34a.996.996 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z">
                                                </path>
                                            </svg></a>
                                    </div>

                                    <div class="btn btn-outline-primary">
                                        <small id="downloadBtnGroupDrop1" type="button" data-bs-toggle="dropdown"
                                            aria-haspopup="flase" aria-expanded="false">
                                            <svg stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 24 24" role="graphics-document" aria-hidden="true"
                                                height="20" width="20" xmlns="http://www.w3.org/2000/svg">
                                                <path fill="none" d="M0 0h24v24H0z"></path>
                                                <path
                                                    d="M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zm-1-4l-1.41-1.41L13 12.17V4h-2v8.17L8.41 9.59 7 11l5 5 5-5z">
                                                </path>
                                            </svg></small>

                                        <div class="dropdown-menu" aria-labelledby="downloadBtnGroupDrop1">
                                            <a class="dropdown-item" href="{{ asset($qr_code->qr_code) }}"
                                                download="your_qr.png" type="button"
                                                data-bs-uuid="{{ $qr_code->uuid }}">
                                                <small class="text-dark">Download PNG</small>
                                            </a>

                                            @if ($qr_code->qr_logo == null)
                                                <a class="dropdown-item"
                                                    href="{{ route('admin.qr.svg', ['uuid' => $qr_code->uuid]) }}"
                                                    type="button" data-bs-uuid="{{ $qr_code->uuid }}" id="downloadSvg">
                                                    <small class="text-dark">Download SVG</small>
                                                </a>
                                            @endif

                                            <a class="dropdown-item"
                                                href="{{ route('qr.pdf', ['uuid' => $qr_code->uuid]) }}" download
                                                type="button" data-bs-uuid="{{ $qr_code->uuid }}" id="downloadPdf">
                                                <small class="text-dark">Download PDF</small>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        @if ($qr_codes->hasMorePages())
            <div style="display: flex; justify-content: center;">
                <button type="button" class="btn btn-primary" id="load-more-qr" style="margin-right: 10px;">Load
                    More</button>
            </div>
        @else
            <script>
                // Hide the button if there are no more pages initially
                $('#load-more-qr').hide();
            </script>
        @endif
    </div>
    <div class="modal fade" id="modalCenter" tabindex="-1" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content" id="create_link_details">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalCenterTitle">Create Link of your code</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col mb-6">
                            <input id="uuid" type="hidden">
                            <span class="text-dark">Title</span>
                            <br />
                            <span id="title"></span>

                            <br />
                            <br />

                            <span class="text-dark">Website</span>
                            <br />
                            <span id="website"></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" id="create_short_link" class="btn btn-primary">Create Link</button>
                </div>
            </div>

            <div class="modal-content" id="short_link_details" style="display: none">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalCenterTitle">Your link is created!</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col mb-6">
                            <p id="link_show">http://172.16.17.15/hardipbhai/3032-qr-code-generator-backend/public/40Y4SMDm
                            </p>
                            <div class="col mb-6">
                                <input type="hidden" id="link"
                                    value="http://172.16.17.15/hardipbhai/3032-qr-code-generator-backend/public/40Y4SMDm"
                                    readonly>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" id="copy_button" class="btn btn-primary">Copy Link</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        let currentPage = {{ $qr_codes->currentPage() }};
        const lastPage = {{ $qr_codes->lastPage() }};

        $(document).ready(function() {
            let start_date = moment().startOf('month');
            let end_date = moment().endOf('month');

            if ($('#start_date').length === 0) {
                $('body').append('<input type="hidden" id="start_date">');
            }
            if ($('#end_date').length === 0) {
                $('body').append('<input type="hidden" id="end_date">');
            }

            $('#start_date').val(start_date.format('YYYY-MM-DD'));
            $('#end_date').val(end_date.format('YYYY-MM-DD'));

            $('#kt_daterangepicker_1').html(start_date.format('MMMM D, YYYY') + ' - ' + end_date.format(
                'MMMM D, YYYY'));

            function cb(start, end) {

                $('#kt_daterangepicker_1').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                $('#start_date').val(start.format('YYYY-MM-DD'));
                $('#end_date').val(end.format('YYYY-MM-DD'));

                filterQrCodes();
            }

            $('#kt_daterangepicker_1').daterangepicker({
                startDate: start_date,
                endDate: end_date,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                }
            }, cb);

            $('#kt_daterangepicker_1').on('apply.daterangepicker', function(ev, picker) {
                console.log("Picker Applied:", picker.startDate.format('YYYY-MM-DD'), picker.endDate.format(
                    'YYYY-MM-DD'));

                $('#start_date').val(picker.startDate.format('YYYY-MM-DD'));
                $('#end_date').val(picker.endDate.format('YYYY-MM-DD'));

                filterQrCodes();
            });

            function filterQrCodes() {
                let search = $('#search').val();
                let qr_type = $('#qr_type').val();
                let startDate = $('#start_date').val();
                let endDate = $('#end_date').val();

                if (!startDate || !endDate) {
                    console.error("Error: Start date or End date is undefined!");
                    return;
                }

                $('#load-more-qr').hide();
                $('#qrCodeContainer').html(
                    `<center><img src="{{ asset('loader.gif') }}" width="100"><br/> <h5>Please wait...we are fetching data!</h5>`
                );
                $.ajax({
                    type: 'POST',
                    url: '{{ route('admin.qr.filters') }}',
                    data: {
                        search: search,
                        qr_type: qr_type,
                        start_date: startDate,
                        end_date: endDate,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        $('#qrCodeContainer').html(response);
                    },
                    error: function(error) {
                        console.error('Error loading QR codes:', error);
                    }
                });
            }

            $(document).on('keyup', "#search", function() {
                filterQrCodes();
            });

            $(document).on('change', "#qr_type", function() {
                filterQrCodes();
            });
        });

        // $(document).on('change', "#start_date, #end_date", filterQrCodes);

        // $(document).on('keyup', "#search", function() {
        //     var search = $('#search').val();
        //     $.ajax({
        //         type: 'POST',
        //         url: '{{ route('admin.qr.filters') }}',
        //         data: {
        //             search: search,
        //             _token: '{{ csrf_token() }}'
        //         },
        //         success: function(response) {
        //             $('#qrCodeContainer').html(response);
        //         }
        //     });
        // });

        // $(document).on('change', "#qr_type", function() {
        //     var qr_type = $('#qr_type').val();
        //     $.ajax({
        //         type: 'POST',
        //         url: '{{ route('admin.qr.filters') }}',
        //         data: {
        //             qr_type: qr_type,
        //             _token: '{{ csrf_token() }}'
        //         },
        //         success: function(response) {
        //             $('#qrCodeContainer').html(response);
        //         }
        //     });
        // });

        const url = "{{ route('admin.qr.load-more') }}";
        $('#load-more-qr').on('click', function() {
            if (currentPage < lastPage) {
                currentPage++;
                loadMoreQrCodes(currentPage);
                if (currentPage == lastPage) {
                    $('#load-more-qr').hide();
                }
            } else {
                $('#load-more-qr').hide();
            }
        });

        function loadMoreQrCodes(page) {
            $.ajax({
                type: 'GET',
                url: `${url}?page=${page}`,
                success: function(response) {
                    $('#qrCodeContainer').append(response);
                },
                error: function(error) {
                    console.error('Error loading more QR codes:', error);
                }
            });
        }


        $(document).on('click', '#editbutton', function(e) {
            e.preventDefault();
            var uuid = $(this).attr('data-bs-uuid');
            var type = $(this).attr('data-bs-type');
            
            var edit_url = "{{ route('admin.qr.generator', ['uuid' => ':uuid']) }}";
            var editUrl = edit_url.replace(':uuid', uuid) + '?type=' + type;
            window.location.href = editUrl;

        });

        $(document).on('click', '#custom_edit_button', function(e) {
            e.preventDefault();
            var uuid = $(this).attr('data-bs-uuid');
            var url = "{{ route('admin.custom_qr.generator', ':uuid') }}";
            var editUrl = url.replace(':uuid', uuid);
            window.location.href = editUrl;
        });

        $(document).on('click', '#deletebtn', function(e) {
            e.preventDefault();

            var uuid = $(this).attr('data-bs-uuid');
            var url = "{{ route('admin.qr.delete', ':uuid') }}";
            url = url.replace(':uuid', uuid);

            Swal.fire({
                title: 'Are you sure?',
                text: "You want to delete this?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: 'get',
                        // data: data,
                        url: url,
                        processData: false,
                        contentType: false,

                        success: function(response) {

                            if (response.status == 200) {
                                Swal.fire(
                                    'Deleted!',
                                    'Your QR Code has been deleted.',
                                    'success'
                                ).then((result) => {
                                    if (result.isConfirmed) {
                                        var ViewAllQrUrl =
                                            "{{ route('admin.qr.view_all') }}";
                                        window.location.href = ViewAllQrUrl;
                                    }
                                })
                            }
                        }

                    })
                }
            })

        });

        $(document).on('click', '#create_link', function(e) {
            e.preventDefault();

            var uuid = $(this).attr('data-bs-uuid');

            $.ajax({
                type: 'POST',
                url: '{{ route('admin.getQrDetails') }}',
                data: {
                    uuid: uuid,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {
                    $('#modalCenter').modal('show');
                    $("#uuid").val(response.data.uuid);
                    $("#title").text(response.data.title);
                    $("#website").attr("href", response.data.url).text(response.data.url);
                },
                error: function(xhr) {
                    console.log(xhr.responseText);
                }
            });
        });

        $(document).on('click', '#create_short_link', function(e) {
            e.preventDefault();
            var uuid = $("#uuid").val();
            $.ajax({
                type: 'POST',
                url: '{{ route('admin.shortlink') }}',
                data: {
                    uuid: uuid,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {
                    $('#modalCenter').modal('show');
                    $('#create_link_details').hide();
                    $('#short_link_details').show();
                    $('#link_show').text(response.data.link);
                }
            });
        });

        $(document).on('click', '#copy_button', function(e) {
            e.preventDefault();
            var textToCopy = $("#link").val();

            var $tempInput = $("<input>");
            $("body").append($tempInput);
            $tempInput.val(textToCopy).select();
            document.execCommand("copy");
            $tempInput.remove();

            $("#copy_button").html('Copied');
        });
    </script>
@endsection