@extends('components.dashboard.layouts.qr')
@section('title')
    {{ __('dashboard.show_shikara_qr') }}
@endsection
<!-- BEGIN: Content-->
@section('content')
    <style>
        .page-break {
            page-break-before: always;
            /* إدراج فاصل صفحة قبل العنصر */
        }

        @media print {
            .page-break {
                page-break-before: always;
                /* إدراج فاصل صفحة قبل العنصر */
            }

            body {
                margin: 0;
                padding: 0;
                width: 29.7cm;
                /* A3 width */
                height: 42cm;
                /* A3 height */

            }

            #wrapper {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                margin: 0;
            }

            .item {
                flex: 0 0 33.33%;
                max-width: 33.33%;
                padding-bottom: .7cm;
                margin-bottom: .7cm;
                box-sizing: border-box;
            }

            .item img {
                width: 2cm !important;
                height: 1.8cm !important;
                object-fit: scale-down;
            }

            .item p {
                margin: 0;
                font-size: 12pt;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                direction: ltr;
            }


            .item-qr {
                background-image: url({{ $image }});
                background-repeat: no-repeat;
                height: 200px;
                background-size: contain;
                position: relative;
            }

            .item-qr .img {
                position: absolute;
                left: 49px; !important;
                top: 33px; !important;
                width: 120px; !important;
            }

            .item-qr img {
                width: 140px; !important;
            }
        }

        .item-qr {
            background-image: url({{ $image }});
            background-repeat: no-repeat;
            height: 200px;
            background-size: contain;
            position: relative;
        }

        .item-qr .img {
            position: absolute;
            left: 52px;
            top: 30px;
            width: 120px;
        }

        .item-qr img {
            width: 143px;
        }
    </style>
    <div class="">
    </div>
@endsection
<div class="">
    <div class="content-wrapper">
        <div class="col-12 mt-3">
            <div class="card">
                <div class="card-header">
                    <h4>{{$total}}</h4>
                    <h4 class="card-title">{{ __('Show Qr Codes') }}</h4>
                    <a href="javascript:void(0)" id="download" style="margin-top: 5px;" title="{{ __('dashboard.download') }}">
                        <i class="fa fa-download" style="font-size: 21px;color: #f57141;"></i>
                    </a>
                    {{--                    <a href="{{ route('admin.shikara-qr.download-pdf', $shikaraQr->id) }}" id="download" style="margin-top: 5px;"--}}
                    {{--                       title="{{ __('dashboard.download') }}">--}}
                    {{--                        <i class="fa fa-download" style="font-size: 21px;color: #f57141;"></i>--}}
                    {{--                    </a>--}}
                </div>
                <div class="card-content">
                    <div class="card-body text-center">
                        <div id="wrapper" style="display: flex; flex-wrap: wrap;">
                            @forelse($children as $qr)

                                <div class="item item-qr"
                                     style="flex: 0 0 33.33%; max-width: 33.33%; margin-bottom: 16px;">
                                    <div class="img">
                                        <img src="{{ $qr->qRCourse}}" alt=""
                                             style="object-fit: scale-down;">
                                        <p style="font-size: 12px; white-space: nowrap; text-align: center;">
                                            {{ $qr->serial_number }}
                                        </p>
                                    </div>
                                </div>
                            @empty
                                <p class="w-100 alert alert-warning">{{__('dashboard.no shikara qrs')}}</p>
                            @endforelse
                        </div>
                        {{ $children->links() }}
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" id="isDownloaded" value="{{ $qrCode->is_downloaded }}">
    </div>
</div>

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"
            integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $(document).ready(function() {


            $('.statusArray').select2({
                placeholder: "{{ __('dashboard.choose_status') }}",
            })

            $('#download').on('click', function() {
                // if ($('#isDownloaded').val() == 1) {
                //     Swal.fire({
                //         title: 'هل أنت متأكد؟',
                //         text: "تم التحميل من قبل, هل تريد التحميل؟",
                //         icon: 'warning',
                //         showCancelButton: true,
                //         confirmButtonColor: '#3085d6',
                //         cancelButtonColor: '#d33',
                //         confirmButtonText: 'نعم',
                //         cancelButtonText: 'لا'
                //     }).then((result) => {
                //         if (result.isConfirmed) {
                //             downloaded()
                //         }
                //     })
                // } else {
                //     downloaded()
                // }
                downloaded()
            })
        })

        function downloaded() {
            var element = document.getElementById('wrapper');

            // تحديد عدد العناصر في كل صفحة
            var itemsPerPage = 30;
            var totalItems = document.querySelectorAll('.item-qr').length;
            var totalPages = Math.ceil(totalItems / itemsPerPage);

            // تحديد حجم الصفحة بناءً على عدد الصفحات
            var pageHeight = totalPages * 297; // 297pt = A3 height in portrait
            if (pageHeight < 1150) {
                pageHeight = 1150;
            }

            // إضافة فواصل الصفحات
            var items = document.querySelectorAll('.item-qr');
            items.forEach((item, index) => {
                if ((index + 1) % itemsPerPage === 0) {
                    item.insertAdjacentHTML('afterend', '<div class="page-break"></div>');
                }
            });

            var opt = {
                margin: [25, 25, 25, 25], // الهوامش
                filename: 'qr.pdf',
                image: {
                    type: 'jpeg',
                    quality: 1.0
                },
                html2canvas: {
                    dpi: 300, // Increase DPI for better quality
                    scale: 2, // Higher scale for better rendering quality
                    letterRendering: true,
                    useCORS: true // Enable CORS for cross-origin images
                },
                jsPDF: {
                    unit: 'pt',
                    format: [1700, pageHeight],
                    orientation: 'portrait'
                }
            };

            html2pdf().from(element).set(opt).save();

            // حفظ حالة التحميل
            $.ajax({
                url: "/admin/shikara-qr/ajax-save-downloaded/{{ $qrCode->id }}",
                type: "post",
                dataType: "json",
                success: function(response) {
                    $('#isDownloaded').val(response.body.data.is_downloaded)
                }
            });
        }
    </script>
@endsection