{{--
    Tab 3: Tutorial (Stampcard Tutorial)
    ---------------------------------------------------------------------------
    editable subset of Stampcard Tutorial variables from resources/lang/en/enterprise.php and reads/writes them in ltm_translations (group='enterprise').

    Data flow (unchanged)
      AJAX GET  /admin/ajax/settings/main_game
        -> response.main_game.tutorial_translations  { key: value, ... }
        -> stampcard_admin.js -> populateTutorial() fills inputs
        -> updateTutorialPreview() per card renders the live mock

      Save Changes (#dsc-form submit)
        -> DSCAdmin.serialize() collects [name="tutorial[<key>]"] only
        -> SettingController::_dsc_save_overall() writes ltm_translations
--}}

@php
    $tutorialSteps = [
        ['key' => 'tutorialWelcome', 'label' => 'Welcome',
         'msg' => 'Welcome to Ayala Malls Christmas Village!<br><br>Click on each Christmas Parol and upload official receipt with at least PHP1,000 spend to earn Raffle Entries.',
         'target' => 'section.tutorial-container .floating-container .floating-button-group button',
         'x' => '250', 'y' => ''],

        ['key' => 'tutorialGamification', 'label' => 'Gamification',
         'msg' => 'Welcome to our Christmas Village!<br><br>Tap each parol to submit receipts and earn raffle entries!',
         'target' => '#bingo_card.theme-map',
         'x' => '260', 'y' => '225'],

        ['key' => 'tutorialRewards', 'label' => 'Rewards',
         'msg' => 'Click here to view your total raffle entries.',
         'target' => '.text-bold.text-center',
         'x' => '95', 'y' => '-280'],

        ['key' => 'tutorialNotification', 'label' => 'Notification',
         'msg' => 'Click here to open the menu.',
         'target' => '.navbar-dark .navbar-toggler',
         'x' => '650', 'y' => ''],

        ['key' => 'tutorialReferral', 'label' => 'Referral',
         'msg' => 'You\'re now ready to begin your adventure.<br><br>You can visit the tutorial again in the Menu anytime.',
         'target' => 'section.tutorial-container .floating-container .floating-button-group button',
         'x' => '250', 'y' => '-200'],

        ['key' => 'tutorialFinal', 'label' => 'Final',
         'msg' => 'Click here to share the campaign.',
         'target' => '[load_popup="popup_share"]',
         'x' => '150', 'y' => '-610'],

        ['key' => 'tutorialAdditionOne', 'label' => 'Addition One',
         'msg' => 'Click here to view and redeem rewards with Points earned.',
         'target' => '[load_popup="popup_rewards"]',
         'x' => '300', 'y' => '-630'],

        ['key' => 'tutorialAdditionTwo', 'label' => 'Addition Two',
         'msg' => 'Click here to check out all exciting activities.',
         'target' => '#grid_btn',
         'x' => '350', 'y' => '-590'],

        ['key' => 'tutorialAdditionThree', 'label' => 'Addition Three',
         'msg' => 'Click on the Menu for more information.',
         'target' => '.navbar-dark .navbar-toggler',
         'x' => '390', 'y' => ''],

        ['key' => 'tutorialAdditionFour', 'label' => 'Addition Four',
         'msg' => 'You\'re now ready to start your adventure.<br><br>Happy playing and enjoy the rewards!',
         'target' => 'section.tutorial-container .floating-container .floating-button-group button:not(last-child)',
         'x' => '225', 'y' => '225'],

        ['key' => 'tutorialAdditionFive', 'label' => 'Addition Five',
         'msg' => 'Extra tutorial 5',
         'target' => '', 'x' => '', 'y' => ''],
    ];

    $tutorialBtns = [
        'tutorialBtnStart'    => ['label' => 'Start Button', 'eg' => 'Start Now'],
        'tutorialBtnNext'     => ['label' => 'Next Button', 'eg' => 'Next'],
        'tutorialBtnPrevious' => ['label' => 'Previous Button', 'eg' => 'Previous'],
        'tutorialBtnComplete' => ['label' => 'Complete Button', 'eg' => 'Complete'],
    ];
@endphp

@component('admin.components.card', ['header' => 'Tutorial Buttons'])
    <p class="text-muted small mb-3">Navigation labels for the tutorial overlay.</p>
    <div class="form-row">
        @foreach ($tutorialBtns as $k => $meta)
            <div class="form-group col-md-3">
                <label>{{ $meta['label'] }}</label>
                <input type="text" class="form-control"
                       name="tutorial[{{ $k }}]"
                       data-tutorial-key="{{ $k }}"
                       placeholder="e.g. {{ $meta['eg'] }}">
                <small class="form-text text-muted"><code>{{ $k }}</code></small>
            </div>
        @endforeach
    </div>
@endcomponent

@component('admin.components.card', ['header' => 'Tutorial Steps'])
    <p class="text-muted small mb-3">
        Each step renders a popup pointing at a target element. <code>Target</code> is a CSS selector.
        <br><bold>Please contact developer in charge on the input of "Target (CSS selector)"</bold>.
        <br><code>Offset&nbsp;X / Offset&nbsp;Y</code> nudge the popup (px) from the target — the live preview on the right shows where
        the popup will land.<br>HTML (e.g. <code>&lt;br&gt;</code>) is allowed inside the message body.
    </p>

    @foreach ($tutorialSteps as $step)
        <div class="card mb-3 dsc-tutorial-card" data-step-key="{{ $step['key'] }}">
            <div class="card-header bg-light py-2">
                <strong class="small text-uppercase">{{ $step['label'] }}</strong>
                <span class="text-muted small ml-2"><code>{{ $step['key'] }}</code></span>
            </div>
            <div class="card-body">
                <div class="row">
                    {{-- ============ LEFT: inputs ============ --}}
                    <div class="col-lg-7">
                        <div class="form-group">
                            <label><strong>Message</strong></label>
                            <textarea class="form-control" rows="3"
                                      name="tutorial[{{ $step['key'] }}]"
                                      data-tutorial-key="{{ $step['key'] }}"
                                      placeholder="e.g. {{ $step['msg'] }}"></textarea>
                        </div>
                        <div class="form-group">
                            <label>Target (CSS selector)</label>
                            <input type="text" class="form-control"
                                   name="tutorial[{{ $step['key'] }}Target]"
                                   data-tutorial-key="{{ $step['key'] }}Target"
                                   placeholder="e.g. {{ $step['target'] !== '' ? $step['target'] : '#card_box_A' }}">
                        </div>
                        <div class="form-row">
                            <div class="form-group col-6">
                                <label>Offset X (px)</label>
                                <input type="number" class="form-control"
                                       name="tutorial[{{ $step['key'] }}OffsetX]"
                                       data-tutorial-key="{{ $step['key'] }}OffsetX"
                                       placeholder="e.g. {{ $step['x'] !== '' ? $step['x'] : '200' }}">
                            </div>
                            <div class="form-group col-6">
                                <label>Offset Y (px)</label>
                                <input type="number" class="form-control"
                                       name="tutorial[{{ $step['key'] }}OffsetY]"
                                       data-tutorial-key="{{ $step['key'] }}OffsetY"
                                       placeholder="e.g. {{ $step['y'] !== '' ? $step['y'] : '-200' }}">
                            </div>
                        </div>
                    </div>

                    {{-- ============ RIGHT: live mock preview ============ --}}
                    <div class="col-lg-5">
                        <div class="text-muted small text-uppercase mb-1">Preview</div>
                        <div class="dsc-tutorial-preview" data-preview-key="{{ $step['key'] }}">
                            <div class="dsc-tutorial-target" title="target element"></div>
                            <div class="dsc-tutorial-popup">
                                <div class="dsc-tutorial-popup-msg"></div>
                                <button type="button" class="dsc-tutorial-popup-next">Next</button>
                            </div>
                            <div class="dsc-tutorial-scale text-muted">scale 0.4 · target = centre</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
@endcomponent

<style>
    /* --- Tutorial Step preview --- */
    .dsc-tutorial-preview {
        position: relative;
        width: 100%;
        min-height: 320px;
        aspect-ratio: 9 / 16;
        background: #d6e8ec;
        border: 1px solid #c0d3d6;
        border-radius: 8px;
        overflow: hidden;
    }
    .dsc-tutorial-target {
        position: absolute;
        top: 50%; left: 50%;
        width: 22px; height: 22px;
        transform: translate(-50%, -50%);
        background: rgba(255, 170, 0, .85);
        border: 2px solid #e65c00;
        border-radius: 50%;
        z-index: 1;
        box-shadow: 0 0 0 4px rgba(255, 170, 0, .25);
    }
    .dsc-tutorial-popup {
        position: absolute;
        top: 50%; left: 50%;
        max-width: 75%;
        min-width: 120px;
        padding: 8px 22px 8px 10px;
        background: #1c1c1c;
        color: #fff;
        font-size: 11px;
        line-height: 1.35;
        border-radius: 6px;
        z-index: 2;
        transition: transform 0.1s linear;
    }
    .dsc-tutorial-popup-msg {
        max-height: 90px;
        overflow: hidden;
        margin-bottom: 6px;
        word-wrap: break-word;
    }
    .dsc-tutorial-popup-msg:empty::before {
        content: "(no message)";
        color: #888;
        font-style: italic;
    }
    .dsc-tutorial-popup-next {
        background: #fff;
        color: #000;
        border: 0;
        border-radius: 4px;
        font-size: 10px;
        padding: 2px 10px;
    }
    .dsc-tutorial-scale {
        position: absolute;
        bottom: 4px; right: 6px;
        font-size: 9px;
        opacity: .6;
    }
</style>