{%- assign section_name = 'Contact Form' -%}
{%- assign el_id = section_name | handle | append: '-' | append: section.id -%}

{%- assign section_padding = section.settings.padding -%}
{%- assign padding_class = 'sp-' | append: section_padding -%}
{%- if section.settings.top_half_padding -%}
    {% capture padding_class %}{{ padding_class }} spt-{{ section_padding }}-half{% endcapture %}
{%- endif -%}
{%- if section.settings.bottom_half_padding -%}
    {% capture padding_class %}{{ padding_class }} spb-{{ section_padding }}-half{% endcapture %}
{%- endif -%}
{%- if section.settings.add_border_top -%}
	{% capture padding_class %}{{ padding_class }} bt-1 b-border{% endcapture %}
{%- endif -%}
{%- if section.settings.add_border_bottom -%}
	{% capture padding_class %}{{ padding_class }} bb-1 b-border{% endcapture %}
{%- endif -%}

<style>
	{% comment %} #{{ el_id }} form ul li:last-child {
		margin-bottom: 0;
	}
	#{{ el_id }} .form__submitted h2 {
    	margin-bottom: 7px;
  	}
	#{{ el_id }} .global-error-msg.p3.mt-7 {
		margin-top: 7px;
	}
	@media screen and (min-width:1024px){
		#{{ el_id }} .form__submitted h2 {
    	margin-bottom: 10px;
  	}
  } {% endcomment %}
</style>

{% capture form_success %}
	<script>
		document.addEventListener('DOMContentLoaded', function() {
			window.scrollTo(0,0);
		});
	</script>
	<article class="flex flex-column jc-center w-full d-max-425 rowgap-25">
		<div class="flex flex-column rowgap-5">
			<h3 class="h3">Thanks for Contacting Us</h3>
			<p class="p3">{{ 'contact.form.post_success' | t }}</p>
		</div>
		<a href="/" class="btn1 w-full tc">BACK TO HOME</a>
	</article>
{% endcapture %}

{% form 'contact' %}

{% liquid
	assign section_classes = padding_class | append: " container"
	if section.settings.use_bg_overlay
		assign section_classes = section_classes | append: " bg-overlay"
	endif
	assign image_position = "bottom"
	assign image_position_d = "left"
	assign wrapper_classes = "flex flex-column d-flex-row d-jc-between rowgap-40 colgap-130 w-full d-max-1100"
	if image_position_d == "right"
		assign wrapper_classes = wrapper_classes | append: " d-row-reverse"
	endif
	if image_position == "bottom"
		assign wrapper_classes = wrapper_classes | append: " column-reverse"
	endif
%}

{% capture image %}
	{%- assign image_alt = section_name | append: ' image' %}
	{%- assign image_id =  section.id | append: '-image' %}
	{%- render 'global-image-wrapper-responsive',
		desktop_image: section.settings.image,
		mobile_image: section.settings.image_m,
		image_id: image_id,
		image_alt: image_alt,
		load_inside_vue: true,
	-%}
{% endcapture %}

<section id="{{ el_id }}" class="{{ section_classes }}">
	<div class="flex jc-center">
		<div class="{{ wrapper_classes }}">
			<figure class="flex flex-column jc-center w-full d-max-540">
				{{ image }}
			</figure>
			{% if form.posted_successfully? %}
				{{ form_success }}
			{% else %}
				<article class="flex flex-column jc-center w-full d-max-425 rowgap-25">
					<div class="flex flex-column rowgap-5">
						<h3 class="h3">{{ section.settings.title }}</h3>
						<p class="p3">{{ section.settings.text }}</p>
					</div>
					<div class="flex flex-column rowgap-15">
						<div class="flex flex-column rowgap-10">
							{% for block in section.blocks %}
								{% liquid
									assign type = block.settings.input_type
									assign id = block.settings.name | handle | replace: "-", "_"
									assign label = block.settings.placeholder
									assign placeholder = block.settings.placeholder
									assign multiline = false
									if block.type == 'textarea'
										assign multiline = true
									endif
									assign vue_model = "form." | append: id | append: ".value"
									assign message_key = "contact.form.error_" | append: id
									assign message = message_key | t
									assign pattern = ""
									if type == "email"
										assign pattern = "[a-z0-9]+(?:[.\-_+%][a-z0-9]+)*@[a-z0-9\-]+\.[a-z]{2,}$"
									endif
								%}
								{% capture field_name %}contact[{{ id }}]{% endcapture %}
								{% if block.type == 'dropdown' %}
									{% liquid
										assign options = ''
										assign values = ''
										for i in (1..5)
											assign option = 'option' | append: i
											assign options = options | append: block.settings[option] | append: ','
											assign value = block.settings[option] | escape
											assign values = values | append: value | append: ','
										endfor
										assign sort_options = options | split: ','
										assign sort_values = values |  split: ','
									%}
									{% render "global-select",
										id: id,
										label: block.settings.placeholder,
										label_class: "p3",
										selected_text_class: "p3",
										list_option_class: "p3",
										values: sort_values,
										option_values: sort_options,
										field_name: field_name,
										vue_model: vue_model,
									%}
								{% else %}
									{% capture vue_wrapper_class %}
										{
											'has-message': errors.includes('{{ id }}'),
											'has-error': errors.includes('{{ id }}'),
										}
									{% endcapture %}
									{% render "global-input",
										id: id,
										name: field_name,
										vue_model: vue_model,
										type: type,
										wrapper_class: "label-as-placeholder",
										vue_wrapper_class: vue_wrapper_class,
										label: label,
										placeholder: placeholder,
										multiline: multiline,
										rows: block.settings.rows,
										required: block.settings.required,
										message: message,
										pattern: pattern,
									%}
								{% endif %}
							{% endfor %}
						</div>
						<button type="submit" class="btn1 w-full">SUBMIT</button>
					</div>
				</article>
			{% endif %}
		</div>
	</div>
	{% comment %} <div class="flex flex-column ai-center row">
		<div class="col-12 pr-0 flex jc-center mb-25 d-mb-40">
			<article class="col-10 tc">
				<{{ section.settings.title_element}} class="h2">
					{{ section.settings.title }}
				</{{ section.settings.title_element}}>
				{%- if section.settings.text != blank -%}
					<div class="p1 rte mt-5 d-mt-10">{{ section.settings.text }}</div>
				{%- endif -%}
			</article>
		</div>
		<div class="col-12 col-t-10 col-d-6 col-hd-4">
			{% if form.errors %}
				<div class="form-errors mb-20 global-error-msg rte p2">
					{{ form.errors | default_errors }}
				</div>	
			{% endif %} 
			<ul>
				{% for block in section.blocks %}
					{% assign vfield_name = block.settings.name | handle |  camelize |  downcase %}
					{%- assign vfield_error = vfield_name | append: '_error' -%}
					{% assign error_message = "contact.form.error_" |  append: vfield_name %}
					{% if block.type == 'input' %}
						<li class="mb-15">
							{% if block.settings.placeholder_style == 'top' %}
								<label for="input{{ forloop.index }}" class="p2">
									{{ block.settings.placeholder_text }}
								</label>
							{% endif %}
							<input
								type="{{ block.settings.input_type }}"
								{% if block.settings.input_type == 'email' %}
								pattern="[a-z0-9]+(?:[.\-_+%][a-z0-9]+)*@[a-z0-9\-]+\.[a-z]{2,}$"
								title="Please enter a valid email address."
								{% endif %}
								{% assign block_name = block.settings.name |  handle %}
								{% if block_name == 'phone' or block_name == 'mobile-number' %}
								pattern="^\d+(?:-\d+)*$" 
								title="Please enter a valid phone number."
								{% endif %}	
								placeholder="{{ block.settings.placeholder_text }}"
								name="contact[{{ block.settings.name | handle }}]"
								id="input{{ forloop.index }}"
								v-model="{{ vfield_name }}"
								:class="{'global-input-error' : {{ vfield_error }}}"
								class="p2 global-input with-border bg-background {% if block.settings.placeholder_style == 'top' %}mt-5{% endif %}"
							/>
								<div v-if="{{ vfield_error }}" class="global-error-msg p3 mt-7">
									{{ error_message | t }}
								</div>
						</li>
					{% elsif block.type == 'dropdown' %}
						<li class="mb-15">
							{%- assign name = block.settings.name | handle -%}
							{%- assign field_name = 'contact[' | append: name | append: ']' -%}
							{%- assign options = '' -%}
							{%- assign values = '' -%}
							{%- for i in (1..5) -%}
								{%- assign option = 'option' | append: i -%}
								{%- assign options = options | append: block.settings[option] | append: ',' -%}
								{%- assign value = block.settings[option] | escape -%}
								{%- assign values = values | append: value | append: ',' -%}
							{%- endfor -%}
							{%- assign sort_options = options | split: ',' -%}
							{%- assign sort_values = values |  split: ',' -%}
							{% assign field_error_class = "{'global-input-error' : " |  append:  vfield_error |  append: '}'   %}
							{% render 'global-select',
								id: 'select-topic',
								label: block.settings.placeholder_text,
								label_class: 'p2'
								values: sort_values,
								option_values: sort_options,
								field_name: field_name,
								selected_text_class: 'p2',
								list_option_class: 'p2',
								vue_class: field_error_class,
								vue_model: vfield_name,
							%}
							<div v-if="{{ vfield_error }}" class="global-error-msg p3 mt-7">
								Select a topic
							</div>
						</li>
					{% elsif block.type == 'message' %}

						<li class="mb-15">
							{% if block.settings.placeholder_style == 'top' %}
								<label for="input{{ forloop.index }}" class="p2">
									{{ block.settings.placeholder_text }}
								</label>
							{% endif %}
							<textarea
								name="contact[{{ block.settings.name | handle }}]"
								id="input{{ forloop.index }}"
								cols="1000"
								v-model="{{vfield_name}}"
								rows="{{ block.settings.message_height }}"
								placeholder="{{ block.settings.placeholder_text }}"
								class="global-input with-border bg-background p2"
								:class="{'global-input-error' : {{ vfield_error }}}"
							></textarea>
							<div v-if="{{ vfield_error }}" class="global-error-msg p3 mt-7">
								{{ error_message | t }}
							</div>
						</li>
					{% endif %}
				{% endfor %}
			</ul>
			<input type="submit" class="btn1 w-full tc mt-35" value="Submit">
		</div>
	</div> {% endcomment %}
</section>

{% endform %}

<script>
	Vue.createApp({
		delimiters: ['${', '}'],
		data() {
			return {
				{% comment %} {% for block in section.blocks %}
					{%- assign vfield_name = block.settings.name | handle | camelize | downcase -%}
					{%- assign vfield_error = vfield_name | append: '_error' -%}
					{{vfield_name}}: null,
					{{vfield_error}}: null,
				{% endfor %} 
				has_error: false, {% endcomment %}
				form: {
					{% for block in section.blocks %}
						{{ block.settings.name | handle | replace: "-", "_"  }}: {
							value: null,
							required: {{ block.settings.required }}
						},
					{% endfor %}
				},
			}
		},
		mounted() {

			{% comment %} const thisObj = this;
			document.getElementById('contact_form').addEventListener('submit', function (e) {
				e.preventDefault();
				thisObj.has_error = false;

				{%for block in section.blocks%}
					{%- assign vfield_name = block.settings.name | handle | camelize | downcase -%}
					{%- assign vfield_error = vfield_name | append: '_error' -%}
					thisObj['{{vfield_error}}'] = false;
					if(!thisObj['{{vfield_name}}']){
						thisObj['{{vfield_error}}'] = true;
						thisObj.has_error = true;
					}
					
				{% endfor %}

				if (thisObj.has_error) {
					e.stopImmediatePropagation();
				}
				

				
			}); {% endcomment %}

		},
		computed: {
			errors: function() {
				return (Object.entries(this.form)).reduce((prev, [key, obj]) => {
					if (obj.value === "" && obj.required) {
						prev.push(key)
					}
					return prev
				}, [])
			},
		}
	}).mount('#contact_form');
</script>

{% schema %}
{
	"name": "Contact Form",
	"blocks": [
		{
			"type": "input",
			"name": "Input",
			"settings": [
				{
					"type": "checkbox",
					"id": "required",
					"label": "Required"
				},
				{
					"type": "select",
					"id": "input_type",
					"label": "Input Type",
					"options": [
						{ "value": "text", "label": "Text" },
						{ "value": "email", "label": "Email" },
						{ "value": "password", "label": "Password" },
						{ "value": "number", "label": "Number" }
					]
				},
				{
					"type": "text",
					"id": "name",
					"label": "Name"
				},
				{
					"type": "text",
					"id": "placeholder",
					"label": "Placeholder Text"
				}
			]
		},
		{
			"type": "dropdown",
			"name": "Dropdown",
			"settings": [
				{
					"type": "checkbox",
					"id": "required",
					"label": "Required"
				},
				{
					"type": "text",
					"id": "name",
					"label": "Name"
				},
				{
					"type": "header",
					"content": "Options"
				},
				{
					"type": "text",
					"id": "option1",
					"label": "Option 1"
				},
				{
					"type": "text",
					"id": "option2",
					"label": "Option 2"
				},
				{
					"type": "text",
					"id": "option3",
					"label": "Option 3"
				},
				{
					"type": "text",
					"id": "option4",
					"label": "Option 4"
				},
				{
					"type": "text",
					"id": "option5",
					"label": "Option 5"
				},
				{
					"type": "text",
					"id": "placeholder",
					"label": "Placeholder Text"
				}
			]
		},
		{
			"type": "textarea",
			"name": "Textarea",
			"settings": [
				{
					"type": "checkbox",
					"id": "required",
					"label": "Required"
				},
				{
					"type": "text",
					"id": "name",
					"label": "Name"
				},
				{
					"type": "text",
					"id": "placeholder",
					"label": "Placeholder Text"
				},
				{
					"type": "range",
					"id": "rows",
					"label": "Rows",
					"min": 1,
					"max": 10,
					"step": 1,
					"default": 4
				},
			]
		}
	],
	"settings": [
		{
			"type": "header",
			"content": "Section Padding"
		},
		{
			"type": "select",
			"id": "padding",
			"label": "Padding",
			"options": [
				{ "value": "no", "label": "No" },
        { "value": "sm", "label": "Small" },
        { "value": "md", "label": "Med" },
        { "value": "lg", "label": "Large" }
			],
			"default": "md"
		},
		{
			"type": "checkbox",
			"id": "top_half_padding",
			"label": "Top half padding",
			"default": false
		},
		{
			"type": "checkbox",
			"id": "bottom_half_padding",
			"label": "Bottom half padding",
			"default": false
		},
		{
			"type": "header",
			"content": "Media"
		},
		{
			"type": "image_picker",
			"id": "image",
			"label": "Image (Tablet and All Desktop)"
		},
		{
			"type": "image_picker",
			"id": "image_m",
			"label": "Image (Mobile)"
		},
		{
			"type": "header",
			"content": "General Settings"
		},
		{
			"type": "text",
			"id": "title",
			"label": "Title"
		},
		{
			"type": "textarea",
			"id": "text",
			"label": "Text"
		}
	],
	"presets": [{ "name": "Contact Form" }]
}
{% endschema %}