<?php $__env->startSection('background'); ?>
    <div class="position-relative w-100" style="height: 125px;">
        
    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
    <div class="container-fluid py-4">
        <div class="row gx-4">
            
            <div class="col-md-3 d-flex flex-column align-items-center">
                <div class="d-flex flex-row align-items-start gap-3">
                    
                    <div class="editor-tab-card">
                        <button id="btnTabBackground" class="editor-tab-btn active" data-tab="background">
                            <div class="icon-circle"><i class="fa fa-globe icon-img"></i></div>
                            <div class="label">Background</div>
                        </button>

                        <button id="btnTabTitle" class="editor-tab-btn" data-tab="title">
                            <div class="icon-circle"><i class="fa fa-header icon-img"></i></div>
                            <div class="label">Title</div>
                        </button>

                        <button id="btnTabSubtitle" class="editor-tab-btn" data-tab="subtitle">
                            <div class="icon-circle"><i class="fa fa-font icon-img"></i></div>
                            <div class="label">Subtitle</div>
                        </button>

                        <button id="btnTabOverlay" class="editor-tab-btn" data-tab="overlay">
                            <div class="icon-circle"><i class="fa fa-fill-drip icon-img"></i></div>
                            <div class="label">Overlay</div>
                        </button>
                    </div>


                    
                    <div class="tab-content-desktop-wrapper">
                        <div id="tab-background" class="tab-pane-desktop">
                            <?php echo $__env->make('partials.editor-tab-background', ['templates' => $templates], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                        </div>
                        <div id="tab-title" class="tab-pane-desktop custom-hide-tab">
                            <?php echo $__env->make('partials.editor-tab-title', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                        </div>
                        <div id="tab-subtitle" class="tab-pane-desktop custom-hide-tab">
                            <?php echo $__env->make('partials.editor-tab-subtitle', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                        </div>
                        <div id="tab-overlay" class="tab-pane-desktop custom-hide-tab">
                            <?php echo $__env->make('partials.editor-tab-overlay', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                        </div>

                    </div>
                </div>
            </div>





            
            <div class="col-md-8 d-flex flex-column justify-content-center align-items-center">
                
                <div class="editor-preview-box" id="previewAreaMobile">
                    <div id="previewLabelLayer" class="position-absolute"></div>
                    <div id="previewOverlayLayer" class="overlay-layer"></div>
                    <div id="previewHeading" class="text-layer"></div>
                    <div id="previewSubtitle" class="text-layer"></div>
                </div>

                
                <div class="d-flex justify-content-center align-items-center gap-3 mt-3">
                    <input type="number" id="qty" class="form-control text-center" min="1" value="1"
                        style="width: 60px;">
                    <button id="checkoutButton" class="btn btn-primary fw-semibold px-4" disabled>Add to Cart</button>
                    
                </div>



                
                <div id="finalCaptureArea" style="position: fixed; top: -9999px; left: -9999px;">
                    <div id="canvasTemplateWrapper"
                        style="width: 100%; height: 100%; position: relative; background-size: cover; background-position: center;">
                        <div id="captureLabelLayer" class="position-absolute"></div>
                        <div id="captureOverlayLayer" class="overlay-layer"></div>
                        <div id="captureHeading" class="text-layer"></div>
                        <div id="captureSubtitle" class="text-layer"></div>
                    </div>
                </div>
            </div>

            <div class="col-md-1 d-flex flex-column align-items-center">
                <div class="editor-action-card">
                    <button id="download-eye-desktop" class="editor-action-btn" onclick="generateMockupPreview()" disabled>
                        <div class="action-icon">
                            <img src="<?php echo e(asset('assets/eye.png')); ?>" alt="Preview" class="action-img">
                        </div>
                        <div class="action-label">Preview</div>
                    </button>


                    <!-- Tombol Color Overlay -->
                    

                    <!-- Tombol Overlay (tetap) -->
                    <button class="editor-action-btn" id="btnOverlayToggle">
                        <div class="action-icon">
                            <img src="<?php echo e(asset('assets/bucket.png')); ?>" class="action-img" alt="Overlay">
                        </div>
                        <div class="action-label">Color Overlay</div>
                    </button>

                    <!-- Submenu Overlay Desktop (disamakan dengan mobile) -->
                    <div id="overlayControls" class="overlay-submenu card p-3 shadow-sm rounded-4 d-none"
                        style="width: 250px;">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <label class="fw-semibold mb-0">Atur Overlay Warna:</label>
                            <button id="closeOverlayControls" class="btn btn-sm btn-light rounded-circle"
                                style="width: 32px; height: 32px;">✖</button>
                        </div>

                        <div class="d-flex justify-content-center gap-2 mb-3 flex-wrap">
                            <button class="color-circle-lg" data-color="none"
                                style="background: transparent; border: 1px solid #ccc;"></button>
                            <button class="color-circle-lg" data-color="#ff69b4" style="background: #ff69b4;"></button>
                            <button class="color-circle-lg" data-color="#00ff66" style="background: #00ff66;"></button>
                            <button class="color-circle-lg" data-color="#66ccff" style="background: #66ccff;"></button>
                            <button id="openColorPicker" class="btn btn-sm btn-light px-2">🎨</button>
                        </div>

                        <!-- Ganti class d-none -->
                        <input type="color" id="customOverlayColor" class="form-control form-control-color"
                            value="#000000" title="Choose color"
                            style="position: absolute; opacity: 0; pointer-events: none;">

                        <label for="floatingOverlayOpacity" class="form-label small">Opacity</label>
                        <input type="range" id="floatingOverlayOpacity" class="form-range mb-3" min="0"
                            max="1" step="0.01" value="0.3">
                    </div>


                </div>


                
                

            </div>


        </div>

        <input type="hidden" id="uuid" value="<?php echo e(session('uuid')); ?>">
        <!-- Modal Preview Mockup -->

        <div class="modal fade" id="mockupPreviewModal" tabindex="-1" aria-labelledby="mockupLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Mockup Preview</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <img id="mockupPreviewImage" src="" alt="Mockup Preview" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>




        <div id="loadingOverlay"
            style="display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background-color: rgba(0,0,0,0.5); z-index:9999; justify-content:center; align-items:center; flex-direction: column;">

            <div class="spinner-border text-light" role="status" style="width: 3rem; height: 3rem;">
                <span class="visually-hidden">Loading...</span>
            </div>
            <div class="mt-3 text-white">Sedang mengirim...</div>
        </div>
    <?php $__env->stopSection(); ?>

    <?php $__env->startPush('styles'); ?>

        <style>
            .bg-pattern {
                background: url('<?php echo e(asset('assets/bg-desktop.png')); ?>') no-repeat center top;
                background-size: cover;
            }

            .tab-desktop-btn {
                width: 100%;
                background: white;
                border: 2px solid #00A6FF;
                color: #00A6FF;
                border-radius: 12px;
                padding: 12px 8px;
                text-align: center;
                font-size: 16px;
                transition: all 0.2s ease-in-out;
            }

            .tab-desktop-btn.active {
                background-color: #00A6FF;
                color: white;
            }

            .tab-pane-desktop {
                background: white;
                border-radius: 16px;
                padding: 16px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            }

            .editor-preview-box {
                width: 640px;
                height: 400px;
                aspect-ratio: 16 / 10;
                position: relative;
                background: #f0f0f0;
                border-radius: 16px;
                overflow: hidden;
            }

            .overlay-layer {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
            }

            .text-layer {
                position: absolute;
                width: 100%;
                text-align: center;
                pointer-events: none;
            }

            #loadingOverlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background: rgba(0, 0, 0, 0.5);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                z-index: 9999;
            }

            .editor-tab-card {
                width: 100px;
                height: 100%;
                background: #FFFFFF;
                border-radius: 42px;
                box-shadow: 0px 4px 8.1px rgba(0, 0, 0, 0.15);
                display: flex;
                flex-direction: column;
                align-items: center;
                padding-top: 32px;
                padding-bottom: 32px;
                gap: 28px;
            }

            .editor-tab-btn {
                display: flex;
                flex-direction: column;
                align-items: center;
                border: none;
                background: none;
                cursor: pointer;
                gap: 8px;
            }

            .editor-tab-btn .label {
                font-size: 14px;
                color: #00A6FF;
                font-weight: 500;
            }

            .icon-circle {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background-color: #fff;
                border: 2px solid #00A6FF;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .icon-img {
                width: 28px;
                height: 28px;
                object-fit: contain;
            }

            .bg-active {
                background-color: #00A6FF;
                border: none;
            }

            .bg-active img {
                filter: brightness(1000%);
            }

            .editor-tab-btn.active .icon-circle {
                background-color: #00A6FF;
                border: none;
            }

            .editor-tab-btn.active .label {
                color: #00A6FF;
            }

            .text-blue {
                color: #00A6FF;
            }

            .editor-action-card {
                background: transparent;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 28px;
                padding-top: 40px;
            }

            .editor-action-btn {
                background: none;
                border: none;
                cursor: pointer;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 6px;
            }

            .action-icon {
                background: white;
                width: 58px;
                height: 58px;
                border-radius: 18px;
                box-shadow: 0px 4px 8.1px rgba(0, 0, 0, 0.15);
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .action-img {
                width: 26px;
                height: 26px;
                object-fit: contain;
            }

            .action-label {
                font-size: 13px;
                font-weight: 500;
                color: #000;
                line-height: 1.1;
            }

            .bg-thumb-wrapper {
                width: 100%;
                max-width: 100px;
                border: 2px solid transparent;
                border-radius: 12px;
                overflow: hidden;
                cursor: pointer;
                transition: border 0.2s ease-in-out;
            }

            .bg-thumb-wrapper:hover {
                border-color: #00A6FF;
            }

            .bg-thumb {
                width: 100%;
                height: auto;
                object-fit: cover;
                display: block;
                border-radius: 8px;
            }

            #previewAreaMobile {
                /* width: 100%; */
                aspect-ratio: 16 / 10;
                background-size: cover;
                background-position: center;
                position: relative;
                margin-bottom: 20px;
            }

            #previewLabelLayer {
                position: absolute !important;
                width: 100%;
                aspect-ratio: 16 / 10;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                z-index: 5;
            }

            #previewHeading,
            #previewSubtitle,
            #captureHeading,
            #captureSubtitle {
                /* font-family: 'ColumbiaSerial', sans-serif; */
                font-family: 'Poppins', sans-serif;
                font-weight: 600;
            }

            #previewHeading,
            #previewSubtitle {
                position: absolute;
                width: 100%;
                text-align: center;
                color: white;
                text-shadow: 1px 1px 2px black;
            }

            #previewHeading {
                top: 50%;
                font-size: 25px;
            }

            #previewSubtitle {
                top: 62%;
                font-size: 15px;
            }

            /* #finalCaptureArea {
                                                                                                position: fixed;
                                                                                                top: -10000px;
                                                                                                left: -10000px;
                                                                                                width: 800px;
                                                                                                height: 500px;
                                                                                                font-family: 'ColumbiaSerial', sans-serif;
                                                                                            } */
            #finalCaptureArea {
                position: fixed;
                top: -10000px;
                left: -10000px;
                /* position: relative;
                                                                                                top: auto;
                                                                                                left: auto; */
                margin-top: 20px;
                width: 100%;
                aspect-ratio: 16 / 10;
                /* biar sama dengan preview */
                /* font-family: 'ColumbiaSerial', sans-serif; */
                font-family: 'Poppins', sans-serif;
                font-weight: 600;
                background-size: cover;
                background-position: center;
                /* optional buat debugging */
            }

            #captureLabelLayer {
                position: absolute !important;
                width: 100%;
                aspect-ratio: 16 / 10;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                z-index: 5;
            }

            #canvasTemplateWrapper {
                width: 100%;
                height: 100%;
                background-size: cover;
                background-position: center;
                position: relative;
            }

            #captureHeading,
            #captureSubtitle {
                position: absolute;
                width: 100%;
                text-align: center;
                color: white;
                text-shadow: 1px 1px 2px black;
            }

            #captureHeading {
                top: 50%;
                /* left: 43%; */
                /* transform: translate(-50%, -50%); */
                font-size: 25px;
            }

            #captureSubtitle {
                top: 62%;
                /* left: 43%; */
                /* transform: translate(-50%, -50%); */
                font-size: 15;
            }

            .bg-thumb-wrapper {
                border: 2px solid transparent;
                border-radius: 10px;
                overflow: hidden;
                width: 100px;
                height: 100px;
            }

            .bg-thumb-wrapper:hover {
                border-color: #00aaff;
            }

            .bg-thumb {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .tab-content-desktop-wrapper {
                min-width: 150px;
                max-width: 220px;
                height: 400px;
                /* Tetapkan tinggi tetap */
                overflow-y: auto;
                transition: height 0.2s ease-in-out;
            }

            .tab-pane-desktop {
                min-height: 100%;
                height: 100%;
            }

            .custom-hide-tab {
                visibility: hidden;
                opacity: 0;
                pointer-events: none;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
            }

            /* Default button di dalam card */
            .editor-tab-btn .icon-circle {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background-color: #fff;
                border: 2px solid #000000;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .editor-tab-btn .icon-img {
                font-size: 22px;
                color: #000000;
            }

            .editor-tab-btn .label {
                font-size: 14px;
                color: #000000;
                font-weight: 500;
            }

            /* Active button */
            .editor-tab-btn.active .icon-circle {
                background-color: #00A6FF;
                border: none;
            }

            .editor-tab-btn.active .icon-img {
                color: #ffffff;
            }

            .editor-tab-btn.active .label {
                color: #00A6FF;
            }

            .overlay-submenu {
                margin-top: 10px;
                background: white;
                border-radius: 12px;
                padding: 12px;
                width: 100px;
                box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 10px;
                transition: all 0.2s ease;
            }

            .color-circle-lg {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                border: none;
                cursor: pointer;
            }

            .editor-action-btn:disabled {
                opacity: 0.5;
                pointer-events: none;
                cursor: not-allowed;
            }

            #mockupPreviewModal .modal-body {
                /* max-height: 500px; */
                overflow-y: auto;
                text-align: center;
            }

            #mockupPreviewImage {
                max-height: 500px;
                height: auto;
                width: auto;
            }

            /* INTROJS */
            /* --- Intro.js tune --- */
            .introjs-tooltip {
                font-size: 14px;
                border-radius: 12px;
            }

            .introjs-button {
                font-size: 12px !important;
                padding: 6px 12px !important;
                border-radius: 8px !important;
            }

            /* "Lewati" (skip) biar gak kegedean */
            .introjs-skipbutton {
                font-size: 12px !important;
                padding: 2px 8px !important;
                line-height: 1.2 !important;
                opacity: .85;
            }

            /* Posisikan skip rapi di pojok tooltip */
            .introjs-tooltip .introjs-skipbutton {
                position: absolute;
                top: 10px;
                right: 12px;
            }

            /* Biar layer di atas elemen lain tapi gak nutup modal bootstrap */
            .introjs-overlay,
            .introjs-helperLayer,
            .introjs-tooltipReferenceLayer {
                z-index: 1065 !important;
                /* > offcanvas (1050), < modal (1070) */
            }
        </style>
    <?php $__env->stopPush(); ?>

    <?php $__env->startPush('scripts'); ?>

        <script>
            window.templatesByCategory = <?php echo json_encode($templates, 15, 512) ?>;
        </script>
        <script src="<?php echo e(asset('js/lab-editor-desktop.js')); ?>"></script>
    <?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.desktop', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/plossayokesen/public_html/resources/views/lab/editor-desktop.blade.php ENDPATH**/ ?>