{% extends 'admin/layouts/base.html.twig' %}
{% set active = 'app_admin_order' %}


{% set breadcrumbs = [
    {
        'link': path('app_admin_dashboard'), 'title': 'Home'
    },
    {
        'title': 'Order',
    },
	{
        'title': 'New',
    }
]%}
{% block stylesheets %}
	<style>

		.table thead th.sticky-col-1,
		.table tbody td.sticky-col-1 {
			position: sticky;
			left: 0;
			background-color: #2C2D33;
			outline: 1px solid #4D4D51;
		}

		.table thead th.sticky-col-2,
		.table tbody td.sticky-col-2 {
			position: sticky;
			left: 50px;
			background-color: #2C2D33;
			outline: 1px solid #4D4D51;
		}
		 .iti__country-list .iti__country {
                background-color: #444; /* Dark background for each country item */
            }
		.iti__country-list .iti__country:hover,
		.iti__country-list .iti__country:focus {
			background-color: #555; /* Slightly lighter dark background on hover/focus */
		}

		form#add_order .iti__highlight {
			background: #555;
		}
		form#add_order .iti__divider{
			display: none;
		}

		form#add_order .iti__flag-container{
			height: 42px;
		}

		form#add_order .iti {
			display: block;
		}

		.iti__country-list .iti__dial-code {
			color: #aaa; /* Light color for dial code */
		}

		.iti__country-list .iti__country-name {
			color: #fff; /* Light color for country name */
		}

		.iti__country-list .iti__preferred {
			background-color: #444; /* Dark background for preferred countries */
		}
	</style>
{% endblock %}
{% block content %}
	{% if errors is defined and errors|length > 0 %}
        <div class="errors">
            <ul>
                {% for error in errors %}
                    <li class="text-danger">{{ error }}</li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}

	{{ form_start(form, {'attr': {'id': 'add_order'}}) }}
	{# {{ form_start(form, { 'action': path('your_route_name') }) }} #}

	<div class="card">
		<div class="card-header d-flex align-items-center">
			<h5 class="mb-0">Affiliate Details</h5>
		</div>

		<div class="card-body">
			<div class="row">
				<div class="col-lg-6">
					{{ form_row(form.affiliateId) }}
				</div>
			</div>
		</div>

	</div>

	<div class="card">
		<div class="card-header d-flex align-items-center">
			<h5 class="mb-0">Order Details</h5>
		</div>
		<div class="card-body ">
			<div class="col">
				<h3>Generally</h3>

				<div class="row">
					<div class="mb-3">
						<label>Creation Date:</label><br>
						<input type="date" name="date" required>@
						<input type="number" name="hour" min="0" max="23" step="1" style="width:40px;" oninput="validateHour(this)" required>
						<input type="number" name="minutes" min="0" max="59" step="1" style="width:40px;" oninput="validateMinutes(this)" required>
					</div>

						{{ form_row(form.status) }}
						{{ form_row(form.userId) }}
				</div>

			</div>
			<div class="row">
				<div class="col">
					<h3>The invoice</h3>
					<div class="defailtInvoice">
						Address:No billing address provided.<br>E-mail address:
					</div>
					<div class="customerInvoice" style="display:none;">
						<div class="row">
							<div class="col">
								{{ form_row(form.customerFirstName) }}
							</div>
							<div class="col">
								{{ form_row(form.customerLastName) }}
							</div>
						</div>
						<div class="row">
							<div class="col">
								{{ form_row(form.customerEmailId) }}
							</div>
							<div class="col">
								{{ form_row(form.customerPhoneNumber) }}
							</div>
						</div>
						<div class="row">
							<div class="col">
								{{ form_row(form.customerBillingAddress) }}
								{# <input type="checkbox" name="shippingAddressCheckbox" value="1" class="shippingAddressCheckbox mb-4"> Enable Shipping Address? #}
							</div>
						</div>
						{# <div class="row hideShippingAddress" style="display:none;">
							<div class="col">
								{{ form_row(form.shippingAddress) }}
							</div>
						</div> #}
						<div class="row">
							<div class="col">
								{{ form_row(form.customerCountry) }}
							</div>
							<div class="col">
								{{ form_row(form.customerState) }}
							</div>
						</div>
						<div class="row">
							<div class="col">
								{{ form_row(form.customerCity) }}
							</div>
							<div class="col">
								{{ form_row(form.postalCode) }}
							</div>
						</div>
						<div class="row">
							<div class="col mb-3">
								<label>Payment Method</label>
								<select name="paymentMethod" class="select form-select">
									<option value="">--- Select payment method ---</option>
									{% for key,paymentMethod in paymentMethods %}
										<option value="{{paymentMethod}}">{{key}}</option>
									{% endfor %}
								</select>
							</div>
						</div>
						<div class="row">
							<div class="col">
								{{ form_row(form.notes) }}
							</div>
						</div>

					</div>
				</div>
				
				{# <div class="col">
									<h3>Shipment</h3>
									<div>
										Address:
																									                        No delivery address specified.
									</div>
								</div> #}
			</div>
		</div>


	</div>

	<div class="card">
		<div class="card-header d-flex align-items-center">
			<h5 class="mb-0">PDF document data</h5>
		</div>
		<div class="card-body row">
			<table class="table text-nowrap" style="width:100%;">
				<thead>
					<tr>
						<th style="width:70%;">Position</th>
						<th>Duration</th>
						<th>Discount</th>
						<th>Total</th>
					</tr>
				</thead>
				<tbody class="addProductTable">
					<tr class="appendProduct" data-append="false">
					</tr>
					<tr class="appendTax" data-append="false">
					</tr>
					<tr style="border-style:hidden;">
						<td style="width:70%;"></td>
						<td></td>
						<td>Subtotal items:</td>
						<td class="subtotal">0 €</td>
					</tr>
					<tr>
						<td style="width:70%;"></td>
						<td></td>
						<td>Order total:</td>
						<td class="total">0 €</td>
					</tr>
				</tbody>
				<tfooter>
					<tr>
						<th style="width:90%;" colspan="3">
							<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#productModal">
								Add order item(s)
							</button>
							<button type="button" class="btn btn-primary taxModal" data-bs-toggle="modal" data-bs-target="#taxModal">
								Apply tax
							</button>
						</th>
						<th class="float-right">
							{# <a class="btn btn-primary">Recalculate</a> #}
						</th>
					</tr>
				</tfooter>
			</table>
		</div>
	</div>
	{{ form_row(form._token) }}
	<input type="hidden" name="product" value="" class="productId">
	<input type="hidden" name="quantity" value="" class="quantity">
	<input type="hidden" name="subtotal" value="" class="subtotal_price">
	<input type="hidden" name="total_price" value="" class="total_price">
	<input type="hidden" name="tax" value="" class="tax">
	<input type="hidden" name="durationId" value="" class="durationId">
	<input type="hidden" name="duration" value="" class="duration">
	<input type="hidden" name="discount" value="" class="discount">
	
	<div class="col-lg-12 mt-4">
		<button class="btn btn-primary" onclick="disableSubmitButton(this)">{{ submit_button_label|default('Submit') }}</button>
	</div>
	{{ form_end(form) }}

<div class="modal" id="productModal">
  <div class="modal-dialog">
    <div class="modal-content">

		<div class="modal-header">
			<h4 class="modal-title">Add products</h4>
			<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
		</div>

		<div class="modal-body">
				<h3>Product</h3>
				<div class="row mb-3">
					<div class="col-6">
						<label>Product</label>
						<select class="select form-select product" required>
							<option value="">--- Select product ---</option>
							{% for product in products %}
								<option value="{{product.id}}" data-price="{{product.salePrice}}">{{product.name}}</option>
							{% endfor %}
						</select>
					</div>
					<div class="col-6">
						<label>Duration</label>
						<select class="select form-select durationSelect" required>
							<option value="">--- Select duration ---</option>
						</select>
					</div>
				</div>
		</div>

		<div class="modal-footer">
			<button class="btn btn-primary addProduct">Add</button>
		</div>

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

<div class="modal" id="taxModal">
  <div class="modal-dialog">
    <div class="modal-content">

		<div class="modal-header">
			<h4 class="modal-title">Add tax</h4>
			<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
		</div>

		<div class="modal-body">
			<div class="defaultTax">
				Only selected country should be germany to apply tax.
			</div>
			<div class="showTax" style="display:none">
				<table class="table">
					<tr>
						<th></th>
						<th>Tax name</th>
						<th>Tax class</th>
						<th>Tax code</th>
						<th>Tax rate</th>
					</tr>
					<tr>
						<th><input type="radio" name="taxData" class="taxData" value="19" data-name="VAT"></th>
						<th>Tax 19%</th>
						<th>default</th>
						<th>VAT</th>
						<th>19%</th>
					</tr>
				</table>
			</div>
		</div>

		<div class="modal-footer showTax" style="display:none">
			<button class="btn btn-primary addTax">Add</button>
		</div>

    </div>
  </div>
</div>
	<script>
		function validateHour(input) {
			let value = parseInt(input.value);
			if (isNaN(value)) {
			input.value = '';
			} else if (value < 0) {
			input.value = 0;
			} else if (value > 23) {
			input.value = 23;
			}
		}

		function validateMinutes(input) {
			let value = parseInt(input.value);
			if (isNaN(value)) {
				input.value = '';
			} else if (value < 0) {
				input.value = 0;
			} else if (value > 59) {
				input.value = 59;
			}
		}

		function calculatePrice(){
			let tax = $('input[name="taxData"]:checked').val();
			if(tax == undefined){
				tax = 0;
			}
			let productPrice = $('.product :selected').data('price');
			if(productPrice == undefined){
				productPrice = 0;
			}
			let qnty = $('.qnty').val();
			if(qnty == undefined){
				qnty = 0;
			}
			let durationId = $('.durationSelect :selected').val();
			let duration = $('.durationSelect :selected').text();
			let discount = $('.durationSelect :selected').data('discount');
			if(discount == undefined){
				discount = 0;
			}

			$('.durationId').val(durationId);
			$('.duration').val(duration);
			$('.discount').val(discount);


			let subtotal = productPrice;
			discount = productPrice * discount / 100;
			subtotal = subtotal - discount;
			let taxPrice = subtotal * tax / 100;
			let total = subtotal + taxPrice;

			$('.subtotal_price').val(subtotal);
			$('.total_price').val(total);
			$('.subtotal').text(`${subtotal} €`);
			$('.total').text(`${total} €`);
			
		}

		$(document).on('click','.removeTax',function(){
			$('.appendTax').html('');
			$('.tax').html('');
			$('.appendTax').data('append','false')
			$('input[name="taxData"]').prop('checked',false);

			calculatePrice();
		})
		$(document).on('click','.removeProduct',function(){
			$('.appendProduct').html('');
			$('.product').val('');
			$('.quantity').val('');
			$('.appendProduct').data('append','false')
			$('.taxPrice').html(`0 €<a href="javascript:void(0);" class="removeTax">x</a>`);
			$('.durationSelect').empty();
			$('.durationSelect').html('<option value="">--- Select duration ---</option>');
			calculatePrice();
		})

		

		

		function addProductTax(param){

			let tax = $('input[name="taxData"]:checked').val();
			let taxName = $('input[name="taxData"]:checked').data('name');

			if(tax == undefined){
				tax = 0;
			}
			let productPrice = $('.product :selected').data('price');
			let product = $('.product :selected').val();
			let productName = $('.product :selected').text();
			if(productPrice == undefined){
				productPrice = 0;
				tax = 0;
			}
			
			let duration = $('.durationSelect :selected').text();
			let discount = $('.durationSelect :selected').data('discount');
			if(discount == undefined){
				discount = 0;
			}
			let durationId = $('.durationSelect :selected').val();

			let subtotal = productPrice * duration;
			discount = ((productPrice * duration) * discount) / 100;
			subtotal = subtotal - discount;
			let taxPrice = subtotal * tax / 100;
			let total = subtotal + taxPrice;


			if(param == 'product'){
				$('.appendProduct').html('');
				$('.appendProduct').append(`
					<td style="width:70%;">${productName} (${productPrice} €)</td>
					<td class="durationPrice">${duration}</td>
					<td class="discountPrice">${discount} €</td>
					<td class="productPrice">${subtotal} € <a href="javascript:void(0);" class="removeProduct">x</a> </td>
				`);
				$('.taxPrice').html(`${taxPrice} €<a href="javascript:void(0);" class="removeTax">x</a>`);
			}

			if(param == 'tax'){
				$('.appendTax').html('');
				$('.appendTax').append(`
					<td style="width:70%;">${taxName} (${tax}%)</td>
					<td></td>
					<td></td>
					<td class="taxPrice">${taxPrice} € <a href="javascript:void(0);" class="removeTax">x</a></td>
				`);
				$('.productPrice').html(`${subtotal} € <a href="javascript:void(0);" class="removeProduct">x</a>`);
			}

			$('.productId').val(product);
			$('.subtotal').text(`${subtotal} €`);
			$('.total').text(`${total} €`);
			$('.subtotal_price').val(subtotal);
			$('.total_price').val(total);
			$('.tax').val(tax);

			
			
			$('.durationId').val(durationId);
			$('.duration').val(duration);
			$('.discount').val(discount);
		}

		$('.addTax').on('click',function(){
			let product = $('.product :selected').val();
			if(product == ""){
				alert('You need to select product first.');
			} else {
				if($('.appendTax').data('append') == "true"){
					alert('Tax already applied');
				} else {
					$('.appendTax').data('append','true')
					$('#taxModal').modal('hide');

					addProductTax('tax');
				}
			}
			
			
		})

		$('.product').on('change',function(){
			let product = $(this).val();
			if(product != ""){
                                let productSubUrl = "{{ path('get_subscription_duration', {productId: '_product'}) }}";
                                productSubUrl = productSubUrl.replace('_product', product);
                                
				$.ajax({
{#					url: '/admin/order/get-subscription-duration/' + product,#}
					url: productSubUrl,
					type: 'GET',
					success: function(data) {
						$('.durationSelect').empty();
						$('.durationSelect').append('<option value="">--- Select duration ---</option>');

						$.each(data, function(key, value) {
							$('.durationSelect').append($('<option>').text(value.durationMonth).attr('value', value.id).attr('data-discount', value.discount));
						});
					}
				});
			} else {
				$('.durationSelect').empty();
			}
		})

		$('.addProduct').on('click',function(){
			let product = $('.product :selected').val();
			let duration = $('.durationSelect :selected').val();
			if(product == "" || duration == ""){
				alert('Product and duration must be selected.');
			} else {
				if($('.appendProduct').data('append') == "true"){
					alert('Product already applied');
				} else {
					$('.appendProduct').data('append','true')
					$('#productModal').modal('hide');
					

					addProductTax('product');
				}
			}

			

			
		})

		$('.taxModal').on('click',function(){
			var country = $('#order_customerCountry :selected').text();
			if(country == 'Germany'){
				$('.defaultTax').hide();
				$('.showTax').show();
			} else {
				$('.defaultTax').show();
				$('.showTax').hide();
			}
			console.log('country: ',country);
			
		})

		// $('.shippingAddressCheckbox').on('change',function(){
		// 	console.log($(this).prop('checked'));
		// 	if($(this).prop('checked')){
		// 		$('.hideShippingAddress').show();
		// 	} else {
		// 		$('.hideShippingAddress').hide();
		// 	}
		// })

		
		
		// Function to load states based on the selected country
		function loadStates() {
			var countryId = $('#order_customerCountry').val();
			var selectedState = $('#order_customerState :selected').val(); // Get the currently selected state
			console.log('countryId: ',countryId,selectedState);
                        
                        let userStateUrl = "{{ path('get_states', {countryId: '_countryId'}) }}";
                        userStateUrl = userStateUrl.replace('_countryId', countryId);
                                
			$.ajax({
{#				url: '/admin/users/get-states/' + countryId,#}
				url: userStateUrl,
				type: 'GET',
				success: function(data) {
					$('#order_customerState').empty();
					var stateExists = false;

					$.each(data, function(key, value) {
						$('#order_customerState').append($('<option>').text(value).attr('value', `${key}`));
						if (key == selectedState) {
							stateExists = true;
						}
					});

					// If the previously selected state exists in the new data, select it again
					if (stateExists) {
							$('#order_customerState').val(selectedState);
					}
				}
			});
		}

		// Trigger the loadStates function when the country dropdown changes
		$('#order_customerCountry').change(function() {
			loadStates();
		});

		// Trigger the loadStates function on page load
		setTimeout(() => {
			loadStates();
		}, 1000);

		function getCustomerDetails(customer){
                        let getCustomerUrl = "{{ path('get_customer', {custId: '_customer'}) }}";
                        getCustomerUrl = getCustomerUrl.replace('_customer', customer);
			$.ajax({
{#				url: '/admin/order/get-customer/' + customer,#}
				url: getCustomerUrl,
				type: 'GET',
				success: function(data) {
					console.log('data: ',data);
					// $('.').val(data.id);
					$('#order_customerFirstName').val(data.first_name);
					$('#order_customerLastName').val(data.last_name);
					$('#order_customerEmailId').val(data.email);
					$('#order_customerPhoneNumber').val(data.mobile_no);
					$('#order_customerBillingAddress').val(data.address);
					// $('#order_customerCountry[value="' + data.country_id + '"]').prop('checked', true);
					$('#order_customerCountry').val(data.country_id);
					$('#order_customerState').val(data.state_id);
					$('#order_customerCity').val(data.city);
					$('#order_postalCode').val(data.postal_code);
					loadStates();
					setTimeout(() => {
						$('#order_customerState').val(data.state_id);
					}, 1000);

					// Initialize intl-tel-input
					const phoneInput = document.querySelector("#order_customerPhoneNumber");
					const iti = window.intlTelInput(phoneInput, {
						initialCountry: "auto",
						geoIpLookup: function(success, failure) {
							// Automatically detect country based on customer's country_id
							const countryData = iti.getCountryData();
							const selectedCountry = countryData.find(c => c.iso2 === data.country_code);
							success(selectedCountry ? selectedCountry.iso2 : "us");
						},
						utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
					});
				}
			});
		}

		let order_userId = $('#order_userId :selected').val();
		if(order_userId != ""){
			$('.defailtInvoice').hide();
			$('.customerInvoice').show();
			getCustomerDetails(order_userId)
		}

		$('#order_userId').on('change',function(){
			let customer = $(this).val();
			if(customer != ""){
				$('.defailtInvoice').hide();
				$('.customerInvoice').show();

				getCustomerDetails(customer)

			} else {
				$('.defailtInvoice').show();
				$('.customerInvoice').hide();
			}
		})

		document.addEventListener('DOMContentLoaded', function () {
			const customerDropdown = document.querySelector('#{{ form.userId.vars.id }}');
			const affiliateDropdown = document.getElementById('order_affiliateId');

			// Create a hidden input field for the affiliate ID
			const hiddenAffiliateIdInput = document.createElement('input');
			hiddenAffiliateIdInput.type = 'hidden';
			hiddenAffiliateIdInput.name = 'order[affiliateId]';
			affiliateDropdown.parentNode.appendChild(hiddenAffiliateIdInput);

			customerDropdown.addEventListener('change', function () {
				const selectedCustomerId = this.value;

				if (selectedCustomerId) {
					// Make an AJAX call to fetch the affiliate based on the selected customer ID
					fetch(`/admin/order/get-affiliate/${selectedCustomerId}`)
							.then(response => response.json())
							.then(data => {
								if (data.success && data.affiliate) {
									affiliateDropdown.value = data.affiliate.id;
									hiddenAffiliateIdInput.value = data.affiliate.id;
									affiliateDropdown.disabled = true;  // Disable the affiliate dropdown
								} else {
									affiliateDropdown.value = '';  // Reset the dropdown if no match found
									hiddenAffiliateIdInput.value = '';
									affiliateDropdown.disabled = false;  // Enable the affiliate dropdown
								}
							})
							.catch(error => {
								console.error('Error:', error);
							});
				} else {
					affiliateDropdown.value = '';  // Reset the dropdown if no customer is selected
					hiddenAffiliateIdInput.value = '';
					affiliateDropdown.disabled = false;  // Enable the affiliate dropdown
				}
			});

			// Handle affiliate dropdown change
			affiliateDropdown.addEventListener('change', function () {
				hiddenAffiliateIdInput.value = this.value;  // Update hidden input with the selected value
			});
			const input = document.querySelector('.intl-tel-input');
            const iti = window.intlTelInput(input, {
                initialCountry: "DE",
                geoIpLookup: function(callback) {
                    fetch('https://ipinfo.io/json', { headers: { 'Accept': 'application/json' } })
                        .then(resp => resp.json())
                        .then(resp => {
                            const countryCode = (resp && resp.country) ? resp.country : 'us';
                            callback(countryCode);
                        })
                        .catch(() => {
                            callback('us');	
                        });
                    },
                utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
            });

            const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];

            // Set the initial country dial code in the input field if it's empty
            if (!input.value) {
                const initialCountryData = iti.getSelectedCountryData();
                input.value = `+${initialCountryData.dialCode}`;
            } else {
                iti.setNumber(input.value);
            }

            // Add event listener for country change
            input.addEventListener('countrychange', function() {
                const countryData = iti.getSelectedCountryData();
                const dialCode = countryData.dialCode;
                if(dialCode != undefined){
                    input.value = `+${dialCode}${input.value.replace(/^\+?\d{1,4}/, '')}`;
                }
            });

            // Add custom validation on form submit
            const form = input.closest('form');
            form.addEventListener('submit', function(event) {
                if (!iti.isValidNumber()) {
                    event.preventDefault();
                    const errorMessage = iti.getValidationError() !== -1 ? errorMap[iti.getValidationError()] : "Invalid number";
                    showError(input, errorMessage);
                }
            });

            // Ensure the input is formatted correctly on load if it has a value
            if (input.value) {
                iti.setNumber(input.value);
            }

            // Add validation on input change
            input.addEventListener('blur', function() {
                if (!iti.isValidNumber()) {
                    const errorMessage = iti.getValidationError() !== -1 ? errorMap[iti.getValidationError()] : "Invalid number";
                    showError(input, errorMessage);
                } else {
                    clearError(input);
                }
            });

            function showError(input, message) {
                let error = input.nextElementSibling;
                if (!error || !error.classList.contains('error-message')) {
                    error = document.createElement('div');
                    error.className = 'error-message text-danger';
                    input.parentNode.insertBefore(error, input.nextSibling);
                }
                error.textContent = message;
            }

            function clearError(input) {
                let error = input.nextElementSibling;
                if (error && error.classList.contains('error-message')) {
                    error.parentNode.removeChild(error);
                }
            }
        });

		function disableSubmitButton(button) {
			button.disabled = true;
			button.innerText = 'Processing...'; // Optional: change button text to indicate processing
			button.form.submit(); // Submit the form
		}
	</script>
{% endblock %}