@extends('layouts.master')

@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            Etiquette
        @endslot
        @slot('title')
            Etiquette Générée
        @endslot
    @endcomponent
    <style>
        @media print {
            @page {
                size: 40mm 60mm landscape;
                margin: 0;
            }

            body {
                margin: 0;
                padding: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
                overflow: hidden;
                font-family: Arial, sans-serif;
                /* Empêcher le débordement */
            }

            .content {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
                transform: rotate(90deg);
                /* Rotation de l'élément */
                transform-origin: center;
                box-sizing: border-box;
                margin-top: 39%;
                /* margin: auto; */
                /* padding-left: 160px; */
                /* padding-top: 40px; */
            }

            .qrcode img {
                max-width: 22mm;
                max-height: 17mm;
                margin-top: 5px;
                /* Espace entre le QR code et le texte */
            }

            .info p {
                margin: 0;
                font-size: 10px;
                font-weight: bold;
                /* Texte en gras */
                color: black;
                /* Couleur noire */
            }
        }
    </style>
    <div class="row justify-content-center">
        <div class="card">
            <div class="row">
                <!-- Card Header -->
                <div class="col-lg-12 d-print-none">
                    <div class="p-4 card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6>Etiquette Générée pour l'article : {{ $etiquetteArticle->designation ?? '' }}</h6>
                            <div class="d-flex">
                                <a href="javascript:window.print()" class="btn btn-success">
                                    <i class="align-bottom ri-printer-line me-1"></i> Imprimer
                                </a>
                                <a class="btn btn-primary ms-3" onclick="goBack()">
                                    <i class="align-bottom ri-arrow-left-s-line me-1"></i> Retour
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Card Header -->

                <!-- Card Body -->
                <div class="content">
                    @php
                        $applicateParamettre = applicateParamettre('AFFICHER_INFO_SOCIETE_ARTICLE_QRCODE');
                    @endphp
                    @if ($applicateParamettre == 'O')
                        <div class="info">
                            <p>{{ $societeName ?? '' }} - {{ $adrtelefixe ?? '' }}</p>
                            <p>{{ $etiquetteArticle->designation ?? '' }} -
                                {{ $etiquetteArticle->description ?? '' }}</p>
                            <p>{{ viewformateMontant($prixVente) }}</p>
                        </div>
                    @endif
                    <div class="qrcode">
                        @if (!empty($etiquetteArticle->code_bar))
                        <img src="{{ generateQrCodeWithImage($etiquetteArticle->code_bar ?? '') }}" alt="Code-barres">
                        @else
                            <span class="text-danger">Aucun code-barres</span>
                        @endif

                        
                    </div>
                </div>


                <!-- End Card Body -->
            </div>
        </div>
        <script>
            window.onload = function() {
                setTimeout(function() {
                    window.print();
                }, 500);
            };
        </script>
    </div>
@endsection