{% extends 'www/base.html.twig' %}

{% import 'www/partials/_macros.html.twig' as macros %}

{% block link_alternate %}
	{% for translation in _cms_translations %}
		<link rel="altername" hreflang="{{ translation.getLocale() }}" href="{{ path(app.request.get('_route'), {_locale: translation.getLocale()}) }}"/>
	{% endfor %}
{% endblock %}

{% block content %}
	<div class="row mt-4">
		<div class="col-lg-5 ms-auto me-auto">
			<div class="card">
				<div class="card-body">
					<h2 class="text-center h4">
						{{ 'address_search_form.header'|trans }}
					</h2>

					{{ form_start(form, {'attr': {'class': 'offer-form mt-4', 'data-controller': 'auto-submit'}}) }}
						<div class="mb-3">
							{{ form_widget(form.addressName) }}
						</div>

						<div class="mb-3">
							{{ form_widget(form.buildingNumberName) }}
							
							{{ form_errors(form.buildingNumberName) }}
						</div>

						<div class="mb-3">
							{{ form_widget(form.offer_type) }}
						</div>

						<div class="text-center">
							{{ form_widget(form.submit) }}							
						</div>
					{{ form_end(form) }}
				</div>
			</div>
		</div>
	</div>

	{% if is_form_sent %}
		{% if offer_types|length %}			
			{% if address.getDescription() %}
				<p class="alert alert-info text-center mt-5">
					<i class="fa fa-exclamation-triangle"></i>
					{{ address.getDescription() }}
				</p>			
			{% endif %}

			<div class="card offer-selector" data-controller="app-offer-selector">
				<div class="card-body p-4 p-md-1">
					<div class="offer-type-container d-flex justify-content-center">
						{% for type_key, type_label in offer_types %}
							<div class="offer-type {% if not loop.last %}me-2{% endif %}">
								<input id="input-type-{{ type_key }}" type="radio" value="{{ type_key }}" style="display:none;" name="offer_type" data-action="change->app-offer-selector#changeTypeConainer" data-container-id="offer-type-container-{{ type_key }}" {% if loop.first %} checked {% endif %}>

								<label for="input-type-{{ type_key }}">
									<div>
										{% if type_key == 1 %}
											<i class="fa fa-wifi fs-1"></i>
										{% elseif type_key == 2 %}
											<i class="fa fa-tv fs-1"></i>
										{% endif %}
									</div>

									<h4 class="text-center mt-2">
										{{ type_label|trans }}
									</h4>
								</label>
							</div>
						{% endfor %}
					</div>

					{% for type_key, type_label in offer_types %}
						<div id="offer-type-container-{{ type_key }}" data-app-offer-selector-target="offersTypeContainer" {% if not loop.first %} style="display: none;" {% endif %}>
							{% set periods = offer_periods_by_type[type_key] %}

							<div class="mt-4">
								<h4 class="text-center">
									{{ 'common.contract_duration'|trans|capitalize }}
								</h4>

								<div class="offer-period-container text-center">
									<ul class="list-unstyled">
										{% for period_key, period_label in periods %}
											<li>
												<input type="radio" value="{{ period_key }}" name="offer_period_{{ type_key }}" id="input-period-{{ type_key }}-{{ period_key }}" data-action="change->app-offer-selector#changePeriodConainer" data-container-id="offers_period_container-{{ type_key }}-{{ period_key }}" {% if loop.first %} checked {% endif %}>

												<label for="input-period-{{ type_key }}-{{ period_key }}" >
													{{ period_label|trans }}
												</label>
											</li>
										{% endfor %}
									</ul>
								</div>
							</div>

							{% for period_key, period_label in periods %}
								{% set offers = offers_by_type_and_period[type_key][period_key] %}

								<div class="row justify-content-center mt-5" id="offers_period_container-{{ type_key }}-{{ period_key }}" data-app-offer-selector-target="offersPeriodContainer" {% if not loop.first %} style="display:none;" {% endif %}>
									{% for offer in offers %}
										<div class="offer-container col-sm-6 col-md-4 col-lg-3 mb-3">
											<div class="offer offer-grow-on-hover">
												<h3 class="offer-title">
													{{ offer.getName() }}
												</h3>

												<div class="offer-price-container">
													<span class="price">
														<span class="price-value">
															{{ offer.price|price_integer_part }}
															<sup class="price-value-sup">
																{{ offer.price|price_decimal_part }}
															</sup>
														</span>

														<span class="price-suffix d-block">
															zł/{{ 'common.month_short'|trans }}
														</span>
													</span>
												</div>

												<div class="offer-description-container">
													{% if offer.isTypeInternet() %}
														<div class="row">
															<div class="col">
																<i class="fa fa-download me-2"></i>
																{{ 'common.download_speed'|trans }}
															</div>

															<div class="col text-end">
																<span class="fw-bold">
																	{{ offer.downloadSpeed }}
																</span>
																Mb/s
															</div>
														</div>

														<div class="row">
															<div class="col">
																<i class="fa fa-upload me-2"></i>
																{{ 'common.upload_speed'|trans }}
															</div>

															<div class="col text-end">
																<span class="fw-bold">
																	{{ offer.uploadSpeed }}
																</span>
																Mb/s
															</div>
														</div>
													{% elseif offer.isTypeTelevision() %}
														{% if offer.file.filename is defined %}
															<div class="text-center">
																<a 
																	href="{{ file_url(offer.file.filename) }}" 
																	target="_blank"
																>	
																	<i class="fa fa-download"></i>
																	{{ 'offer_individual.tv_details'|trans }}
																</a>														
															</div>
														{% endif %}
													{% endif %}

													{% if offer.getShortDescription() %}
														<div class="text-center">
															{{ offer.getShortDescription() }}																								
														</div>
													{% endif %}												
												</div>

												<div class="offer-button-container text-center">
													<a class="btn btn-primary" href="{{ path('www_offer_ask', {'id': offer.id, 'addressName': address_name, 'buildingNumberName': building_number_name}) }}">
														{{ 'offer_individual.ask_for_offer'|trans }}
													</a>
												</div>
											</div>
										</div>
									{% endfor %}
								</div>
							{% endfor %}
						</div>
					{% endfor %}
				</div>
			</div>
		{% else %}
			<div class="alert alert-warning mt-5">
				<i class="fa fa-exclamation-triangle"></i>
				{{ 'offer_individual.no_offer_available_message'|trans }}				
			</div>
		{% endif %}
	{% endif %}
{% endblock %}