<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <!-- Main content -->
    <section class="content-header mt-4">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-8">
                    <h4>Manage Section Order</h4>
                </div>
                <div class="col-sm-4 d-flex justify-content-end">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="<?= base_url('admin/home') ?>">Home</a></li>
                        <li class="breadcrumb-item active">Section Order</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 main-content">
                    <div class="card content-area p-4">
                        <div class="card-header border-0">
                        </div>
                        <div class="card-innr">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 col-12 offset-md-3">
                                        <label for="subcategory_id" class="col-form-label fs-5">Section List </label><hr>
                                        <div class="card-body col-md-12">
                                            <div class="row fw-bold">
                                                <div class="col-md-3">No.</div>
                                                <div class="col-md-3">Display Order</div>
                                                <div class="col-md-3">Style</div>
                                                <div class="col-md-3">Offer ids</div>
                                            </div>
                                        </div>
                                        <ul class="list-group bg-grey move order-container" id="sortable">
                                            <?php
                                            $i = 0;
                                            foreach ($section_result as $row) {
                                            ?>
                                                <li class="list-group-item d-flex bg-gray-light align-items-center h-25" id="section_id-<?= $row['id'] ?>">
                                                    <div class="card-body col-md-12">
                                                        <div class="row">
                                                            <div class="col-sm-3"><span> <?= $i ?> </span></div>
                                                            <div class="col-sm-3"><span> <?= $row['row_order'] ?> </span></div>
                                                            <div class="col-sm-3"><span><?= $row['style'] ?></span></div>
                                                            <div class="col-sm-3"><span><?= $row['offer_ids'] ?></span></div>
                                                        </div>
                                                    </div>
                                                </li>
                                            <?php
                                                $i++;
                                            }
                                            ?>
                                        </ul>
                                        <?php if (empty($section_result)) { ?>
                                            <div class="text-center mt-3">
                                                <p class="text-muted">No sections available. Please add sections to manage their order.</p>
                                            </div>
                                        <?php } else {?>
                                            <button type="button" class="btn btn-block btn-success btn-lg mt-3" id="save_offer_section_order">Save</button>
                                        <?php } ?>
                                    </div>
                                </div>
                            </div><!-- .card-innr -->
                        </div><!-- .card -->
                    </div>

                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>