{% extends 'super_admin_templates/base.html' %}
{% set path = "utility_master" %}
{% set subpath = "catetogy" %}
{% block content %}
<!-- Content Wrapper. Contains page content -->

<style type="text/css">
	.centered {
        text-align: center;
    }

</style>


<script>
	function confirmDelete(url) {
		if (confirm("Are you sure want to delete?")) {
			window.location.href = url;
		}
	}
</script>

<script>
	function openUpdateModal(catetogy) {
	  
	  const updateServiceModeBaseURL = "{{ url_for('service_configurations.update_service_grouping', serviceGroupingId='__ID__') }}";
	  const formAction = updateServiceModeBaseURL.replace('__ID__', catetogy.id);
	  document.getElementById('updateServiceModeForm').action = formAction;
	  resetFormDataNew('updateServiceModeForm');
 
	  document.getElementById('editname').value = catetogy.name || '';
	  document.getElementById('editsorting').value = catetogy.sorting || '';

	  // Show the modal
	  const modal = new bootstrap.Modal(document.getElementById('updateTask'));
	  modal.show();
	}
	
	
	
	</script>

<div class="main-content app-content">
	<div class="container-fluid">

		<!-- Page Header -->
		<div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
			<h1 class="page-title fw-semibold fs-18 mb-0">Utility Master</h1>
			<div class="ms-md-1 ms-0">
				<nav>
					<ol class="breadcrumb mb-0">
						<li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
						<li class="breadcrumb-item active" aria-current="page">Categories</li>
					</ol>
				</nav>
			</div>
		</div>
		<!-- Page Header Close -->

		<!-- Start::row-1 -->
		<div class="row">
			<div class="col-xl-12">
				<div class="card custom-card">
					<div class="card-header justify-content-between">
						<div class="card-title">
							Categories List
						</div>
						<div class="prism-toggle">
							{% if 'add' in session.get('categoriesPermissions', []) %}
								<button type="button" class="btn btn-primary-light rounded-pill btn-wave me-3" data-bs-toggle="modal" data-bs-target="#addtask"  onClick="resetFormDataNew('add_category_form')">
									<i class="ri-add-circle-line fs-16 align-middle me-1"></i>Create New Category
								</button>
							{% endif %}
						</div>
					</div>
					<div class="card-body">
						<center>
							{% if error %}
							<h2><b><center style="color:RED">{{ error }}</center></b></h2>
							{% endif %}
						</center>

						<div class="row">
							<div class="col-xl-12">
								<form method="GET" action="{{ url_for('service_configurations.service_grouping_list')}}" class="row gy-2 gx-3 align-items-center mb-4">
													   
									<div class="col-auto">
										<input type="text" class="form-control" value="{{search_element}}" name="search_element" id="autoSizingInput"  pattern="^[a-zA-Z0-9\s@#$()+_\-/]*$" maxlength="75" minlength="3"
										title="Search field must contain letters, numbers, spaces, and special characters: @ # $ ( ) + _ - / . "   
											placeholder="Search...">
									</div>
									
									<div class="col-auto">
										<button type="submit" class="btn btn-primary">Search</button>
									</div>
									{% for error in form.search_element.errors %}
									<span class="text-danger" class="error">{{ error }}</span><br>
									{% endfor %}

									<div class="col-auto">
                                   
                                        <a
                                            href="{{url_for('service_configurations.service_grouping_list')}}"><button
                                                type="button" class="btn btn-warning">Reset</button></a>
                                    </div>

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

						
							<!-- Add some space -->
							<div class="mt-3"></div>
							<!-- End space -->
							<div class="table-responsive">
								<table id="datatable-basic" class="table text-nowrap">
								<thead class="table-primary">
									<tr>
									  <th scope="col">S.No</th>
									 <th scope="col">Name</th>
									 <th scope="col">Sorting</th>
									 {% if 'edit' in session.get('categoriesPermissions', []) %}
                                            <th scope="col">Status</th>
                                    {% endif %}
                                    {% if 'edit' in session.get('categoriesPermissions', []) %}
                                        <th scope="col">Action</th>
                                    {% elif 'delete' in session.get('categoriesPermissions', []) %}
                                        <th scope="col">Action</th>
                                    {% endif %}
								   </tr>
								</thead>
								<tbody>
									{% if serviceGroupingList %}
								   	{% for each_service_grouping in serviceGroupingList %}
									<tr>
									  <td>{{snoCount+loop.index}}</td>

									  {% if each_service_grouping.name %}
                                        <td>{{each_service_grouping.name}}</td>
                                        {% else %}
                                        <td>-</td>
                                        {% endif %}
									  
									  <td>{{each_service_grouping.sorting}}</td>
									  
									   {% if 'edit' in session.get('categoriesPermissions', []) %}
									  <td>
										  {% if each_service_grouping.status == 1 %}
											  <a class="btn btn-sm btn-success" href="{{ url_for('service_configurations.update_service_grouping_status', serviceGroupingId=each_service_grouping.id,servicePage=servicePage,search_element=search_element) }}" data-requires-location>Active</a>
										  {% else %}
											  <a class="btn btn-sm btn-warning" href="{{ url_for('service_configurations.update_service_grouping_status', serviceGroupingId=each_service_grouping.id,servicePage=servicePage,search_element=search_element) }}" data-requires-location>Deactivate</a>
										  {% endif %}
									  </td>
									  {% endif %}

									  <td>
										{% if 'edit' in session.get('categoriesPermissions', []) %}
										<a href="javascript:void(0);"
										onclick='openUpdateModal({
											"id": "{{ each_service_grouping.id }}",
											"name": "{{ each_service_grouping.name }}",
											"sorting": "{{ each_service_grouping.sorting }}",
										})'
										class="btn btn-icon btn-sm btn-info-transparent rounded-pill">
										<i class="ri-edit-line"></i>
									 </a>
										{% endif %}
									
									

										{% if 'delete' in session.get('categoriesPermissions', []) %}
										  <a href="javascript:void(0);" onclick="confirmDelete('{{ url_for('service_configurations.delete_service_grouping', serviceGroupingId=each_service_grouping.id,servicePage=servicePage,search_element=search_element) }}')"><span class="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i class="ri-delete-bin-line"></i></span></a>
										  </a>
										{% endif %}
									  </td>
									  </tr>	
									{% endfor %}
									{% else %}
                                    <tr ><td colspan="5" style="text-align: center;">No Data Found</td> </tr>
                                    {% endif %}
								</tbody>
								<div class="flashes">
								{% with messages = get_flashed_messages(with_categories=true) %}
								{% if messages %}
									{% for category, message in messages %}
										{% if category == "success" %}
											<h2><b><center style="color:green">{{ message }}</center></b></h2>
										{% elif category == "danger" %}
											<h2><b><center style="color:red">{{ message }}</center></b></h2>
										{% else %}
											<h2><b><center style="color:orange">{{ message }}</center></b></h2>
										{% endif %}
									{% endfor %}
								{% endif %}
							{% endwith %}
							</div>
								</table>
							</div>
							
							<div class="col-sm-12 col-md-12 mt-3">
								<nav aria-label="Page navigation" class="pagination-style-1">
									{% if servicegroupingPagination %}
										{{ servicegroupingPagination.links }}
									{% endif %}
								</nav>
							</div>


						</div>
					</div>
				</div>
			</div>
		</div>
		<!--End::row-1 -->

	</div>
</div>
<!-- End::app-content -->


<div class="modal fade" id="addtask" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h6 class="modal-title" id="mail-ComposeLabel">Create New Category</h6>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<form method="POST" action="{{url_for('service_configurations.add_service_grouping')}}" enctype="multipart/form-data" name="add_category_form" id ="add_category_form">
				<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
				<input type="hidden" id="latitude_add" name="latitude">
                <input type="hidden" id="longitude_add" name="longitude">
			  <div class="modal-body px-4">
				<div class="row">
				  <div class="col-md-6">
					<div class="form-group">
					  <label for="name">Name*</label>
					  <input type="text" class="form-control" id="name" name="name" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="Name must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/." placeholder="Enter name" required>
					</div>
					<span id="name_error" class="error"></span>
				  </div>

				  <div class="col-md-6">
					<div class="form-group">
					  <label for="sorting">Sorting*</label>
					  <input type="text" class="form-control" id="sorting" name="sorting"  pattern="^[1-9]\d*$"  title="Sorting must contain only numeric characters and greater than or equal to 1" placeholder="Enter sorting" required>
					</div>
					<span id="sorting_error" class="error"></span>
				  </div>

				</div>
			  </div>

			  <div class="modal-footer justify-content-between">
					<span id="errorMessage" class="error"></span>
				  <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
				  <button type="submit" class="btn btn-primary" id="form_submit form_submit">Submit</button>
			  </div>
			</form>
		   
		</div>
	</div>
</div>
<!-- End Create New Bank Modal -->

<div class="modal fade" id="updateTask" tabindex="-1" role="dialog" aria-labelledby="updateTaskLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered " role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="updateTaskLabel">Update Categories</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">
				<form method="POST" action=""  id="updateServiceModeForm" name="updateServiceModeForm" enctype="multipart/form-data">
					<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
					<input type="hidden" id="latitude_update" name="latitude">
                    <input type="hidden" id="longitude_update" name="longitude">
					<div class="form-group">
						<label for="editname">Name*</label>
						<input type="text" class="form-control" id="editname" name="name" pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$" title="Name must contain only alphanumeric characters, spaces, and specific special characters:@#$()+_-/."  required>
						<span id="name_edit_error" class="error"></span>
					</div>
					<div class="form-group">
						<label for="editsorting">Sorting*</label>
						<input type="text" class="form-control" id="editsorting" name="sorting" pattern="^\d+$" title="Sorting must contain only numeric characters" required>
						<span id="sorting_edit_error" class="error"></span>
					</div>
					<!-- Add more edit form fields as needed -->
					<div class="modal-footer justify-content-between">
						<button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
						<button type="submit" class="btn btn-primary form_submit">Update</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>



<script type="text/javascript">
	
	$(document).ready(function () {
	$('#add_category_form').validate({
		rules: {
				name: {
				  required: true,
				  minlength: 3,
				  maxlength: 75,
				},
			   
				sorting: {
				  required: true,
				  min:1,
				  minlength: 1,
				  maxlength: 4,
				  digits:true,
				},
			},
		  messages: {
			name: {
				required:'Name is required',
				minlength:'Name is must be greaterthan or equals to 3 charecters',
				maxlength:'Name is must be lessthan or equals to 75 charecters',
			},
		   
			sorting: {
				required:'sorting is required',
				min:'Sorting must be greater than or equal to 1',
				minlength:'sorting is must be greaterthan or equals to 1 ',
				maxlength:'sorting is must be lessthan or equals to 9999',
				digits:"only digits are allowed",
			},
	  },
				submitHandler: function(form, event) {
				$('.form_submit').prop('disabled', true);
				$('#newLoadingModel').show();
				event.preventDefault(); // Prevent the default form submission
				getLocationAndProceed(
				    function(lat, lng) {

				        $(form).find('input[name="latitude"]').val(lat);
				        $(form).find('input[name="longitude"]').val(lng);
				        // Create a new FormData object and append the form data (including image files)
				        let formData = new FormData(form);

				        $.ajax({
				            url: form.action, // Use the form's action URL
				            type: form.method, // Use the form's method (GET/POST)
				            data: formData,
				            processData: false, // Don't process the data as a query string
				            contentType: false, // Let jQuery set the content-type for multipart/form-data
				            xhrFields: {
				                withCredentials: true // THIS ensures cookies/session are sent
				            },
				            success: function(response) {
				                if (response.responseStatus == 1 || response.responseStatus == 4) {
				                    form.reset(); // Reset the form
				                    location.reload();
				                } else if (response.responseStatus == 0) {
				                    $('.form_submit').prop('disabled', false);
				                    $('#newLoadingModel').hide();
				                    $.each(response.result, function(key, value) {
				                        $('#' + key + "_error").text(value);
				                    });
				                    return false;
				                } else if (response.responseStatus == 2) {
				                    $('.form_submit').prop('disabled', false);
				                    $('#newLoadingModel').hide();
				                    $('#errorMessage').text(response.result);
				                    return false;
				                } else {
				                    location.reload();
				                }
				            },
				            error: function(xhr, status, error) {
				                console.log("Error uploading image: " + error);
				                $('#errorMessage').text("Error uploading image.");
				            }
				        });
				    },
				    function() {
				        $('.form_submit').prop('disabled', false);
				        $('#newLoadingModel').hide();
				        alert("Location access is required to proceed. Please enable it in your browser.");
				    }
				);
				}

				});

	$('#updateServiceModeForm').validate({
	rules: {
				name: {
				  required: true,
				  minlength: 3,
				  maxlength: 75,
				},
			   
				sorting: {
				  required: true,
				  minlength: 1,
				  maxlength: 4,
				  digits:true
				},
			   
			},
			messages: {
			name: {
				required:'categoryName is required',
				minlength:'categoryName is must be greaterthan or equals to 3 charecters',
				maxlength:'categoryName is must be lessthan or equals to 75 charecters',
			},
			sorting: {
				required:'sorting is required',
				minlength:'sorting is must be greaterthan or equals to 1 ',
				maxlength:'sorting is must be lessthan or equals to 9999',
				digits:"only digits are allowed",
			},
		  },
		submitHandler: function(form,event) {
			$('.form_submit').prop('disabled', true);
			$('#newLoadingModel').show();
			event.preventDefault();
			getLocationAndProceed(
                function (lat, lng) {
                   
                    $(form).find('input[name="latitude"]').val(lat);
                    $(form).find('input[name="longitude"]').val(lng);

					let formData = new FormData(form);

					$.ajax({
					url: form.action,
					type: form.method,
					data: formData,
					processData: false,  // Don't process the data as a query string
					contentType: false,  // Let jQuery set the content-type for multipart/form-data
					xhrFields: {
		                                withCredentials: true   // THIS ensures cookies/session are sent
		                            },
					success: function(response) {
						if(response.responseStatus==1 || response.responseStatus==4){
						form.reset();
						location.reload();
						}else if(response.responseStatus==0){
							$('.form_submit').prop('disabled', false);
							$('#newLoadingModel').hide();
							$.each(response.result, function(key, value) {
							$('#'+key+"_edit_error").text(value)
						});
							return false;
						}else if(response.responseStatus==2){
							$('.form_submit').prop('disabled', false);
							$('#newLoadingModel').hide();
						$('#EditErrorMessage').text(response.result);
							return false;
						}else{
						   location.reload(); 
						}
						
					},
                    error: function (xhr) {
                        // You can also reload page after error (e.g. CSRF token mismatch)
                        location.reload();
                    }            
				});
			},
			function () {
				 	$('.form_submit').prop('disabled', false);
            		$('#newLoadingModel').hide();
	                        alert("Location access is required to proceed. Please enable it in your browser.");
	                }
                );
			}
	});
});
</script>


<script>


    function resetFormData1(formid) {
    const form = document.getElementById(formid); // Get the form element

    if (!form) return;

    form.reset(); // Reset standard input fields

    // Remove all jQuery Validation plugin error labels
    form.querySelectorAll('label.error').forEach(el => el.remove());

    // Clear all custom error spans
    form.querySelectorAll('span.error').forEach(el => el.innerText = '');

    // Update any chosen dropdowns if present
    $(form).find('.chosen-select').trigger('chosen:updated');
}

</script>

{% endblock %}