@viewModel Carelearning.Prototype.ViewModels.DefaultViewModel, Carelearning.Prototype
@masterPage Views/MasterPage.dotmaster
@import DotVVM.Contrib.Select2

<dot:Content ContentPlaceHolderID="Head">
    <style>
        /* Clean form control styling for consistency */
        .form-control, select {
            height: calc(1.5em + 0.75rem + 2px);
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }
        
        .form-control:focus, select:focus {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }
        
        /* Target Select2 (Control #1) - make it look more like BusinessPack */
        #activityTypes {
            position: relative;
        }
        
        /* Target BusinessPack ComboBox (Control #2) - fix arrow positioning */
        #status.dotvvm-bp-combo-box {
            display: flex;
            align-items: center;
            padding: 0;
        }
        
        #status .dotvvm-bp-primitive_input {
            flex: 1;
            border: none;
            padding: 0.375rem 0.75rem;
            background: transparent;
            outline: none;
            margin: 0;
        }
        
        #status .dotvvm-bp-command_toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            padding: 0.375rem 0.75rem;
            margin: 0;
            min-width: 30px;
        }
        
        #status .dotvvm-bp-command_toggle svg,
        #status .dotvvm-bp-command_toggle .dotvvm-bp-icon {
            width: 16px;
            height: 16px;
        }
    </style>
</dot:Content>

<dot:Content ContentPlaceHolderID="Body">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8 col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Activity Selection</h5>
                    </div>
                    <div class="card-body">
                        <div class="container-fluid">
                            <form>
                                <div class="row mt-2">
                                    <label for="activityTypes" class="col-sm-3 col-form-label">🏷️ Activity Type</label>
                                    <div class="col-sm-9">
                                        <dc:Select2Single AllowClear="false"
                                                        class="form-control"
                                                        SelectionChanged="{command: OnTypeChanged()}"
                                                        DataSource="{value: SubViewModel.ActivityTypes}"
                                                        ID="activityTypes"
                                                        ItemTextBinding="{value: Text}"
                                                        ItemValueBinding="{value: Value}"
                                                        SelectedValue="{value: SubViewModel.SelectedActivityTypeId}" />
                                        <dot:Validator class="text-danger small" Value="{value: SubViewModel.SelectedActivityTypeId}" ShowErrorMessageText="true" />
                                    </div>
                                </div>
                                
                                <br/>
                                
                                <div class="row mt-2">
                                    <label for="status" class="col-sm-3 col-form-label">ℹ️ Status</label>
                                    <div class="col-sm-9">
                                        <bp:ComboBox AllowUnselect="false"
                                                    Changed="{command: OnStatusChanged()}"
                                                    class="form-control"
                                                    DataSource="{value: SubViewModel.Statuses}"
                                                    ID="status"
                                                    ItemTextBinding="{value: Text}"
                                                    ItemValueBinding="{value: Value}"
                                                    SelectedValue="{value: SubViewModel.SelectedStatusId}" />
                                        <dot:Validator class="text-danger small" Value="{value: SubViewModel.SelectedStatusId}" ShowErrorMessageText="true" />
                                    </div>
                                </div>

                                <br/>

                                <div class="row mt-2">
                                    <label for="activity" class="col-sm-3 col-form-label">▶️ Activity ({{value: SubViewModel.Total}})</label>
                                    <div class="col-sm-9">
                                        <bs:ComboBox AllowUnselect="false"
                                                    SelectionChanged="{command: OnActivityChanged()}"
                                                    class="form-control"
                                                    DataSource="{value: SubViewModel.Activities}"
                                                    ID="activity"
                                                    ItemTextBinding="{value: Text}"
                                                    ItemValueBinding="{value: Value}"
                                                    SelectedValue="{value: SubViewModel.SelectedActivityId}" />
                                        <dot:Validator class="text-danger small" Value="{value: SubViewModel.SelectedActivityId}" ShowErrorMessageText="true" />
                                    </div>
                                </div>
                            </form>
                        </div>                            
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Debug Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-6 col-md-3 mb-2">
                                <strong>Activity Type ID:</strong><br>
                                <code>{{value: SubViewModel.SelectedActivityTypeId}}</code>
                            </div>
                            <div class="col-sm-6 col-md-3 mb-2">
                                <strong>Status ID:</strong><br>
                                <code>{{value: SubViewModel.SelectedStatusId}}</code>
                            </div>
                            <div class="col-sm-6 col-md-3 mb-2">
                                <strong>Activity ID:</strong><br>
                                <code>{{value: SubViewModel.SelectedActivityId}}</code>
                            </div>
                            <div class="col-sm-6 col-md-3 mb-2">
                                <strong>Total Activities:</strong><br>
                                <code>{{value: SubViewModel.Total}}</code>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Control Cascading Compatibility Status</h5>
                    </div>
                    <div class="card-body">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>Control</th>
                                    <th>Tag</th>
                                    <th>Result</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Business Pack ComboBox</td>
                                    <td><code>bp:ComboBox</code></td>
                                    <td><span>✅ WORKS</span></td>
                                </tr>
                                <tr>
                                    <td>Select2 Wrapper</td>
                                    <td><code>dc:Select2Single</code></td>
                                    <td><span>❌ BROKEN</span></td>
                                </tr>
                                <tr>
                                    <td>Bootstrap 4 ComboBox</td>
                                    <td><code>bs:ComboBox</code></td>
                                    <td><span>❌ BROKEN</span></td>
                                </tr>
                                <tr>
                                    <td>Built-in ComboBox</td>
                                    <td><code>dot:ComboBox</code></td>
                                    <td><span>❌ BROKEN</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</dot:Content>
