@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="d-flex justify-content-end mb-3">
					<a class="btn btn-primary" style="background: #05BCF6;" onclick="showEquipment()">
						+ Add Discount
					</a>
				</div>

				<div class="card mb-4 responsive-card">
					<div class="d-flex justify-content-between align-items-center p-2 rounded">
						<div class="d-flex gap-2">

						</div>
						<div class="text-center">
							<h6 class="mt-3" style="font-size: 20px; font-weight: 600;">List of Discount</h6>
						</div>
						<div>
						</div>
					</div>

					<!-- Table Card -->
					<div class="card-body">
						<div class="table-responsive">
							<table id="ordersTable" class="table table-bordered" style="background-color: white; color: black;">
								<thead style="background: #05BCF6; color: white;">
									<tr>
										<th>Sr. No.</th>
										<th>Discount Name</th>
										<th>Percentage/Flat</th>
										<th>Amount</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->percentage }}</td>
											<td>{{ $state->Amount }}</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('/Discount/' . $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('/Discount/' . $state->id . '/update') }}" id="editDiscountForm{{ $state->id }}">
														@csrf
														<div class="modal-header text-white rounded-top-4" style="background-color: #05BCF6;">
															<h5 class="modal-title" id="editStateLabel">Edit Discount</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">Discount 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 Discount Name is required.') }}
																</div>
															</div>
															<div class="mb-3">
																<label class="form-label">Percentage/Flat<span class="text-danger">*</span></label>
																<select class="form-control @error('percentage') is-invalid @enderror" name="percentage" id="editPercentage{{ $state->id }}">
																	<option value="" disabled>Select</option>
																	<option value="Percentage" {{ old('percentage', $state->percentage) == 'Percentage' ? 'selected' : '' }}>Percentage</option>
																	<option value="Flat" {{ old('percentage', $state->percentage) == 'Flat' ? 'selected' : '' }}>Flat</option>
																</select>
																<div class="invalid-feedback" id="editPercentageError{{ $state->id }}">
																	{{ $errors->first('percentage', 'The Percentage/Flat field is required.') }}
																</div>
															</div>
															<div class="mb-3">
																<label class="form-label">Amount/Percentage<span class="text-danger">*</span></label>
																<input type="number" class="form-control @error('Amount') is-invalid @enderror" name="Amount" id="editAmount{{ $state->id }}" value="{{ old('Amount', $state->Amount) }}" min="0">
																<div class="invalid-feedback" id="editAmountError{{ $state->id }}">
																	{{ $errors->first('Amount') ?: 'The Amount must be between 0 and 100 for Percentage discounts.' }}
																</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 Discount 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 Discount</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('Discount') }}" id="addDiscountForm">
						@csrf
						<div class="modal-body">
							<div class="mb-3">
								<label class="form-label">Discount Name<span class="text-danger">*</span></label>
								<input class="form-control @error('name') is-invalid @enderror" name="name" id="addName" placeholder="Enter Discount Name" value="{{ old('name') }}">
								<div class="invalid-feedback" id="addNameError">
									{{ $errors->first('name', 'The Discount Name is required.') }}
								</div>
							</div>
							<div class="mb-3">
								<label class="form-label">Percentage/Flat<span class="text-danger">*</span></label>
								<select class="form-control @error('percentage') is-invalid @enderror" name="percentage" id="addPercentage">
									<option value="" disabled selected>Select</option>
									<option value="Percentage" {{ old('percentage') == 'Percentage' ? 'selected' : '' }}>Percentage</option>
									<option value="Flat" {{ old('percentage') == 'Flat' ? 'selected' : '' }}>Flat</option>
								</select>
								<div class="invalid-feedback" id="addPercentageError">
									{{ $errors->first('percentage', 'The Percentage/Flat field is required.') }}
								</div>
							</div>
							<div class="mb-3">
								<label class="form-label">Amount/Percentage<span class="text-danger">*</span></label>
								<input type="number" class="form-control @error('Amount') is-invalid @enderror" name="Amount" id="addAmount" placeholder="Enter Amount" value="{{ old('Amount') }}" min="0">
								<div class="invalid-feedback" id="addAmountError">
									{{ $errors->first('Amount') ?: 'The Amount must be between 0 and 100 for Percentage discounts.' }}
								</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 Discount Form Validation
	const addDiscountForm = document.getElementById('addDiscountForm');
	if (addDiscountForm) {
		addDiscountForm.addEventListener('submit', function (event) {
			const nameInput = document.getElementById('addName');
			const percentageInput = document.getElementById('addPercentage');
			const amountInput = document.getElementById('addAmount');
			const nameError = document.getElementById('addNameError');
			const percentageError = document.getElementById('addPercentageError');
			const amountError = document.getElementById('addAmountError');

			let isValid = true;

			// Reset error states
			nameInput.classList.remove('is-invalid');
			percentageInput.classList.remove('is-invalid');
			amountInput.classList.remove('is-invalid');
			nameError.textContent = '';
			percentageError.textContent = '';
			amountError.textContent = '';

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

			// Validate Percentage/Flat
			if (!percentageInput.value.trim()) {
				percentageInput.classList.add('is-invalid');
				percentageError.textContent = 'The Percentage/Flat field is required.';
				isValid = false;
			}

			// Validate Amount
			const amountValue = parseFloat(amountInput.value);
			if (!amountInput.value.trim()) {
				amountInput.classList.add('is-invalid');
				amountError.textContent = 'The Amount is required.';
				isValid = false;
			} else if (isNaN(amountValue) || amountValue < 0) {
				amountInput.classList.add('is-invalid');
				amountError.textContent = 'The Amount must be at least 0.';
				isValid = false;
			} else if (percentageInput.value === 'Percentage' && amountValue > 100) {
				amountInput.classList.add('is-invalid');
				amountError.textContent = 'The Amount must be between 0 and 100 for Percentage discounts.';
				isValid = false;
			}

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

	// Edit Discount Form Validation
	document.querySelectorAll('[id^="editDiscountForm"]').forEach(form => {
		form.addEventListener('submit', function (event) {
			const id = form.id.replace('editDiscountForm', '');
			const nameInput = document.getElementById('editName' + id);
			const percentageInput = document.getElementById('editPercentage' + id);
			const amountInput = document.getElementById('editAmount' + id);
			const nameError = document.getElementById('editNameError' + id);
			const percentageError = document.getElementById('editPercentageError' + id);
			const amountError = document.getElementById('editAmountError' + id);

			let isValid = true;

			// Reset error states
			nameInput.classList.remove('is-invalid');
			percentageInput.classList.remove('is-invalid');
			amountInput.classList.remove('is-invalid');
			nameError.textContent = '';
			percentageError.textContent = '';
			amountError.textContent = '';

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

			// Validate Percentage/Flat
			if (!percentageInput.value.trim()) {
				percentageInput.classList.add('is-invalid');
				percentageError.textContent = 'The Percentage/Flat field is required.';
				isValid = false;
			}

			// Validate Amount
			const amountValue = parseFloat(amountInput.value);
			if (!amountInput.value.trim()) {
				amountInput.classList.add('is-invalid');
				amountError.textContent = 'The Amount is required.';
				isValid = false;
			} else if (isNaN(amountValue) || amountValue < 0) {
				amountInput.classList.add('is-invalid');
				amountError.textContent = 'The Amount must be at least 0.';
				isValid = false;
			} else if (percentageInput.value === 'Percentage' && amountValue > 100) {
				amountInput.classList.add('is-invalid');
				amountError.textContent = 'The Amount must be between 0 and 100 for Percentage discounts.';
				isValid = false;
			}

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

	// Reopen Modal on Server-Side Validation Failure
	@if ($errors->any())
		@if (url()->previous() === url('Discount'))
			const addModal = new bootstrap.Modal(document.getElementById('addEquipment'));
			addModal.show();
		@else
			const url = '{{ url()->previous() }}';
			const match = url.match(/Discount\/(\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 () {
	$('#ordersTable').DataTable({
		responsive: true
	});
});

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