@extends('layouts.admin')

@section('title', 'Article Categories')

@section('content')
	<div class="mb-3">
		<h1 class="h3 d-inline align-middle">Article Categories</h1>
	</div>

	<div class="row">
		<div class="col-md-12">
			<div class="card">
				<div class="card-header d-flex justify-content-between align-items-center">
					<h5 class="card-title mb-0">List</h5>
					<button class="btn btn-sm btn-outline-primary"
						data-bs-toggle="modal"
						data-bs-target="#addNewModal"
						data-record-id="0">
						<i class="fas fa-plus"></i> Add
					</button>
				</div>
				<div class="card-body">
					<table class="table table-striped dataTable no-footer dtr-inline dt_table" data-export-title="Article Categories" style="width:100%">
						<thead>
							<tr>
								<th>S.No.</th>
								<th>Category</th>
								<th>For Article</th>
								<th>For Question</th>
								<th>Created</th>
								<th class="noExport">Action</th>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="addNewModal" tabindex="-1" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content position-relative">
				<div class="modal-header">
					<h5 class="modal-title"></h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
				</div>
				<div class="modal-body minheight position-relative">
					<div class="modal_loader_div">
						<div class="spinner-border text-primary"></div>
					</div>
					<div class="modal-inner-body"></div>
				</div>
			</div>
		</div>
	</div>
@endsection

@push('scripts')
<script>
	document.addEventListener("DOMContentLoaded", function() {
		backDropModel('addNewModal');

		let addNewModal = document.getElementById('addNewModal');

		addNewModal.addEventListener('show.bs.modal', function(event) {
			let button = event.relatedTarget;
			let id = button ? button.getAttribute("data-record-id") : 0;

			$('#addNewModal .modal-title').text(id > 0 ? 'Edit Category' : 'New Category');

			$.ajax({
				type: 'POST',
				url: "{{ route('admin.article-categories.addForm') }}",
				data: { id: id },
				dataType: 'json',
				beforeSend: function() {
					$('#addNewModal .modal_loader_div').addClass('active');
					$('#addNewModal .modal-inner-body').html('');
				},
				success: function(data) {
					$('#addNewModal .modal-inner-body').html(data.html);
				},
				complete: function() {
					$('#addNewModal .modal_loader_div').removeClass('active');
				}
			});
		});

		addNewModal.addEventListener('hidden.bs.modal', function() {
			$('#addNewModal .modal-inner-body').html('');
		});
	});

	$(document).on("submit", "#articleCategoryForm", function(e) {
		e.preventDefault();
		let form = $(this);
		let submitBtn = form.find(".submitBtn");
		submitBtn.bs5button('loading');

		$.ajax({
			url: "{{ route('admin.article-categories.save') }}",
			type: "POST",
			data: form.serialize(),
			dataType: "json",
			success: function(response) {
				if (response.status === 0) {
					let errorList = "<ul class='m-0 p-0 ps-3 text-start'>";
					$.each(response.errors, function(field, messages) {
						errorList += "<li>" + messages[0] + "</li>";
					});
					errorList += "</ul>";
					showToast("danger", errorList);
				} else if (response.status === 1) {
					showToast("success", response.message);
					$("#addNewModal").modal("hide");
					table.ajax.reload(null, false);
				}
			},
			complete: function() {
				submitBtn.bs5button('reset');
			}
		});
	});

	$(document).ready(function() {
		initDatatable(
			'dt_table',
			"{{ route('admin.article-categories.data_table') }}",
			{},
			[
				{ targets: 0,  className: "dt-body-left dt-head-left" },
				{ targets: -1, className: "dt-body-right dt-head-right" }
			],
			25,
			[],
			true,
			[]   // initial sort handled server-side (id desc — see ArticleCategoryController::getDataTable)
		);
	});
</script>
@endpush