{{--
    Tab 1: Overall Settings
    Writes to daily_challenges(slug=dsc).setting_details on Save Changes.
    Field name pattern: main_game[setting_details][<key>][...]

    Layout notes:
      - Every control sits inside its own .form-group so labels stay paired
        with inputs even when the page's right rail shrinks the form column.
      - The 3 message sections (Individual / All / Subsequent) are Bootstrap
        cards stacked vertically with mb-3. They used to be <fieldset>s,
        which the admin layout was treating as flex children and squashing
        side-by-side.
--}}

@component('admin.components.card', ['header' => 'General'])
    <div class="form-group">
        <label for="dsc_max_cards">Limit total number of stampcards per user</label>
        <div class="input-group" style="max-width:340px;">
            <div class="input-group-prepend">
                <span class="input-group-text">
                    <input type="checkbox" id="dsc_max_cards_enable"
                           class="js-toggle-disable" data-target="#dsc_max_cards"
                           aria-label="Enable cap">
                </span>
            </div>
            <input type="number" min="-1" class="form-control" id="dsc_max_cards"
                   name="main_game[setting_details][max_cards]" placeholder="-1 = unlimited">
        </div>
        <small class="form-text text-muted">
            Stored in <code>setting_details.max_cards</code>. Tick the box to enforce a cap, leave
            unticked or set to <code>-1</code> for unlimited.
        </small>
    </div>
@endcomponent

@component('admin.components.card', ['header' => 'Progression'])
    {{-- 1. Master toggle on its own row --}}
    <div class="form-group">
        <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="dsc_progress_show">
            <label class="custom-control-label" for="dsc_progress_show">
                <strong>Show progress bar on stampcard page</strong>
            </label>
        </div>
        <small class="form-text text-muted">
            When off, the progress bar is hidden entirely.
        </small>
    </div>

    <hr class="my-3">
    <div class="form-group">
        <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="dsc_progress_use_images">
            <label class="custom-control-label" for="dsc_progress_use_images">
                <strong>Use custom images for the progress bar</strong>
            </label>
        </div>
        <small class="form-text text-muted">
            When off, the default circles &amp; green ticks are shown. When on, upload an
            <em>incomplete</em> and a <em>completed</em> image for each step below &mdash; they
            replace the circle / tick for that step.
        </small>
    </div>
    {{-- One row per step, injected by stampcard_admin.js (template at bottom of file) --}}
    <div id="dsc_progress_step_images" class="d-none"></div>

    {{-- 2. Progress type below the toggle, on its own row --}}
    <div class="form-group">
        <label for="dsc_progress_type"><strong>Progress Type</strong></label>
        <select class="form-control" id="dsc_progress_type"
                name="main_game[setting_details][progress_display][type]"
                style="max-width:320px;">
            <option value="card">Stamp Card Count</option>
            <option value="grid">Grid Count</option>
        </select>
        <small class="form-text text-muted">
            How the bar counts: by whole cards completed, or by individual grids/stamps.
        </small>
    </div>

    {{-- 3. Reward-icon positions, with a clear caption ABOVE the checkboxes --}}
    <div class="form-group mb-0">
        <label><strong>Show reward icon at specific progress positions (specific for each grid)</strong></label>
        <small class="form-text text-muted mb-2">
            Tick a box to display a reward icon over that grid. Order follows the grid order
            (A, B, C&hellip;). JS will render one checkbox per grid that exists on Card&nbsp;1.
        </small>
        <div id="dsc_progress_show_reward" class="d-flex flex-wrap"></div>
    </div>
@endcomponent

@component('admin.components.card', ['header' => 'Customize Stampcard Messages'])

    @php
        $popupSections = [
            ['key' => 'completed_card',     'label' => 'Individual Stamp Card Completion',
             'help' => 'Shown when a user finishes one card.'],
            ['key' => 'completed_card_all', 'label' => 'All Stamp Cards Completion',
             'help' => 'Shown once the user has completed every available card.'],
            ['key' => 'new_card',           'label' => 'Subsequent Stamp Card Greeting',
             'help' => 'Shown when a new card is unlocked after finishing the previous one.'],
        ];
    @endphp

    @foreach ($popupSections as $sec)
        @php $key = $sec['key']; @endphp
        <div class="card mb-3 dsc-message-card">
            <div class="card-header bg-light py-2">
                <strong class="small text-uppercase">{{ $sec['label'] }}</strong>
                <span class="text-muted small ml-2">{{ $sec['help'] }}</span>
            </div>
            <div class="card-body">
                <div class="form-group">
                    <label><strong>Title</strong></label>
                    <textarea class="form-control dsc-rte" rows="2"
                              name="main_game[setting_details][{{ $key }}][title]"
                              placeholder="e.g. Congratulations!"></textarea>
                    <small class="form-text text-muted">
                        HTML allowed. Use the Upload Image widget below to host
                        a image and drop an <code>&lt;img&gt;</code>
                        tag straight into the title.
                    </small>
                    @include('admin.setting.components._dsc_image_uploader')
                </div>

                <div class="form-group">
                    <label><strong>Subtitle</strong></label>
                    <textarea class="form-control dsc-rte" rows="4"
                              name="main_game[setting_details][{{ $key }}][subtitle]"></textarea>
                    <small class="form-text text-muted">HTML allowed.</small>
                    @include('admin.setting.components._dsc_image_uploader')
                </div>

                <div class="form-group">
                    <label><strong>CTA Buttons</strong></label>
                    <small class="form-text text-muted mb-2">
                        Each row defines one button on the popup. Add multiple buttons if needed.<br>
                        Load Popup ID: ID of the popup to load when the button is clicked. (contact DEV PIC for inputting this value)<br>
                        Onclick JS: JavaScript to execute when the button is clicked. (contact DEV PIC for inputting this value)
                    </small>

                    <div class="form-row text-muted small font-weight-bold dsc-btn-header d-none d-md-flex">
                        <div class="col-md-3 pl-2">Button Text</div>
                        <div class="col-md-3 pl-2">Button ID</div>
                        <div class="col-md-3 pl-2">Load Popup ID</div>
                        <div class="col-md-2 pl-2">Onclick JS</div>
                        <div class="col-md-1"></div>
                    </div>

                    <div class="dsc-btns-repeater" data-key="{{ $key }}">
                        {{-- Rows injected by stampcard_admin.js (template below) --}}
                    </div>

                    <button type="button" class="btn btn-sm btn-outline-secondary mt-2 dsc-btns-add"
                            data-key="{{ $key }}">+ Add CTA</button>
                </div>

                <div class="form-group mb-0">
                    <label><strong>Footer</strong></label>
                    <input type="text" class="form-control"
                           name="main_game[setting_details][{{ $key }}][footer]"
                           placeholder="Optional footer line under the buttons">
                </div>
            </div>
        </div>
    @endforeach
@endcomponent

{{-- CTA-button row template — cloned by stampcard_admin.js each time +Add CTA is clicked. --}}
<template id="dsc-btn-row-template">
    <div class="form-row align-items-center mb-2 dsc-btn-row">
        <div class="col-md-3"><input type="text" class="form-control form-control-sm" data-field="text"        placeholder="Button text"></div>
        <div class="col-md-3"><input type="text" class="form-control form-control-sm" data-field="id"          placeholder="id (optional)"></div>
        <div class="col-md-3"><input type="text" class="form-control form-control-sm" data-field="load_popup"  placeholder="load_popup id (optional)"></div>
        <div class="col-md-2"><input type="text" class="form-control form-control-sm" data-field="onclick"     placeholder="onclick js"></div>
        <div class="col-md-1 text-right">
            <button type="button" class="btn btn-sm btn-link text-danger dsc-btn-remove" title="Remove">&times;</button>
        </div>
    </div>
</template>

{{-- Image upload for the custom progress bar --}}
<template id="dsc-progress-img-row-template">
    <div class="dsc-pi-row border rounded p-2 mb-2">
        <div class="small font-weight-bold mb-2 dsc-pi-label">Step</div>
        <div class="form-row">
            @foreach (['incomplete' => 'Incomplete', 'completed' => 'Completed'] as $st => $lbl)
                <div class="col-md-6 mb-2">
                    <label class="small text-muted mb-1">{{ $lbl }} image</label>
                    <div class="input-group input-group-sm">
                        <div class="input-group-prepend">
                            <label class="btn btn-outline-secondary mb-0" title="Upload">
                                <i class="fas fa-image mr-1"></i> Upload
                                <input type="file" class="d-none dsc-pi-upload"
                                       data-state="{{ $st }}" accept="image/*">
                            </label>
                        </div>
                        <input type="text" class="form-control dsc-pi-url"
                               data-state="{{ $st }}" placeholder="Image URL…">
                    </div>
                    <img src="" class="dsc-pi-thumb img-thumbnail mt-1 d-none"
                         data-state="{{ $st }}" style="max-height:48px;">
                </div>
            @endforeach
        </div>
    </div>
</template>

<style>
    .dsc-message-card { display: block; width: 100%; }
</style>