@extends('layouts.app')
@section('titlePage', 'Academics')
@section('content')
@push('script')
<script>
	document.getElementById("draz-9").classList.add("is-expanded");
	document.getElementById("dra-9").classList.add("active", "is-expanded");
	document.getElementById("View-9").classList.add("active");
</script>
@endpush
@include('common.delete_modal')
<div class="page-wrapper">
	<!-- [ breadcrumb ] start -->
	<div class="breadcrumb-header justify-content-between align-items-center">
		<h4 class="text-primary font-weight-bold py-3 mb-0">
			MANAGE ACADEMICS / NOTES
		</h4>
		<div class="justify-content-center mt-2">
			<ol class="breadcrumb breadcrumb-style3">
				<li class="breadcrumb-item tx-15"><a href="{{ route('master.courses.index') }}"><i class="feather icon-home"></i></a></li>
				<li class="breadcrumb-item active">View All</li>
			</ol>
		</div>
	</div>
	<!-- [ breadcrumb ] end -->
	<!-- [ Main Content ] start -->
	<div class="panel tabs-style5">
		<div class="panel-head">
			<ul class="nav nav-tabs d-sm-flex d-block" id="myTab">
				<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#style5tab1" data-type="slab">ACADEMICS</a></li>
				<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#style5tab2" data-type="block">NOTES</a></li>
			</ul>
		</div>
		<div class="panel-body my-2">
			<div class="tab-content">
				<div class="tab-pane fade in active show" id="style5tab1">
					<div class="row">
						<div class="col-sm-12">
							<div class="card">
								<div class="card-header d-flex justify-content-between">
									<div>
										<a href="{{ route('master.courses.create') }}" class="btn btn-primary">Create</a>
										<a href="{{ route('master.courses.categories.index')}}"  class="btn btn-secondary">Categories</a>
										<a href="{{ route('master.courses.subcategories.index')}}"  class="btn btn-primary">Sub-Categories</a>
									</div>
									<button class="btn btn-secondary float-left" data-toggle="modal" data-target="#modalMedia">Help Desk</button>
								</div>
								<div class="card-body">
									<div class="table-responsive dt-responsive">
										<div id="dt-ajax-array_wrapper" class="dataTables_wrapper dt-bootstrap4">
											@include('common.alert')
											<div class="mb-3">
												<form method="GET" id="form">
													<div class="row">
														<div class="col-4">
															<input type="text" id="title" value="{{request()->get('title')}}" name="title" class="form-control" placeholder="Title">
														</div>

                                                        <div class="col-4">
															<select name="category_id" id="category_id" class="form-control">
                                                                <option value="">--select category--</option>
                                                                @foreach ($course_categories as $key => $value)
                                                                    <option value="{{ $value->id }}" {{ request()->get('category_id') == $value->id ? 'selected' : '' }}>
                                                                        {{ $value->category }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
														</div>

                                                        <div class="col-4">
															<select name="course_type" id="course_type" class="form-control">
                                                                <option value="">--select course type--</option>
                                                                <option value="1" {{ request()->get('course_type') == '1' ? 'selected' : '' }}>Paid</option>
                                                                <option value="0" {{ request()->get('course_type') == '0' ? 'selected' : '' }}>Free</option>
                                                            </select>
														</div>
														<!-- <input type="hidden" name="page" value="{{request()->get('page', 1)}}"> -->
														<div class="col-md-4">
															<button class="btn btn-primary float-right search"><i class="fa fa-search"></i> Search</button>
															<button class="btn btn-secondary float-right reset"><i class="fa fa-times"></i> Reset</button>
														</div>
													</div>
												</form>
											</div>
											<div class="row">
												<div class="col-sm-12">
													<table id="dt-ajax-array" class="table table-striped table-bordered nowrap dataTable" role="grid" aria-describedby="dt-ajax-array_info">
														<colgroup>
															<col style="width:25%">
															<col style="width:25%">
															<col style="width:25%">
														</colgroup>
														<thead>
															<tr role="row">
																<th width="20%">Title</th>
																<th width="25%">Category</th>
																<th width="10%">Type</th>
																<th>Preview</th>
																<th width="15%">Action</th>
															</tr>
														</thead>
														<tbody>
															@foreach ($data as $value)
															<tr>
																<td>
																	<div class="text-capitalize" style="white-space: break-spaces;font-weight: bold !important;">{{ str_limit(strip_tags($value->title),30) }}</div>
																</td>
																<td>
																	<div style="white-space: break-spaces;">{{ $value->category->category }}</div>
																</td>
																{{-- <td><div style="white-space: break-spaces;">{{ str_limit(strip_tags($value->description), 200) }}

																</td> --}}
																@if ($value->course_type == 0)
																<td>Free</td>
																@else
																<td>Paid</td>
																@endif
																<td>
																	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPreview{{$value->id}}">
																		Preview
																	</button>
																	<div class="modal fade" id="modalPreview{{$value->id}}" oncontextmenu="return false;" tabindex="-1" role="dialog" aria-labelledby="modalMediaLabel" aria-hidden="true">
																		<div class="modal-dialog modal-xl" role="document">
																			<div class="modal-content">
																				<div class="modal-header">
																					<h5 class="modal-title" id="modalMediaLabel">{{$value->title}}</h5>
																					<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="reload()">
																						<span aria-hidden="true">&times;</span>
																					</button>
																				</div>
																				<div class="modal-body">
																					<iframe src="{{ str_replace('http://', 'https://', $value->video_url) }}" frameborder="0" width="100%" height="600px"></iframe>
																				</div>
																			</div>
																		</div>
																	</div>
																</td>
																<td>
																	<div class="btn-icon-list btn-list justify-content-around align-items-baseline">

																		<a href="{{ route('master.courses.show', $value->id) }}" class="btn btn-circle-lg btn-primary-light flex-center"><i class="si si-eye tx-16"></i></a>

																		<a href="{{ route('master.courses.edit', $value->id) }}" class="btn btn-circle-lg btn-primary-light flex-center"><i class="fe fe-edit tx-16"></i></a>
																		<div>
																			<form action="{{ route('master.courses.destroy', $value->id) }}" method="POST" class="btn btn-circle-lg flex-center delete">
																				@csrf
																				<button type="submit" class="btn btn-circle-lg btn-danger flex-center">   <!-- onclick="return confirm('Are you sure?')"-->
                                                                                    <i class="fe fe-trash tx-16"></i></button>
																			</form>
																		</div>
																	</div>
																</td>
															</tr>
															@endforeach
														</tbody>
													</table>
												</div>
											</div>
										</div>
										{{-- Pagination --}}
										<div class="row">
											<div class="col-md-6 mt-2">
												Showing {{$data->firstItem()}} to {{$data->lastItem()}} of {{$data->total()}} Entries
											</div>
											<div class="col-md-6">
												<div class="pagination custom-pagination justify-content-end mb-0" id="dt-ajax-array_paginate">
													{!! $data->appends(request()->all())->links() !!}
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="tab-pane fade" id="style5tab2">
					<div class="row">
						<div class="col-sm-12">
							<div class="card">
								<div class="card-header d-flex justify-content-between">
									<div>
										<a href="{{ route('master.drazam-notes.create') }}" class="btn btn-primary">Create</a>
										<a href="{{ route('master.drazam-notes.notesIndex')}}" class="btn btn-secondary">Category</a>
									</div>
									<button class="btn btn-secondary float-left" data-toggle="modal" data-target="#modalMedia2">Help Desk</button>
								</div>
								<div class="card-body">
									<div class="table-responsive dt-responsive">
										<div id="dt-ajax-array_wrapper" class="dataTables_wrapper dt-bootstrap4">
											@include('common.alert')
											<div class="mb-3">
											<form method="GET" id="form">
												<div class="row">
													<div class="col-4">
														<input type="text" id="notes_title" value="{{request()->get('title')}}" name="title" class="form-control" placeholder="Title">
													</div>

                                                    <div class="col-4">
                                                        <select name="notes_category_id" id="notes_category_id" class="form-control">
                                                            <option value="">--select category--</option>
                                                            @foreach ($notes_categories as $key => $value)
                                                                <option value="{{ $value->id }}" {{ request()->get('notes_category_id') == $value->id ? 'selected' : '' }}>
                                                                    {{ $value->title }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <div class="col-4">
                                                        <select name="notes_type" id="notes_type" class="form-control">
                                                            <option value="">--select notes type--</option>
                                                            <option value="1" {{ request()->get('notes_type') == '1' ? 'selected' : '' }}>Paid</option>
                                                            <option value="0" {{ request()->get('notes_type') == '0' ? 'selected' : '' }}>Free</option>
                                                        </select>
                                                    </div>
													<!-- <input type="hidden" name="page" value="{{request()->get('page', 1)}}"> -->
													<div class="col-md-4">
													<button class="btn btn-primary float-right search"><i class="fa fa-search"></i> Search</button>
													<button class="btn btn-secondary float-right notesreset"><i class="fa fa-times"></i> Reset</button>
													</div>
												</div>
											</form>
											</div>
											<div class="row">
												<div class="col-sm-12">
													<table id="dt-ajax-array" class="table table-bordered table-striped mg-b-0 text-md-nowrap" role="grid" aria-describedby="dt-ajax-array_info">
														<thead>
															<tr role="row">
																<th>Note</th>
																<th>Note category</th>
																<th>Type</th>
																<th>Preview</th>
																<th>Action</th>
																<!-- <th>View Notes</th> -->
															</tr>
														</thead>
														<tbody>
															@foreach ($notes as $value)

															<tr>
																<td class="text-capitalize" style="max-width:250px;font-weight: bold !important;">{{ $value->title }}</td>
																<td>
																	{{$value->category_title}}
																</td>

																@if ($value->course_type == 0)
																	<td>Free</td>
																	@else
																	<td>Paid</td>
																	@endif

																<td>
																	<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalPreview{{$value->id}}">
																		Preview
																	</button>
																	<div class="modal fade" id="modalPreview{{$value->id}}" oncontextmenu="return false;" tabindex="-1" role="dialog" aria-labelledby="modalMediaLabel" aria-hidden="true">
																		<div class="modal-dialog modal-xl" role="document">
																			<div class="modal-content">
																				<div class="modal-header">
																					<h5 class="modal-title" id="modalMediaLabel">{{$value->title}}</h5>
																					<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="reload()">
																						<span aria-hidden="true">&times;</span>
																					</button>
																				</div>
																				<div class="modal-body">
																				<iframe src="{{ str_replace('http://', 'https://', $value->pdf_file) }}" frameborder="0" width="100%" height="600px"></iframe>
																				</div>
																			</div>
																		</div>
																	</div>
																</td>
																<td>
																	<div class="btn-icon-list btn-list justify-content-center align-items-baseline">
																		<a href="{{ route('master.drazam-notes.edit', $value->id) }}" class="btn btn-circle-lg btn-primary-light flex-center"><i class="fe fe-edit tx-16"></i></a>
																		<div>
																			<form action="{{ route('master.drazam-notes.destroy', $value->id) }}" method="POST" class="btn btn-circle-lg flex-center delete" >  <!--onclick="return confirm('Are you sure?')"-->
																				@csrf
																				<button type="submit" class="btn btn-circle-lg btn-danger flex-center"><i class="fe fe-trash tx-16"></i></button>
																			</form>
																		</div>
																	</div>
																</td>
																<!-- <td>
																	<a href="{{$value->pdf_file}}" target="_blank" class="btn btn-warning btn-sm preview" data-id="{{$value->id}}">View Notes</a>
																</td> -->

															</tr>
															@endforeach
														</tbody>
													</table>
												</div>
											</div>
											{{-- Pagination --}}
											<div class="row">
												<div class="col-md-6 mt-2">
													Showing {{$notes->firstItem()}} to {{$notes->lastItem()}} of {{$notes->total()}} Entries
												</div>
												<div class="col-md-6">
													<div class="pagination custom-pagination justify-content-end mb-0" id="dt-ajax-array_paginate">
														{!! $notes->appends(request()->all())->links() !!}
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- [ Main Content ] end -->
</div>
<div class="modal fade" id="modalMedia" oncontextmenu="return false;" tabindex="-1" role="dialog" aria-labelledby="modalMediaLabel" aria-hidden="true">
	<div class="modal-dialog modal-xl" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="modalMediaLabel">Creating Courses</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<iframe src="https://azam-prod-assets.s3.ap-south-1.amazonaws.com/help_desk_videos/HOW+TO+CREATE+ACADEMICS.mp4" frameborder="0" width="100%" height="600px"></iframe>
			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="modalMedia2" oncontextmenu="return false;" tabindex="-1" role="dialog" aria-labelledby="modalMediaLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalMediaLabel">Creating Notes</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
               <iframe src="https://azam-prod-assets.s3.ap-south-1.amazonaws.com/help_desk_videos/HOW+TO+CREATE+NOTES.mp4" frameborder="0" width="100%" height="600px"></iframe>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
	$('.reset').on('click', function(e) {
		// $('#form').trigger("reset");
		$('#title').val('');
		$('#category_id').val('');
		$('#course_type').val('');
		$('#res').val('');
		$('#status').val('');
	});

    $('.notesreset').on('click', function(e) {
		// $('#form').trigger("reset");
		$('#notes_title').val('');
		$('#notes_category_id').val('');
		$('#notes_type').val('');
		$('#res').val('');
		$('#status').val('');
	});

	function reload() {
		location.reload();
	}
</script>
<script>
    $(document).ready(function() {
        // Check if there's an active tab stored in localStorage
        var activeTab = localStorage.getItem('activeTab');
        if (activeTab) {
            // Activate the tab from localStorage
            $('#myTab a[href="' + activeTab + '"]').tab('show');
        }

        // Store the active tab in localStorage on click
        $('#myTab a').on('click', function(e) {
            e.preventDefault();
            var tabId = $(this).attr('href');
            localStorage.setItem('activeTab', tabId);
            $(this).tab('show');
        });
    });
</script>
@endsection