{% extends 'base.html.twig' %}
{% block title %}Full-Coverage Boat Insurance in Mexico | Novamar Insurance{% endblock %}
{% block metas %}
<meta name="description" content="Get full-coverage boat insurance for your boat in Mexico from Novamar Insurance. Receive a free online price quote in minutes on our website." />
    <meta name="keywords" content="boat insurance in mexico, boat insurance, full boat coverage insurance, full boat coverage in mexico,mexican boat insurance" />
    {#{app.robots|raw}}
    {% if distributor != '' %}
        <link rel="canonical" href="{{ app.root }}insurance-services/boat-and-yacht/full-coverage">
    {% endif %#}
{% endblock %}
{% block css %}
    <!-- TrustBox script -->
    <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
    <!-- End TrustBox script -->
     {{encore_entry_link_tags('trustpilotWidgetsCSS')}}
    {{encore_entry_link_tags('animationPageLoaderCSS')}}
     {{encore_entry_link_tags('boatFullCoverageCSS')}}

    <style type="text/css">
        select.form-control {
            height: 36px !important;
        }

        select.form-control {
            height: 36px !important;
            font-size: 17px;
        }

        input.form-control {
            height: 36px !important;
            font-size: 17px;
        }
        li.benefits {
            font-style: normal;
            font-size: medium;
        }
        div.tab-content {
            padding: 12px;
        }        
        .nova-tabs {
            margin-top: 10px;
            font-size: medium;
            margin-bottom: 10px;
        }
        .img-fluid{            
            border-radius: 3px;
        }
        .card{
            border-top: 5px solid #ff9800;
            box-shadow: 0 5px 5px rgb(0 0 0 / 50%);
        }    
        .en-label{
            font-weight: bolder;
        }
        .es-label{
            font-style: italic;
            font-size: smaller;
            /*color: #f01111;*/
        }
        /* proud members */
        .proudMember-images{
            margin: 20px;
            position: relative;
        }
        .proudMember-images img{
            width: 150px !important;
            height: auto !important;
            object-fit: fill !important;
        }
        {#% if pageConfig == 'WOMAF' %#}
            .jumbotron.bfc {
                width:100%;
                position:relative;
                height:100vh !important;
                margin: 0 !important
        }
            #layer_banner{
            width: 100%;
            height: 100vh !important;
            position: relative;
            background-color: rgba(0, 0, 0, 0.4);
        }
        {#% else %#}
            .jumbotron.bfc {
                width:100%;
                position:relative;
               /* margin-top: 133px;*/
                height:calc(100vh - 133px);
            }
            #layer_banner{
            width: 100%;
            height: calc(100vh - 133px);
            position: relative;
            background-color: rgba(0, 0, 0, 0.4);
        }
        {#% endif %#}
        .video-responsive {
            overflow:hidden;
            padding-bottom:400px;
            position:relative;
            height:0;
            border-radius: 10px;
        }
         #banner_full_coverage{
            position:absolute;
            width: 100%;
            height:100%;
            object-fit:cover;
        }
        .video-responsive iframe{
            left:0;
            top:0;
            height:100%;
            width:100%;
            position:absolute;
            display: block
        }
        
        @media(max-width: 992px){
            .jumbotron.bfc{
                margin-top: 113px;
                height:calc(100vh - 113px);
            }
            #layer_banner{
                height:calc(100vh - 113px);
            }
        }
        @media(max-width: 576px){
            .jumbotron.bfc{
                align-items:start !important;
            }
             .jumbotron-text{
                top:-120px;
            }
        }
    </style>
    <style>
        .lead {
            font-size: x-large;
            font-weight: 200;
        }.featurette-divider {
            margin: 5rem 0;
            /* Space out the Bootstrap <hr> more */
        }.featurette-heading {
            font-weight: 300;
            line-height: 1;
            letter-spacing: -.05rem;
        }@media (min-width: 40em) {
            .featurette-heading {
                font-size: 50px;
            }
        }@media (min-width: 62em) {
            .featurette-heading {
                margin-top: 7rem;
            }
        }p{
            font-size: medium;
            padding: 0px;
            margin-left: 0px;
            margin-right: 0px;
        }
    </style>
{% endblock %}
{% block body %}
     <section class="form mt-4" id="main">
        <div class="container" id="section-content-form">
            <div class="row">
                <div class="col-12">
                    <div class="card">                        
                        <div class="card-body">                            
                            {% if distributor != "" %}
                            <input type="hidden" id="isDistributor" value="true">
                                <div class="text-center" data-page-config="WOMAF.FANDL.WMAF">
                                    <img id="distributorLogo" src="" class="img-flex">
                                </div>
                            {% else %}
                                <input type="hidden" id="isDistributor" value="false">
                            {% endif %}
                            {# solo se visualiza si la bandera para ver solo el form esta en false #}
                            {# {% if pageConfig == 'WMAF' or pageConfig == 'WOMAF' %}
                            {{ include('frontend/update/snippets/trust-pilot-ranking.twig', { option : '' } ) }}
                            {% endif %} #}
                            <form action="" id="form-boat-full-coverage" method="post" name="formBFC">
                                <h2 class="text-center mt-2 mb-0">Get your Mexican Boat Full Coverage</h2>                                
                                <hr class="mt-3 mb-3">
                                <div class="row m-3">
                                    <div class="alert alert-light text-center" style="font-size: 16px;"><span style="font-weight:700; color: red;">NOTICE :</span> <b>All vessel operators must have a current "Libreta de Mar" from Mexico or a government issued boater's license from the operator's home state or country.</b></div>
                                </div>
                                <h3 class="mt-1 mb-2 ml-3">Customer Information</h3>
                                <div class="line-orange mt-0"></div>
                                <div class="row">
                                    <div class="col-12">
                                        <small class="officialNameSmall">Alert: You must use your complete name as it appears on your passport</small><br>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-4">
                                        <label class="en-label">Owner Type / </label>
                                        <label class="es-label">Tipo de cliente</label>
                                        <span class="required">*</span> {{ form_widget(form.ownerType,{'attr': {'class': 'form-control quote-field'} } ) }}
                                    </div>
                                    {# person fields #}
                                    <div class="col-md-4 content-person">
                                        <label class="en-label">First name / </label>
                                        <label class="es-label">Nombre</label>
                                        <span class="required">*</span> {{ form_widget(form.firstName,{'attr': {'class': 'form-control quote-field','placeholder': 'First Name'} } ) }}
                                    </div>
                                    <div class="col-md-4 content-person">
                                        <label class="en-label">Last name / </label>
                                        <label class="es-label">Apellido</label>
                                        <span class="required">*</span> {{ form_widget(form.lastName,{'attr': {'class': 'form-control quote-field','placeholder': 'Last Name'} } ) }}
                                    </div>
                                    <div class="col-md-4 content-person">
                                        <label class="en-label">Birthday / </label>
                                        <label class="es-label">Fecha de nacimiento</label>
                                        <span class="required">*</span> {{ form_widget(form.birthday,{'attr': {'class': 'form-control quote-field','placeholder': 'mm/dd/yyyy', 'maxlength': '10', 'oninput': 'formatDate(this)'} } ) }}
                                    </div>
                                    {# company fields #}
                                    <div class="col-md-4 content-company d-none">
                                            <label class="en-label">Representative First name / </label>
                                            <label class="es-label">Nombre del representante</label>
                                            <span class="required">*</span> {{ form_widget(form.representativeFirstName,{'attr': {'class': 'form-control quote-field','placeholder': 'First Name'} } ) }}
                                        </div>
                                        <div class="col-md-4 content-company d-none">
                                            <label class="en-label">Representative Last name / </label>
                                            <label class="es-label">Apellido del representante</label>
                                            <span class="required">*</span> {{ form_widget(form.representativeLastName,{'attr': {'class': 'form-control quote-field','placeholder': 'Last Name'} } ) }}
                                        </div>
                                        <div class="col-md-4 content-company d-none">
                                            <label class="en-label">Company Name / </label>
                                            <label class="es-label">Nombre de la compañia</label>
                                            <span class="required">*</span> {{ form_widget(form.companyName,{'attr': {'class': 'form-control quote-field','placeholder': 'Company Name'} } ) }}
                                        </div>
                                        <div class="col-md-4 content-company d-none">
                                            <label class="en-label">Constitution Date / </label>
                                            <label class="es-label">Fecha de constitucion</label>
                                            <span class="required">*</span> {{ form_widget(form.constitutionDate,{'attr': {'class': 'form-control','placeholder': 'mm/dd/yyyy'} } ) }}
                                        </div>
                                        <div class="col-md-4 content-company d-none">
                                            <label class="en-label">Company RFC / </label>
                                            <label class="es-label">RFC de la compañia</label>
                                            <span class="required">*</span> {{ form_widget(form.companyRFC,{'attr': {'class': 'form-control quote-field','placeholder': 'Company RFC'} } ) }}
                                        </div>
                                        <div class="col-md-4 content-company d-none">
                                            <label class="en-label">Turning Company / </label>
                                            <label class="es-label">Giro de la empresa</label>
                                            <span class="required">*</span> {{ form_widget(form.turningCompany,{'attr': {'class': 'form-control quote-field','placeholder': 'Turning Company'} } ) }}
                                        </div>
                                    <div class="col-md-4">
                                        <label class="en-label">Street / </label>
                                        <label class="es-label">Calle</label>
                                        <span class="required">*</span> {{ form_widget(form.address,{'attr': {'class': 'form-control quote-field','placeholder': 'Street'} } ) }}
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-4">
                                        <label class="en-label">City / </label>
                                        <label class="es-label">Ciudad</label>
                                        <span class="required">*</span> {{ form_widget(form.city,{'attr': {'class': 'form-control quote-field','placeholder': 'City'} } ) }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="en-label">State / </label>
                                        <label class="es-label">Estado</label>
                                        <span class="required">*</span> {{ form_widget(form.state,{'attr': {'class': 'form-control quote-field','placeholder': 'State'} } ) }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="en-label">Zip code / </label>
                                        <label class="es-label">Codigo postal</label>
                                        <span class="required">*</span> {{ form_widget(form.postalCode,{'attr': {'class': 'form-control quote-field','placeholder': 'Zip Code'} } ) }}
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-4">
                                        <label class="en-label">Country / </label>
                                        <label class="es-label">País</label>
                                        <span class="required">*</span> {{ form_widget(form.country,{'attr': {'class': 'form-control quote-field','placeholder': 'Country'} } ) }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="en-label">Phone # / </label>
                                        <label class="es-label">Teléfono</label>
                                        <span class="required">*</span> {{ form_widget(form.phone,{'attr': {'class': 'form-control quote-field phone-format','placeholder': '(000) 000-0000'} } ) }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="en-label">Email / </label>
                                        <label class="es-label">Correo electrónico</label>
                                        <span class="required">*</span> {{ form_widget(form.email,{'attr': {'class': 'form-control quote-field','placeholder': 'email@domain.com'} } ) }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="en-label">Nationality / </label>
                                        <label class="es-label">Nacionalidad</label>
                                        <span class="required">*</span> {{ form_widget(form.nationality,{'attr': {'class': 'form-control quote-field'} } ) }}
                                    </div>
                                    {% if distributor == "" %}  
                                    <div class="col-md-4">
                                        <label class="en-label">How do you hear about us? / </label>
                                        <label class="es-label">¿Como nos encontraste?</label>
                                        <span class="required">*</span> {{ form_widget(form.aboutUsList,{'attr': {'class': 'form-control quote-field'} } ) }}
                                        {# campo con el aboutUs #}
                                        {{ form_widget(form.reference) }}
                                    </div>
                                    <div class="col-md-4 d-none">
                                        <label class="en-label">Specify your reference/ </label>
                                        <label class="es-label">Especifique su referencia</label>
                                        <span class="required">*</span> {{ form_widget(form.auxAboutUs,{'attr': {'class': 'form-control quote-field'} } ) }}
                                    </div>
                                    {% else %}
                                    <div class="col-xl-4 col-xs-12 mb-3 d-none">
                                        {{ form_widget(form.aboutUsList, {value: 'Sales Representative','attr':{'class':'form-control quote-field'}} ) }}
                                        {{ form_widget(form.auxAboutUs, {value: distributor} ) }}
                                        {{ form_widget(form.reference) }}
                                    </div>
                                    {% endif %}
                                </div>
                                <h3 class="mt-4 mb-2 ml-3 get-your-quote-title">Get Your Quote</h3>                                
                                <div class="line-orange mt-0"></div>
                                <div class="row mt-3">
                                    <div class="col-md-4">
                                        <label class="en-label">Year built / </label>
                                        <label class="es-label">Año (not older than 20 years)</label>
                                        <span class="required">*</span> {{ form_widget(form.yearBuilt,{'attr': {'class': 'form-control quote-field','placeholder': 'Year Built'} } ) }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="en-label">Number of passengers / </label>
                                        <label class="es-label">Numero de pasajeros</label>
                                        <span class="required">*</span> {{ form_widget(form.passengersNumber,{'attr': {'class': 'form-control quote-field number-format','placeholder': 'Number of Passengers'} } ) }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="en-label">Number of crew / </label>
                                        <label class="es-label">Numero de tripulantes</label>
                                        <span class="required">*</span> {{ form_widget(form.crewNumber,{'attr': {'class': 'form-control quote-field number-format','placeholder': 'Number of Crew'} } ) }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="en-label">Overland Hauling / </label>
                                        <label class="es-label">Traslado terrestre</label><span class="required">*</span> {{ form_widget(form.landTransfer,{'attr': {'class': 'form-control quote-field'} } ) }}
                                    </div>
                                    <div class="col-md-4 towing-item d-none">
                                        <label class="en-label">Trailer Manufacturer / </label>
                                        <label class="es-label">Marca del remolque</label>
                                        <span class="required">*</span> {{ form_widget(form.towingMake,{'attr': {'class': 'form-control quote-field','placeholder': 'Trailer Manufacturer'} } ) }}
                                    </div>
                                    <div class="col-md-4 towing-item d-none">
                                        <label class="en-label">Trailer VIN # / </label>
                                        <label class="es-label">Numero de serie del remolque</label>
                                        <span class="required">*</span> {{ form_widget(form.towingSerial,{'attr': {'class': 'form-control quote-field','placeholder': 'Trailer VIN #'} } ) }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="en-label">Navigation Limits / </label>
                                        <label class="es-label">Limites de navegacion</label>
                                        <span class="required">*</span> {{ form_widget(form.navLimits,{'attr': {'class': 'form-control quote-field'} } ) }}
                                    </div>
                                    <div class="col-md-6">
                                        <label class="en-label">Medical per Member of the crew / </label>
                                        <label class="es-label">Gastos m&eacute;dicos por tripulante</label><span class="required">*</span> {{ form_widget(form.medicalCrew,{'attr': {'class': 'form-control quote-field','placeholder': '$0.00 USD'} } ) }}
                                    </div>
                                    <div class="col-md-6">
                                        <label class="en-label">Medical per passenger / </label>
                                        <label class="es-label">Gastos m&eacute;dicos por pasajero</label><span class="required">*</span> {{ form_widget(form.medicalPassenger,{'attr': {'class': 'form-control quote-field','placeholder': '$0.00 USD'} } ) }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="en-label">Personal effects value /</label><br>
                                        <label class="es-label">Efectos personales</label>
                                        <span style="color: blue">(Opcional)</span> {{ form_widget(form.personalEffects,{'attr': {'class': 'form-control quote-field','placeholder': '$0.00 USD'} } ) }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="en-label">Boat value / </label>
                                        <label class="es-label">Valor del casco</label>
                                        <span class="required">*</span> {{ form_widget(form.boatValue,{'attr': {'class': 'form-control quote-field number-format','placeholder': '$0.00 USD'} } ) }}
                                    </div>
                                    <div class="col-md-4 towing-item d-none">
                                        <label class="en-label">Trailer Value / </label>
                                        <label class="es-label">Valor del remolque</label>
                                        <span class="required">*</span> {{ form_widget(form.remolque,{'attr': {'class': 'form-control quote-field number-format','placeholder': '$0.00 USD'} } ) }}
                                    </div>
                                     <div class="col-md-4">
                                        <label class="en-label">auxiliary boat / </label>
                                        <label class="es-label">Bote auxiliar</label>
                                        <span style="color: blue">(Opcional)</span> {{ form_widget(form.embarcacionAux,{'attr': {'class': 'form-control quote-field number-format','placeholder': '$0.00 USD'} } ) }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="en-label">Liability / </label>
                                        <label class="es-label">Responsabilidad civil</label>
                                        <span class="required">*</span> {{ form_widget(form.liability,{'attr': {'class': 'form-control quote-field number-format','placeholder': '$0.00 USD'} } ) }}
                                    </div>
                                    <div class="col-md-4">
                                        <label class="en-label">Type of use / </label>
                                        <label class="es-label">Uso del barco</label>
                                        <span class="required">*</span> {{ form_widget(form.typeUse,{'attr': {'class': 'form-control quote-field','placeholder': 'Type of Use'} } ) }}
                                    </div>
                                    <div class="col-md-4 d-none">
                                        <label class="en-label">New Adquisitions / </label>
                                        <label class="es-label">Nuevas adquisiciones</label> <span style="color: blue">(Opcional)</span> {{ form_widget(form.newAdquisitions,{'attr': {'class': 'form-control quote-field','placeholder': '$0.00 USD', 'type': 'number'} } ) }}
                                    </div>
                                    <div class="col-md-12 mt-2 d-none">
                                        <span style="color: orange;"><b>New Adquisitions</b>: Maximum 15% of the insured amount of the Hull / Máximo 15% de la suma asegurada de Casco</span>
                                    </div>
                                    <div class="col-lg-12 text-center" style="margin:20px 0;">
                                        <button class="btn btn-novamar" type="button" id="getQuote" @click="getQuote()">Quote</button>
                                    </div>
                                </div>
                                <div class="choose-your-quote-section" v-show="Object.keys(quoteResponse).length > 0">
                                    <div class="col-12 title-header-quote-section">
                                        <h2 class="">Select your quote!</h2>
                                        <div class="line-orange-sm mt-0"></div>
                                        <button type="button" class="btn btn-novamar-outline" @click="recalculate()">Recalculate</button>
                                    </div>
                                    <div class="content-companies-quotes">
                                        <div class="quote-item" v-for="(quote, company) in quoteResponse" :key="company + '-quote'">
                                            <div class="company-logo">
                                                <div class="content-logo">
                                                    <img :src="'/img/companies/' + company + '.png'" alt="company logo">
                                                </div>
                                            </div>
                                            <div class="company-premiums-section">
                                                <template v-if="quote.error == false">
                                                    <div class="element totalPremium">[[quote.totalPremium | currencyFormat]] <span class="small-text" style="color: #FF9800 !important;">USD</span></div>
                                                    <div class="element text-grey">1 Year</div>
                                                    <div class="element" v-show="selectedCompany != company"><button type="button" class="btn btn-select-quote" @click="selectQuote(company, quote)">Select quote</button></div>
                                                    <div class="element" v-show="selectedCompany == company"><span class="glyphicon glyphicon-ok-sign checked-plan"></span></div>
                                                    <button type="button" class="btn-view-coverage" @click="viewCoverages(company, quote)">View coverages</button>
                                                </template>
                                                <template v-else>
                                                    <span class="element text-grey" v-html="quote.message"></span>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="show-coverage-premiums d-none">
                                    <template v-if="Object.keys(showCoveragesData).length > 0">
                                        <div class="show-coverage-company">
                                            <img :src="'/img/companies/' + showCoveragesData.company + '.png'" alt="company logo">
                                        </div>
                                        <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Coverages</th>
                                                    <th scope="col">SUM INSURED</th>
                                                    <th scope="col">DEDUCTIBLE</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-for="coverage in showCoveragesData.coverageData" :key="showCoveragesData.company + coverage.coverage">
                                                    <td>[[coverage.coverage]]</td>
                                                    <td>[[coverage.sumInsured | sumInsuredFormat]]</td>
                                                    <td>[[coverage.deductible | deductibleFilter]]</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <button type="button" class="btn btn-novamar" @click="closeShowcoverages()">Go Back</button>
                                    </template>
                                </div>
                                <div class="section-form" v-if="selectedCompany != ''">
                                    <div class="section-form-title">
                                        <template v-if="selectedCompany == 'atlas'">
                                            <h3 class="mt-4 mb-2 ml-3"><b style="color: red;font-size: 20px;">Atlas Form</b> (Boat information)</h3>                                
                                        </template>
                                        <template v-if="selectedCompany == 'bxmas'">
                                            <h3 class="mt-4 mb-2 ml-3"><b style="color: green;font-size: 20px;">BxMas Form</b> (Boat information)</h3>
                                        </template>
                                        <button type="button" class="btn btn-novamar-outline" @click="closeFormSection()">Close form section</button>
                                    </div>
                                    <div class="line-orange mt-0"></div>
                                    <div class="row mt-3">
                                        <div class="col-md-4">
                                            <label class="en-label">Boat Name / </label>
                                            <label class="es-label">Nombre del barco</label>
                                            <span class="required">*</span> {{ form_widget(form.boatName,{'attr': {'class': 'form-control', 'placeholder': 'Boat Name'} } ) }}
                                        </div>
                                        <div class="col-md-4">
                                            <label class="en-label">Port of registration / </label>
                                            <label class="es-label">Puerto de registro</label>
                                            <span class="required">*</span> {{ form_widget(form.registrationPort,{'attr': {'class': 'form-control','placeholder': 'Port of Registration'} } ) }}
                                        </div>
                                        <div class="col-md-4">
                                            <label class="en-label">Registration Number/ </label>
                                            <label class="es-label">Numero de registro</label>
                                            <span class="required">*</span> {{ form_widget(form.registrationNumber,{'attr': {'class': 'form-control','placeholder': 'Registration Number'} } ) }}
                                        </div>
                                        <div class="col-md-4">
                                            <label class="en-label">Boat Type/ </label>
                                            <label class="es-label">Typo de embarcacion</label>
                                            <span class="required">*</span>
                                            <template v-if="selectedCompany == 'atlas'">
                                                {{ form_widget(form.boatType,{'attr': {'class': 'form-control','placeholder': 'Boat Type'} } ) }}
                                            </template>
                                            <template v-else-if="selectedCompany == 'bxmas'">
                                                {{ form_widget(form.boatTypeBxMas,{'attr': {'class': 'form-control','placeholder': 'Boat Type'} } ) }}
                                            </template>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="en-label">Boat Flag/ </label>
                                            <label class="es-label">Bandera</label>
                                            <span class="required">*</span> {{ form_widget(form.boatFlag,{'attr': {'class': 'form-control','placeholder': 'Boat Flag'} } ) }}
                                        </div>
                                        <div class="col-md-4">
                                            <label class="en-label">Home port in mexico / </label>
                                            <label class="es-label">Puerto base</label>
                                            <span class="required">*</span> {{ form_widget(form.mexicoPort,{'attr': {'class': 'form-control','placeholder': 'Home Port in Mexico'} } ) }}
                                        </div>
                                        <div class="col-md-4">
                                            <label class="en-label">Boat manufacturer / </label>
                                            <label class="es-label">Marca</label>
                                            <span class="required">*</span> {{ form_widget(form.boatManufacturer,{'attr': {'class': 'form-control','placeholder': 'Boat Manufacturer'} } ) }}
                                        </div>
                                        <div class="col-md-4">
                                            <label class="en-label">Boat model / </label>
                                            <label class="es-label">Modelo</label>
                                            <span class="required">*</span> {{ form_widget(form.boatModel,{'attr': {'class': 'form-control','placeholder': 'Boat Model'} } ) }}
                                        </div>
                                        <div class="col-md-4">
                                            <label class="en-label">Boat Serial Number / </label>
                                            <label class="es-label">Numero de serie</label>
                                            <span class="required">*</span> {{ form_widget(form.boatSerialNumber,{'attr': {'class': 'form-control','placeholder': 'Boat Serial Number'} } ) }}
                                        </div>
                                        <div class="col-md-4">
                                            <label class="en-label">Hull Type / </label>
                                            <label class="es-label">Tipo de casco</label>
                                            <span class="required">*</span> {{ form_widget(form.hullType,{'attr': {'class': 'form-control','placeholder': 'Hull Type'} } ) }}
                                        </div>
                                        <div class="col-md-4">
                                            <label class="en-label">Boat Length / </label>
                                            <label class="es-label">Eslora</label>
                                            <span class="required">*</span> {{ form_widget(form.boatLength,{'attr': {'class': 'form-control','placeholder': 'Boat Length'} } ) }}
                                        </div>
                                        <div class="col-md-4">
                                            <label class="en-label">Boat Beam / </label>
                                            <label class="es-label">Manga</label>
                                            <span class="required">*</span> {{ form_widget(form.boatBeam,{'attr': {'class': 'form-control','placeholder': 'Boat Beam'} } ) }}
                                        </div>
                                    </div>
                                    <div class="row mt-4 mb-4">
                                        <div class="col-md-4">
                                            <label class="en-label">Engine Manufacturer / </label>
                                            <label class="es-label">Marca del motor</label>
                                            <span class="required">*</span> {{ form_widget(form.engineManufacturer,{'attr': {'class': 'form-control','placeholder': 'Engine Manufacturer'} } ) }}
                                        </div>
                                        <div class="col-md-4">
                                            <label class="en-label">Engine Model / </label>
                                            <label class="es-label">Modelo del motor</label>
                                            <span class="required">*</span> {{ form_widget(form.engineModel,{'attr': {'class': 'form-control','placeholder': 'Engine Model'} } ) }}
                                        </div>
                                        <div class="col-md-4">
                                            <label class="en-label">Engine Serial / </label>
                                            <label class="es-label">Serie del motor</label>
                                            <span class="required">*</span> {{ form_widget(form.engineSerial,{'attr': {'class': 'form-control','placeholder': 'Engine Serial'} } ) }}
                                        </div>
                                        <div class="col-md-4">
                                            <label class="en-label">Number of Engines / </label>
                                            <label class="es-label">Numero de motores</label>
                                            <span class="required">*</span> {{ form_widget(form.numberOfEngines,{'attr': {'class': 'form-control number-format','placeholder': 'Number of Engines'} } ) }}
                                        </div>
                                        <div class="col-md-4">
                                            <label class="en-label">Engine HP / </label>
                                            <label class="es-label">Caballos del motor</label>
                                            <span class="required">*</span> {{ form_widget(form.engineHp,{'attr': {'class': 'form-control','placeholder': 'Engine HP'} } ) }}
                                        </div>
                                        <div class="col-md-4">
                                            <label class="en-label">Engine Type / </label>
                                            <label class="es-label">Tipo de motor</label>
                                            <span class="required">*</span> {{ form_widget(form.engineType,{'attr': {'class': 'form-control','placeholder': 'Engine Type'} } ) }}
                                        </div>
                                    </div>
                                    <div class="row mt-4 mb-4">
                                        <div class="col-md-4">
                                            <label class="en-label">Marina / </label>
                                            <label class="es-label">Marina</label>
                                            <span class="required">*</span> {{ form_widget(form.marina,{'attr': {'class': 'form-control'} } ) }}
                                        </div>
                                        <div class="col-md-4 marina_info d-none">
                                            <label class="en-label">Marina Address / </label>
                                            <label class="es-label">Direccion de la marina</label>
                                            <span class="required">*</span> {{ form_widget(form.marinaAddress,{'attr': {'class': 'form-control','placeholder': 'Marina Address'} } ) }}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4" v-if="selectedCompany == 'bxmas'">
                                            <label class="en-label">Owner Experience /</label><br>
                                            <label class="es-label">Experiencia del propietario</label>
                                            <span class="required">*</span> {{ form_widget(form.ownerExperience,{'attr': {'class': 'form-control'} } ) }}
                                        </div>
                                        <div class="col-md-4">
                                            <label class="en-label">Accident rate last five years /</label><br>
                                            <label class="es-label">Siniestralidad en los últimos 5 años</label>
                                            <span class="required">*</span> {{ form_widget(form.accidentRateLastFiveYears,{'attr': {'class': 'form-control'} } ) }}
                                        </div>
                                        <div class="col-md-4">
                                            <label class="en-label">The date they want to start coverage /</label><br>
                                            <label class="es-label">La fecha en la que desean comenzar la cobertura</label>
                                            <span class="required">*</span> {{ form_widget(form.startDate,{'attr': {'class': 'form-control datepicker', 'readonly' : 'readonly', 'placeholder': 'mm/dd/YYYY' }} ) }}
                                        </div>
                                    </div>
                                </div>
                                <div class="row m-3">
                                    <div class="col-md-12 text-center">
                                        <button v-if="selectedCompany != ''" v-show="onlyOnePetition == true" class="btn btn-novamar" type="button" id="submit" @click="sendRequest()">Submit</button>
                                    </div>
                                </div>
                                <input type="hidden" name="form[product]" value="boat-full-coverage">
                                <input type="hidden" name="form[saleChannel]" value="{{saleChannel}}">
                                <input type="hidden" name="form[distributor]" value="{{distributor}}">
                                <input type="hidden" name="form[distributorLink]" value="{{distributor}}">
                                <input type="hidden" name="form[prospect]" id="form_prospect" value="">
                                <input type="hidden" name="form[campaign]" id="form_campaign" value="{{campaign}}">                                
                                <input type="hidden" name="form[referer]" id="form_referer" value="{{referer}}">
                                <input type="hidden" name="form[source]" id="form_source" value="{{source}}">
                                <input type="hidden" name="form[quoteResponse]" id="form_quoteResponse" value="">
                                <input type="hidden" name="form[quoteNumber]" id="form_quoteNumber">
                                <input type="hidden" name="form[id_client]" id="form_id_client" value="">
                                {# bxmas fields #}
                                {{ form_widget(form.endDate) }}
                                {{ form_widget(form.lossPayee) }}    
                                {{ form_widget(form.currency) }}    
                                {{ form_widget(form.subscriptionDate) }}    
                                {{ form_widget(form.agente) }}
                            </form>
                            <div id="loading" class="text-center" v-show="onlyOnePetition == false">
                                <img src="{{asset('/img/load75x75.gif')}}">
                            </div>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>    
    <!-- Modal -->
    <div class="modal fade" id="requestCompleteModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="col-12 text-center mt-4 m-b-4"id="response"></div>
                    <div class="col-12 text-center mt-4 m-b-4">
                        <!-- TrustBox widget - Review Collector -->
                            <div class="trustpilot-widget d-none" data-locale="en-US" data-template-id="56278e9abfbbba0bdcd568bc" data-businessunit-id="625ed98d8abda258a37e66db" data-style-height="52px" data-style-width="100%">
                                <a href="https://www.trustpilot.com/review/novamarinsurance.com.mx" target="_blank" rel="noopener">Trustpilot</a>
                            </div>
                        <!-- End TrustBox widget -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-ligth" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal de mantenimiento -->
    <div class="modal fade" id="maintenanceNotificationModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">In maintenance</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 text-center">
                            <span style="font-size: 20px;" class="text-center">We are working on this form, please try again later or send an email to <a href="mailto:boat@novamar.net">Pablo of Novamar</a></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-ligth" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
   <section>   
        <div class="container mt-5">     
            {#% if pageConfig != 'OF' %#}
                <div class="row" data-page-config="WOMAF.FANDL.WMAF">
                    <div class="col-12">
                        <h4 class="pb-2 border-bottom">Proud Member of</h4>
                    </div>
                    <div class="col-12 d-flex justify-content-center align-items-center">
                        <a href="http://ammtac.com/es/" target="blank"><div class="proudMember-images"><img loading="lazy" src="{{asset('img/AMMT_nuevo_logo.png')}}" alt="Mexico marina association"></div></a>
                    </div>
                </div> 
            {#% endif %}       
            {% if pageConfig != 'OF' and pageConfig != 'FANDL' %#} 
            <div class="row" data-page-config="WOMAF.WMAF">
                <div class="row">
                    <div class="col-12">
                        <h4 class="pb-2 border-bottom">Quality Coverage, Years of Experience</h4>                    
                    </div>
                    <div class="col-12 mt-2 mb-4">
                        <div class="video-responsive">
                            <iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/K-2KoXufsE8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div>
                    </div>
                    <div class="col-xl-6 col-12">
                        <h4 class="font-weight-bold">Types of Boat Insurance:</h4>
                        <p>
                        Quality Coverage, Years of Experience. When distinguishing between boat and yacht, we use boat to describe vessels up to 26 feet L.O.A. and yachts to describe vessels 27 feet L.O.A. and longer. Otherwise, we often use boats in a generic sense in reference to vessels which are not ships. While the specialty of writing insurance for recreational vessels is properly called providing yacht insurance, most people look for boat insurance. We offer several types of boat insurance, shown below.</p>
                    </div>
                    <div class="col-xl-6 col-12">
                        <div class="container">
                            <div class="row">
                                <div class="col-xl-6 col-6">
                                    <picture>
                                        <source type="image/webp" srcset="{{asset(imgProductsPath~'img-cards-content-2.webp')}}">
                                        <source type="image/jpeg" srcset="{{asset(imgProductsPath~'img-cards-content-2.jpg')}}">
                                        <img class="img-fluid" src="{{asset(imgProductsPath~'img-cards-content-2.jpg')}}" alt="Generic placeholder image">
                                    </picture>
                                </div>
                                <div class="col-xl-6 col-6">
                                    <picture>
                                        <source type="image/webp"srcset="{{asset(imgProductsPath~'bf-img-content.webp')}}">
                                        <source type="image/jpeg"srcset="{{asset(imgProductsPath~'bf-img-content.jpg')}}">
                                        <img class="img-fluid"src="{{asset(imgProductsPath~'bf-img-content.jpg')}}" alt="Generic placeholder image">
                                    </picture>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>            
                <div class="container">
                    <div class="row">
                        <div class="col-12 nova-tabs">            
                            <nav>
                                <div class="nav nav-tabs" role="tablist">
                                    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Hull Insurance</a>
                                    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Boat Liability Insurance</a>
                                </div>
                            </nav>
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                                    In Mexico, we offer <strong>coverage to vessels with any flag </strong>and our hull coverage insurance policies are underwritten with various Mexico domiciled and international insurance companies.<br>
                                    Ask us about our overland trucking risk coverage.
                                </div>
                                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                                    Mexico requires boats to have Mexico boat liability insurance coverage, just as it requires for cars. We provide this coverage through ABA Seguros. For vessels with yacht insurance written outside of Mexico, this Mexico boat liability coverage picks up in Mexican waters as your domestic liability insurance drops. Mexican authorities and courts accept liability coverage from only Mexican insurers as proof of civil financial responsibility in Mexico.
                                </div>
                            </div>
                        </div>
                    </div>                
                </div>        
                <div class="container">
                    <div class="row">
                        <div class="col-12 nova-tabs">
                            <nav>
                                <div class="nav nav-tabs" role="tablist">
                                    <a class="nav-item nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Service in English</a>
                                    <a class="nav-item nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Insurance for Mexican-Flagged Vessels</a>
                                </div>
                            </nav>
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                    <p>This page describes features of our Mexico boat insurance for any vessel. Full-coverage boat insurance in Mexico, underwriters by <strong>Atlas Seguros</strong>,<strong>CHUBB</strong>, <strong>HDI</strong> or <strong>Spheric</strong> is available for boats and yachts located anywhere in the country.</p>
                                    <p>Features of our yacht insurance for yachts with Mexico navigation needs</p>
                                    <div class="ml-3 container">
                                        <div class="row">
                                            <ul class="col-lg-6">
                                                <li class="benefits">Full hull coverage available</li>
                                                <li class="benefits">Repatriation expenses of crew</li>
                                                <li class="benefits">Third party liability</li>
                                                <li class="benefits">Third party property damage</li>
                                                <li class="benefits">Wreck removal</li>
                                            </ul>
                                            <ul class="col-lg-6">
                                                <li class="benefits">Net Losses due to Course Deviation for Medical Emergency</li>
                                                <li class="benefits">Medical coverage for passengers</li>
                                                <li class="benefits">Overland hauling coverage</li>
                                                <li class="benefits">Legal costs and expenses</li>
                                                <li class="benefits">Passenger medical expenses</li>
                                                <li class="benefits">Personal property loss or damage</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                    <p>Mexico boat insurance for Mexican vessels in:</p>
                                    <div class="row pl-5">
                                        <div class="col-xl-4">
                                            <ul>
                                                <li class="benefits">Acapulco</li>
                                                <li class="benefits">Cabo San Lucas</li>
                                                <li class="benefits">Cancún</li>
                                                <li class="benefits">Costa Alegre</li>
                                                <li class="benefits">Cozumel</li>
                                                <li class="benefits">Ensenada</li>
                                            </ul>
                                        </div>
                                        <div class="col-xl-4">
                                            <ul>
                                                <li class="benefits">Guaymas</li>
                                                <li class="benefits">Huatulco</li>
                                                <li class="benefits">Isla Navidad</li>
                                                <li class="benefits">La Paz</li>
                                                <li class="benefits">Manzanillo</li>
                                                <li class="benefits">Mazatlán</li>
                                                <li class="benefits"> Nuevo Vallarta</li>
                                            </ul>
                                        </div>
                                        <div class="col-xl-4">
                                            <ul>                                    
                                                <li class="benefits">Puerto Peñasco</li>
                                                <li class="benefits">Puerto Vallarta</li>
                                                <li class="benefits">Rocky Point</li>
                                                <li class="benefits">San Carlos</li>
                                                <li class="benefits">San Jose del Cabo</li>
                                                <li class="benefits">Zihuatanejo</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>                
                    <div class="row">                                        
                        <div class="col-lg-3 col-12 text-center">
                            <picture>
                                <source type="image/webp" srcset="{{asset(imgCompaniesPath~'atlas.webp')}}">
                                <source type="image/png" srcset="{{asset(imgCompaniesPath~'atlas.png')}}">
                                <img class="img-flex img-fluid" src="{{asset(imgCompaniesPath~'atlas.png')}}"  style="max-height:95px;"  alt="insurance company logo" >
                            </picture>
                        </div>
                        <div class="col-lg-3 col-12 text-center">
                            <picture>
                                <source type="image/webp" srcset="{{asset(imgCompaniesPath~'chubb.webp')}}">
                                <source type="image/png" srcset="{{asset(imgCompaniesPath~'chubb.png')}}">
                                <img class="img-flex img-fluid" src="{{asset(imgCompaniesPath~'chubb.png')}}" style="max-height:100px;" alt="insurance company logo">
                            </picture>
                        </div>
                        <div class="col-lg-2 col-12 text-center" style="display: flex;justify-content: center; align-items: center;">
                            <picture>
                                <source type="image/webp" srcset="{{asset(imgCompaniesPath~'hdi-hd.webp')}}">
                                <source type="image/png" srcset="{{asset(imgCompaniesPath~'hdi-hd.png')}}">
                                <img class="img-flex img-fluid" src="{{asset(imgCompaniesPath~'hdi-hd.png')}}"  style="max-height:115px;"  alt="insurance company logo"  >
                            </picture>
                        </div>
                        <div class="col-lg-2 col-12 text-center">
                            <picture>
                                <source type="image/webp" srcset="{{asset(imgCompaniesPath~'spheric.webp')}}">
                                <source type="image/png" srcset="{{asset(imgCompaniesPath~'spheric.png')}}">
                                <img class="img-flex img-fluid" src="{{asset(imgCompaniesPath~'spheric.png')}}" style="max-height:100px;" alt="insurance company logo" >
                            </picture>
                        </div>
                        <div class="col-lg-2 col-12 text-center">
                            <img class="img-flex" src="{{asset(imgCompaniesPath~'bxmas.png')}}" style="max-height:100px;" alt="insurance company logo" >
                        </div>
                    </div>
                </div> 
            </div>  
            {#% endif %#}             
        </div>
    </section>     
{% endblock %}
{% block scripts %}
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    {% if app.environment != 'dev' %}    
        <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
        {% else %}
        <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
    {% endif %}
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&key=AIzaSyArJXJ0pSlScH82NkwMdz5rwJs1fKZWYps" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
    {{script_tag("libraries/intl-tel-input.js")}}
    {{script_tag("components/tools.js")}}
    {{script_tag('libraries/sweet-alert.js') }}
    {{script_tag("libraries/jquery-validate.js")}}
    {{script_tag('components/jquery-number.js') }}
    {{script_tag('libraries/jquery-mask.js') }}
    {{script_tag("components/nationality-list.js")}}
    {{script_tag("components/about-us-list.js")}}
    {{script_tag("components/prospect.js")}}
    {{script_tag("products/boat-full-coverage.js")}}
     <script>
        const distributor = "{{ distributorLink }}"
        let distObj = {
            pageConfig: "{{ viewOptions }}",
            distLogo: "",
            distLink: "",
            distCode: "",
        }
        const prod = "BFC"
    </script>
    {{script_tag('components/page-config.js')}}
{% endblock %}