{{--
    Edit-Grid modal.
    Opens from the per-grid Edit button in Cards & Grids → Grids.
    Submits to /admin/ajax/settings/main_game/stampcard/grid/edit/{id} via stampcard_admin.js. 
    NOT inside #dsc-form on purpose — its inputs must NOT travel on the page-level Save Changes click.
--}}

<div class="modal fade" id="dsc-edit-grid-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Editing Grid <span id="dsc-edit-grid-label"></span></h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
 
            <div class="modal-body">
                <input type="hidden" id="dsc-edit-grid-pk">
 
                {{-- ===== Grid Status Display ===== --}}
                <h6 class="text-center mb-3">Grid Status Display</h6>
                <div class="row">
                    <div class="col-md-3">
                        <ul class="nav nav-pills flex-column" id="dsc-status-tabs">
                            @foreach (['incomplete'=>'Incomplete','pending'=>'Pending','rejected'=>'Rejected','completed'=>'Completed'] as $st => $label)
                                <li class="nav-item">
                                    <a class="nav-link {{ $loop->first ? 'active' : '' }}"
                                       data-toggle="pill" href="#dsc-st-{{ $st }}">{{ $label }}</a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="col-md-9">
                        <div class="tab-content">
                            @foreach (['incomplete','pending','rejected','completed'] as $st)
                                <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
                                     id="dsc-st-{{ $st }}" data-status="{{ $st }}">
 
                                    <div class="form-row">
                                        <div class="form-group col-md-12">
                                            <label>Grid Image</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control dsc-st-image" readonly>
                                                <div class="input-group-append">
                                                    <label class="btn btn-outline-secondary mb-0">
                                                        Browse <input type="file" class="d-none dsc-st-image-upload" accept="image/*">
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
 
                                    <div class="form-group">
                                        <label>Title</label>
                                        <input type="text" class="form-control dsc-st-title" placeholder="Congratulations!">
                                    </div>
 
                                    <div class="form-group">
                                        <label>Subtitle</label>
                                        <textarea class="form-control dsc-rte dsc-st-subtitle" rows="4"></textarea>
                                        <small class="form-text text-muted">HTML allowed. Saved as <code>&lt;b&gt;Title&lt;/b&gt;&lt;br&gt;&lt;br&gt;Subtitle</code>.</small>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
 
                <hr>
                {{-- ===== Grid Module ===== --}}
                <fieldset class="border rounded p-3" style="margin-bottom: 20px;">
                    <legend class="w-auto px-2 small text-uppercase">Grid Module</legend>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>Module (active Daily Challenges only)</label>
                            <select class="form-control" id="dsc-grid-module">
                                {{-- Options injected by JS from response.main_game.modules --}}
                            </select>
                            <small class="form-text text-muted">
                                Base settings for this module are managed on the
                                <a href="{{ url('/admin/settings/gamification') }}" target="_blank">Gamification page</a>.
                            </small>
                        </div>

                        {{-- Inherit / Override toggle — only meaningful for upload_receipt --}}
                        <div class="form-group col-md-6" id="dsc-receipt-override-wrap" style="display:none;">
                            <label class="d-block">Receipt settings for this grid</label>
                            <div class="custom-control custom-switch mt-2">
                                <input type="checkbox" class="custom-control-input" id="dsc-grid-receipt-override">
                                <label class="custom-control-label" for="dsc-grid-receipt-override">
                                    Override the base Upload Receipt challenge for this grid
                                </label>
                            </div>
                            <small class="form-text text-muted">
                                Off = inherit the campaign-wide Upload Receipt challenge.
                                On = use the custom settings below for THIS grid only.
                            </small>
                        </div>
                    </div>

                    {{-- ===== Per-grid Store Restriction (upload_receipt only) ===== --}}
                    <div class="form-row" id="dsc-grid-store-restrict-wrap" style="display:none;">
                        <div class="form-group col-md-12">
                            <label class="d-block">Accepted Stores for this Stamp</label>
                            <div class="custom-control custom-switch mt-2">
                                <input type="checkbox" class="custom-control-input" id="dsc-grid-store-restrict">
                                <label class="custom-control-label" for="dsc-grid-store-restrict">
                                    Only approve receipts from selected store(s)
                                </label>
                            </div>
                            <small class="form-text text-muted">
                                Off = any store the receipt resolves to is accepted (current behaviour).<br>
                                On = the receipt's store must be one of the selected stores, otherwise it is rejected.
                            </small>
                        </div>
                        <div class="form-group col-md-6" id="dsc-grid-store-restrict-stores-wrap" style="display:none;">
                            <label>Valid Store(s)</label>
                            <select class="form-control dsc-grid-store-restrict-stores" multiple
                                    data-ajax-url="{{ route('admin.select2.ajax.get_data', 'dsc_grid_store') }}"></select>
                            <small class="form-text text-muted">Pick one or more. Stores come from Business Data → Stores.</small>
                        </div>
                    </div>
                </fieldset>

                {{-- Read-only summary of the INHERITED gamification config (shown when override OFF) --}}
                <fieldset class="border rounded p-3" id="dsc-grid-module-summary-wrap">
                    <legend class="w-auto px-2 small text-uppercase">Module Configuration (read-only)</legend>
                    <div id="dsc-grid-module-summary">
                        <small class="text-muted">Select a module to view its configured settings.</small>
                    </div>
                </fieldset>

                {{-- ===== Per-grid Upload Receipt override form (shown when override ON) ===== --}}
                {{-- Mirrors Gamification → Upload Receipt, EXCLUDING the Input Question section. --}}
                <fieldset class="border rounded p-3" id="dsc-receipt-override-form" style="display:none;">
                    <legend class="w-auto px-2 small text-uppercase">Custom Upload Receipt — This Grid Only</legend>
                    <div class="form-row">
                        <div class="form-group col-md-8">
                            <label>Instructions</label>
                            <textarea class="form-control dsc-rcpt-instructions" rows="2"
                                      placeholder="Upload receipt of your purchase to unlock additional attempt"></textarea>
                        </div>
                        <div class="form-group col-md-4">
                            <div class="custom-control custom-checkbox mb-1">
                                <input type="checkbox" class="custom-control-input" id="dsc-rcpt-shortcut-toggle">
                                <label class="custom-control-label" for="dsc-rcpt-shortcut-toggle">Add Shortcut</label>
                            </div>
                            <input type="text" class="form-control dsc-rcpt-shortcut-label" maxlength="15"
                                   placeholder="Upload Receipt">
                            <small class="form-text text-muted">Max 15 characters.</small>
                        </div>
                    </div>
                    <hr>
                    {{-- Reward Awarded --}}
                    <label class="font-weight-bold">Reward Awarded</label>
                    <div class="form-row align-items-end">
                        <div class="form-group col-md-4">
                            <div class="custom-control custom-checkbox mb-1">
                                <input type="checkbox" class="custom-control-input dsc-rcpt-reward-act" data-type="chance" id="dsc-rcpt-rw-chance-act">
                                <label class="custom-control-label" for="dsc-rcpt-rw-chance-act">Chance(s)</label>
                            </div>
                            <input type="number" min="0" class="form-control dsc-rcpt-reward-qty" data-type="chance" placeholder="1">
                        </div>
                        <div class="form-group col-md-4">
                            <div class="custom-control custom-checkbox mb-1">
                                <input type="checkbox" class="custom-control-input dsc-rcpt-reward-act" data-type="points" id="dsc-rcpt-rw-points-act">
                                <label class="custom-control-label" for="dsc-rcpt-rw-points-act">Point(s)</label>
                            </div>
                            <input type="number" min="0" class="form-control dsc-rcpt-reward-qty" data-type="points" placeholder="1">
                        </div>
                        <div class="form-group col-md-4">
                            <div class="custom-control custom-checkbox mb-1">
                                <input type="checkbox" class="custom-control-input dsc-rcpt-reward-act" data-type="voucher" id="dsc-rcpt-rw-voucher-act">
                                <label class="custom-control-label" for="dsc-rcpt-rw-voucher-act">Voucher Series</label>
                            </div>
                            <select class="form-control dsc-rcpt-reward-vouchers" multiple
                                    data-ajax-url="{{ route('admin.select2.ajax.get_data', 'voucher_series') }}"></select>
                            <small class="form-text text-muted">Only provisioned while stocks last.</small>
                        </div>
                    </div>
                    <hr>
                    {{-- Reward Type: stacking / tiering --}}
                    <label class="font-weight-bold">Reward Type</label>
                    <div class="form-group">
                        <div class="custom-control custom-radio">
                            <input class="custom-control-input dsc-rcpt-reward-option" type="radio" name="dsc_rcpt_reward_option" id="dsc-rcpt-ro-none" value="stacking_tiering_none" checked>
                            <label class="custom-control-label" for="dsc-rcpt-ro-none">No Stacking, No Tiering</label>
                        </div>
                        <div class="custom-control custom-radio">
                            <input class="custom-control-input dsc-rcpt-reward-option" type="radio" name="dsc_rcpt_reward_option" id="dsc-rcpt-ro-stack" value="stacking_yes">
                            <label class="custom-control-label" for="dsc-rcpt-ro-stack">Stacking</label>
                        </div>
                        <div class="custom-control custom-radio">
                            <input class="custom-control-input dsc-rcpt-reward-option" type="radio" name="dsc_rcpt_reward_option" id="dsc-rcpt-ro-tier" value="tiering_yes">
                            <label class="custom-control-label" for="dsc-rcpt-ro-tier">Tiering</label>
                        </div>
                    </div>
                    {{-- Stacking --}}
                    <div id="dsc-rcpt-stacking-block" style="display:none;">
                        <div class="form-row">
                            <div class="form-group col-md-4">
                                <label>Initial Spend Threshold for Receipt to be Valid</label>
                                <input type="number" class="form-control dsc-rcpt-stk-transaction-amount" placeholder="1">
                            </div>
                            <div class="form-group col-md-4">
                                <label>Source of Total Spend Amount</label>
                                <select class="form-control dsc-rcpt-stk-amount-source">
                                    <option value="sku_qty">SKU Quantity</option>
                                    <option value="total">Total Amount</option>
                                    <option value="product">Product</option>
                                </select>
                            </div>
                            <div class="form-group col-md-4">
                                <label>Reward Every (amount)</label>
                                <input type="number" class="form-control dsc-rcpt-stk-every-amount" placeholder="80">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-4">
                                <label>Limit Per User Per Day</label>
                                <input type="number" class="form-control dsc-rcpt-stk-limit-per-day">
                            </div>
                            <div class="form-group col-md-4">
                                <label>Min Receipts</label>
                                <input type="number" class="form-control dsc-rcpt-stk-min-receipts">
                            </div>
                            <div class="form-group col-md-4">
                                <label>Max Top Receipts</label>
                                <input type="number" class="form-control dsc-rcpt-stk-max-top-receipts">
                            </div>
                        </div>
                    </div>

                    {{-- Tiering --}}
                    <div id="dsc-rcpt-tiering-block" style="display:none;">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>Initial Spend Threshold In Order for Receipt to be Valid</label>
                                <input type="number" class="form-control dsc-rcpt-tier-transaction-amount" placeholder="1">
                            </div>
                            <div class="form-group col-md-6">
                                <label>Source of Total Spend Amount</label>
                                <select class="form-control dsc-rcpt-tier-amount-source">
                                    <option value="sku_qty">SKU Quantity</option>
                                    <option value="total">Total Amount</option>
                                    <option value="product">Product</option>
                                </select>
                            </div>
                        </div>
                        <label>Tier Configuration</label>
                        <table class="table table-sm table-bordered">
                            <thead><tr><th>Min</th><th>Max</th><th>Value</th><th style="width:40px;"></th></tr></thead>
                            <tbody id="dsc-rcpt-tier-rows"></tbody>
                        </table>
                        <button type="button" class="btn btn-sm btn-outline-primary" id="dsc-rcpt-tier-add">+ Add Tier</button>
                    </div>

                    <hr>

                    {{-- Limits + approval + flags --}}
                    <div class="form-row">
                        <div class="form-group col-md-4">
                            <label>Upload Receipt Limits</label>
                            <select class="form-control dsc-rcpt-limit-type">
                                <option value="">None</option>
                                <option value="daily">Daily</option>
                                <option value="daily_approved">Daily Approved</option>
                                <option value="weekly">Weekly</option>
                                <option value="weekly_approved">Weekly Approved</option>
                                <option value="monthly">Monthly</option>
                                <option value="monthly_approved">Monthly Approved</option>
                                <option value="lifetime">Lifetime</option>
                                <option value="lifetime_approved">Lifetime Approved</option>
                            </select>
                        </div>
                        <div class="form-group col-md-2">
                            <label>No. of Receipts</label>
                            <input type="number" min="1" class="form-control dsc-rcpt-limit-value">
                        </div>
                        <div class="form-group col-md-6 d-flex flex-column justify-content-end">
                            <div class="custom-control custom-checkbox mb-2">
                                <input type="checkbox" class="custom-control-input" id="dsc-rcpt-auto-approve">
                                <label class="custom-control-label" for="dsc-rcpt-auto-approve">Auto Approve</label>
                            </div>
                            <div class="custom-control custom-checkbox mb-2">
                                <input type="checkbox" class="custom-control-input" id="dsc-rcpt-reward-on-submit">
                                <label class="custom-control-label" for="dsc-rcpt-reward-on-submit">Reward on Submission</label>
                            </div>
                            <div class="custom-control custom-switch mb-2">
                                <input type="checkbox" class="custom-control-input" id="dsc-rcpt-require-merchant">
                                <label class="custom-control-label" for="dsc-rcpt-require-merchant">Require User to input Merchant Name</label>
                            </div>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="dsc-rcpt-require-txn">
                                <label class="custom-control-label" for="dsc-rcpt-require-txn">Require User to Input Txn Amount</label>
                            </div>
                        </div>
                    </div>

                    <hr>

                    {{-- Challenge Status Messages --}}
                    <label class="font-weight-bold">Challenge Status Messages</label>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>Approved Title</label>
                            <input type="text" class="form-control dsc-rcpt-msg-success-title">
                            <label class="mt-2">Approved Subtitle</label>
                            <textarea class="form-control dsc-rcpt-msg-success-subtitle" rows="2"></textarea>
                        </div>
                        <div class="form-group col-md-6">
                            <label>Pending Title</label>
                            <input type="text" class="form-control dsc-rcpt-msg-error-title">
                            <label class="mt-2">Pending Subtitle</label>
                            <textarea class="form-control dsc-rcpt-msg-error-subtitle" rows="2"></textarea>
                        </div>
                    </div>

                    <hr>

                    {{-- Example receipts --}}
                    <label class="font-weight-bold">Sample Receipt Examples</label>
                    <div class="form-row">
                        @foreach([0,1,2] as $eg)
                        <div class="form-group col-md-4">
                            <label>Example {{ $eg+1 }} Name</label>
                            <input type="text" class="form-control dsc-rcpt-example-name mb-2" data-idx="{{ $eg }}">
                            <label>Example {{ $eg+1 }} Image</label>
                            <div class="input-group">
                                <input type="text" class="form-control dsc-sample-url dsc-rcpt-example-img" data-idx="{{ $eg }}" readonly>
                                <div class="input-group-append">
                                    <label class="btn btn-outline-secondary mb-0">
                                        Browse <input type="file" class="d-none dsc-sample-upload" data-idx="{{ $eg }}" accept="image/*">
                                    </label>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </fieldset>
            </div>
 
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="dsc-edit-grid-save">Save Changes</button>
            </div>
        </div>
    </div>
</div>