<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="#">Settings</a></li>
                    <li class="breadcrumb-item active">Relationship </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">
                        Designation 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">
 <br>
 <a href="<?php echo base_url();?>index.php/Member/new_relationship"  class="btn btn-danger" type="button" style="font-size:20px;text-decoration:none;margin-left: 800px">New Relationship</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>ID</th>
                            <th>relationship</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>

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

                        <?php
                        $i = 1;
                        foreach ($relationship as $value) : ?>
                             <tr>
                                <td> <?php echo $i++ ?></td>
                                <td><?php echo  $value['relationship']; ?></td>
                              
                                <td>
                                    <a href="delete_relationship?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_relationship?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 endforeach; ?>
                    </tbody>

                </table>
            </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 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>