<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <!-- <h1 class="m-0">Deactive Member </h1> -->
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Setting</a></li>
                    <li class="breadcrumb-item active">Sub Category Details </li>
                </ol>
            </div>
        </div>
    </div>
</div>




<section class="content">
    <div class="container-fluid">




        <div class="row">

            <section class="col-lg-12 connectedSortable">

                <div class="card">
                    <div class="card-header " style="background-color:#31708e;color:white">
                        <h3 class="card-title">
                            Sub Category Details
                        </h3>
                        <div class="card-tools">
                            <ul class="nav nav-pills ml-auto">
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="tab-content p-0">


                            <div class="col-sm-12">
                                <br>
                                <a href="<?php echo base_url(); ?>index.php/Member/new_sub_category" class="btn btn-danger" type="button" style="font-size:20px;text-decoration:none;margin-left: 800px">New Sub Category</a>
                                <br><br>
                                <?php if (isset($_SESSION['mem_add']) && $_SESSION['mem_add'] != "") { ?>
                                    <div class="alert alert-success">
                                        <strong><?php echo $_SESSION['mem_add']; ?></strong>
                                    </div>
                                <?php $_SESSION['mem_add'] = "";
                                } ?>
                                
                                <div class="tile">
                                    <div class="tile-body" id="filter_id">
                                        <table id="table_id" class="table table-striped table-bordered" style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th>S.No.</th>
                                                    <th>Category</th>
                                                    <th>Sub Category</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody id="section_body">

                                                <!-- Here's where we iterate through our $articles query object, printing out article info -->

                                                <?php $i = 1;
                                                foreach ($data as $key => $value) { ?>
                                                    <tr>
                                                        <td> <?php echo $i++ ?></td>
                                                        <td><?php echo  $category[$value['category']]; ?></td>
                                                        <td><?php echo  $value['sub_category']; ?></td>
                                                        <td>
                                                            <a href="remove_sub_category?id=<?php echo $value['id']; ?>" class="btn btn-danger btn-xs"><span class="fa fa-trash"></span><span class="sr-only"></span></a>

                                                            <a href="edit_sub_category?id=<?php echo $value['id']; ?>" class="btn btn-primary btn-xs"><span class="fa fa-edit"></span><span class="sr-only"></span></a>
                                                        </td>
                                                    </tr>
                                                <?php } ?>
                                            </tbody>

                                        </table>
                                    </div>
                                </div>


                            </div>


                        </div>
                    </div>
                </div>
        </div>
</section>
</div>
</div>
</section>




<script>
    $(document).ready(function() {
        $('.alert').fadeOut(3000);
        var table = $('#table_id').DataTable({
            "processing": true,
            "dom": 'lBfrtip',
            "lengthMenu": [
                [10, 25, 50, -1],
                [10, 25, 50, "All"]
            ],
            "buttons": [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5'
            ]
        });

        $(".buttons-html5").addClass("btn btn-primary");
        $('.dt-buttons').addClass("pt-3 pb-0");
    });

    $('#division_id').on('change', function() {
        var division = this.value;
        $.ajax({
            type: 'POST',
            url: "<?php echo base_url() ?>index.php/Member/section_search",
            data: {
                division: division
            },
            dataType: 'html',
            success: function(data) {
                if ($.fn.DataTable.isDataTable('#table_id')) {
                    $('#table_id').DataTable().destroy();
                }

                $('#table_id tbody').empty();
                $('#section_body').html(data);
                var table = $('#table_id').DataTable({
                    "processing": true,
                    "dom": 'lBfrtip',
                    "lengthMenu": [
                        [10, 25, 50, -1],
                        [10, 25, 50, "All"]
                    ],
                    "buttons": [
                        'copyHtml5',
                        'excelHtml5',
                        'csvHtml5',
                        'pdfHtml5'
                    ]
                });
                $(".buttons-html5").addClass("btn btn-primary");
                $('.dt-buttons').addClass("pt-3 pb-0");
            }
        });
    });
</script>



<style>
    div.dt-buttons {
        margin-left: 176px;
    }

    div.dataTables_wrapper div.dataTables_length label {
        position: absolute;
    }

    div.dataTables_wrapper div.dataTables_filter {
        text-align: right;
        margin-top: -37px;
    }

    .copyButton {
        background-color: #dc3545;
        border: 1px solid white;
    }

    .excelButton {
        background-color: #dc3545;
        border: 1px solid white;

    }

    .pdfButton {
        background-color: #dc3545;
        border: 1px solid white;

    }

    .printButton {
        background-color: #dc3545;
        border: 1px solid white;

    }

    .colvisButton {
        background-color: #dc3545;
        border: 1px solid white;

    }
</style>




<script src="<?php echo base_url() ?>assets/datatables/dataTables.bootstrap.js"></script>
<script src="<?php echo base_url() ?>assets/datatables/jquery.dataTables.js"></script>
<script>
    var table = $('#table_id').DataTable({
        "processing": true,
        "dom": 'lBfrtip',
        "lengthMenu": [
            [100, 250, 500, 1000, -1],
            [100, 250, 500, 1000, "All"]
        ],
        "buttons": {
            buttons: [{
                    extend: 'copy',
                    className: 'copyButton'
                },
                {
                    extend: 'excel',
                    className: 'excelButton'
                },
                {
                    extend: 'pdf',
                    className: 'pdfButton'
                },
                {
                    extend: 'print',
                    className: 'printButton'
                },
                {
                    extend: 'colvis',
                    className: 'colvisButton'
                },
            ]
        }

    });
</script>