{% extends 'admin/vacation-soup.twig' %}
{% block content %}
    {% embed 'admin/form.twig' %}
        {% block form_name %}dash{% endblock form_name %}
        {% block form_content %}
            <script>
                String.prototype.ToCamelCase = function() { // like toCamelCase but capitalises first char
                    // remove all characters that should not be in a variable name
                    // as well underscores an numbers from the beginning of the string
                    var s = this.replace(/([^a-zA-Z0-9_\- ])|^[_0-9]+/g, "").trim().toLowerCase();
                    // uppercase letters preceeded by a hyphen or a space
                    s = s.replace(/([ -]+|^)([a-zA-Z0-9])/g, function(a,b,c) {
                        return c.toUpperCase();
                    });
                    // uppercase letters following numbers
                    s = s.replace(/([0-9]+)([a-zA-Z])/g, function(a,b,c) {
                        return b + c.toUpperCase();
                    });
                    return s;
                }
                String.prototype.punctToSpace = function () {
                    return this.replace(/[^A-Za-z0-9_]/g," ");
                }
                var handleChange = function(id){
                    var title;
                    var destVal = jQuery("#destination-"+id).val();
                    var joinVal = jQuery("#join-"+id).val();
                    var titleVal = title = jQuery("#title-"+id).val();
                    if (!title){
                        title = "New Property";
                    }
                    if (joinVal && destVal){
                        title+=" "+joinVal+" "+destVal;
                    }
                    jQuery("#title-header-"+id).html("<h1>"+title+"</h1>");

                    var target = jQuery("#examples-"+id);
                    target.html('');
                    destVal = destVal.punctToSpace().ToCamelCase();
                    joinVal = joinVal.punctToSpace().ToCamelCase();
                    titleVal = titleVal.punctToSpace().ToCamelCase();
                    if (destVal && joinVal && titleVal){
                        target.html(
                            "The following tags will be added to all posts:<br/>"+
                            "#VacationSoup #"+destVal+" #Holiday"+joinVal+destVal+" #Vacation"+joinVal+destVal
                        );
                    } else {
                        target.html("Please enter Title and at least one Destination to see example tags.")
                    }
                }
                jQuery(function(){
                    var changeSet = jQuery(".handleChange");
                    // Add the handler
                    changeSet.change(function(){
                        handleChange(jQuery(this).data('id'));
                    });
                    // And fire it on page load
                    changeSet.each(function(){
                        handleChange(jQuery(this).data('id'));
                    })
                });

            </script>
            <div class="vs-content tab-property row">
                {% for property in properties %}
                    <div class="col-lg-8 col-sm-12">
                        <div class="vs-panel row field-container">
                            <div id="title-header-{{ property.id }}" class="col-sm-12">
                                <h1>{{ property.title? property.title: 'New Property' }}</h1>
                            </div>
                            <div class="col-xs-12 col-sm-6">
                                <div class="field">
                                    <label for="title-{{ property.id }}">
                                        Title <span class="required">*</span>
                                    </label>
                                    <input type="text"
                                           data-id="{{ property.id }}"
                                           class="persist handleChange"
                                           placeholder="Property Title"
                                           name="Property[{{ property.id }}].title"
                                           id="title-{{ property.id }}"
                                           {{ (loop.last)?'':'required' }}
                                           value="{{ property.title }}"/>
                                </div>
                                <div class="field required">
                                    <label for="destination-{{ property.id }}">
                                        Destination <span class="required">*</span>
                                    </label>
                                    <input type="text"
                                           data-id="{{ property.id }}"
                                           class="persist handleChange join-word"
                                           title="Joining word"
                                           placeholder="in/on/near"
                                           name="Property[{{ property.id }}].join"
                                           id="join-{{ property.id }}"
                                            {{ (loop.last)?'':'required' }}
                                           value="{{ property.join }}"/>
                                    <input type="text"
                                           data-id="{{ property.id }}"
                                           class="persist handleChange"
                                           placeholder="Destination Name"
                                           name="Property[{{ property.id }}].destination"
                                           id="destination-{{ property.id }}"
                                            {{ (loop.last)?'':'required' }}
                                           value="{{ property.destination }}"/>
                                </div>
                                <div class="field">
                                    <input type="text"
                                           data-id="{{ property.id }}"
                                           class="persist handleChange join-word"
                                           title="Joining word"
                                           placeholder="in/on/near"
                                           name="Property[{{ property.id }}].join2"
                                           id="join-{{ property.id }}-2"
                                            {{ (loop.last)?'':'required' }}
                                           value="{{ property.join2 }}"/>
                                    <input type="text"
                                           data-id="{{ property.id }}"
                                           class="persist handleChange"
                                           placeholder="Alternate Name (City?)"
                                           name="Property[{{ property.id }}].destination2"
                                           id="destination-{{ property.id }}-2"
                                            {{ (loop.last)?'':'required' }}
                                           value="{{ property.destination2 }}" />
                                </div>
                                <div class="field">
                                    <input type="text"
                                           data-id="{{ property.id }}"
                                           class="persist handleChange join-word"
                                           title="Joining word"
                                           placeholder="in/on/near"
                                           name="Property[{{ property.id }}].join3"
                                           id="join-{{ property.id }}-3"
                                            {{ (loop.last)?'':'required' }}
                                           value="{{ property.join3 }}"/>
                                    <input type="text"
                                           data-id="{{ property.id }}"
                                           class="persist handleChange"
                                           placeholder="Alternate Name (State?)"
                                           name="Property[{{ property.id }}].destination3"
                                           id="destination-{{ property.id }}-3"
                                            {{ (loop.last)?'':'required' }}
                                           value="{{ property.destination3 }}"/>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6">
                                <div id="examples-{{ property.id }}">

                                </div>
                                <div>
                                    <p>
                                        The destinations are used by us to create relevant and interesting post topics like "My favourite bar <b>in Barcelona</b>".
                                        Think of words you would use to search for things to do in your area, for instance "My favourite bar <b>near Las Ramblas</b>".
                                        You can come back to this tab anytime to change it.
                                    </p>
                                </div>
                            </div>
                            <div class="col-sm-6 col-xs-12">
                                <div class="field">
                                    <label for="latitude-{{ property.id }}">
                                        Latitude <span class="required">*</span>
                                    </label>
                                    <input type="number" step="any"  min="-85" max="85"
                                           data-id="{{ property.id }}"
                                           class="persist handleChange"
                                           name="Property[{{ property.id }}].latitude"
                                           id="latitude-{{ property.id }}"
                                            {{ (loop.last)?'':'required' }}
                                           value="{{ property.latitude }}"/>
                                </div>
                                <div class="field">
                                    <label for="longitude-{{ property.id }}">
                                        Longitude <span class="required">*</span>
                                    </label>
                                    <input type="number" step="any" min="-180" max="180"
                                           data-id="{{ property.id }}"
                                           class="persist handleChange"
                                           name="Property[{{ property.id }}].longitude"
                                           id="longitude-{{ property.id }}"
                                            {{ (loop.last)?'':'required' }}
                                           value="{{ property.longitude }}"/>
                                </div>
                                <input type="submit" class="unload" value="done" onClick="if (document.getElementById('title-{{ property.id }}').validity.valid) window.location.reload()">
                            </div>
                            <div class="col-sm-6 col-xs-12">
                                <p>
                                    To find the Latitiude and Longitude for your property, go to <a href="https://maps.google.com" target="_blank">Google maps</a>
                                    and locate your property. Click on it and the latitude and longitude are shown in a pop-up box.
                                </p>
                            </div>
                        </div>

                    </div>
                    {% if loop.first %}
                    <div class="col-md-4 col-sm-12">
                        <div class="vs-panel row">
                            <div id="title" class="col-sm-12">
                                <h1>Information</h1>
                            </div>
                            <p>To advertise your property on Vacation Soup and bring travellers to your website you need to become a member. See the <a href="https://vacationsoup.com/owners-area/">owner's area</a> for more details.</p>
                        </div>
                    </div>
                    {% endif %}
                {% endfor %}
            </div>
        {% endblock form_content %}
    {% endembed %}
{% endblock content %}