@extends('admin.master')
@section('title')
    {{ 'View QR Links' }}
@endsection
<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: 150px;
        max-width: 150px;
        width: 150px;
        height: 150px;
    }

    .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;
    }

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

    #chartContainer {
        /* max-width: 800px; */
        height: 400px;
        margin: auto;
    }

    canvas {
        width: 100% !important;
        height: 100% !important;
    }
</style>

@section('view-qr-links')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row mt-4">
            <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-8">
                                <div class="d-flex">
                                    <a href="{{ $qr_link->url }}" target="_blank">
                                        <h4 class="text-dark m-1" title="google">{{ $qr_link->title }}</h4>
                                    </a>
                                    <div class="" style="cursor: pointer;margin:5px 0px 0px 6px">
                                        <a id="copy_button">
                                            <svg stroke="currentColor" fill="currentColor" stroke-width="0"
                                                viewBox="0 0 24 24" role="graphics-document" height="1em" width="1em"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path fill="none" d="M0 0h24v24H0z"></path>
                                                <path
                                                    d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z">
                                                </path>
                                            </svg>
                                        </a>
                                    </div>
                                </div>
                                <p class="text-dark m-1">
                                    <a href="{{ asset($qr_link->short_link_code) }}" target="_blank"
                                        id="copy_text">{{ asset($qr_link->short_link_code) }}</a>
                                    <br />
                                </p>
                                <p class="text-dark m-1">
                                    <a href="{{ asset($qr_link->short_link_code) }}"
                                        style="color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity))"
                                        target="_blank">{{ $qr_link->url }}</a>
                                    <br />
                                </p>
                                <p class="text-dark m-1">
                                    QR Type :
                                    @if ($qr_link->qr_type == 0)
                                        Static
                                    @else
                                        Dynamic
                                    @endif
                                </p>
                                <div style="display: flex;margin-top: 1rem;gap: 2rem;">
                                    <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_link->created_at->format('M d,Y') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-3">
            <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">
                                <img src="{{ asset($qr_link->qr_code) }}" class="image-qr" alt="QR Code Image">
                            </div>
                            <div class="col-md-6">
                                <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" height="24" width="24"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <title>more</title>
                                            <path fill="none" d="M0 0h24v24H0V0z"></path>
                                            <path
                                                d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z">
                                            </path>
                                        </svg></small>

                                    <div class="dropdown-menu" aria-labelledby="downloadBtnGroupDrop1">
                                        <a href="{{ route('admin.custom_qr.generator',$qr_link->uuid) }}" class="dropdown-item" id="custom_edit_button" data-bs-uuid="{{ $qr_link->uuid }}"
                                            data-bs-title="{{ $qr_link->title }}" data-bs-url="{{ $qr_link->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>Customize </a>
                                        <a class="dropdown-item" href="{{ asset($qr_link->qr_code) }}"
                                            download="your_qr.png" type="button" data-bs-uuid="{{ $qr_link->uuid }}">
                                            <small class="text-dark"><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>Download PNG</small>
                                        </a>

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

                                        <a class="dropdown-item" href="{{ route('qr.pdf', ['uuid' => $qr_link->uuid]) }}"
                                            download type="button" data-bs-uuid="{{ $qr_link->uuid }}"
                                            id="downloadPdf">
                                            <small class="text-dark"><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>Download PDF</small>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Graph --}}
        <div class="row">
            <div class="col-xl-12 col-12 mb-6">
                <div class="card">
                    <div class="card-header header-elements">
                        <h5 class="card-title mb-0">Latest Statistics</h5>

                    </div>
                    <div class="card-body">
                        <div id="chartContainer">
                            <canvas id="myChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        load_graph_data();

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

            var $temp = $("<input>");
            $("body").append($temp);
            $temp.val($("#copy_text").text().trim()).select();
            document.execCommand("copy");
            $temp.remove();

            $("#copy_button").html('Copied');
        });

        function load_graph_data() {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: 'POST',
                url: '{{ route('admin.load_qrscan_graph') }}',
                data: {
                    uuid: '',
                    _token: '{{ csrf_token() }}'
                },
                async: true,
                dataType: "json",
                success: function(response) {
                    set_data(response);
                }
            });
        }

        function set_data(response) {
            var month = response.map(item => item.month_name);
            var count = response.map(item => parseFloat(item.qr_codes));

            const ctx = document.getElementById('myChart').getContext('2d');
            const myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: month,
                    datasets: [{
                        label: 'Number of scan',
                        data: count,
                        backgroundColor: 'rgba(54, 162, 235, 0.5)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }
    </script>
@endsection