keeper only





<div class="card-body">
    <!-- FORM -->
    <form id="customerForm">
        <div class="row">

            <!-- RIGHT SIDE -->
            <div class="col-lg-6 col-md-12 ps-4">
                <div class="free-deliver">

                    <div class="mb-4">
                        <label class="form-label">💵 Rate Change</label>
                        <div class="input-group">
                            <span class="input-group-text">₱</span>
                            <input 
                                type="text" 
                                name="rate_change" 
                                id="rateChange"
                                class="form-control text-start fw-semibold" 
                                value="1000" 
                                placeholder="0"
                                required
                                >
                        </div>
                    </div>

                    <div class="mb-4">
                        <label class="form-label">⏱️ Start Datetime</label>
                        <input type="datetime-local" name="price_start_datetime" class="form-control" required>
                    </div>

                    <div class="mb-4">
                        <label class="form-label">⏱️ End Datetime</label>
                        <input type="datetime-local" name="price_end_datetime_free" class="form-control" required>
                    </div>
                </div>

                <div class="price-off">
                    <div class="mb-4">
                        <label class="form-label">📁 Collection affected</label>
                        <select id="collection_option" class="form-control">
                            <option value="" disabled selected hidden>- Select Collection -</option>
                            <option value="option_a">First Collection</option>
                            <option value="option_b">Second Collection</option>
                        </select>
                    </div>

                    <div class="mb-4">
                        <label class="form-label">📦 Products affected</label>
                        <button type="button" class="btn btn-outline-primary w-100" data-bs-toggle="modal" data-bs-target="#productsModal">
                            📋 Add Products
                        </button>
                    </div>

                    <div class="mb-4">
                        <label class="form-label">⏱️ Start Datetime</label>
                        <input type="datetime-local" name="price_start_datetime" class="form-control" required>
                    </div>

                    <div class="mb-4">
                        <label class="form-label">⏱️ End Datetime</label>
                        <input type="datetime-local" name="price_end_datetime" class="form-control" required>
                    </div>
                </div>

                <div class="d-grid gap-3 mt-5">
                    <!-- Apply Changes -->
                    <button type="submit" class="btn btn-primary" id="addBtn">
                        💾 Apply Changes
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>