{{--
    Stampcard ("dsc") Main Game admin dashboard — top-level wrapper.
    This Blade is rendered by SettingController::_view_main_game() when the
    project's active main game is 'dsc'. Has per-grid Edit modal as a partial.

    Why split into partials?
      - The Edit-Grid modal is shared across cards/grids, so it sits in its own
        partial and is rendered ONCE at the bottom.

    Data flow
    ---------
      AJAX GET  /admin/ajax/settings/main_game (case 'dsc')
        -> response.main_game.setting_details, .cards, .modules, .voucher_series
        -> populatePage() in view_settings.blade.php (game_stampcard branch)
        -> stampcard_admin.js fills every form field
      Save Changes button -> AJAX POST same URL. Per-grid edits go through their own endpoints (stampcard_admin.js).
--}}

@push('script')
    <script src="{{ asset('assets/bower/ckeditor/ckeditor.js') }}"></script>
    <script src="{{ asset('js/admin/stampcard_admin.js') }}?v={{ filemtime(public_path('js/admin/stampcard_admin.js')) }}"></script>
@endpush

<div class="row">

    {{-- LEFT: form (Overall Settings / Cards & Grids) --}}
    <div class="col-12 col-lg-8 col-xl-9">
        <form id="dsc-form" class="form-horizontal" method="POST" autocomplete="off" enctype="multipart/form-data">
            @csrf
            <div class="d-flex align-items-center mb-3">
                <span class="h6 mb-0">Main Game: <span class="text-bold main_game_type">Stampcard</span></span>
            </div>

            <ul class="nav nav-tabs mb-3" id="dsc-tabs" role="tablist">
                <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#dsc-tab-overall">Overall Settings</a></li>
                <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#dsc-tab-cards">Cards &amp; Grids</a></li>
                <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#dsc-tab-tutorial">Tutorial</a></li>
                <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#dsc-tab-bonus">Bonus Rewards</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane fade show active" id="dsc-tab-overall">
                    @include('admin.setting.components._dsc_overall_settings')
                </div>
                <div class="tab-pane fade" id="dsc-tab-cards">
                    @include('admin.setting.components._dsc_cards_and_grids')
                </div>
                <div class="tab-pane fade" id="dsc-tab-tutorial">
                    @include('admin.setting.components._dsc_tutorial')
                </div>
                <div class="tab-pane fade" id="dsc-tab-bonus">
                    @include('admin.setting.components._dsc_bonus_rewards')
                </div>
            </div>
        </form>
    </div>

    {{-- RIGHT: live Preview rail --}}
    <div class="col-12 col-lg-4 col-xl-3">
        @include('admin.setting.components._dsc_preview')
    </div>

</div>
{{-- Modal lives outside the form so its inputs aren't sent on Save Changes. --}}
@include('admin.setting.components._dsc_edit_grid_modal')