@extends('site.layouts.app')

@section('title', 'Order General Link')
@section('stylesheets')
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />
    <link href="{{ asset('creative/component/bootstrap-fileinput/themes/explorer-fas/theme.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('creative/component/icheck-bootstrap/icheck-bootstrap.min.css') }}">
    <style>
        .icheck-info input {
            z-index: 999;
            cursor: pointer;
            width: 100%;
            height: 100%;
            padding: 0px;
        }

        .select2-container .select2-selection--multiple .select2-selection__rendered {
            position: absolute;
            padding: 0px !important;
        }

        .customcheckbox {
            width: 22px;
            height: 22px;
            background: url("{{ asset('assets/img/green.png') }}") no-repeat;
            background-position-x: 0%;
            background-position-y: 0%;
            cursor: pointer;
            margin: 0 auto;
        }

        .customcheckbox.checked {
            background-position: -48px 0;
        }

        .customcheckbox input {
            cursor: pointer;
            opacity: 0;
            scale: 1.6;
            width: 22px;
            height: 22px;
            margin: 0;
        }
    </style>
@endsection
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">Order General Link</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a
                                href="{{ route('site.order.index', ['site' => $site->slug]) }}">Home</a>
                        </li>
                        <li class="breadcrumb-item"><a
                                href="{{ route('site.order.index', ['site' => $site->slug]) }}">Order</a>
                        </li>
                        <li class="breadcrumb-item active">Order General Link</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="overlay d-none">
            <div class="spinner-border" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex flex-column gap-3 align-items-center p-4 border rounded shadow-sm bg-light">
                        @if ($site->id == 5)
                            <h5 class="mb-3 mt-5">Scan QR Code Untuk Melakukan Pemesanan Room Service</h5>
                        @else
                            <h5 class="mb-3 mt-5">Scan QR Code untuk melakukan pemesanan sebagai pelangan umum</h5>
                        @endif

                        <div class="mb-4">
                            <img id="qrImage"
                                src="{{ route('site.order.qr', ['site' => $site->slug, 'type' => 'general']) }}"
                                alt="QR Code Order" class="img-fluid" style="max-width: 360px;">
                        </div>

                        <div class="d-flex gap-3 mb-5">
                            <a href="{{ route('web.orders.index', ['site' => $site->slug, 'type' => 'general', 'code' => '']) }}"
                                class="btn btn-outline-primary btn-lg">
                                Add Order as General
                            </a>

                            <button class="btn btn-outline-success btn-lg" onclick="downloadQR()">Download QR</button>
                            <button class="btn btn-outline-secondary btn-lg" onclick="printQR()">Print QR</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        function downloadQR() {
            const qrImage = document.getElementById('qrImage');
            const link = document.createElement('a');
            link.href = qrImage.src;
            link.download = 'qr-code-general.png';
            link.click();
        }

        function printQR() {
            // Ambil URL absolut dari gambar
            const qrImage = document.getElementById('qrImage').src;
            const printWindow = window.open('', '_blank');

            printWindow.document.write(`
                <!DOCTYPE html>
                <html>
                    <head>
                        <title>Print QR Code</title>
                        <style>
                            body {
                                font-family: Arial, sans-serif;
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;
                                height: 100vh;
                                margin: 0;
                                padding: 20px;
                                text-align: center;
                            }
                            .content-container {
                                max-width: 800px;
                                width: 100%;
                                margin: auto;
                            }
                            img {
                                max-width: 100%;
                                height: auto;
                                display: block;
                                margin: 0 auto;
                            }
                            hr {
                                width: 100%;
                                margin: 20px auto;
                                border: 0;
                                border-top: 1px solid #ccc;
                            }
                        </style>
                    </head>
                    <body>
                        <div class="content-container">
                            @if ($site->id == 5)
                                <h3>QR Code Menu Room Servis</h3>
                            @else
                                <h3>QR Code Order General</h3>
                            @endif

                            <img src="${qrImage}" style="max-width: 460px;" onload="triggerPrint()" onerror="alert('Gagal memuat gambar QR di halaman print.')">
                            @if ($site->id == 6)
                                <p class="mb-3 mt-5"> Untuk Konfirmasi Pesanan Hubungi <br /> +62 812-9245-3007</p>
                            @endif
                            @if ($site->id == 5)
                                <p class="mb-3 mt-5"> Untuk konfirmasi pesanan hubungi <br /> +62 857-7129-3220</p>
                            @endif
                            @if ($site->id == 1)
                                 <p>“Untuk konfirmasi pesanan hubungi +62 819-4771-7470”</p>
                            @endif
                            <hr>
                             @if ($site->id == 5)
                                <p class="mb-3 mt-5">Scan QR Code Untuk Melakukan Pemesanan Room Service</p>
                            @else
                                <p class="mb-3 mt-5">Scan QR Code untuk melakukan pemesanan sebagai pelangan umum</p>
                            @endif
                            <hr>
                        </div>

                        <script>
                            // Fungsi ini hanya akan dipanggil ketika gambar sudah 100% tampil
                            function triggerPrint() {
                                window.focus();
                                setTimeout(() => { window.print(); }, 500); // Beri jeda 0.5 detik untuk memastikan render sempurna
                            }

                            // Tutup otomatis setelah print selesai
                            window.onafterprint = function() {
                                window.close();
                            };
                        <\/script>
                    </body>
                </html>
            `);

            printWindow.document.close();
        }
    </script>
@endpush