{% extends 'base.html.twig' %}
{% block title %}Boat Liability - NIS{% endblock %}
{% block stylesheets %} 
	{{encore_entry_link_tags('stepyCSS')}}
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	 
	<style type="text/css">
		.stepy-titles li {
		    font-size: 18px;
		    padding: 15px;
		    width: 33.33%;
		    text-align: center;
		}
		table{
			width: 100%;
            border-collapse: collapse;
		}
		a{
            text-decoration: none;
		}
		.hide{
			display: none;
		}
		.current-step {
			transform: scale(1.05);
			border-radius: 5px; /* Bordes curvados */
			border: 1px solid #ccc;
		}
		.policy-term-container:hover{
			transform: scale(1.05);
			transition: transform 0.3s ease, box-shadow 0.3s ease;
		}
		.default-input{
			margin:auto;
			width: auto;
			height:auto;
			box-shadow: none !important;
		}
		.show-price{font-size: 26px;}
		td, th {padding: 5px 5px;}
		#form_optionalState{display:none;}
		.price-valide span.invalid{position: absolute; margin-top: -15px;}
		#cc_loader{display: none;}
		#cc_response_container{display: none;height:60px;}
		.policy-term-container{border:2px solid #ccc;padding:10px 0px 10px 0px;margin-bottom: 15px;}
		.policy-term-container:hover{border-color: #009688;}
		.tender1, .tender2, .tender3{display: none;}
		.plan{font-size: 22px;}
		#fullLoading{ width: 100%; height: 100%; position: fixed; z-index: 9999; top: 0; background-color: rgba(0,0,0,0.4); padding-top: 49vh; text-align: center;}
		#fullLoading > img{ background-color: #f7f7f7; padding: 10px; border-radius: 50px; box-shadow: 1px 1px 100px 1px; }
		{% if userData.role == "ROLE_USER_US" %}
			main{padding-left: 0px !important;}
		{% endif %}
	</style>
{% endblock %}
{% block body %}
	{{ include("mx/nav_menu.twig", {option:''}) }}

	<div id="fullLoading" class="hide">
		<img class="activator" src="{{asset('/images/load75x75.gif')}}">
	</div>
	{{ include('mx/forms/boat-liability-form-component.html.twig') }}
	
	{# modal para la verificacion de los datos del cliente #}
	{{ include('mx/modals/validate-client-info-modal.html.twig') }}
	{{ include('mx/modals/incorrect-renewal-alert-modal.twig') }}
	{{ include('components/ecommerce-mit.twig') }}
{% endblock %}

{% block  javascripts %}		
	<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.js"></script>
    {% endif %}

	<script  type="text/javascript" src="{{asset('js/main.js')}}" defer></script>
	<script  type="text/javascript" src="{{asset('js/libraries/jquery-validate.js')}}" defer></script>
	<script type="text/javascript" src="{{asset('js/complements/jquery.stepy.min.js')}}" defer></script>
	<script src="{{asset('js/complements/validInformationService.js')}}" defer></script>
	<script src="{{asset('js/complements/about-us-list.js')}}" defer></script>	
	<script src="{{asset('js/products/boat-liability.js')}}" defer></script>	
	<script type="text/javascript" src="{{asset('js/complements/mitPay.js')}}" defer></script>
	<script type="text/javascript" defer>
		$(function(){
			 
			try {
				$('option:contains("'+$("#form_marinaName").val()+'")', '#form_marina')[0].selected = true;

			} catch (error) {

			}			
			wizard();
			initForm();

			$('.datepicker-boat-liability').datepicker({
				minDate: datePickerValues.initialDate,
				maxDate: datePickerValues.finalDate,
				format:'mm/dd/yyyy',
			});



			$("#form_policyTerm_0, #form_policyTerm_1, #form_policyTerm_2, #form_policyTerm_3, #form_policyTerm_4, #form_policyTerm_5").click(function() {
		        var value = $("input:radio[name='form[policyTerm]']:checked").val();

		        if (value > 5) {
		            var inputRadio = $(this).parent();
		            $("#form_price").val(value);
		            $("#quote-price").html("$" + value + " "+($("#form_currency").val() == 'Dollars' ? 'USD' : "MXN"));
		            $("#form_plan").val(inputRadio.find('b.blue-text').text());
		        }

		    });

			$("#form_currency, #form_boatTerm, #form_boatType, #form_yearBuilt").change(function() {
		        $("#form_price").val('');
		        $("input:radio[name='form[policyTerm]']").attr('checked', false);
		       quote();
			});

			$("#form_tender").change(function(){
				tender();
			});
			 templateDev();
		   	quote();
		   	loadMarinas();
			
			tender();
			validate();
			
			$("#quote-price").html(($("#form_price").val()!="" ? "$" + $("#form_price").val() + " " + ($("#form_currency").val() == 'Dollars' ? 'USD' : "MXN") : 'New Certificate'));
			$("#form_price").val('');
			$("#certificate-number").html("{{ certificate_number }}" != 'start' ? "{{ certificate_number }}" : 'New Certificate');
			//Esconder las tarjetas en ceros
			$(".selectCoverageLabel").addClass("hide");
			hideAllPrices();

			$("#downloadQuoteButton").click(function(){
		        if(validExportSelection())
		        {
		            generateQuote("view");
		        }
		    });

		    $("#sendQuoteButton").click(function(){
		        if(validExportSelection())
		        {
		            generateQuote("send");
		        }
		    });
			//si no hay aboutus cargado
			aboutUsClass.aboutUswithDataInProducts($("#form_aboutUs").val())
			if(!haveAboutUs){
				aboutUsClass.setEvent();
				$("#form_aboutUsList").material_select();
			}

			$("#payWithCreditCard").click(function(){
                $("#form_whitOutCharge").val("false");
                $("#boat-liability-form-buttons-1").find("a.button-next").trigger("click");
            });

            if($("#issueWithOutCharge").length > 0)
            {
                $("#issueWithOutCharge").click(function(){
                    $("#form_whitOutCharge").val("true");
                    $("#boat-liability-form-buttons-1").find("a.button-next").trigger("click");
                });
            }
		});
	</script>
	<script type="text/javascript">
    	(function(c,l,a,r,i,t,y){
    	    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
    	    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
    	    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    	})(window, document, "clarity", "script", "8z07q1dh8m");
	</script>
{% endblock %}