@extends('admin.layouts.master')

@section('page-title') ادارة التصنيفات @endsection
@section('header-title') ادارة التصنيفات @endsection
@push('main-categories-active') m-menu__item--active @endpush

@section('content')
<div class="row">
	<div class="col-lg-12">
		<!--begin::Portlet-->
		<div class="m-portlet m-portlet--last m-portlet--head m-portlet--responsive-mobile" id="main_portlet">
			<div class="m-portlet__head">
				<div class="m-portlet__head-caption">
					<div class="m-portlet__head-title">
						<span class="m-portlet__head-icon">
							<i class="fa fa-industry"></i>
						</span>
						<h3 class="m-portlet__head-text">
							<span> التصنيفات </span>
						</h3>
					</div>
				</div>
				<div class="m-portlet__head-tools">
					<ul class="nav nav-pills nav-pills--brand m-nav-pills--align-right m-nav-pills--btn-pill m-nav-pills--btn-sm" role="tablist">
						<li class="nav-item m-tabs__item">
							<a href="{{ route('admin.categories.create') }}" class="btn btn-primary m-btn m-btn--icon">
								<span>
									<i class="fa fa-plus"></i>
									<span>اضافة تصنيف جديد</span>
								</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="m-portlet__body">
				@include('admin.includes.alerts')
				<table class="table table-striped- table-bordered table-hover table-checkable m-table m-table--head-bg-primary text-center" id="m_table_1">
					<thead>
						<tr>
							<th> <b>#</b> </th>
							<th> <b>اسم التصنيف الرئيسي</b> </th>
							<th> <b>التصنيفات الفرعية</b> </th>
							<th> <b><i class="flaticon-cogwheel-2"></i></b> </th>
						</tr>
					</thead>
					<tbody>
						@if($categories->count())
						@foreach($categories as $category)
						<tr class="odd gradeX">
							<td>
								{{ $loop->index +1 }}
							</td>

							<td>
								{{ $category['name'] }}
							</td>

							<td>
								<a href="javascript:;" title="عرض التصنيف الفرعية" class="btn btn-primary m-btn m-btn--icon view-details" data-id="{{ $category->id }}">
									<span>
										<i class="fa fa-angle-double-down"></i>
										<span>
											عرض التصنيفات
										</span>
									</span>
								</a>
							</td>

							<td>
								<a href="{{ route('admin.categories.edit', ['category' => $category->id]) }}" title="تعديل" class="m-portlet__nav-link btn m-btn m-btn--hover-warning m-btn--icon m-btn--icon-only m-btn--pill">
									<i class="la la-edit"></i>
								</a>
								<a href="{{ route('admin.categories.delete', ['category' => $category->id]) }}" title="حذف" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill">
									<i class="la la-trash"></i>
								</a>
							</td>
						</tr>
						@endforeach
						@endif
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
@include('admin.categories.view-details')
@stop

@push('page_level_style')
	<style type="text/css">
		.load {
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			position: fixed;
			display: block;
			opacity: 0.8;
			z-index: 100000;
			background-color: #fff;
			z-index: 199;
			text-align: center;
		}
	</style>
@endpush

@push('page_level_script')
	<script src="{{ URL::asset('/assets/admin/datatables.js') }}"></script>
	<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

	<script type="text/javascript">
		$('#view_details_modal').find('.load').hide();
		$(document).on('click', '.sub_categories .pagination a',function(event) {
			event.preventDefault();
			$('li').removeClass('active');
			$(this).parent('li').addClass('active');
			var url = $(this).attr('href');
			var category_id = $('#view_details_form').find('.category_id').val();
			get_subcategories(url, category_id);
		});

		function get_subcategories(url, category_id) {
			$('#view_details_modal').find('.load').show();
			$.ajax({
				url : url,
				data: {
					category_id: category_id
				}
			}).done(function (data) {
				$(".sub_categories").empty().html(data);
				$('#view_details_modal').find('.load').hide();
			});
		}
	</script>

	<script type="text/javascript">
		function reset_form() {
			$('#view_details_form').find(".name").val('');
			$('#view_details_form').find('.category_id').val(0);
			$('#view_details_form').find(".sub_categories").html('');

			$('#view_details_form').find('.btn_save').html('اضافة');
			$('#view_details_form').find('.btn_save').removeClass('btn-warning').addClass('btn-primary');
		}

		$(document).on('click', '.view-details', function () {
			$('#view_details_modal').find('.load').show();
			reset_form();
			var id = $(this).data('id');

			$.ajax({
				url: admin_url + "/categories/show",
				type: "get",
				dataType: "JSON",
				data: {
					category_id: id
				},
				success: function (data) {
					// var data = 
					// console.log(data.data);
					// console.log(data.data.sub_categories);
					$('#view_details_modal').find('.load').hide();
					if (data.status) {
						$('#view_details_form').find('.category_id').val(data.data.category.id);
						$('#view_details_form').find('.sub_categories').html(data.data.sub_categories);

						$('.modal-title').html('عرض تفاصيل تصنيف "' + data.data.category.name + '"');
					} else {
						Swal.fire({title: (!!data.message? data.message : "{{ __('api.whoops') }}"), type: "error"});
					}
				},
				complete: function (jqXHR, textStatus) {
					if (jqXHR.responseJSON['status'] == true) {
						$('#view_details_modal').modal('show');
					}
				},
				error: function (jqXHR, textStatus, errorThrown) {
					$('#view_details_modal').find('.load').hide();
					Swal.fire({title: (!!jqXHR.responseJSON.message? jqXHR.responseJSON.message : "{{ __('api.whoops') }}"), type: "error"});
				}
			});
		});

		$(document).on('click', '.edit-category', function () {
			$('#view_details_modal').find('.load').show();
			reset_form();
			var id = $(this).data('id');

			$.ajax({
				url: admin_url + "/categories/show",
				type: "get",
				dataType: "JSON",
				data: {
					category_id: id
				},
				success: function (data) {
					$('#view_details_modal').find('.load').hide();
					if (data.status) {
						$('.main-title').html('تعديل بيانات التصنيف ');
						$('#view_details_form').find('.category_id').val(data.data.category.id);
						$('#view_details_form').find('.name').val(data.data.category.name);

						$('#view_details_form').find('.btn_save').html('تعديل');
						$('#view_details_form').find('.btn_save').removeClass('btn-primary').addClass('btn-warning');
					} else {
						Swal.fire({title: (!!data.message? data.message : "{{ __('api.whoops') }}"), type: "error"});
					}
				},
				complete: function (jqXHR, textStatus) {
					if (jqXHR.responseJSON['status'] == true) {
						$('#view_details_modal').modal('show');
					}
				},
				error: function (jqXHR, textStatus, errorThrown) {
					$('#view_details_modal').find('.load').hide();
					Swal.fire({title: (!!jqXHR.responseJSON.message? jqXHR.responseJSON.message : "{{ __('api.whoops') }}"), type: "error"});
				}
			});
		});

		$(document).on('submit', '.view_details_form', function (e) {
			e.preventDefault();
			$('#view_details_modal').find('.load').show();
			var formData = new FormData(this);

			var id = $(".category_id").val();
			var action_url = admin_url + '/categories/sub_categories';

			$.ajax({
				url: action_url,
				type: "post",
				cache: false,
				contentType: false,
				processData: false,
				data: formData,
				success: function (data) {
					$('#view_details_modal').find('.load').hide();
					if (data["status"] == true) {
						Swal.fire({
							title: "",
							text: data["message"],
							type: "success",
							confirmButtonText: "{{ __('api.ok') }}",
							cancelButtonText: "{{ __('api.cancel')}}",
							closeOnConfirm: true,
							closeOnCancel: true
						}).then(function () {
							reset_form();
							$(".category_id").val(id);
							get_subcategories(admin_url + '/sub_categories', id);
						});
					} else {
						Swal.fire({
							title: "",
							text: data["message"],
							type: "error",
							confirmButtonText: "{{ __('api.ok') }}",
							cancelButtonText: "{{ __('api.cancel') }}",
							closeOnConfirm: true,
							closeOnCancel: true
						});
					}
				},
				error: function (jqXHR, textStatus, errorThrown) {
					$('#view_details_modal').find('.load').hide();
					Swal.fire({title: (!!jqXHR.responseJSON.message? jqXHR.responseJSON.message : "{{ __('api.whoops') }}"), type: "error"});
				}
			});
		});

		$(document).on('click', '.delete-category', function(e) {
			e.preventDefault();
			var id = $(this).data('id');
			var action_url = admin_url + '/categories/destroy';

			Swal.fire({
				title: 'تأكيد العملية؟',
				text: "",
				type: 'warning',
				showCancelButton: true,
				confirmButtonColor: '#3085d6',
				cancelButtonColor: '#d33',
				confirmButtonText: "{{ __('app.ok') }}",
				cancelButtonText: "{{ __('app.cancel') }}",
			}).then((result) => {
				if (result.value) {
					$.ajax({
						url: action_url,
						type: "post",
						dataType: "JSON",
						data: {
							category_id: id
						},
						success: function(data){
        					$('#view_details_modal').find('.load').hide();
							if(data['status'] == true){
        						Swal.fire({
        							title: "",
        							text: data["message"],
        							type: "success",
        							confirmButtonText: "حسناً",
        							cancelButtonText: "الغاء",
        							closeOnConfirm: true,
        							closeOnCancel: true
        						}).then(function () {
        							reset_form();
        							$(".category_id").val(id);
        							get_subcategories(admin_url + '/sub_categories', id);
        						});
							} else {
								swal({
									title: "",
									text: data["message"],
									type: "error",
									showCancelButton: false,
									confirmButtonColor: "#DD6B55",
									confirmButtonText: "{{ __('app.ok') }}",
									cancelButtonText: "{{ __('app.cancel') }}",
									closeOnConfirm: true,
								});
							}
						},
						error: function (jqXHR, textStatus, errorThrown) {
        					$('#view_details_modal').find('.load').hide();
							swal({title: (!!jqXHR.responseJSON.message? jqXHR.responseJSON.message : "{{ __('app.whoops') }}"), type: "error"});
						}
					});
				}
			})
		});
	</script>
@endpush