@extends('layouts.master')
    
@section('title', 'Teaching Load')
    
@section('style')
	<style>
		.font_topic{
			font-weight: bold;
			color: blue
		}
	</style>
	<style>

	.workflow {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		position: relative;
		margin: 40px 0;
		gap: 20px;
	}

	.workflow::before {
		content: "";
		position: absolute;
		top: 30px;
		left: 8%;
		right: 8%;
		height: 4px;
		background: #e5e7eb;
		z-index: 0;
	}

	.workflow-step {
		flex: 1;
		text-align: center;
		position: relative;
		z-index: 1;
	}

	.workflow-btn{
		width: 60px;
		height: 60px;
		border-radius: 999px;
		display:flex;
		align-items:center;
		justify-content:center;
		margin: 0 auto 12px;

		font-size:18px;
		font-weight:700;

		pointer-events:none;
	}

	/* STATUS */

	.btn-success-flow{
		background:#16a34a;
		color:#fff;
	}

	.btn-wait-flow{
		background:#facc15;
		color:#000;
	}

	.btn-reject-flow{
		background:#dc2626;
		color:#fff;
	}

	.btn-default-flow{
		background:#d1d5db;
		color:#000;
	}

	.workflow-title{
		font-size:15px;
		font-weight:700;
		margin-bottom:4px;
	}

	.workflow-name{
		font-size:13px;
		color:#6b7280;
		line-height:1.5;
	}

	</style>


	<style>
		/* .timetable-wrapper{
			border-radius:16px;
			overflow:hidden;
			border:1px solid #dfe3ea;
			margin-bottom:20px;
		}

		.timetable-table{
			margin-bottom:0;
			font-size:13px;
		}

		.timetable-table thead th{
			background:#eef2ff;
			font-weight:700;
			white-space:nowrap;
		}

		.day-column{
			background:#f0fdf4;
			font-weight:600;
			white-space:nowrap;
		}

		.lunch-break{
			background:#ef4444 !important;
			color:#fff;
			min-width:90px;
		}

		.timetable-table td,
		.timetable-table th{
			vertical-align:middle;
		} */

		
	</style>
@endsection
    
@section('script')

@endsection
    
@section('content')
    
	@include('layouts.header')
	@include('layouts.title')

    <section class="wrapper bg-light">
        <div class="container py-15 py-md-17">


            <div class="col-md-12">
                <h5 class="display-1 mb-3" style="font-size: 30px">@yield('title'):{{ $faculty->faculty_title }} {{ $faculty->faculty_name }}</h5>
                <p class="lead fs-lg pe-lg-15 pe-xxl-12"></p>
            </div>

            <div class="col-lg-12">
				<div class="blog single">
					<div class="card">
						<div class="card-body">
							<div class="d-flex gap-2 mb-3">

								<div class="col-lg-4">
									{{-- Academic --}}
									<select class="form-select"
										onchange="filterData()"
										id="academic_name">

										<option value="0">-- All Academic Year --</option>

										@foreach ($academics as $academic)
											<option value="{{ $academic->academic_name }}"
												{{ $academic_name == $academic->academic_name ? 'selected' : '' }}>

												{{ $academic->academic_name }}
											</option>
										@endforeach
									</select>
								</div>
                                
                                


                            </div>
                            <hr>

							<div align="center">
								<div class="item">

                                    @if (empty($faculty->faculty_picture) || $faculty->faculty_picture === 'profile.jpg')

                                        {{-- แสดงอักษรย่อ --}}
                                        <span class="avatar bg-primary text-white w-20 h-20">
                                            <span style="font-size: 25px; font-weight: 600;">
                                                {{ 
                                                    strtoupper(
                                                        mb_substr(explode(' ', $faculty->faculty_name)[0], 0, 1) .
                                                        mb_substr(explode(' ', $faculty->faculty_name)[1] ?? '', 0, 1)
                                                    ) 
                                                }}
                                            </span>
                                        </span>

                                    @else

                                        {{-- แสดงรูป --}}
                                        <img class="rounded-circle w-20 mx-auto mb-4"
                                            src="{{ asset('picture/'.$faculty->faculty_picture) }}"
                                            alt="{{ $faculty->faculty_name }}">

                                    @endif

									<h4 class="mb-1">
										{{ $faculty->faculty_title }} {{ $faculty->faculty_name }}
									</h4>
									<p class="mb-2">{{ $faculty->school_name }} ({{ $faculty->school_shortname }})</p>
								</div>
							</div>

							
                            <div class="col-lg-12">
                                <div class="blog single">
                                    <div class="card">
                                        <div class="card-body">
                        
                                           	<div class="workflow">

												{{-- STEP 1 --}}
												<div class="workflow-step">

													<div class="btn btn-circle btn-soft-primary btn-lg workflow-btn">
														01
													</div>

													<div class="workflow-title">
														Requested
													</div>

													<div class="workflow-name">
														{{ $faculty->faculty_title }} {{ $faculty->faculty_firstname }} {{ $faculty->faculty_lastname }}
														<br>
														(Faculty Member)
													</div>

												</div>

												{{-- STEP 2 --}}
												<div class="workflow-step">

													<div class="btn btn-circle btn-soft-green btn-lg workflow-btn">
														02
													</div>

													<div class="workflow-title">
														Approved
													</div>

													<div class="workflow-name">
														Asst. Prof. Dr. Khanin Nueangnora
														<br>
														(Head of School)
													</div>

												</div>

												{{-- STEP 3 --}}
												<div class="workflow-step">

													<div class="btn btn-circle btn-soft-yellow btn-lg workflow-btn">
														03
													</div>

													<div class="workflow-title">
														Waiting
													</div>

													<div class="workflow-name">
														Assoc. Prof. Dr.Chawalit Jeenanunta
														<br>
														(Deputy Director of Academic Affairs)
													</div>

												</div>

												{{-- STEP 4 --}}
												<div class="workflow-step">

													<div class="btn btn-circle btn-soft-red btn-lg workflow-btn">
														04
													</div>

													<div class="workflow-title">
														Rejected
													</div>

													<div class="workflow-name">
														Prof. Dr. Pruettha Nanakorn
														<br>
														(Director)
													</div>

												</div>

											</div>

											<hr class="my-2">
											<div class="workflow-history mt-5">
												<div class="mb-2">
                                        			<div class="history-date">
														19 May 2026 10:30
													</div>

													<span class="badge bg-pale-primary text-primary rounded-pill">
														Requested
													</span>

													by {{ $faculty->faculty_title }} {{ $faculty->faculty_firstname }} {{ $faculty->faculty_lastname }}
												</div>
												<div class="mb-2">
                                        			<div class="history-date">
														19 May 2026 10:30
													</div>

													<span class="badge bg-pale-green text-green rounded-pill">
														Approved
													</span>

													by Asst. Prof. Dr. Khanin Nueangnora
												</div>

											</div>
                                                


                                        </div>
										
										
                                    </div>

									<br>
									<div class="card">
										<div class="card-body">

											{{-- Header --}}
											<div class="d-flex align-items-center mb-4">
												<span class="fw-semibold me-3">
													Academic Year
												</span>

												<span class="badge bg-soft-ash text-dark px-4 py-2 fs-15">
													2022
												</span>
											</div>

											{{-- Section Title --}}
											<div class="mb-4">

												<h5 class="text-primary fw-bold mb-3">
													1. Teaching Load
												</h5>

												<div class="d-flex align-items-center flex-wrap gap-3">

													<div>
														<span class="fw-semibold">a) Lecture</span>
													</div>

													<div class="text-muted">=</div>

													<div class="badge bg-pale-green text-green px-4 py-2 fs-15">
														12 Credits, 24 Hours/Week
													</div>

													<div class="ms-5 fw-semibold text-primary">
														TOR
													</div>

													<div class="text-muted">=</div>

													<div class="badge bg-pale-ash text-dark px-4 py-2 fs-15">
														12 Credits, 24 Hours/Week
													</div>

												</div>

											</div>

											{{-- Semester I --}}
											<div class="mb-5">

												<h5 class="text-muted mb-3">
													Semester I
												</h5>

												<div class="table-wrapper">

													<table class="table table-bordered align-middle mb-0">

														<thead class="table-light">

															<tr>
																<th>No.</th>
																<th>Course No.</th>
																<th>Course</th>
																<th>Portions (%)</th>
																<th>Section No.</th>
																<th>No. of Students</th>
																<th>No. of weeks</th>
																<th>Lecture (Hr/Wk)</th>
																<th>Credits (Lect-Pr)</th>
																<th>Contact (Hr/Wk)</th>
															</tr>

														</thead>

														<tbody>

															<tr>
																<td>1</td>
																<td>CHS211</td>
																<td>Organic Chemistry</td>
																<td>100</td>
																<td>1</td>
																<td>13</td>
																<td>3</td>
																<td>3</td>
																<td>3</td>
																<td>6</td>
															</tr>

															<tr>
																<td>2</td>
																<td>CHS352</td>
																<td>Heat Transfer</td>
																<td>50</td>
																<td>1</td>
																<td>17</td>
																<td>2</td>
																<td>2</td>
																<td>3</td>
																<td>3</td>
															</tr>

															<tr>
																<td>3</td>
																<td>CHS343</td>
																<td>Thermodynamics II</td>
																<td>100</td>
																<td>1</td>
																<td>17</td>
																<td>2</td>
																<td>2</td>
																<td>2</td>
																<td>4</td>
															</tr>

														</tbody>

													</table>

												</div>

												{{-- Remaining --}}
												<div class="d-flex align-items-center mt-4">

													<span class="fw-semibold me-3">
														Remaining Semester I
													</span>

													<span>=</span>

													<div class="badge bg-pale-ash text-dark px-4 py-2 fs-15 ms-3">
														4 Credits/Week
													</div>

												</div>

											</div>

											{{-- Semester II --}}
											<div class="mb-5">

												<h5 class="text-muted mb-3">
													Semester II
												</h5>

												<div class="table-wrapper">

													<table class="table table-bordered align-middle mb-0">

														<thead class="table-light">

															<tr>
																<th>No.</th>
																<th>Course No.</th>
																<th>Course</th>
																<th>Portions (%)</th>
																<th>Section No.</th>
																<th>No. of Students</th>
																<th>No. of weeks</th>
																<th>Lecture (Hr/Wk)</th>
																<th>Credits (Lect-Pr)</th>
																<th>Contact (Hr/Wk)</th>
															</tr>

														</thead>

														<tbody>

															<tr>
																<td>1</td>
																<td>CHS211</td>
																<td>Organic Chemistry</td>
																<td>100</td>
																<td>1</td>
																<td>13</td>
																<td>3</td>
																<td>3</td>
																<td>3</td>
																<td>6</td>
															</tr>

															<tr>
																<td>2</td>
																<td>CHS352</td>
																<td>Heat Transfer</td>
																<td>50</td>
																<td>1</td>
																<td>17</td>
																<td>2</td>
																<td>2</td>
																<td>3</td>
																<td>3</td>
															</tr>

															<tr>
																<td>3</td>
																<td>CHS343</td>
																<td>Thermodynamics II</td>
																<td>100</td>
																<td>1</td>
																<td>17</td>
																<td>2</td>
																<td>2</td>
																<td>2</td>
																<td>4</td>
															</tr>

														</tbody>

													</table>

												</div>

												{{-- Remaining --}}
												<div class="d-flex align-items-center mt-4">

													<span class="fw-semibold me-3">
														Remaining Semester II
													</span>

													<span>=</span>

													<div class="badge bg-pale-ash text-dark px-4 py-2 fs-15 ms-3">
														4 Credits/Week
													</div>

												</div>

											</div>

											{{-- Semester III --}}
											<div class="mb-5">

												<h5 class="text-muted mb-3">
													Semester III
												</h5>

												<div class="table-wrapper">

													<table class="table table-bordered align-middle mb-0">

														<thead class="table-light">

															<tr>
																<th>No.</th>
																<th>Course No.</th>
																<th>Course</th>
																<th>Portions (%)</th>
																<th>Section No.</th>
																<th>No. of Students</th>
																<th>No. of weeks</th>
																<th>Lecture (Hr/Wk)</th>
																<th>Credits (Lect-Pr)</th>
																<th>Contact (Hr/Wk)</th>
															</tr>

														</thead>

														<tbody>

															<tr>
																<td>1</td>
																<td>CHS211</td>
																<td>Organic Chemistry</td>
																<td>100</td>
																<td>1</td>
																<td>13</td>
																<td>3</td>
																<td>3</td>
																<td>3</td>
																<td>6</td>
															</tr>

															<tr>
																<td>2</td>
																<td>CHS352</td>
																<td>Heat Transfer</td>
																<td>50</td>
																<td>1</td>
																<td>17</td>
																<td>2</td>
																<td>2</td>
																<td>3</td>
																<td>3</td>
															</tr>

															<tr>
																<td>3</td>
																<td>CHS343</td>
																<td>Thermodynamics II</td>
																<td>100</td>
																<td>1</td>
																<td>17</td>
																<td>2</td>
																<td>2</td>
																<td>2</td>
																<td>4</td>
															</tr>

														</tbody>

													</table>

												</div>

												{{-- Remaining --}}
												<div class="d-flex align-items-center mt-4">

													<span class="fw-semibold me-3">
														Remaining Semester III
													</span>

													<span>=</span>

													<div class="badge bg-pale-ash text-dark px-4 py-2 fs-15 ms-3">
														4 Credits/Week
													</div>

												</div>

											</div>

											<br>
											{{-- ///////////////////////////////////////////////////////////////////////// --}}
											{{-- Section Title --}}
											<div class="mb-4">

												<div class="d-flex align-items-center flex-wrap gap-3">

													<div>
														<span class="fw-semibold">b) Laboratory</span>
													</div>

													<div class="text-muted">=</div>

													<div class="badge bg-pale-green text-green px-4 py-2 fs-15">
														7 Credits, 24 Hours/Week
													</div>

													<div class="ms-5 fw-semibold text-primary">
														TOR
													</div>

													<div class="text-muted">=</div>

													<div class="badge bg-pale-ash text-dark px-4 py-2 fs-15">
														7 Credits, 24 Hours/Week
													</div>

												</div>

											</div>

											{{-- Semester I --}}
											<div class="mb-5">

												<h5 class="text-muted mb-3">
													Semester I
												</h5>

												<div class="table-wrapper">

													<table class="table table-bordered align-middle mb-0">

														<thead class="table-light">

															<tr>
																<th>No.</th>
																<th>Course No.</th>
																<th>Course</th>
																<th>Portions (%)</th>
																<th>Section No.</th>
																<th>No. of Students</th>
																<th>Total No. of Lecturers & TA’s</th>
																<th>Lab. & Lect. (Hr/Wk)</th>
															</tr>

														</thead>

														<tbody>

															<tr>
																<td>1</td>
																<td>CHS211</td>
																<td>Organic Chemistry</td>
																<td>100</td>
																<td>1</td>
																<td>13</td>
																<td>3</td>
																<td>3</td>
															</tr>

															<tr>
																<td>2</td>
																<td>CHS352</td>
																<td>Heat Transfer</td>
																<td>50</td>
																<td>1</td>
																<td>17</td>
																<td>2</td>
																<td>2</td>
															</tr>

															<tr>
																<td>3</td>
																<td>CHS343</td>
																<td>Thermodynamics II</td>
																<td>100</td>
																<td>1</td>
																<td>17</td>
																<td>2</td>
																<td>2</td>
															</tr>
															{{-- Total --}}
															<tr>

																<td colspan="6"></td>

																<td class="fw-bold bg-light">
																	Total (a+b)
																</td>

																<td>

																	<span class="badge bg-soft-ash text-dark px-4 py-2 fs-15">
																		20
																	</span>

																</td>

															</tr>

														</tbody>

													</table>

												</div>

												{{-- Remaining --}}
												<div class="d-flex align-items-center mt-4">

													<span class="fw-semibold me-3">
														Remaining Semester I
													</span>

													<span>=</span>

													<div class="badge bg-pale-ash text-dark px-4 py-2 fs-15 ms-3">
														6 Credits/Week
													</div>

												</div>

											</div>

											{{-- Semester II --}}
											<div class="mb-5">

												<h5 class="text-muted mb-3">
													Semester II
												</h5>

												<div class="table-wrapper">

													<table class="table table-bordered align-middle mb-0">

														<thead class="table-light">

															<tr>
																<th>No.</th>
																<th>Course No.</th>
																<th>Course</th>
																<th>Portions (%)</th>
																<th>Section No.</th>
																<th>No. of Students</th>
																<th>Total No. of Lecturers & TA’s</th>
																<th>Lab. & Lect. (Hr/Wk)</th>
															</tr>

														</thead>

														<tbody>

															<tr>
																<td>1</td>
																<td>CHS211</td>
																<td>Organic Chemistry</td>
																<td>100</td>
																<td>1</td>
																<td>13</td>
																<td>3</td>
																<td>3</td>
															</tr>

															<tr>
																<td>2</td>
																<td>CHS352</td>
																<td>Heat Transfer</td>
																<td>50</td>
																<td>1</td>
																<td>17</td>
																<td>2</td>
																<td>2</td>
															</tr>

															<tr>
																<td>3</td>
																<td>CHS343</td>
																<td>Thermodynamics II</td>
																<td>100</td>
																<td>1</td>
																<td>17</td>
																<td>2</td>
																<td>2</td>
															</tr>

															{{-- Total --}}
															<tr>

																<td colspan="6"></td>

																<td class="fw-bold bg-light">
																	Total (a+b)
																</td>

																<td>

																	<span class="badge bg-soft-ash text-dark px-4 py-2 fs-15">
																		20
																	</span>

																</td>

															</tr>

														</tbody>

													</table>

												</div>

												{{-- Remaining --}}
												<div class="d-flex align-items-center mt-4">

													<span class="fw-semibold me-3">
														Remaining Semester II
													</span>

													<span>=</span>

													<div class="badge bg-pale-ash text-dark px-4 py-2 fs-15 ms-3">
														0 Credits/Week
													</div>

												</div>

											</div>

											{{-- Semester III --}}
											<div class="mb-5">

												<h5 class="text-muted mb-3">
													Semester III
												</h5>

												<div class="table-wrapper">

													<table class="table table-bordered align-middle mb-0">

														<thead class="table-light">

															<tr>
																<th>No.</th>
																<th>Course No.</th>
																<th>Course</th>
																<th>Portions (%)</th>
																<th>Section No.</th>
																<th>No. of Students</th>
																<th>Total No. of Lecturers & TA’s</th>
																<th>Lab. & Lect. (Hr/Wk)</th>
															</tr>

														</thead>

														<tbody>

															<tr>
																<td>1</td>
																<td>CHS211</td>
																<td>Organic Chemistry</td>
																<td>100</td>
																<td>1</td>
																<td>13</td>
																<td>3</td>
																<td>3</td>
															</tr>

															<tr>
																<td>2</td>
																<td>CHS352</td>
																<td>Heat Transfer</td>
																<td>50</td>
																<td>1</td>
																<td>17</td>
																<td>2</td>
																<td>2</td>
															</tr>

															<tr>
																<td>3</td>
																<td>CHS343</td>
																<td>Thermodynamics II</td>
																<td>100</td>
																<td>1</td>
																<td>17</td>
																<td>2</td>
																<td>2</td>
															</tr>

															{{-- Total --}}
															<tr>

																<td colspan="6"></td>

																<td class="fw-bold bg-light">
																	Total (a+b)
																</td>

																<td>

																	<span class="badge bg-soft-ash text-dark px-4 py-2 fs-15">
																		20
																	</span>

																</td>

															</tr>

														</tbody>

													</table>

												</div>

												{{-- Remaining --}}
												<div class="d-flex align-items-center mt-4">

													<span class="fw-semibold me-3">
														Remaining Semester III
													</span>

													<span>=</span>

													<div class="badge bg-pale-ash text-dark px-4 py-2 fs-15 ms-3">
														4 Credits/Week
													</div>

												</div>

											</div>



											{{-- ///////////////////////////////////////////////////////////////////////// --}}

											<hr>
											
											{{-- Section Title --}}
											<div class="mb-4">
												<h5 class="text-primary fw-bold mb-3">
													2. Supervision of Senior Project/ Extended Training/ Special Problems/ Selected Topic/ Others
												</h5>
												<div class="d-flex align-items-center flex-wrap gap-3">

													<div>
														<span class="fw-semibold">a) Senior Project/ Extended Training Requirement</span>
													</div>

													<div class="text-muted">=</div>

													<div class="badge bg-pale-green text-green px-4 py-2 fs-15">
														3 Groups/Year, 12 Hours/Year
													</div>

													<div class="ms-5 fw-semibold text-primary">
														TOR
													</div>

													<div class="text-muted">=</div>

													<div class="badge bg-pale-ash text-dark px-4 py-2 fs-15">
														3 Groups/Year, 12 Hours/Year
													</div>

												</div>

											</div>

											{{-- Semester I --}}
											<div class="mb-5">

												<h5 class="text-muted mb-3">
													Semester I
												</h5>

												<div class="table-wrapper">

													<table class="table table-bordered align-middle mb-0">

														<thead class="table-light">

															<tr>
																<th>No.</th>
																<th>Course</th>
																<th>No. of Students</th>
																<th>Credit</th>
																<th>Contact (Hr/Wk)</th>
															</tr>

														</thead>

														<tbody>

															<tr>
																<td>1</td>
																<td>Senior Project 1</td>
																<td>3</td>
																<td>1</td>
																<td>2</td>
															</tr>

															<tr>
																<td>2</td>
																<td>Senior Project 2</td>
																<td>3</td>
																<td>1</td>
																<td>2</td>
															</tr>

															<tr>
																<td>3</td>
																<td>Senior Project 3</td>
																<td>3</td>
																<td>1</td>
																<td>2</td>
															</tr>

															{{-- Total --}}
															<tr>

																<td colspan="3"></td>

																<td class="fw-bold bg-light">
																	Total 2
																</td>

																<td>

																	<span class="badge bg-soft-ash text-dark px-4 py-2 fs-15">
																		8
																	</span>

																</td>

															</tr>

														</tbody>

													</table>

												</div>

												
											</div>

											{{-- Semester II --}}
											<div class="mb-5">

												<h5 class="text-muted mb-3">
													Semester II
												</h5>

												<div class="table-wrapper">

													<table class="table table-bordered align-middle mb-0">

														<thead class="table-light">

															<tr>
																<th>No.</th>
																<th>Course</th>
																<th>No. of Students</th>
																<th>Credit</th>
																<th>Contact (Hr/Wk)</th>
															</tr>

														</thead>

														<tbody>

															<tr>
																<td>1</td>
																<td>Extended Training 1</td>
																<td>3</td>
																<td>1</td>
																<td>2</td>
															</tr>

															<tr>
																<td>2</td>
																<td>Senior Project 1</td>
																<td>3</td>
																<td>1</td>
																<td>2</td>
															</tr>

															<tr>
																<td>3</td>
																<td>Senior Project 2</td>
																<td>3</td>
																<td>1</td>
																<td>2</td>
															</tr>

															{{-- Total --}}
															<tr>

																<td colspan="3"></td>

																<td class="fw-bold bg-light">
																	Total 2
																</td>

																<td>

																	<span class="badge bg-soft-ash text-dark px-4 py-2 fs-15">
																		8
																	</span>

																</td>

															</tr>

														</tbody>

													</table>

												</div>

											</div>

											{{-- Semester III --}}
											<div class="mb-5">

												<h5 class="text-muted mb-3">
													Semester III
												</h5>

												<div class="table-wrapper">

													<table class="table table-bordered align-middle mb-0">

														<thead class="table-light">

															<tr>
																<th>No.</th>
																<th>Course</th>
																<th>No. of Students</th>
																<th>Credit</th>
																<th>Contact (Hr/Wk)</th>
															</tr>

														</thead>

														<tbody>

															<tr>
																<td>1</td>
																<td>Extended Training 1</td>
																<td>3</td>
																<td>1</td>
																<td>2</td>
															</tr>

															<tr>
																<td>2</td>
																<td>Senior Project 1</td>
																<td>3</td>
																<td>1</td>
																<td>2</td>
															</tr>

															<tr>
																<td>3</td>
																<td>Senior Project 2</td>
																<td>3</td>
																<td>1</td>
																<td>2</td>
															</tr>

															{{-- Total --}}
															<tr>

																<td colspan="3"></td>

																<td class="fw-bold bg-light">
																	Total 2
																</td>

																<td>

																	<span class="badge bg-soft-ash text-dark px-4 py-2 fs-15">
																		8
																	</span>

																</td>

															</tr>

														</tbody>

													</table>

												</div>

											</div>

											<br>
											{{-- Section Title --}}
											<div class="mb-4">
												<div class="d-flex align-items-center flex-wrap gap-3">

													<div>
														<span class="fw-semibold">b) Supervision for Master and Doctoral Students</span>
													</div>

													<div class="text-muted">=</div>

													<div class="badge bg-pale-green text-green px-4 py-2 fs-15">
														3 Groups/Year, 12 Hours/Year
													</div>

													<div class="ms-5 fw-semibold text-primary">
														TOR
													</div>

													<div class="text-muted">=</div>

													<div class="badge bg-pale-ash text-dark px-4 py-2 fs-15">
														3 Groups/Year, 12 Hours/Year
													</div>

												</div>

											</div>

											{{-- Semester I --}}
											<div class="mb-5">

												<h5 class="text-muted mb-3">
													Semester I
												</h5>

												<div class="table-wrapper">

													<table class="table table-bordered align-middle mb-0">

														<thead class="table-light">

															<tr>
																<th>No.</th>
																<th>Name</th>
																<th>Contact (Hr/Wk)</th>
															</tr>

														</thead>

														<tbody>

															<tr>
																<td>1</td>
																<td>6322040897 Warissara Sukom</td>
																<td>2</td>
															</tr>

															<tr>
																<td>2</td>
																<td>6222040245 Tharaya Namee</td>
																<td>2</td>
															</tr>

															<tr>
																<td>3</td>
																<td>6322300143 Dedy Asawapeth</td>
																<td>2</td>
															</tr>

														</tbody>

													</table>

												</div>

												
											</div>

											{{-- Semester II --}}
											<div class="mb-5">

												<h5 class="text-muted mb-3">
													Semester II
												</h5>

												<div class="table-wrapper">

													<table class="table table-bordered align-middle mb-0">

														<thead class="table-light">

															<tr>
																<th>No.</th>
																<th>Name</th>
																<th>Contact (Hr/Wk)</th>
															</tr>

														</thead>

														<tbody>

															<tr>
																<td>1</td>
																<td>6322040897 Warissara Sukom</td>
																<td>2</td>
															</tr>

															<tr>
																<td>2</td>
																<td>6222040245 Tharaya Namee</td>
																<td>2</td>
															</tr>

															<tr>
																<td>3</td>
																<td>6322300143 Dedy Asawapeth</td>
																<td>2</td>
															</tr>

														</tbody>

													</table>

												</div>

											</div>

											{{-- Semester III --}}
											<div class="mb-5">

												<h5 class="text-muted mb-3">
													Semester III
												</h5>

												<div class="table-wrapper">

													<table class="table table-bordered align-middle mb-0">

														<thead class="table-light">

															<tr>
																<th>No.</th>
																<th>Name</th>
																<th>Contact (Hr/Wk)</th>
															</tr>

														</thead>

														<tbody>

															<tr>
																<td>1</td>
																<td>6322040897 Warissara Sukom</td>
																<td>2</td>
															</tr>

															<tr>
																<td>2</td>
																<td>6222040245 Tharaya Namee</td>
																<td>2</td>
															</tr>

															<tr>
																<td>3</td>
																<td>6322300143 Dedy Asawapeth</td>
																<td>2</td>
															</tr>

														</tbody>

													</table>

												</div>

											</div>


											{{-- ///////////////////////////////////////////////////////////////////////// --}}

											<hr>
											
											{{-- Section Title --}}
											<div class="mb-4">
												<h5 class="text-primary fw-bold mb-3">
													3. Internal Committees
												</h5>
												
											</div>
											
											<div class="mb-5">


												<div class="table-wrapper">

													<table class="table table-bordered align-middle mb-0">

														<thead class="table-light">

															<tr>
																<th>No.</th>
																<th>Name</th>
																<th>File</th>
															</tr>

														</thead>

														<tbody>

															<tr>
																<td>1</td>
																<td>SIIT Admission Committee</td>
																<td></td>
															</tr>

															<tr>
																<td>2</td>
																<td>SIIT Biosafety Committee</td>
																<td></td>
															</tr>

															<tr>
																<td>3</td>
																<td>SIIT Consulting Committee</td>
																<td></td>
															</tr>

														</tbody>

													</table>

												</div>

												
											</div>

											<hr>
											{{-- ///////////////////////////////////////////////////////////////////////// --}}
											{{-- Title --}}
													<h5 class="text-primary fw-bold mb-4">
														4. Timetable
													</h5>

													{{-- ====================== --}}
													{{-- Semester I --}}
													{{-- ====================== --}}

													<div class="mb-5">

														<h5 class="fw-semibold mb-4">
															Semester I
														</h5>

														{{-- Regular --}}
														<div class="mb-4">

															<div class="text-muted fw-semibold mb-3">
																• Regular Teaching Schedule
															</div>

															<div class="table-responsive timetable-wrapper">

																<table class="table table-bordered timetable-table align-middle text-center">

																	<thead>

																		<tr>

																			<th style="min-width:120px">
																				Day / Time
																			</th>

																			<th>08:00-09:00</th>
																			<th>09:00-10:00</th>
																			<th>10:00-11:00</th>
																			<th>11:00-12:00</th>
																			<th class="lunch-break bg-pale-red text-red">12:00-13:00</th>
																			<th>13:00-14:00</th>
																			<th>14:00-15:00</th>
																			<th>15:00-16:00</th>
																			<th>16:00-17:00</th>
																			<th>17:00-18:00</th>

																		</tr>

																	</thead>

																	<tbody>

																		<tr>
																			<td class="day-column">Monday</td>

																			<td colspan="4">
																				Internal Affair and Admin
																			</td>

																			<th class="lunch-break bg-pale-red text-red"></th></td>

																			<td colspan="4">
																				Internal Affair and Admin
																			</td>

																			<td></td>
																		</tr>

																		<tr>
																			<td class="day-column">Tuesday</td>

																			<td colspan="2">
																				Supervision for Graduate Students
																			</td>

																			<td colspan="2">
																				Office Hours
																			</td>

																			<th class="lunch-break bg-pale-red text-red"></th></td>

																			<td colspan="3">
																				CHS352
																			</td>

																			<td>
																				Office Hours
																			</td>

																			<td></td>
																		</tr>

																		<tr>
																			<td class="day-column">Wednesday</td>

																			<td colspan="4">
																				Supervision for Graduate Students
																			</td>

																			<th class="lunch-break bg-pale-red text-red"></th></td>

																			<td colspan="4">
																				Senior Project
																			</td>

																			<td></td>
																		</tr>

																		<tr>
																			<td class="day-column">Thursday</td>

																			<td>
																				Office Hours
																			</td>

																			<td colspan="3">
																				CHS362
																			</td>

																			<th class="lunch-break bg-pale-red text-red"></th></td>

																			<td colspan="4">
																				Supervision for Graduate Students
																			</td>

																			<td></td>
																		</tr>

																		<tr>
																			<td class="day-column">Friday</td>

																			<td>
																				Office Hours
																			</td>

																			<td colspan="3">
																				Supervision for Graduate Students
																			</td>

																			<th class="lunch-break bg-pale-red text-red"></th></td>

																			<td colspan="3">
																				CHS481
																			</td>

																			<td>
																				Office Hours
																			</td>

																			<td></td>
																		</tr>

																		<tr>
																			<td class="day-column">Saturday</td>

																			<td>
																				CHS481
																			</td>

																			<td colspan="3">
																				Office Hours
																			</td>

																			<th class="lunch-break bg-pale-red text-red"></th></td>

																			<td colspan="4">
																				Senior Project
																			</td>

																			<td></td>
																		</tr>

																	</tbody>

																</table>

															</div>

														</div>

														{{-- Extra --}}
														<div>

															<div class="text-muted fw-semibold mb-3">
																• Extra Teaching Schedule
															</div>

															<div class="table-responsive timetable-wrapper">

																<table class="table table-bordered timetable-table align-middle text-center">

																	<thead>

																		<tr>

																			<th style="min-width:120px">
																				Day / Time
																			</th>

																			<th>08:00-09:00</th>
																			<th>09:00-10:00</th>
																			<th>10:00-11:00</th>
																			<th>11:00-12:00</th>
																			<th class="lunch-break bg-pale-red text-red">12:00-13:00</th>
																			<th>13:00-14:00</th>
																			<th>14:00-15:00</th>
																			<th>15:00-16:00</th>
																			<th>16:00-17:00</th>
																			<th>17:00-18:00</th>
																			<th>18:00-19:00</th>
																			<th>19:00-20:00</th>
																			<th>20:00-21:00</th>

																		</tr>

																	</thead>

																	<tbody>

																		@foreach(['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'] as $day)

																		<tr>

																			<td class="day-column">
																				{{ $day }}
																			</td>

																			<td></td>
																			<td></td>
																			<td></td>
																			<td></td>

																			<th class="lunch-break bg-pale-red text-red"></th></td>

																			<td></td>
																			<td></td>
																			<td></td>
																			<td></td>
																			<td></td>
																			<td></td>
																			<td></td>
																			<td></td>

																		</tr>

																		@endforeach

																	</tbody>

																</table>

															</div>

														</div>

													</div>

													{{-- ====================== --}}
													{{-- Semester II --}}
													{{-- ====================== --}}

													<div class="mb-5">

														<h5 class="fw-semibold mb-4">
															Semester II
														</h5>

														<div class="alert alert-soft-primary mb-0">
															Semester II timetable here...
														</div>

													</div>

													{{-- ====================== --}}
													{{-- Semester III --}}
													{{-- ====================== --}}

													<div>

														<h5 class="fw-semibold mb-4">
															Semester III
														</h5>

														<div class="alert alert-soft-primary mb-0">
															Semester III timetable here...
														</div>

													</div>













										</div>
									</div>
										
                                    

                                </div>
                            </div>

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

           
           
        </div>
    </section>


	@include('layouts.footer')
    
@endsection