{% extends "base.html.twig" %}
{% block title %}Get your free Yacht Insurance Quote | Novamar Insurance{% endblock %}
{% block metas %}
<meta content="boat insurance, get a quote, boat insurance quote, get your free boat insurance quote" name="keywords" />
<meta name="robots" content="{{robots}}" />   
<meta name="description" content="Do you need insurance for your boat? do not worry, request a quote in minutes and one of our novamar agents will contact you shortly"/>
<meta content="Yacht Quote Insurance" property="og:title" />
<meta content="" property="og:description">
<meta content="https://www.novamarinsurance.com/web/assets/img/faqs.jpg" property="og:image" />
<meta content="https://www.novamarinsurance.com/web/assets/img/faqs.jpg" property="og:image:secure_url" />
<meta content="image/jpg" property="og:image:type" />
<meta content="1000" property="og:image:width" />
<meta content="340" property="og:image:height">
<meta content="https://www.novamarinsurance.com/insurance-services/yacht-insurance/quote" property="og:url">
{% if subAgentLink is defined and subAgentLink != '' %}
<link rel="canonical" href="https://www.novamarinsurance.com/insurance-services/yacht-insurance/quote">
{% endif %}
{% endblock %}
{% block css %}
<!-- TrustBox script -->
	<script src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
	<!-- End TrustBox script -->
{{ encore_entry_link_tags('general') }}
{{encore_entry_link_tags('yacht-insurance-new')}}
<link type="text/css" rel="preload" as="font" href="{{asset('css/libs/fontawesome/all.min.css')}}" media="print" onload="this.media='all'"/>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" media="print" onload="this.media='all'"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" media="print" onload="this.media='all'"/>
<style>
    .recaptcha-container {
            display: flex;            
            justify-content: center; 
        }
</style>
{#{Responsive CSS Styles Novamar IT - 2019}#}
{% endblock %}
{% block body %}
    {# variable de la imagen usada para el logo del formulario #}
    {% if subAgentLink is defined and subAgentLink != "" %}
        {% set isAgent = true %}
     {% else %}
         {% set isAgent = false %}
    {% endif %}
<div  id="main">
   {% if isAgent is defined and isAgent %}
        <div class="content-all-agents-navbar d-flex justify-content-center align-items-center">
            <div class="navbar-agents" >
                <div class="container d-flex justify-content-center align-items-center">
                    <div class="content-info-agent d-flex">
                        <div class="info-agent-item">
                            <div class="info-item-title">
                                <span>Email: </span>
                            </div>
                            <div class="info-agent-info">
                                <span><a :href="'mailto:' + agentInfo.email"><i class="fas fa-envelope"></i> [[agentInfo.email]]</a></span>
                            </div>
                        </div>
                       <div class="info-agent-item-content-logo">
                            <div class="content-agent-logo">
                                <img :src="'/img/distributor/'+[[agentInfo.agent_image]]" alt="logo">
                            </div>
                       </div>
                        <div class="info-agent-item">
                            <div class="info-item-title">
                                <span>Phone:</span>
                            </div>
                            <div class="info-agent-info">
                                <span><i class="fas fa-phone-alt"></i>[[agentInfo.phone]] </span>
                            </div>
                        </div>
                    </div>
                     <div class="info-agent-item-content-logo-mobile">
                        <div class="content-logo-mobile">
                            <img :src="'/img/distributor/'+[[agentInfo.agent_image]]" :alt="'logo'+ [[agentInfo.name]]">                    
                        </div>
                    </div>
                    <div class="mobile-nav-agents-button" id="mobile-nav-button">
                        <i class="fas fa-bars"></i>
                    </div>
                </div>
            </div>
            <div class="content-info-agent-mobile">
                <div class="info-agent-item">
                    <div class="info-item-title">
                        <span>Email:</span>
                    </div>
                    <div class="info-agent-info">
                        <span><a :href="'mailto:' + [[agentInfo.email]]"><i class="fas fa-envelope"></i>[[agentInfo.email]] </a></span>
                    </div>
                </div>
                <div class="info-agent-item">
                    <div class="info-item-title">
                        <span>Phone:</span>
                    </div>
                    <div class="info-agent-info">
                        <span><i class="fas fa-phone-alt"></i> </span>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
    <div class="content-all-form" >
        <picture>
            <source type="webp" srcset="{{asset('img/form-background.webp')}}">
            <img src="{{asset('img/form-background.webp')}}" class="form-background-image" alt="imagen de fondo del formulario">
        </picture>
        <div class="content-layer position-relative">
            {# inicio del formulario #}
           <div class="container position-relative" id="content_view">
                <div class="content-form">
                    {{ form_start(nypform,{ 'attr': {'id': 'form-container'} }) }}
                    <div class="steps d-none" id="step_1">
                        <div class="content-title animation-fade-up">
                            <div class="novamar-logo-title">
                                <div class="form-content-logo">
                                {% if isAgent == false %}
                                        <picture>
                                            <source type="webp" srcset="{{asset('img/logo_Novamar.webp')}}">
                                            <img src="{{asset('img/logo_Novamar.webp')}}" alt="logo Novamar del formulario">
                                        </picture>
                                {% endif %}
                                </div>
                                {% if  isAgent == false %}
                                    <h1 class="step-title">Welcome to Novamar’s Yacht quote form</h1>
                                    {% else %}
                                        <h1 class="step-title">Welcome to Our Yacht Insurance quote form</h1>
                                {% endif %}
                                <span class="small-title"></span>
                            </div>
                        </div>
                        <div class="content-subtitle animation-fade-up">
                            <div class="step-subtitle">
                                <h3>Please introduce yourself</h3>
                                <div class="subtitle-line"></div>
                            </div>
                        </div>
                        <div class="content-form-fields animation-zoom-in">
                            <div class="form-group row">
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.firstName, "Name") }}
                                    {{form_widget(nypform.firstName,{ 'attr': {'class': 'check-change step-1'} })}}
                                    {{ form_errors(nypform.firstName) }}
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.lastName, "Last Name") }}
                                    {{form_widget(nypform.lastName,{ 'attr': {'class': 'check-change step-1'} })}}
                                    {{ form_errors(nypform.lastName) }}
                                </div>
                            </div>
                        </div>
                        <div class="content-form-buttons">
                            <div class="form-buttons">
                                <button type="button" class="next-step" @click="stepChange('next', currentStep)">Let's start</button>
                                <button type="button" class="go-back" @click="stepChange('back', currentStep)" disabled>Go Back</button>
                            </div>
                        </div>
                    </div>
                    <div class="steps d-none" id="step_2">
                        <div class="content-title animation-fade-up">
                            <div class="novamar-logo-title">
                                <div class="form-content-logo">
                                {% if isAgent == false %}
                                        <picture>
                                            <source type="webp" srcset="{{asset('img/logo_Novamar.webp')}}">
                                            <img src="{{asset('img/logo_Novamar.webp')}}" alt="logo Novamar del formulario">
                                        </picture>
                                {% endif %}
                                </div>
                                <h2 class="step-title">Hi [[firstName]]!</h2>
                                <span class="small-title">Nice to meet you</span>
                            </div>
                        </div>
                        <div class="content-subtitle animation-fade-up">
                            <div class="step-subtitle">
                                <h3>Tell us about your boat:</h3>
                                <div class="subtitle-line"></div>
                            </div>
                        </div>
                        <div class="content-form-fields animation-zoom-in">
                            <div class="form-group row">
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.boatName, "Boat name") }}
                                    {{form_widget(nypform.boatName,{ 'attr': {'class': 'check-change step-2'} })}}
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.manufacturer) }}
                                    {{form_widget(nypform.manufacturer,{ 'attr': {'class': 'check-change step-2'} })}}
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.lenght, 'Length') }}
                                    {{form_widget(nypform.lenght,{ 'attr': {'class': 'check-change step-2'} })}}
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.built_year, "Year built") }}
                                    {{form_widget(nypform.built_year,{ 'attr': {'class': 'check-change step-2'} })}}
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.hull_type) }}
                                    {{form_widget(nypform.hull_type,{ 'attr': {'class': 'check-change step-2'} })}}
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.hull_material, "Hull material") }}
                                    {{form_widget(nypform.hull_material,{ 'attr': {'class': 'check-change step-2'} })}}
                                </div>
                            </div>
                        </div>
                        <div class="content-form-buttons">
                            <div class="form-buttons">
                                <button type="button" class="next-step" @click="stepChange('next', currentStep)">Continue</button>
                                <button type="button" class="go-back" @click="stepChange('back', currentStep)">Go Back</button>
                            </div>
                        </div>
                    </div>
                    <div class="steps d-none" id="step_3">
                        <div class="content-title animation-fade-up">
                            <div class="novamar-logo-title">
                                <div class="form-content-logo">
                                {% if isAgent == false %}
                                        <picture>
                                            <source type="webp" srcset="{{asset('img/logo_Novamar.webp')}}">
                                            <img src="{{asset('img/logo_Novamar.webp')}}" alt="logo Novamar del formulario">
                                        </picture>
                                {% endif %}
                                </div>
                                <h2 class="step-title">Please provide more information</h2>
                                <span class="small-title"></span>
                            </div>
                        </div>
                        <div class="content-subtitle animation-fade-up">
                            <div class="step-subtitle">
                                <h3>Characteristics of the engine(s):</h3>
                                <div class="subtitle-line"></div>
                            </div>
                        </div>
                        <div class="content-form-fields animation-zoom-in">
                            <div class="form-group row">
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.power_type) }}
                                    {{form_widget(nypform.power_type,{ 'attr': {'class': 'check-change step-3'} })}}
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.horse_power, "Horsepower per engine") }}
                                    {{form_widget(nypform.horse_power,{ 'attr': {'class': 'check-change step-3'} })}}
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.max_speed, "Max vessel speed (knots)") }}
                                    {{form_widget(nypform.max_speed,{ 'attr': {'class': 'check-change step-3'} })}}
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.number_engines, "Number of engines") }}
                                    {{form_widget(nypform.number_engines,{ 'attr': {'class': 'check-change step-3'} })}}
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.engine_manufacturer) }}
                                    {{form_widget(nypform.engine_manufacturer,{ 'attr': {'class': 'check-change step-3'} })}}
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.engine_year) }}
                                    {{form_widget(nypform.engine_year,{ 'attr': {'class': 'check-change step-3'} })}}
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.fuel) }}
                                    {{form_widget(nypform.fuel,{ 'attr': {'class': 'check-change step-3'} })}}
                                </div>
                            </div>
                        </div>
                        <div class="content-form-buttons">
                            <div class="form-buttons">
                                <button type="button" class="next-step" @click="stepChange('next', currentStep)">Continue</button>
                                <button type="button" class="go-back" @click="stepChange('back', currentStep)">Go Back</button>
                            </div>
                        </div>
                    </div>
                    <div class="steps d-none" id="step_4">
                        <div class="content-title animation-fade-up">
                            <div class="novamar-logo-title">
                                <div class="form-content-logo">
                                {% if isAgent == false %}
                                        <picture>
                                            <source type="webp" srcset="{{asset('img/logo_Novamar.webp')}}">
                                            <img src="{{asset('img/logo_Novamar.webp')}}" alt="logo Novamar del formulario">
                                        </picture>
                                {% endif %}
                                </div>
                                <h2 class="step-title">Let's continue with more details</h2>
                                <span class="small-title"></span>
                            </div>
                        </div>
                        <div class="content-subtitle animation-fade-up">
                            <div class="step-subtitle">
                                <h3>Purchase and usage:</h3>
                                <div class="subtitle-line"></div>
                            </div>
                        </div>
                        <div class="content-form-fields animation-zoom-in">
                            <div class="form-group row">
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.purchase_date, "Boat purchase date") }}
                                    {{form_widget(nypform.purchase_date,{ 'attr': {'class': 'check-change step-4 date-format'} })}}
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.purchase_price, "Boat purchase price") }}
                                    {{form_widget(nypform.purchase_price,{ 'attr': {'class': 'check-change step-4'} })}}
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.boat_use, "Boat usage") }}
                                    {{form_widget(nypform.boat_use,{ 'attr': {'class': 'check-change step-4'} })}}
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.live_aboard, "Liveaboard?") }}
                                    {{form_widget(nypform.live_aboard,{ 'attr': {'class': 'check-change step-4'} })}}
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.currently_insured, "Is your boat currently insured?") }}
                                    {{form_widget(nypform.currently_insured,{ 'attr': {'class': 'check-change step-4'} })}}
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.insurance_company, "Select the insurance company:", { 'label_attr': {'class': 'd-none'} }) }}
                                    {{form_widget(nypform.insurance_company,{ 'attr': {'class': 'check-change step-4 d-none'} })}}
                                </div>
                            </div>
                        </div>
                        <div class="content-form-buttons">
                            <div class="form-buttons">
                                <button type="button" class="next-step" @click="stepChange('next', currentStep)">Continue</button>
                                <button type="button" class="go-back" @click="stepChange('back', currentStep)">Go Back</button>
                            </div>
                        </div>
                    </div>
                    <div class="steps d-none" id="step_5">
                        <div class="content-title animation-fade-up">
                            <div class="novamar-logo-title">
                                <div class="form-content-logo">
                                {% if isAgent == false %}
                                        <picture>
                                            <source type="webp" srcset="{{asset('img/logo_Novamar.webp')}}">
                                            <img src="{{asset('img/logo_Novamar.webp')}}" alt="logo Novamar del formulario">
                                        </picture>
                                {% endif %}
                                </div>
                                <h2 class="step-title">Great [[firstName]]!</h2>
                                <span class="small-title">We are halfway there</span>
                            </div>
                        </div>
                        <div class="content-subtitle animation-fade-up">
                            <div class="step-subtitle">
                                <h3>Coverages Limits:</h3>
                                <div class="subtitle-line"></div>
                            </div>
                        </div>
                        <div class="content-form-fields animation-zoom-in">
                            <div class="form-group row">
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.hull_value, "Hull coverage limit") }}
                                    {{form_widget(nypform.hull_value,{ 'attr': {'class': 'check-change step-5'} })}}
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.deductible, "Hull deductible") }}
                                    {{form_widget(nypform.deductible,{ 'attr': {'class': 'check-change step-5'} })}}
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.liability, "Liability coverage limit") }}
                                    {{form_widget(nypform.liability,{ 'attr': {'class': 'check-change step-5'} })}}
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.medical, "Medical payments limit") }}
                                    {{form_widget(nypform.medical,{ 'attr': {'class': 'check-change step-5'} })}}
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.personnal_effects, "Personal effects limit") }}
                                    {{form_widget(nypform.personnal_effects,{ 'attr': {'class': 'check-change step-5'} })}}
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.towing_limits, "Emergency towing limit") }}
                                    {{form_widget(nypform.towing_limits,{ 'attr': {'class': 'check-change step-5'} })}}
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.trailer_value, "Trailer value (optional)") }}
                                    {{form_widget(nypform.trailer_value,{ 'attr': {'class': 'check-change step-5'} })}}
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.paid_creu, "Paid crew (if any)") }}
                                    {{form_widget(nypform.paid_creu,{ 'attr': {'class': 'check-change step-5'} })}}
                                </div>
                            </div>
                        </div>
                        <div class="content-form-buttons">
                            <div class="form-buttons">
                                <button type="button" class="next-step" @click="stepChange('next', currentStep)">Continue</button>
                                <button type="button" class="go-back" @click="stepChange('back', currentStep)">Go Back</button>
                            </div>
                        </div>
                    </div>
                    <div class="steps d-none" id="step_6">
                        <div class="content-title animation-fade-up">
                            <div class="novamar-logo-title">
                                <div class="form-content-logo">
                                {% if isAgent == false %}
                                        <picture>
                                            <source type="webp" srcset="{{asset('img/logo_Novamar.webp')}}">
                                            <img src="{{asset('img/logo_Novamar.webp')}}" alt="logo Novamar del formulario">
                                        </picture>
                                {% endif %}
                                </div>
                                <h2 class="step-title">We are building a tailor made quote for you,</h2>
                                <span class="small-title">please help us with more info</span>
                            </div>
                        </div>
                        <div class="content-subtitle animation-fade-up">
                            <div class="step-subtitle">
                                <h3>Boating Experience/Boat Location:</h3>
                                <div class="subtitle-line"></div>
                            </div>
                        </div>
                        <div class="content-form-fields animation-zoom-in">
                            <div class="form-group row">
                                <div class="col-lg-10 col-sm-12 form-field p-0">
                                    <label>Boating Course:</label>
                                    <div class="boating-courses-container">
                                        <label class="checkbox-inline courses ms-2 me-2 p-1"><input type="checkbox" name="courses" value="PS"> PS</label>
                                        <label class="checkbox-inline courses ms-2 me-2 p-1"><input type="checkbox" name="courses" value="CGA"> CGA</label>
                                        <label class="checkbox-inline courses ms-2 me-2 p-1"><input type="checkbox" name="courses" value="State"> State</label>
                                        <label class="checkbox-inline courses ms-2 me-2 p-1"><input type="checkbox" name="courses" value="Captain License"> Captain License</label>
                                        <label class="checkbox-inline courses ms-2 me-2 p-1"><input type="checkbox" name="courses" value="U.S. Sailing Course"> U.S. Sailing Course</label>
                                        <label class="checkbox-inline courses ms-2 me-2 p-1"><input type="checkbox" name="courses" value="ASA Course"> ASA Course</label>
                                        <label class="checkbox-inline courses ms-2 me-2 p-1"><input type="checkbox" name="courses" id="courses_other" value="Other"> Other</label>
                                        <label class="checkbox-inline courses ms-2 me-2 p-1"><input type="checkbox" name="courses" id="courses_none" value="None"> None</label>
                                    </div>
                                    {{form_widget(nypform.courses,{ 'attr': {'class': 'check-change step-6 '} })}}
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-4 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.years_experience, "Years of boat ownership") }}
                                    {{form_widget(nypform.years_experience,{ 'attr': {'class': 'check-change step-6'} })}}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.boats_owned, "Length/Manufacturer of boats owned") }}
                                    {{form_widget(nypform.boats_owned,{ 'attr': {'class': 'check-change step-6'} })}}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.date_vessel_survey, "Date of most recent vessel survey") }}
                                    {{form_widget(nypform.date_vessel_survey,{ 'attr': {'class': 'check-change step-6 date-format'} })}}
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-3 col-md-3 col-sm-12 form-field">
                                    <label for="">Prior Boating Losses? (Y/N)</label>
                                    <select id="list_accidents_question">
                                        <option value="">-Select</option>
                                        <option value="Yes">Yes</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-12 form-field d-none">
                                    {{ form_label(nypform.list_accidents, "List prior boating losses:") }}
                                    {{form_widget(nypform.list_accidents,{ 'attr': {'class': 'check-change step-6'} })}}
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-12 form-field">
                                    {{ form_label(nypform.mooring_storage_country, "Mooring/Storage country") }}
                                    {{form_widget(nypform.mooring_storage_country,{ 'attr': {'class': 'check-change step-6'} })}}
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-12 form-field">
                                    {{ form_label(nypform.mooring_storage_state, "Mooring/Storage state") }}
                                    {{form_widget(nypform.mooring_storage_state,{ 'attr': {'class': 'check-change step-6'} })}}
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-12 form-field d-none">
                                    <label for="">Mooring/Storage state</label>
                                    <select id="mooring_storage_state_select" class="check-change step-6">
                                        <option value="">-Select-</option>
                                        {# {% for key, value in states %}
                                            <option value="{{value}}">{{key}}</option>
                                        {% endfor %} #}
                                    </select>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-12 form-field">
                                    {{ form_label(nypform.mooring_storage_zipCode, "Mooring/Storage zip code") }}
                                    {{form_widget(nypform.mooring_storage_zipCode,{ 'attr': {'class': 'check-change step-6'} })}}
                                </div>
                            </div>
                        </div>
                        <div class="content-form-buttons">
                            <div class="form-buttons">
                                <button type="button" class="next-step" @click="stepChange('next', currentStep)">Continue</button>
                                <button type="button" class="go-back" @click="stepChange('back', currentStep)">Go Back</button>
                            </div>
                        </div>
                    </div>
                    <div class="steps d-none" id="step_7">
                        <div class="content-title animation-fade-up">
                            <div class="novamar-logo-title">
                                <div class="form-content-logo">
                                {% if isAgent == false %}
                                        <picture>
                                            <source type="webp" srcset="{{asset('img/logo_Novamar.webp')}}">
                                            <img src="{{asset('img/logo_Novamar.webp')}}" alt="logo Novamar del formulario">
                                        </picture>
                                {% endif %}
                                </div>
                                <h2 class="step-title"> Tell us where you use your vessel:</h2>
                                <span class="small-title"></span>
                            </div>
                        </div>
                        <div class="content-subtitle animation-fade-up">
                            <div class="step-subtitle">
                                <h3>Navigations Limits</h3>
                                <div class="subtitle-line"></div>
                            </div>
                        </div>
                        <div class="content-form-fields animation-zoom-in">
                            <div class="form-group row">
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <button type="button" @click="showNavLimitsModal('1')" class="navigation-limits">1.- Pacific Navigation Wordings including Hawaii</button>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <button type="button" @click="showNavLimitsModal('2')" class="navigation-limits">2.- U.S. Atlantic and Gulf Coast Navigation Wordings</button>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <button type="button" @click="showNavLimitsModal('3')" class="navigation-limits">3.- Mediterranean Navigation Wording</button>
                                </div>
                            </div>
                            {{form_widget(nypform.navigation_limit_quote,{ 'attr': {'class': 'form-control  check-change step-7'} })}}
                        </div>
                        <div class="content-form-buttons">
                            <div class="form-buttons">
                                <button type="button" class="next-step" @click="stepChange('next', currentStep)">Continue</button>
                                <button type="button" class="go-back" @click="stepChange('back', currentStep)">Go Back</button>
                            </div>
                        </div>
                    </div>
                    <div class="steps d-none" id="step_8">
                        <div class="content-title animation-fade-up">
                            <div class="novamar-logo-title">
                                <div class="form-content-logo">
                                {% if isAgent == false %}
                                        <picture>
                                            <source type="webp" srcset="{{asset('img/logo_Novamar.webp')}}">
                                            <img src="{{asset('img/logo_Novamar.webp')}}" alt="logo Novamar del formulario">
                                        </picture>
                                {% endif %}
                                </div>
                                <h2 class="step-title">[[firstName]], tell us more about you</h2>
                                <span class="small-title"></span>
                            </div>
                        </div>
                        <div class="content-subtitle animation-fade-up">
                            <div class="step-subtitle">
                                <h3></h3>
                                <div class="subtitle-line"></div>
                            </div>
                        </div>
                        <div class="content-form-fields animation-zoom-in">
                            <div class="form-group row">
                                <div class="col-lg-2 col-md-2 col-sm-12 form-field">
                                    {{ form_label(nypform.birthday, "Date of birth") }}
                                    {{form_widget(nypform.birthday,{ 'attr': {'class': 'check-change step-8 date-format'} })}}
                                </div>
                                <div class="col-lg-2 col-md-2 col-sm-12 form-field">
                                    {{ form_label(nypform.occupation) }}
                                    {{form_widget(nypform.occupation,{ 'attr': {'class': 'check-change step-8'} })}}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.additional_insured, "List additional owners (if any)") }}
                                    {{form_widget(nypform.additional_insured,{ 'attr': {'class': 'check-change step-8'} })}}
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-4 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.owner_type, "Vessel ownership (Personal/Company)") }}
                                    {{form_widget(nypform.owner_type,{ 'attr': {'class': 'check-change step-8'} })}}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.company_name, "Company name (If applicable)", { 'label_attr': {'class': 'd-none'} }) }}
                                    {{form_widget(nypform.company_name,{ 'attr': {'class': 'check-change step-8 d-none'} })}}
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-4 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.email, "Email address") }}
                                    {{form_widget(nypform.email,{ 'attr': {'class': 'check-change step-8'} })}}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.phone, "Primary phone") }}
                                    {{form_widget(nypform.phone,{ 'attr': {'class': 'check-change step-8 phone-format'} })}}
                                </div>
                            </div>
                        </div>
                        <div class="content-form-buttons">
                            <div class="form-buttons">
                                <button type="button" class="next-step" @click="stepChange('next', currentStep)">Continue</button>
                                <button type="button" class="go-back" @click="stepChange('back', currentStep)">Go Back</button>
                            </div>
                        </div>
                    </div>
                    <div class="steps d-none" id="step_9">
                        <div class="content-title animation-fade-up">
                            <div class="novamar-logo-title">
                                <div class="form-content-logo">
                                {% if isAgent == false %}
                                        <picture>
                                            <source type="webp" srcset="{{asset('img/logo_Novamar.webp')}}">
                                            <img src="{{asset('img/logo_Novamar.webp')}}" alt="logo Novamar del formulario">
                                        </picture>
                                {% endif %}
                                </div>
                                <h2 class="step-title">Almost there, [[firstName]]</h2>
                                <span class="small-title"></span>
                            </div>
                        </div>
                        <div class="content-subtitle animation-fade-up">
                            <div class="step-subtitle">
                                <h3></h3>
                                <div class="subtitle-line"></div>
                            </div>
                        </div>
                        <div class="content-form-fields animation-zoom-in">
                            <div class="form-group row">
                                <div class="col-lg-6 col-md-6 col-sm-12 form-field">
                                    {{ form_label(nypform.address, "Street Address") }}
                                    {{form_widget(nypform.address,{ 'attr': {'class': 'check-change step-9'} })}}
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-12 form-field">
                                    {{ form_label(nypform.city) }}
                                    {{form_widget(nypform.city,{ 'attr': {'class': 'check-change step-9'} })}}
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-3 col-md-3 col-sm-12 form-field">
                                    {{ form_label(nypform.country) }}
                                    {{form_widget(nypform.country,{ 'attr': {'class': 'check-change step-9'} })}}
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-12 form-field">
                                    {{ form_label(nypform.state) }}
                                    {{form_widget(nypform.state,{ 'attr': {'class': 'check-change step-9'} })}}
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-12 form-field d-none">
                                    <label for="">State</label>
                                    <select id="client_state_select" class="check-change step-9">
                                        <option value="">-Select-</option>
                                        {# {% for key, value in states %}
                                            <option value="{{value}}">{{key}}</option>
                                        {% endfor %} #}
                                    </select>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-12 form-field">
                                    {{ form_label(nypform.postalCode, "Zip code") }}
                                    {{form_widget(nypform.postalCode,{ 'attr': {'class': 'check-change step-9'} })}}
                                </div>
                            </div>
                        </div>
                        <div class="content-form-buttons">
                            <div class="form-buttons">
                                <button type="button" class="next-step" @click="stepChange('next', currentStep)">Continue</button>
                                <button type="button" class="go-back" @click="stepChange('back', currentStep)">Go Back</button>
                            </div>
                        </div>
                    </div>
                    <div class="steps d-none" id="step_10">
                        <div class="content-title animation-fade-up">
                            <div class="novamar-logo-title">
                                <div class="form-content-logo">
                                {% if isAgent == false %}
                                        <picture>
                                            <source type="webp" srcset="{{asset('img/logo_Novamar.webp')}}">
                                            <img src="{{asset('img/logo_Novamar.webp')}}" alt="logo Novamar del formulario">
                                        </picture>
                                {% endif %}
                                </div>
                                <h2 class="step-title">Final step!</h2>
                                <span class="small-title"></span>
                            </div>
                        </div>
                        <div class="content-subtitle animation-fade-up">
                            <div class="step-subtitle">
                                <h3></h3>
                                <div class="subtitle-line"></div>
                            </div>
                        </div>
                        <div class="content-form-fields animation-zoom-in">
                            <div class="form-group row">
                                <div class="col-lg-4 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.source, "How did you hear about us?") }}
                                    {{form_widget(nypform.source,{ 'attr': {'class': 'check-change step-10'} })}}
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12 form-field">
                                    {{ form_label(nypform.desire_effective_date, "Desired coverage effective date") }}
                                    {{form_widget(nypform.desire_effective_date,{ 'attr': {'class': 'check-change step-10 date-format'} })}}
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-lg-8 col-md-8 col-sm-12 form-field">
                                    {{ form_label(nypform.comments) }}
                                    {{form_widget(nypform.comments,{ 'attr': {'class': 'check-change step-10'} })}}
                                </div>
                                <div class="col-lg-12 mt-2 mb-2 recaptcha-container" id="recaptcha">
                                </div>
                            </div>
                        </div>
                        <div class="content-form-buttons">
                            <div class="form-buttons">
                                <button type="button" class="next-step" @click="stepFinish()">Send the request</button>
                                <button type="button" class="go-back" @click="stepChange('back', currentStep)">Go Back</button>
                            </div>
                            <div class="col-12 d-flex flex-column justify-content-center align-items-center d-none" id="loadingQuote">
                                <img loading="lazy" src="{{asset('/img/loader.gif')}}" alt="loading quote" width="80">
                            </div>
                        </div>
                    </div>
                    <div class="steps d-none" id="step_11">
                        <div class="content-final-step-text">
                            <div class="content-title animation-fade-up">
                                <div class="form-content-logo">
                                <div class="novamar-logo-title">
                                        <picture>
                                            <source type="webp" srcset="{{asset('img/logo_Novamar.webp')}}">
                                            <img src="{{asset('img/logo_Novamar.webp')}}" alt="logo Novamar del formulario">
                                        </picture>
                                    <h2 class="step-title">You did it, [[firstName]]!</h2>
                                </div>
                                    <span class="small-title"></span>
                                </div>
                            </div>
                           <div class="content-subtitle animation-fade-up">
                                <div class="step-subtitle">
                                    <h3>Your request has been forwarded to a licensed Novamar Insurance specialist who will be in contact with you within 48 hours</h3>
                                </div>
                           </div>
                        </div>
                        <div class="content-form-buttons">
                            <div class="form-buttons">
                                <button type="button" class="next-step" @click="goHome()">Go to home</button>
                                <button type="button" class="go-back" @click="stepChange('back', currentStep)" disabled>Go Back</button>
                            </div>
                        </div>
                    </div>
                    {% if subAgentLink is defined and subAgentLink != '' %}
                     {{ form_widget(nypform.agent_link, {'value': subAgentLink}) }}
                     {% endif %}
                    {# servira para ocultar campos que aun no usaremos #}
                    
                    <div class="rest-form d-none">
                       {{ form_rest(nypform) }}
                       <input type="hidden" id="subAgent" value="">
                    </div>
                    {{ form_end(nypform) }}
                </div>
           </div>
           <div class="container container-progress-bar">
                <div class="content-progress-bar row">
                    <div class="col-5 part-1 p-0" id="progress_bar_1">
                        <div class="progress-bar-icon">
                            <picture>
                                <source media="(max-width: 576px)" type="image/png" srcset="{{ asset('img/icons/velero_2.png')}}">
                                <source type="image/png" srcset="{{ asset('img/icons/velero.png')}}">
                                <img class="progress-image-boat" src="{{ asset('img/icons/velero.png')}}" alt="loading boat image">
                            </picture>
                        </div>
                        <div class="progress-bar-color">
                            <div class="progress-bar-container"></div>
                        </div>
                    </div>
                    <div class="col-2 d-flex justify-content-center align-items-center">
                        <span id="progress_number">[[percentageProgress]]%</span>
                    </div>
                    <div class="col-5 part-2 p-0" id="progress_bar_2">
                        <div class="progress-bar-icon">
                            <picture>
                                <source media="(max-width: 576px)" type="image/png" srcset="{{ asset('img/icons/velero_2.png')}}">
                                <source type="image/png" srcset="{{ asset('img/icons/velero.png')}}">
                                <img class="progress-image-boat" src="{{ asset('img/icons/velero.png')}}" alt="loading boat image">
                            </picture>
                        </div>
                        <div class="progress-bar-color">
                            <div class="progress-bar-container"></div>
                        </div>
                    </div>
                </div>
           </div>
        </div>
        {# modales #}
        <div class="modal fade" id="navLimitsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="navLimitsModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="navLimitsModalLabel">Navigation Limits</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="content-navLimit-items d-none" id="nav_limit_1">
                        <label class="radio"><input type="radio" name="radios" value="AA-A-1"><span class="outer"><span class="inner"></span></span>Pacific coastal waters not north of Cape Scott, Vancouver Island, BC nor south of Pt. Banda, Mexico within 200 miles of shore.</label>
                        <div class="clearfix"></div>
                        <label class="radio"><input type="radio" name="radios" value="AB-B-1"><span class="outer"><span class="inner"></span></span>Pacific coastal waters not north of Cape Scott, Vancouver Island, BC nor south of Acapulco, Mexico within 200 miles of shore.</label>
                        <div class="clearfix"></div>
                        <label class="radio"><input type="radio" name="radios" value="AC-C-1"><span class="outer"><span class="inner"></span></span>Pacific coastal waters not north of Cape Scott, Vancouver Island, BC nor south of Acapulco, Mexico within 200 miles of shore. It is further agreed the vessel shall remain north of Pt. Banda, Mexico between 1 July and 1 November.</label>
                        <div class="clearfix"></div>
                        <label class="radio flex-column justify-content-center align-items-start"><input type="radio" name="radios" value="AI-C-1.5"><span class="outer"><span class="inner"></span></span>
                            Pacific coastal waters of the seven (7) major Hawaiian Islands not to exceed 75 miles from shore.
                        </label>
                        <div class="clearfix"></div>
                    </div>
                    <div class="content-navLimit-items d-none" id="nav_limit_2">
                        <label class="radio"><input type="radio" name="radios" value="DA-D-1"><span class="outer"><span class="inner"></span></span>U.S. Atlantic and Gulf coastwise and inland tributary waters between Eastport, ME and Brownsville, TX.</label>
                        <div class="clearfix"></div>
                        <label class="radio"><input type="radio" name="radios" value="DC-D-1.03"><span class="outer"><span class="inner"></span></span>U.S. Atlantic and Gulf coastal and inland tributary waters thereto of the United States between Eastport, ME and Brownsville, TX including the Bahamas, Turks & Caicos.</label>
                        <div class="clearfix"></div>
                        <label class="radio"><input type="radio" name="radios" value="DD-E-1.03"><span class="outer"><span class="inner"></span></span>U.S. Atlantic and Gulf coastal and inland tributary waters thereto of the United States between Eastport, ME and Brownsville, TX including the Bahamas, Turks & Caicos. Warranted vessel will remain north of Cumberland Island, GA between 1 July and 1 November.</label>
                        <div class="clearfix"></div>
                        <label class="radio"><input type="radio" name="radios" value="DF-F-1.1"><span class="outer"><span class="inner"></span></span>The Chesapeake Bay, the Albemarle & Pamlico Sounds and inland waters tributary thereto, including the Delaware Bay and the US Atlantic between Cape May, NJ and Beaufort, NC not to exceed 50 miles offshore.</label>
                        <div class="clearfix"></div>
                        <label class="radio"><input type="radio" name="radios" value="DG-F-1"><span class="outer"><span class="inner"></span></span>Inland lakes and rivers of the United States and Canada including the Great Lakes and not north of Quebec City.</label>
                        <div class="clearfix"></div>
                    </div>
                    <div class="content-navLimit-items d-none" id="nav_limit_3">
                        <label class="radio"><input type="radio" name="radios" value="EA-F-1.15"><span class="outer"><span class="inner"></span></span>Atlantic and Mediterranean waters and inland tributaries thereto and not west of 35 degrees West Longitude and not east of Cape Andreas, Cyprus; excluding waters of Syria, Lebanon, Israel, Palestine, Palestinian Territories, Egypt, Libya, Algeria, Morocco, or any other African nation.</label>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block javascript %}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.js"></script>
{{encore_entry_script_tags('tooltip')}}
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<!--  Google recaptcha api "explicit&hl=en" {Cambiar idioma a Ingles por Default} -->
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script src="{{asset('js/jquery.number.min.js')}}" defer></script>
<script>
    let agent = "{{ subAgentLink }}";
  var onloadCallback = function() {
            // Placeholder for reCAPTCHA initialization
        };
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&language=en&key=AIzaSyA0BpSQ2TpvW3H62qFygALEIb0Cgj8bfyY" async></script>
{{encore_entry_script_tags('yacht_quote_vue')}}
{% endblock %}