@extends('layouts.admin')

@section('content')
				<!--App-Content-->
				<div class="app-content my-3 my-md-5">
					<div class="side-app">
                        <x-page.header>Teaching Types</x-page.header>
						@include('admin.errors.form-errors')
						<div class="row">
							<div class="col-md-12">
								<div class="card">
									<div class="card-header">
										<h3 class="card-title">Add New Teaching Type</h3>
									</div>

									<div class="card-body">
										<p>Create a Brand new Teaching Type</p>

										<form method="POST" action="{{route('teacher.type.post')}}" class="form-horizontal">
											@csrf

											<div class="form-group ">
												<div class="row">
													<div class="col-md-3">
														<label class="form-label mt-2"  id="examplenameInputname2">Name <i class="text-danger">(required)</i></label>
													</div>
													<div class="col-md-9">
														<input type="text" name="ttyname" value="{{ old('ttyname')}}" class="form-control" id="examplenameInputname3" placeholder="" required>
													</div>
												</div>
											</div>


											<div class="form-group mb-0 row justify-content-end">
												<div class="col-md-3">
													<button type="submit" class="btn btn-primary waves-effect waves-light">Add New Teaching Type</button>
												</div>
											</div>

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

						<div class="row">
							<div class="col-md-12">
								<div class="card">
									<div class="card-header">
										<h3 class="card-title">Teaching Types List</h3>
									</div>
									<div class="card-body">
										<div class="table-responsive">
											<table class="data-table-example table table-striped table-bordered table-vcenter text-nowrap">
												<thead>
													<tr>

														<th style="text-align: center;">Id</th>
														<th style="text-align: center;">Name</th>

														<th></th>
													</tr>
												</thead>
												<tbody>
													@php
													$count=0
													@endphp
													@foreach ($teachingTypes as $tt )
													<tr>
														<td>{{++$count}}</td>
														<td>{{$tt->ttyname}}</td>

														<td style="text-align: center;">
														<div data-bs-toggle="tooltip"  data-bs-original-title="Edit">
															<button type="button"
																value="{{$tt->ttyid}}}"
																class="modal-effect btn btn-outline-light btn-sm waves-effect waves-light edit"
																data-bs-effect="effect-sign" data-bs-toggle="modal" data-bs-original-title="Edit" data-bs-target="#edit"><i
																	class="fa fa-edit fs-16"></i></button>
														</div>
														<a href="javascript:void(0)" onClick="confirmDelete(event,{{$tt->ttyid}})" class="btn btn-outline-light btn-sm waves-effect waves-light"
															data-bs-toggle="tooltip" data-bs-original-title="Delete"
															title='Delete'>
															<i class="fa fa-trash fs-16"></i>
																<form method="POST" action="{{ route('teacher.type.destroy', $tt->ttyid)}}" id="delete-form-{{$tt->ttyid}}">
																	@csrf
																	<input name="_method" type="hidden" value="DELETE">
																</form>
														 </a>

														</td>
													</tr>
													@endforeach
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
                        </div>
                    </div>
                </div>

			<!-- Edit form modal -->
<div class="modal  fade effect-sign show" id="edit" tabdocumentation="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="example-Modal3">Edit</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" action="" id="typeform" name="typeform"  enctype="multipart/form-data">
                    @csrf
					<div class="form-group ">
												<div class="row">
													<div class="col-md-3">
														<label class="form-label mt-2"  id="examplenameInputname2">Name <i class="text-danger">(required)</i></label>
													</div>
													<div class="col-md-9">
														<input type="text" name="ttyname" class="form-control" id="typeName" placeholder="" required>
													</div>
												</div>
											</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" id="submit" class="btn btn-primary" value="">Submit</button>
                <input type="hidden" id="t_id" name="t_id" value="0">
            </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section('admin-js')
<script>

$(document).ready(function(){
	// Get Record data using it's id
	jQuery('body').on('click', '.edit', function () {
		var t_id = $(this).val();
		$.get('/staff/teacher/type/' + t_id, function (data) {
			jQuery('#t_id').val(data.ttyid);
			jQuery('#typeName').val(data.ttyname);
			jQuery('#submit').val("update");
			jQuery('#typeform').attr('action','/staff/teacher/type/' + t_id)
		})
	});

})
</script>

@endsection