@extends('layouts.admin')

@section('content')
				<!--App-Content-->
				<div class="app-content my-3 my-md-5">
					<div class="side-app">
                         <x-page.header>Teaching Teams</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 Team</h3>
									</div>

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

										<form enctype="multipart/form-data" id="create_form" method="POST" action="{{route('teacher.team.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="ttname" value="{{ old('ttname')}}" class="form-control " id="examplenameInputname3" placeholder="" required>
													</div>
												</div>
											</div>
											<div class="form-group ">
												<div class="row">
													<div class="col-md-3">
														<label class="form-label mt-2">Image <i class="text-danger" class="text-danger">(required)</i> </label>
													</div>
													<div class="col-md-9">
														<div class="control-group form-group">
															<div class="input-group file-browser">
																<input type="text" class="form-control border-end-0 browse-file bg-transparent "   placeholder="Upload Image" readonly="" >
																<label class="input-group-btn">
																<span class="btn btn-primary br-bs-0 br-ts-0">
																	Browse <input type="file" name="image" style="display: none;"  >
																</span>
															</label>
															</div>
														</div>

													</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 Team</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 Teams 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;">Profile</th>
														<th style="text-align: center;">Name</th>
														<th style="text-align: center;">Image</th>
														<th style="text-align: center;">Actions</th>
													</tr>
												</thead>
												<tbody>
													@php
													$count=0
													@endphp
													@foreach ($teachingTeams as $tt )
													<tr>
														<td style="text-align: center;">{{++$count}}</td>
														<td style="text-align: center;"><span class="badge badge-{{ $tt->is_active ? 'success':'danger' }}">{{ $tt->is_active ? 'active':'inActive' }}</span></td>
														<td style="text-align: center;">{{$tt->ttname}}</td>
														<td style="text-align: center;"><img src="{{$tt->getImage($tt->ttimage)}}" alt="" class="w-8 h-8 br-7 border p-2"></td>
														<td style="text-align: center;">
                                                            <div class="d-flex gap-2">
                                                                <div data-bs-toggle="tooltip"  data-bs-original-title="Edit">
                                                                    <button type="button"
                                                                        value="{{$tt->ttid}}}"
                                                                        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->ttid}})" 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.team.destroy', $tt->ttid)}}" id="delete-form-{{$tt->ttid}}">
                                                                            @csrf
                                                                            <input name="_method" type="hidden" value="DELETE">
                                                                        </form>
                                                                 </a>

                                                                <a href="{{ route('teacher.profile.show',$tt->ttid) }}"
                                                                    target="_blank"
                                                                    class="btn btn-outline-light btn-sm waves-effect waves-light"
                                                                    data-bs-toggle="tooltip" title='Team profile' data-bs-original-title="Team profile" >
                                                                    <i class="fa fa-user fs-16"></i>
                                                                </a>
                                                            </div>
														</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="teamform" 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="ttname" class="form-control " id="teamName" placeholder="" required>
													</div>
												</div>
											</div>
											<div class="form-group ">
												<div class="row">
													<div class="col-md-3">
														<label class="form-label mt-2">Image <i class="text-danger" class="text-danger">(required)</i> </label>
													</div>
													<div class="col-md-9">
														<div class="control-group form-group">
															<div class="input-group file-browser">
																<input type="text" class="form-control border-end-0 browse-file bg-transparent "   placeholder="Upload Image" readonly="" required>
																<label class="input-group-btn">
																<span class="btn btn-primary br-bs-0 br-ts-0">
																	Browse <input type="file" name="image" id="teamImage" style="display: none;" >
																</span>
															</label>
															</div>
														</div>

													</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(){
	// Require the image
	function validate_image(event) {
            if ($('input[type=file]')[0].files.length === 0) {
                event.preventDefault()
				notif({
						type: "error",
						msg: "You have to select an image first",
						position: "center",
						opacity: 0.8,
						autohide: true
						});
            }
        }

	// Validate image
	$( "#create_form" ).submit(function(event){
            validate_image(event)
    })

	// Get Record data using it's id
	jQuery('body').on('click', '.edit', function () {
		var t_id = $(this).val();
		$.get('/staff/teacher/team/' + t_id, function (data) {
			jQuery('#t_id').val(data.ttid);
			jQuery('#teamName').val(data.ttname);
			jQuery('#submit').val("update");
			jQuery('#teamform').attr('action','/staff/teacher/team/' + t_id)
		})
	});

})
</script>
@endsection