<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <!-- <h1 class="m-0">Active Member </h1> -->
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Member</a></li>
                    <li class="breadcrumb-item active">Active Member </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">
                        Active Member 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="row">
                                <div class="col-sm-3">
                                    <select name="division" id="division_id" class="form-control">
                                        <option value="">All</option>
                                        <?php foreach ($divisions as $division) { ?>
                                            <option value="<?php echo $division['division']; ?>"><?php echo $division['division']; ?></option>
                                        <?php } ?>
                                    </select>
                                </div>
                                <div class="col-sm-3">
                                    <select name="section" id="section_id" class="form-control">
                                        <option value="">All</option>
                                        <?php foreach ($sections as $section) { ?>
                                            <option value="<?php echo $section['section']; ?>"><?php echo $section['section']; ?></option>
                                        <?php } ?>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12"><br>
                                    <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 class="text-center">Member No.</th>
                                                        <th class="text-center">Member Name</th>
                                                        <th class="text-center">Division</th>
                                                        <th class="text-center">Section</th>
                                                        <th class="text-center">mem_mob No.</th>
                                                        <th class="text-center">Action</th>
                                                    </tr>
                                                </thead>

                                                <tbody>
                                                    <?php foreach ($members as $member) : ?>
                                                        <tr>
                                                            <td class="text-center">
                                                                <a href="<?php echo base_url() ?>index.php/Member/view/"><?php echo $member['me_no']; ?></a>
                                                            </td>
                                                            <td>

                                                                <?php echo $member['mem_name']; ?>
                                                            </td>
                                                            <td>

                                                                <?php echo $member['division']; ?>
                                                            </td>
                                                            <td>

                                                                <?php echo $member['section']; ?>
                                                            </td>
                                                            <td>
                                                                <?php if ($member['mem_mob'] > 0) { ?>

                                                                    <?php echo $member['mem_mob']; ?>
                                                                <?php } ?>
                                                            </td>
                                                            <td class="text-center">
                                                                <a href="<?php echo base_url() ?>index.php/Member/deactive/<?php echo $member['me_no']; ?>" class="btn btn-primary btn-xs"><span class="fa fa-ban"></span><span class="sr-only"></span></a>
                                                            </td>
                                                        </tr>
                                                    <?php endforeach; ?>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>






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

<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>
    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>
<script>
    $(document).ready(function() {


        $('#division_id').on('change', function() {
            table.columns(2).search( this.value ).draw();
        });

        $('#section_id').on('change', function() {
            table.columns(3).search( this.value ).draw();
        });

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

                    $('#section_id').html(data);
                }
            });
        });



    });
</script>