<section class="container" style="padding-bottom: 2rem;">
    <div class="row">
        <div class="col-md-3">
            <div id="navCard" class="card bg-light-transparent">
				<div class="card-header bg-light">
					<h5 class="card-title float-left">Departments</h5>
				</div>
				<div class="card-body">
					<div class="card no-shadow">
						<div class="card-body">
							<div class="nav flex-column nav-pills" id="tab" role="tablist" aria-orientation="vertical">
								<a class="nav-link active" id="setting-tab" data-toggle="pill" href="#setting" role="tab" aria-controls="setting" aria-selected="false">Setting</a>
								<hr>
								<?php foreach($departments as $dept): ?>
									<a class="nav-link" id="dept-<?php echo $dept['id']; ?>-tab" data-toggle="pill" href="#dept-<?php echo $dept['id']; ?>" role="tab" aria-controls="dept-<?php echo $dept['id']; ?>" aria-selected="false"><?php echo $dept['name'].' ('.$dept['branch_name'].')'; ?></a>
								<?php endforeach; ?>
							</div>
						</div>
					</div>
				</div>
			</div>
        </div>
        <div class="col-md-9">
            <div class="tab-content" id="tabContent">
				<div class="tab-pane fade show active" id="setting" role="tabpanel" aria-labelledby="setting-tab">
                    <div class="card bg-light-transparent">
                        <div class="card-header bg-light">
                            <div class="float-left">
                                <h5 class="card-title">Allocation Setting</h5>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="card no-shadow">
                                <div class="card-body">
                                    
                                </div>
                            </div>
                        </div>
                    </div>
				</div>
                <?php foreach($departments as $dept): ?>
                    <div class="tab-pane fade" id="dept-<?php echo $dept['id']; ?>" role="tabpanel" aria-labelledby="dept-<?php echo $dept['id']; ?>-tab">
                        <div class="card bg-light-transparent">
                            <div class="card-header bg-light" <?php if(strtolower($this->logged_module['role'])!='admin') echo 'hidden'; ?> >
                                <div class="float-left">
                                    <h5 class="card-title"><?php echo $dept['name'].' ('.$dept['branch_name'].')'; ?></h5>
                                </div>
                                <div class="float-right">
                                    <div class="row m-0">
                                        <div class="col">
                                            <button id="btnShowFilters" type="button" class="btn btn-outline-dark btn-sm" data-trigger="hover" title="Show Filters Box" data-toggle="collapse" data-target="#collapseFilter"><i class="fas fa-filter"></i> Show Filters</button>
                                        </div>
                                        <nav>
                                            <div class="nav nav-tabs btn-group btn-group-sm" role="tablist">
                                                <a class="btn btn-outline-dark active" id="table-view-tab" data-toggle="tab" href="#tableView" role="tab" aria-controls="nav-table" aria-selected="true" data-tooltip="tooltip" title="Show List View"><i class="fas fa-list"></i></a>
                                                <a class="btn btn-outline-dark" id="card-view-tab" data-toggle="tab" href="#cardView" role="tab" aria-controls="nav-card" aria-selected="false" data-tooltip="tooltip" title="Show Card View"><i class="fas fa-th-large"></i></a>
                                            </div>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                            <div class="collapse" id="collapseFilter">
                                <div class="card-header">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="card no-shadow">
                                                <div class="card-body">
                                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, sed. Veritatis fugiat quasi expedita accusantium inventore quo dolor magnam. Ex soluta itaque quibusdam illum veritatis earum odio porro corrupti enim.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="card no-shadow">
                                                <div class="card-body">
                                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae a, quae fugiat tempora animi ipsam? Vero distinctio et tenetur earum quod, rem, adipisci hic explicabo ipsam dolore nulla cumque magnam.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="tableView" role="tabpanel" aria-labelledby="nav-table-tab">
                                    <div class="card-body">
                                        <div class="card no-shadow">
                                            <div class="card-body">
                                                <div class="table-responsive">
                                                    <table class="table table-bordered table-hover">
                                                        <thead>
                                                            <th>Staff ID</th>
                                                            <th>Name</th>
                                                            <th>Position</th>
                                                            <th>Category</th>
                                                            <th></th>
                                                        </thead>
                                                        <tbody>
                                                            <?php foreach($dept['users'] as $user): ?>
                                                            <tr>
                                                                <td class="text-center"><?php echo $user['staff_id']; ?></td>
                                                                <td><?php echo $user['name']; ?></td>
                                                                <td><?php echo $user['position_name']; ?></td>
                                                                <td><?php echo $user['position_category']; ?></td>
                                                                <td>
                                                                    <div class="btn-group btn-group-sm" role="group">
                                                                        <button type="button" class="btn btn-primary" data-trigger="hover" data-tooltip="tooltip" title="View Staff Records"><i class="fas fa-id-card"></i></button>
                                                                        <button type="button" class="btn btn-dark" data-trigger="hover" data-tooltip="tooltip" title="Edit Allocation"><i class="fas fa-cog"></i></button>
                                                                        <button type="button" class="btn btn-danger" onclick="deleteAllocation(<?php echo $user['id']; ?>);" data-trigger="hover" data-tooltip="tooltip" title="Delete Allocation"><i class="fas fa-trash"></i></button>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                            <?php endforeach; ?>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="cardView" role="tabpanel" aria-labelledby="nav-card-tab">
                                    <div class="card-body">
                                        <!-- <?php if($rooms): ?>
                                            <div class="row">
                                                <?php $count = 0; ?>
                                                <?php foreach($rooms as $room): ?>
                                                    <?php if($count==3): echo "<div class='w-100' style='padding-bottom: 2rem;'></div>"; $count = 0; endif; ?>
                                                    <?php $count++; ?>
                                                    <div class="col">
                                                        <div class="card no-shadow">
                                                            <div class="card-header bg-white">
                                                                <div class="float-left">
                                                                    <h4 class="card-title"><a href="<?php echo base_url('kbs/room/').$room['id']; ?>">Room <?php echo $room['code']; ?></a></h4>
                                                                </div>
                                                                <div class="float-right">
                                                                    <div class="btn-group btn-group-sm" role="group">
                                                                    <button type="button" class="btn btn-outline-dark" onclick="printLabel(<?php echo $room['id']; ?>)" data-trigger="hover" data-tooltip="tooltip" title="Print Label"><i class="fas fa-print"></i></button>
                                                                        <button type="button" class="btn btn-outline-dark" onclick="openRoomsModal(<?php echo $room['id']; ?>)" data-trigger="hover" data-tooltip="tooltip" title="Edit Room"><i class="far fa-edit"></i></button>
                                                                        <button type="button" class="btn btn-outline-dark" onclick="deleteRoom(<?php echo $room['id']; ?>);" data-trigger="hover" data-tooltip="tooltip" title="Delete Room"><i class="far fa-trash-alt"></i></button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="card-body">
                                                                <p class="card-text"><?php echo ($room['dept_name'])?'Department: '.$room['dept_name'].' ('.$room['dept_branch_name'].')<br> Room Location: '.$room['location_branch_name']:'Shared All Departments'.'<br> Room Location: '.$room['location_branch_name']; ?></p>
                                                                <a href="<?php echo base_url('kbs/room/').$room['id']; ?>" class="btn btn-primary">Go to Room <?php echo $room['code']; ?></a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                <?php endforeach; ?>
                                            </div>
                                        <?php endif; ?> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</section>
<script>
    $('#tab a').click(function(e) {
		e.preventDefault();
		$(this).tab('show');
	});

	var hash = window.location.hash;
	
	$(function() {
		$('#tab a[href="' + hash + '"]').tab('show');
	});
	
	$(".nav-pills > a").on("shown.bs.tab", function(e) {
		var id = $(e.target).attr("href").substr(1);
		window.location.hash = id;
	});

    $('#collapseFilter').on('show.bs.collapse', function () {
        $('#btnShowFilters').addClass('active');
    })
    $('#collapseFilter').on('hide.bs.collapse', function () {
        $('#btnShowFilters').removeClass('active');
    })
</script>