@include('includes.app')
@include('includes.sidebar')
@include('includes.header')
@include('includes.toster')
<style>
	.filter-transition {
		overflow: hidden;
		transition: all 0.4s ease;
		transform-origin: top;
		max-height: 1000px; /* enough height to accommodate content */
		transform: scaleY(1);
		opacity: 1;
	}

	.filter-transition.hidden {
		max-height: 0;
		transform: scaleY(0);
		opacity: 0;
		padding: 0 !important;
		margin: 0 !important;
	}
	.page-content {
		min-height: 100vh;
		padding: calc(70px + 1.5rem) calc(1.5rem * .5) 60px calc(1.5rem * .5);
	}

	.custom-dropdown {
		min-width: 100px;
		padding: 4px 0;
		font-size: 13px;
		text-align: center;
	}

	.custom-dropdown .dropdown-item {
		padding: 4px 8px;
	}

	.offcanvas-body .card {
		background-color: white;
		border: none;
		margin-bottom: 1rem;
	}
	.offcanvas-body .card-header {
		font-weight: bold;
		font-size: 16px;
	}
	.offcanvas-body p {
		margin: 0 0 5px;
		font-size: 14px;
	}

	th {
		white-space: nowrap;
	}

	th, td {
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
	}
</style>
<div class="page-content">
	<div class="container-fluid media-containerfluid" style="background-color: #F6F7F9; padding-left: 45px;">
		<div class="row mt-4">
			<!-- Sidebar Column -->
			@include('includes.under-master-sidebar')

			<!-- Main Content -->
			<div class="col-md-10">
				<div class="card mb-4 responsive-card">
					<div class="d-flex justify-content-between align-items-center p-2 rounded m-3">
						<!-- Left Buttons -->
						<div class="d-flex gap-2">
						</div>
						<div class="text-center">
							<h6 class="mt-3" style="font-size: 20px; font-weight: 600;">List of Order ID Series</h6>
						</div>
						<div class="d-flex justify-content-end">
							<a class="btn btn-primary" style="background: #05BCF6;" onclick="showEquipment()">
								Add Order ID Series
							</a>
						</div>
					</div>

					<!-- Table Card -->
					<div class="card-body">
						<div class="table-responsive">
							<table class="table table-bordered" style="background-color: white; color: black;">
								<thead style="background: #05BCF6; color: white;">
									<tr>
										<th>Sr. No.</th>
										<th>Order ID Series Name</th>
										<th>Order ID Series</th>
										<th>Edit</th>
										<th>Delete</th>
									</tr>
								</thead>
								<tbody style="background-color: white; color: black;">
									@foreach ($states as $index => $state)
										<tr>
											<td>{{ $index + 1 }}</td>
											<td>{{ $state->name }}</td>
											<td>{{ $state->value }}</td>
											<td>
												<button class="btn btn-sm btn-success" onclick="showStateModal({{ $state->id }})">
													<i class="bi bi-pencil-square me-2"></i>Edit
												</button>
											</td>
											<td>
												<button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteConfirmModal" data-url="{{ url('/OrderID_Series/' . $state->id) }}">
													<i class="bi bi-trash me-2"></i>Delete
												</button>
											</td>
										</tr>

										<!-- Edit Modal -->
										<div class="modal fade" id="editStateModal{{ $state->id }}" tabindex="-1" aria-labelledby="editStateLabel" aria-hidden="true">
											<div class="modal-dialog modal-dialog-centered">
												<div class="modal-content rounded-4">
													<form method="POST" action="{{ url('/OrderID_Series/' . $state->id . '/update') }}" id="editOrderForm{{ $state->id }}">
														@csrf
														<div class="modal-header text-white rounded-top-4" style="background-color: #05BCF6;">
															<h5 class="modal-title" id="editStateLabel">Edit Order ID Series</h5>
															<button type="button" class="btn-close text-white" style="filter: invert(1);" data-bs-dismiss="modal" aria-label="Close"></button>
														</div>
														<div class="modal-body">
															<div class="mb-3">
																<label class="form-label">Order ID Series Name<span class="text-danger">*</span></label>
																<input class="form-control @error('name') is-invalid @enderror" name="name" id="editName{{ $state->id }}" value="{{ old('name', $state->name) }}">
																<div class="invalid-feedback" id="editNameError{{ $state->id }}">
																	{{ $errors->first('name', 'The Order ID Series Name is required.') }}
																</div>
															</div>
															<div class="mb-3">
																<label class="form-label">Order ID Series<span class="text-danger">*</span></label>
																<input class="form-control @error('value') is-invalid @enderror" name="value" id="editValue{{ $state->id }}" value="{{ old('value', $state->value) }}">
																<div class="invalid-feedback" id="editValueError{{ $state->id }}">
																	{{ $errors->first('value', 'The Order ID Series is required.') }}
																</div>
															</div>
														</div>
														<div class="modal-footer justify-content-center">
															<button type="submit" class="btn btn-sm text-white" style="background-color: #05BCF6;">Update</button>
														</div>
													</form>
												</div>
											</div>
										</div>
									@endforeach
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Add Order ID Series Modal -->
		<div class="modal fade" id="addEquipment" tabindex="-1" aria-labelledby="addEquipmentLabel" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content rounded-4">
					<div class="modal-header text-white rounded-top-4" style="background-color: #05BCF6;">
						<h5 class="modal-title" id="addEquipmentLabel">Add Order ID Series</h5>
						<button type="button" class="btn-close text-white" style="filter: invert(1);" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<form method="POST" action="{{ url('OrderID_Series') }}" id="addOrderForm">
						@csrf
						<div class="modal-body">
							<div class="mb-3">
								<label class="form-label">Order ID Series Name<span class="text-danger">*</span></label>
								<input class="form-control @error('name') is-invalid @enderror" name="name" id="addName" placeholder="Enter Order ID Series Name" value="{{ old('name') }}">
								<div class="invalid-feedback" id="addNameError">
									{{ $errors->first('name', 'The Order ID Series Name is required.') }}
								</div>
							</div>
							<div class="mb-3">
								<label class="form-label">Order ID Series<span class="text-danger">*</span></label>
								<input class="form-control @error('value') is-invalid @enderror" name="value" id="addValue" placeholder="Enter Order ID Series" value="{{ old('value') }}">
								<div class="invalid-feedback" id="addValueError">
									{{ $errors->first('value', 'The Order ID Series is required.') }}
								</div>
							</div>
						</div>
						<div class="modal-footer justify-content-center" style="border-top: none;">
							<button type="submit" class="btn btn-sm text-white" style="background-color: #05BCF6;">Create</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<!-- Delete Confirmation Modal -->
		<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true" data-bs-backdrop="false">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content rounded-4">
					<div class="modal-header bg-danger text-white rounded-top-4">
						<h5 class="modal-title" id="deleteConfirmModalLabel">
							<i class="bi bi-exclamation-triangle me-2"></i>Confirm Deletion
						</h5>
						<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body text-center">
						<p class="mb-2">Are you sure you want to delete this data?</p>
						<p class="text-muted small">This action cannot be undone.</p>
					</div>
					<div class="modal-footer justify-content-center">
						
						<form id="deleteForm" method="POST">
							@csrf
							@method('DELETE')
							<button type="submit" class="btn btn-sm btn-danger">Yes, Delete</button>
						</form>
						<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
@include('includes.footer')

<!-- Scripts -->
<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
<script src="../assets/js/sidebarmenu.js"></script>
<script src="../assets/js/app.min.js"></script>
<script src="../assets/libs/apexcharts/dist/apexcharts.min.js"></script>
<script src="../assets/libs/simplebar/dist/simplebar.js"></script>
<script src="../assets/js/dashboard.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
	// Delete Modal URL Setup
	const deleteModal = document.getElementById('deleteConfirmModal');
	deleteModal.addEventListener('show.bs.modal', function (event) {
		const button = event.relatedTarget;
		const url = button.getAttribute('data-url');
		const form = deleteModal.querySelector('#deleteForm');
		form.setAttribute('action', url);
	});

	// Add Order Form Validation
	const addOrderForm = document.getElementById('addOrderForm');
	if (addOrderForm) {
		addOrderForm.addEventListener('submit', function (event) {
			const nameInput = document.getElementById('addName');
			const valueInput = document.getElementById('addValue');
			const nameError = document.getElementById('addNameError');
			const valueError = document.getElementById('addValueError');

			let isValid = true;

			// Reset error states
			nameInput.classList.remove('is-invalid');
			valueInput.classList.remove('is-invalid');
			nameError.textContent = '';
			valueError.textContent = '';

			// Validate Name
			if (!nameInput.value.trim()) {
				nameInput.classList.add('is-invalid');
				nameError.textContent = 'The Order ID Series Name is required.';
				isValid = false;
			}

			// Validate Value
			if (!valueInput.value.trim()) {
				valueInput.classList.add('is-invalid');
				valueError.textContent = 'The Order ID Series is required.';
				isValid = false;
			}

			if (!isValid) {
				event.preventDefault(); // Prevent form submission
			}
		});
	}

	// Edit Order Form Validation
	document.querySelectorAll('[id^="editOrderForm"]').forEach(form => {
		form.addEventListener('submit', function (event) {
			const id = form.id.replace('editOrderForm', '');
			const nameInput = document.getElementById('editName' + id);
			const valueInput = document.getElementById('editValue' + id);
			const nameError = document.getElementById('editNameError' + id);
			const valueError = document.getElementById('editValueError' + id);

			let isValid = true;

			// Reset error states
			nameInput.classList.remove('is-invalid');
			valueInput.classList.remove('is-invalid');
			nameError.textContent = '';
			valueError.textContent = '';

			// Validate Name
			if (!nameInput.value.trim()) {
				nameInput.classList.add('is-invalid');
				nameError.textContent = 'The Order ID Series Name is required.';
				isValid = false;
			}

			// Validate Value
			if (!valueInput.value.trim()) {
				valueInput.classList.add('is-invalid');
				valueError.textContent = 'The Order ID Series is required.';
				isValid = false;
			}

			if (!isValid) {
				event.preventDefault(); // Prevent form submission
			}
		});
	});

	// Reopen Modal on Server-Side Validation Failure
	@if ($errors->any())
		@if (url()->previous() === url('OrderID_Series'))
			const addModal = new bootstrap.Modal(document.getElementById('addEquipment'));
			addModal.show();
		@else
			const url = '{{ url()->previous() }}';
			const match = url.match(/OrderID_Series\/(\d+)\/update/);
			if (match) {
				const id = match[1];
				const editModal = new bootstrap.Modal(document.getElementById('editStateModal' + id));
				editModal.show();
			}
		@endif
	@endif
});

function showEquipment() {
	const modal = new bootstrap.Modal(document.getElementById('addEquipment'));
	modal.show();
}

function showStateModal(id) {
	const modalElement = document.getElementById('editStateModal' + id);
	const modal = new bootstrap.Modal(modalElement);
	modal.show();
}

$(document).ready(function () {
	if (!$.fn.DataTable.isDataTable('#ordersTable')) {
		$('#ordersTable').DataTable({
			responsive: true
		});
	}
});

function toggleSidebar() {
	const sidebar = document.getElementById("sidebarWrapper");
	sidebar.classList.toggle("active");
}
</script>
</body>
</html>