@extends ('Layouts.Application')

@section ('MainContent')

<div class="row">
	<div class="col-sm-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">Sections</h3>
			</div>
			<div class="panel-body">
				@if (4 == $userRoleId)
					<a class="btn btn-primary btn-xs" href="{{ route('LoggedIn.Settings.Section.Create') }}">
						<i class="fa fa-plus-circle"></i> Section Privilege
					</a>
				@endif

				<form class="form-inline">
					<div class="form-group form-group-sm">
						@include ('includes.branch_names', ['labelColWidth' => 1, 'fieldColWidth' => 2])

						@include ('includes.branch_shift_version_names', ['labelColWidth' => 2, 'fieldColWidth' => 3])

						@include ('includes.class_names', ['labelColWidth' => 1, 'fieldColWidth' => 2])

						<button type="button" class="btn btn-primary btn-sm" id="show-section-btn">
							<i class="fa fa-eye"></i> Show
						</button>
					</div>
				</form>
			</div>

			<div class="table-responsive">
				<table class="table table-striped table-bordered table-hover" id="section-table"></table>
			</div>
		</div>
	</div>
</div>

<script>
	$(document).ready(function () {
		var dataSet = @json($sectionPrivilege);

		$('#section-table').DataTable({
			data: dataSet,
			columns: [
				{
					title: "Sl No",
					data: "sec_section_id",
					render: function (data, type, row, meta) {
				        return meta.row + meta.settings._iDisplayStart + 1;
				    }
				},
				{
					title: "Branach-Shif-Version",
					data: null,
					render: function (data) {
						return data.school_branch_name + ", " + data.school_version_name;
					}
				},
				{
					title: "Class",
					data: "ClassName",
				},
				{
					title: "Section",
					data: "SectionName",
				},
				{
					title: "Status",
					data: "is_active",
					render: function (data) {
						return data == 1 ? '<span class="label label-success">Active</span>' : '<span class="label label-danger">Inactive</span>';
					}
				},
				{
					title: "Link",
					data: "sec_section_id",
					render: function (data) {
						return "<a class='btn btn-success btn-small' href='" + baseURL + "/!/Settings/Section/" + data + "/edit'><i class='fa fa-pencil-square-o'></i> Edit</a>"
					}
				}
			]
		});

		$(document).on('click', '#show-section-btn', function () {
			var branch_and_version_id = $('#branch_and_version').val();
			var class_id = $('#class_name').val();

			if (branch_and_version_id && class_id) {
				$.ajax({
					type: 'GET',
					url: baseURL + '/!/Settings/Section/show_sections/' + branch_and_version_id + '/' + class_id,
					success: function (response) {
						$('#section-table').dataTable().fnClearTable();
						$('#section-table').dataTable().fnAddData(response);
					}
				});
			}
		})
	});
</script>

@endsection