@extends($layout ?? BaseHelper::getAdminMasterLayoutTemplate())

@section('content')
    <x-core::alert type="warning">
        {!! BaseHelper::clean(trans('plugins/ecommerce::product-prices.warning_prices')) !!}
    </x-core::alert>

    <div class="mb-3">
        <div class="row align-items-end">
            <div class="col-md-5">
                <label for="bulk-discount-percentage" class="form-label">
                    {{ trans('plugins/ecommerce::products.form.discount_percentage') }} (Bulk Change)
                </label>
                <div class="d-flex align-items-center" style="gap: 0;">
                    <div class="flex-grow-1">
                        <div class="input-group">
                            <x-core::form.text-input
                                id="bulk-discount-percentage"
                                name="bulk_discount_percentage"
                                :label="false"
                                placeholder="Enter discount percentage"
                                step="any"
                                class="input-mask-number"
                                :group-flat="true"
                            >
                                <x-slot:append>
                                    <span class="input-group-text">%</span>
                                </x-slot:append>
                            </x-core::form.text-input>
                        </div>
                    </div>
                    <button type="button" id="apply-bulk-discount" class="btn btn-primary" style="margin-left: 2px;" disabled>
                        <i class="fas fa-check"></i> Apply Discount
                    </button>
                </div>
            </div>
            <div class="col-md-5">
                <label for="bulk-cost-per-item-percentage" class="form-label">
                    {{ trans('plugins/ecommerce::products.form.cost_per_item_percentage') }} (Bulk Change)
                </label>
                <div class="d-flex align-items-center" style="gap: 0;">
                    <div class="flex-grow-1">
                        <div class="input-group">
                            <x-core::form.text-input
                                id="bulk-cost-per-item-percentage"
                                name="bulk_cost_per_item_percentage"
                                :label="false"
                                placeholder="Enter cost per item percentage"
                                step="any"
                                class="input-mask-number"
                                :group-flat="true"
                            >
                                <x-slot:append>
                                    <span class="input-group-text">%</span>
                                </x-slot:append>
                            </x-core::form.text-input>
                        </div>
                    </div>
                    <button type="button" id="apply-bulk-cost-percentage" class="btn btn-primary" style="margin-left: 2px;" disabled>
                        <i class="fas fa-check"></i> Apply Cost %
                    </button>
                </div>
            </div>
            <div class="col-md-2">
                <button type="button" id="clear-selection" class="btn btn-secondary" style="display: none;">
                    <i class="fas fa-times"></i> Clear
                </button>
                <div id="selection-info" class="text-muted mt-2" style="display: none;">
                    <span id="selected-count">0</span> product(s) selected
                </div>
            </div>
        </div>
    </div>

    @include('core/table::base-table')

    @push('footer')
        <script>
            window.productPricesBulkUpdateUrl = '{{ route('ecommerce.product-prices.bulk-update-discount') }}';
            window.productPricesBulkUpdateCostUrl = '{{ route('ecommerce.product-prices.bulk-update-cost-percentage') }}';

            // Ensure our checkbox handler runs after DataTable is ready
            $(document).ready(function() {
                // Wait for DataTable to initialize
                var checkTableReady = setInterval(function() {
                    if ($.fn.DataTable && $('.dataTable').length && $('.dataTable').DataTable()) {
                        clearInterval(checkTableReady);

                        // Force update selection info after a short delay
                        setTimeout(function() {
                            if (typeof updateSelectionInfo === 'function') {
                                updateSelectionInfo();
                            }
                        }, 200);
                    }
                }, 100);

                // Stop checking after 5 seconds
                setTimeout(function() {
                    clearInterval(checkTableReady);
                }, 5000);
            });
        </script>
    @endpush
@endsection