
<div class="page-header">
	<h3 class="page-title">
		<span class="page-title-icon bg-gradient-primary text-white mr-2">
			<i class="mdi mdi-phone-voip"></i>
		</span>
		Social Category
	</h3>
	<nav aria-label="breadcrumb">
		<ul class="breadcrumb">
			<li class="breadcrumb-item active" aria-current="page">
				<span></span>Overview
				<i class="mdi mdi-alert-circle-outline icon-sm text-primary align-middle"></i>
			</li>
		</ul>
	</nav>
</div>

<div >
	<div class="card">
		<div class="card-body">
			<form class="forms-sample" method="post" action="<?=base_url('MarketingCtrl/category_store/')?>" enctype="multipart/form-data">
				<div class="row">
					<div class="col-md-6">
						<div class="form-group">
							<label for="bank_name">Category Name</label>
							<input type="text" class="form-control"  name="category_name" id="category_name" placeholder="Category Name">
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group">
							<label for="branch_name">Logo</label>
							<input type="file" class="form-control" name="logo" >
						</div>
					</div>
				</div>

				<div class="row form-group">
					<div class="col-12">
						<label for="description">Note</label>
						<textarea class="form-control" name="note" rows="5" id="note"></textarea>
					</div>
				</div>

				<div class="row">
					<div class="col-md-6">
						<div class="form-group row">
							<label class="col-sm-2 col-form-label">Status</label>
							<div class="col-sm-3">
								<div class="form-check">
									<label class="form-check-label">
										<input type="radio" class="form-check-input" name="status" id="status" value="1">
										Active
										<i class="input-helper"></i></label>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-check">
									<label class="form-check-label">
										<input type="radio" class="form-check-input" name="status" id="status" value="0">
										Non-Active
										<i class="input-helper"></i></label>
								</div>
							</div>
						</div>
					</div>
				</div>

				<button  class="btn btn-gradient-primary mr-2">Submit</button>

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

<div class="row">
	<div class="col-md-12 grid-margin stretch-card shadow p-0">
		<div class="card border10">
			<div class="card-body p-3">
				<h4 class="card-title">All Category</h4>
				<div class="table-responsive">
					<table class="table display datatable" id="" >
						<thead>
						<tr>
							<th>#</th>
							<th>
								Category Name
							</th>
						
							<th>
								Status
							</th>
							<th>Action</th>
						</tr>
						</thead>
						<tbody>
						<?php $serial=1; foreach($categories as $category):?>
							<tr>
								<td><?=$serial++?></td>
								<td><?=$category->category_name?></td>
								<td><span class="badge badge-pill badge-dark"><?php if($category->status==1) echo 'Active'; else echo 'Non-Active'?></span></td>
								<td>
									<a onclick="return confirm('Are You Sure ?')" href="<?=base_url("/MarketingCtrl/category_delete?id=".$category->id)?>" class="btn btn-rounded btn-inverse-danger btn-sm"><i class="mdi mdi-delete-forever"></i></a>
									<a onclick="edit_data_set(this)" data-note="<?=$category->note?>" data-toggle="modal" data-target="#editModal" data-id="<?=$category->id?>" data-old_image="<?=$category->logo?>" data-category_name="<?=$category->category_name?>" data-logo="<?=base_url('uploads/social/'.$category->logo)?>" class="btn btn-rounded btn-inverse-danger btn-sm"><i class="mdi mdi-tooltip-edit"></i></a>
									<a>
										<label class="switch">
											<input  onchange="categoryStatus(this)" data-id="<?=$category->id?>" data-status="<?=$category->status?>" type="checkbox" <?php if($category->status==1) echo 'checked'?>>
											<span class="slider round"></span>
										</label>
									</a>
								</td>
							</tr>
						<?php endforeach?>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="col-12 modal fade" id="editModal" >
	<div class="modal-dialog">
		<div class="modal-content">

			<!-- Modal Header -->
			<div class="modal-header">
				<h4 class="modal-title"> <i class="mdi mdi-coin"></i> Edit</b></h4>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>

			<!-- Modal body -->
			<div class="modal-body">
				<input type="hidden" id="ca_id">
				<input type="hidden" id="old_image">
				<h6><i class="md mdi-clipboard"></i> Category Name</h6>
				<input id="category_id" type="text"  class="form-control" placeholder="Category Name...">
				<h6><i class="mdi mdi-message-outline"></i> Note</h6>
				<textarea id="note_id" cols="30" rows="3" class="form-control" placeholder="Write Note....." ></textarea>
				<h6><i class="mdi mdi-image"></i> Image</h6>
				<input type="file" onchange="uploadImage(this)" name="logo" id="image" />
				<br> <br>
				<img src="" id="logo_id" width="100px" height="80px">

				<div id="b_result" class="text-center"></div>
			</div>

			<!-- Modal footer -->
			<div class="modal-footer">
				<button onclick="updateCategory()" type="button" class="btn btn-info">Update <i class="mdi mdi-sync mdi-spin loading"></i> </button>
				<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
			</div>

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



<script src="https://cdn.ckeditor.com/4.11.3/standard-all/ckeditor.js"></script>
<script>

	function edit_data_set(e) {

		$("#ca_id").val($(e).data('id'));
		$("#old_image").val($(e).data('old_image'));
		$("#logo_id").attr("src",$(e).data('logo'));
		$("#category_id").val($(e).data('category_name'));
		$("#note_id").val($(e).data('note'));

	}

	function updateCategory() {
		let image = $("#image").prop('files')[0];
		let id = $("#ca_id").val();
		let old_image = $("#old_image").val();
		var formData = new FormData();
		formData.append('category_name',$("#category_id").val());
		formData.append('note',$("#note_id").val());
		formData.append('logo',image);
		formData.append('id',id);
		formData.append('old_image',old_image);
		console.log(formData);

		$.ajax({
			type: "post",
			url: "<?=base_url('MarketingCtrl/category_update/')?>",
			data:formData,
			contentType : false,
			processData : false,

			dataType: "json",
			success: function (response) {
				$(".loading").hide();
				if (response.success === true) {
					alert("Categoroy Update Successfully !!");
					location.reload();

				}
				else
				{
					alert(1);
				}
			}
		});

	}

	CKEDITOR.replace('note', {
		height: 200,

	})

	var uploadImage = function(event) {
		$("#logo_id").attr("src",'');
		var image = document.getElementById('logo_id');
		var file = document.getElementById('image');
		image.src = URL.createObjectURL(file.files[0]);

	}

	function categoryStatus(e) {
		if(confirm('Are Sure to change Category status ?')){
			let id = $(e).data('id');
			let status = $(e).data('status');

			$.ajax({
				type: "post",
				url: "<?=base_url('MarketingCtrl/update_status')?>",
				data: {id:id,status:status},
				dataType: "json",
				success: function (response) {
					if(response.success==true)
					{
						location.reload();
					}
					else
					{
						alert("sometimes wrong");

					}
				}
			});
		}
	}
</script>

