@extends('layouts.master_app')
@section('title') Generar nueva cotización @endsection

@section('css')
@endsection

@section('content')
	<!--begin::Toolbar-->
	<div class="toolbar py-2" id="kt_toolbar">
		<!--begin::Container-->
		<div id="kt_toolbar_container" class="container-fluid d-flex align-items-center">
			<!--begin::Page title-->
			<div class="flex-grow-1 flex-shrink-0 me-5">
				<!--begin::Page title-->
				<div data-kt-swapper="true" data-kt-swapper-mode="prepend"
					data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}"
					class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
					<!--begin::Title-->
					<h1 class="d-flex align-items-center text-dark fw-bold my-1 fs-3">Generar nueva cotización
						<!--begin::Separator-->
						<span class="h-20px border-gray-200 border-start ms-3 mx-2"></span>
						<!--end::Separator-->
						<!--begin::Description-->
						<small class="text-muted fs-7 fw-semibold my-1 ms-1"></small>
						<!--end::Description-->
					</h1>
					<!--end::Title-->
				</div>
				<!--end::Page title-->
			</div>
			<!--end::Page title-->
			<!--begin::Action group-->
			<div class="d-flex align-items-center flex-wrap">
				<!--begin::Wrapper-->
				<div class="flex-shrink-0 me-2">

				</div>
				<!--end::Wrapper-->
				<!--begin::Wrapper-->
				<div class="d-flex align-items-center">

				</div>
				<!--end::Wrapper-->
			</div>
			<!--end::Action group-->
		</div>
		<!--end::Container-->
	</div>
	<!--end::Toolbar-->

	<div class="content d-flex flex-column flex-column-fluid" id="kt_content" ng-controller="quoteInterController">
		<!--begin::Container-->
		<div id="kt_content_container" class="container-xxl">
			@if(!$available_projects)
				<div class="alert alert-warning d-flex align-items-center p-5 mb-10">
					<span class="svg-icon svg-icon-2hx svg-icon-warning me-4"><svg width="24" height="24" viewBox="0 0 24 24"
							fill="none" xmlns="http://www.w3.org/2000/svg">
							<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="currentColor" />
							<rect x="11" y="14" width="7" height="2" rx="1" transform="rotate(-90 11 14)" fill="currentColor" />
							<rect x="11" y="17" width="2" height="2" rx="1" transform="rotate(-90 11 17)" fill="currentColor" />
						</svg>
					</span>
					<!--end::Svg Icon-->
					<div class="d-flex flex-column">
						<h4 class="mb-1 text-warning"> Ya no puedes seguir creando proyectos </h4>
						<span>Tu cuenta ha llegado al límite: {{$num_proposals_subscription}} proyectos </span>
					</div>
				</div>
			@endif
			@if(\Auth::user()->subscriptionActive()->status == 'canceled')
				<div class="alert alert-warning d-flex align-items-center p-5 mb-10">
					<span class="svg-icon svg-icon-2hx svg-icon-warning me-4"><svg width="24" height="24" viewBox="0 0 24 24"
							fill="none" xmlns="http://www.w3.org/2000/svg">
							<rect opacity="0.3" x="2" y="2" width="20" height="20" rx="10" fill="currentColor" />
							<rect x="11" y="14" width="7" height="2" rx="1" transform="rotate(-90 11 14)" fill="currentColor" />
							<rect x="11" y="17" width="2" height="2" rx="1" transform="rotate(-90 11 17)" fill="currentColor" />
						</svg>
					</span>
					<!--end::Svg Icon-->
					<div class="d-flex flex-column">
						<h4 class="mb-1 text-warning"> Ya no puedes seguir creando proyectos </h4>
						<span>Tu cuenta ha está cancelada </span>
					</div>
				</div>
			@endif
			<!--begin::Stepper-->
			<div class="stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid"
				id="kt_create_account_stepper">
				<!--begin::Aside-->
				<div
					class="card d-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px w-xxl-400px me-9">
					<!--begin::Wrapper-->
					<div class="card-body px-6 px-lg-10 px-xxl-15 py-20">
						<!--begin::Nav-->
						<div class="stepper-nav">
							<!--begin::Step 1-->
							<div class="stepper-item current" data-kt-stepper-element="nav">
								<!--begin::Wrapper-->
								<div class="stepper-wrapper">
									<!--begin::Icon-->
									<div class="stepper-icon w-40px h-40px">
										<i class="stepper-check fas fa-check"></i>
										<span class="stepper-number">1</span>
									</div>
									<!--end::Icon-->
									<!--begin::Label-->
									<div class="stepper-label">
										<h3 class="stepper-title">Datos Generales</h3>
										<div class="stepper-desc fw-semibold">Introduce los datos del cliente</div>
									</div>
									<!--end::Label-->
								</div>
								<!--end::Wrapper-->
								<!--begin::Line-->
								<div class="stepper-line h-40px"></div>
								<!--end::Line-->
							</div>
							<!--end::Step 1-->
							<!--begin::Step 2-->
							<div class="stepper-item" data-kt-stepper-element="nav">
								<!--begin::Wrapper-->
								<div class="stepper-wrapper">
									<!--begin::Icon-->
									<div class="stepper-icon w-40px h-40px">
										<i class="stepper-check fas fa-check"></i>
										<span class="stepper-number">2</span>
									</div>
									<!--end::Icon-->
									<!--begin::Label-->
									<div class="stepper-label">
										<h3 class="stepper-title">Datos del recibo</h3>
										<div class="stepper-desc fw-semibold">Introduce los datos generales del recibo de
											CFE</div>
									</div>
									<!--end::Label-->
								</div>
								<!--end::Wrapper-->
								<!--begin::Line-->
								<div class="stepper-line h-40px"></div>
								<!--end::Line-->
							</div>
							<!--end::Step 2-->
							<!--begin::Step 3-->
							<div class="stepper-item" data-kt-stepper-element="nav">
								<!--begin::Wrapper-->
								<div class="stepper-wrapper">
									<!--begin::Icon-->
									<div class="stepper-icon w-40px h-40px">
										<i class="stepper-check fas fa-check"></i>
										<span class="stepper-number">3</span>
									</div>
									<!--end::Icon-->
									<!--begin::Label-->
									<div class="stepper-label">
										<h3 class="stepper-title">Consumos de energía</h3>
										<div class="stepper-desc fw-semibold">Agrega los consumos de energía</div>
									</div>
									<!--end::Label-->
								</div>
								<!--end::Wrapper-->
								<!--begin::Line-->
								<div class="stepper-line h-40px"></div>
								<!--end::Line-->
							</div>
							<!--end::Step 3-->
							<!--begin::Step 4-->
							<div class="stepper-item" data-kt-stepper-element="nav">
								<!--begin::Wrapper-->
								<div class="stepper-wrapper">
									<!--begin::Icon-->
									<div class="stepper-icon w-40px h-40px">
										<i class="stepper-check fas fa-check"></i>
										<span class="stepper-number">4</span>
									</div>
									<!--end::Icon-->
									<!--begin::Label-->
									<div class="stepper-label">
										<h3 class="stepper-title">Módulo fotovoltaico</h3>
										<div class="stepper-desc fw-semibold">Selecciona un módulo fotovoltaico</div>
									</div>
									<!--end::Label-->
								</div>
								<!--end::Wrapper-->
								<!--begin::Line-->
								<div class="stepper-line h-40px"></div>
								<!--end::Line-->
							</div>
							<!--end::Step 4-->

						</div>
						<!--end::Nav-->
					</div>
					<!--end::Wrapper-->
				</div>
				<!--begin::Aside-->
				<!--begin::Content-->
				<div class="card d-flex flex-row-fluid flex-center"
					ng-class="{'overlay': loading===false, 'overlay-block': loading===false}">
					<!--begin::Form-->
					<form class="card-body py-20 w-100 w-xl-700px px-9" novalidate="novalidate" id="kt_create_account_form">
						<!--begin::Step 1-->
						<div class="current" data-kt-stepper-element="content"
							ng-init="formData.type='interconectados'; rates()">
							<!--begin::Wrapper-->
							<div class="w-100"
								ng-init="formData.name='{{isset($contact) ? $contact->person->name : null }}'; formData.name_business='{{isset($contact) ? $contact->name_business : null }}'; ">
								<!--begin::Heading-->
								<div class="pb-7 pb-lg-12">
									<!--begin::Title-->
									<h1 class="fw-bolder text-dark">Agrega los datos generales del cliente</h1>
									<!--end::Title-->
								</div>
								<!--end::Heading-->
								@if(isset($contact->person->phones[0]))
									<span ng-init="formData.phone='{{$contact->person->phones[0]->phone}}'"></span>
								@endif
								@if(isset($contact->person->emails[0]))
									<span ng-init="formData.email='{{$contact->person->emails[0]->email}}'"></span>
								@endif
								@if(isset($contact))
									<span ng-init="formData.contact_id='{{$contact->id}}'"></span>
								@endif
								<!--begin::Input group-->
								<div class="fv-row mb-8">
									<!--begin::Label-->
									<label class="form-label mb-3">Adjunta el recibo de CFE (opcional)</label>
									<input class="form-control form-control" type="file" file-change="upload()"
										ng-model="file" accept=".pdf">
									<div ng-if="file">
										<button class="btn btn-sm btn-secondary" type="button"
											ng-click="addReceipt()">Agregar recibo</button>
										<div ng-repeat="x in extraReceipts track by $index">
											<input class="form-control form-control" type="file"
												ng-model="extraReceipts[$index]" accept=".pdf"
												onchange="angular.element(this).scope().fileSelected(this)">
											<button type="button" ng-click="fileDeleted(x.index)"
												ng-if="extraReceipts[$index] !== null">
												delete @{{x.file.name}}
											</button>
										</div>
									</div>
								</div>
								<!--end::Input group-->



								<!--begin::Input group-->
								<div class="row g-9 mb-8">
									<div class="col-md-6 fv-row">
										<label class="form-label mb-3 required">Nombre del cliente</label>
										<input class="form-control form-control" type="text" id="name_customer"
											name="name_customer" ng-model="formData.name" autofocus>
									</div>
									<div class="col-md-6 fv-row">
										<label class="form-label mb-3">Nombre de la empresa</label>
										<input class="form-control form-control" type="text" name=""
											ng-model="formData.name_business">
									</div>

									<div class="col-md-6 fv-row">
										<label class="form-label mb-3">Email</label>
										<input class="form-control form-control" id="kt_inputmask_8" name=""
											ng-model="formData.email">
									</div>
									<div class="col-md-6 fv-row" ng-init="formData.lada='52'">
										<label class="form-label mb-3">Teléfono</label>
										<div class="input-group">
											<div class="input-group-addon">
												<select id="protocol" class="form-select" ng-model="formData.lada">
													<option value="52" ng-selected=true>🇲🇽 +52</option>
													<option value="1">🇺🇸+1</option>
													<option value="54">🇦🇷+54</option>
													<option value="591">🇧🇴+591</option>
													<option value="56">🇨🇱+56</option>
													<option value="57">🇨🇴+57</option>
													<option value="506">🇨🇷+506</option>
													<option value="53">🇨🇺+53</option>
													<option value="593">🇪🇨+593</option>
													<option value="503">🇸🇻+503</option>
													<option value="34">🇪🇸+34</option>
													<option value="502">🇬🇹+502</option>
													<option value="504">🇭🇳+504</option>
													<option value="505">🇳🇮+505</option>
													<option value="507">🇵🇦+507</option>
													<option value="51">🇵🇪+51</option>
													<option value="595">🇵🇾+595</option>
													<option value="1">🇩🇴1+809</option>
													<option value="598">🇺🇾+598</option>
													<option value="58">🇻🇪+58</option>
												</select>
											</div>
											<input class="form-control form-control" name="phone" id="kt_inputmask_2"
												ng-model="formData.phone">
										</div>
									</div>
								</div>
								<!--end::Input group-->
							</div>
							<!--end::Wrapper-->
						</div>
						<!--end::Step 1-->
						<!--begin::Step 2-->
						<div data-kt-stepper-element="content">
							<!--begin::Wrapper-->
							<div class="w-100">
								<div class="pb-7 pb-lg-12">
									<h1 class="fw-bolder text-dark">Datos del recibo</h1>
									<div class="text-muted fw-bold fs-4">
										<a href="#" class="link-primary fw-bolder"></a>
									</div>
								</div>
								<div class="row g-9 mb-8">
									@csrf
									<div class="col-md-8">
										<label class="required fs-6 fw-bold mb-2">Estado</label>
										<select class="form-select form-select" data-hide-search="true"
											data-placeholder="Seleccionar estado" id="state_id" name="state_id"
											ng-change="infoState(formData.state_id)" ng-model="formData.state_id"
											ng-disabled="cp_found">
											<option value="">Seleccionar</option>
											@php $states = \App\Models\State::all(); @endphp
											@foreach($states as $state)
												<option value="{{$state->id}}"
													ng-selected="formData.state_id == {{$state->id}}">{{$state->name}}</option>
											@endforeach
										</select>
									</div>
									<div class="col-md-3" ng-show="formData.state_id>0">
										<label class="fs-6 fw-bold mb-2">Hora solar pico <i class="fa fa-info-circle"
												data-bs-toggle="tooltip" data-bs-placement="top"
												title="La hora solar pico mostrada por default es un promedio del estado, si necesitas la hora solar pico exacta selecciona el mapa"></i></label>
										<input class="form-control form-control" ng-model="formData.peak_solar_time"
											type="text" name="peak_solar_time" id="peak_solar_time">
									</div>
									<div class="col-md-1" ng-show="formData.state_id>0">
										<label class="fs-6 fw-bold mb-2"></label>
										<a href="#" data-bs-toggle="modal" data-bs-target="#kt_modal_map"
											id="mostrar_mapa"><img src="/assets/app/media/icons/map.png" style="width:25px">
										</a>
									</div>
								</div>
								<!--end::Input group-->
								<!--begin::Input group-->
								<div class="row g-9 mb-8">
									<div class="col-md-8">
										<label class="required fs-6 fw-bold mb-2">Tarifa</label>
										<select class="form-select form-select" data-hide-search="true"
											data-placeholder="Seleccionar tarifa" name="rate_id" id="rate_id"
											ng-change="infoRate(formData.rate_id); selectedInvoiceType(); costRate(formData.rate_id);billingDays();"
											ng-model="formData.rate_id" ng-show="!upload_file_cfe || rate_name == null ">
											<option value="">Seleccionar</option>
											@foreach($rates as $rate)
												<option value="{{$rate->id}}">{{$rate->name}}</option>
											@endforeach
										</select>
										<input class="form-control form-control" ng-model="rate_name" id="rate_name"
											type="text" ng-show="upload_file_cfe && rate_name != null " disabled>
									</div>
									<div class="col-md-4" ng-init="threads='220'">
										<label class="required fs-6 fw-bold mb-2">Fases</label>
										<select class="form-select form-select" data-hide-search="true" name="threads"
											ng-model="formData.threads">
											<option value="1">1</option>
											<option value="2" ng-selected=true>2</option>
											<option value="3">3</option>
										</select>
									</div>
								</div>
								<!--end::Input group-->

								<div class="row g-9 mb-8" ng-if="formData.rate_id == 12">
									<div class="col-md-8">
										<label class="required fs-6 fw-bold mb-2">Municipio</label>
										<select class="form-select form-select" data-hide-search="true"
											data-placeholder="Seleccionar tarifa" name="municipality_id"
											id="municipality_id" ng-model="formData.municipality_id" ng-hide="cp_found">
											<option value="">Seleccionar</option>
											<option value="@{{item.id}}" ng-repeat="item in state.municipalities">
												@{{item.name}}</option>
										</select>
										<input class="form-control form-control" ng-model="municipality_name"
											id="municipality_name" type="text" ng-show="cp_found" disabled>
									</div>
									<div class="col-md-4">
										<label class="required fs-6 fw-bold mb-2">Demanda contratada</label>
										<input class="form-control form-control" ng-model="formData.contracted_demand"
											type="text">
									</div>
								</div>

								<!--begin::Input group-->
								<div class="row g-9 mb-8" ng-init="formData.iva='{{$settings->cfe_tax}}'">
									<div class="col-md-8">
										<!--begin::Label-->
										<label class="required fs-6 fw-bold mb-2">Tipo de facturación</label>
										<select class="form-select form-select" data-hide-search="true"
											data-placeholder="Select..." name="invoice_type" id="invoice_type"
											ng-model="formData.invoice_type"
											ng-change="billingDays(); costRate(); monthsReceipCFE(formData.initial_period,formData.final_period)">
											<option value=""> Selecciona</option>
											<option value="bimestral" ng-disabled="formData.rate_id > 9">Bimestral</option>
											<option value="mensual">Mensual</option>
										</select>
										<!--end::Input-->
									</div>
									<div class="col-md-4" ng-if="formData.rate_id<12">
										<label class="required fs-6 fw-bold mb-2">IVA CFE</label>
										<input class="form-control form-control" ng-model="formData.iva" id="iva"
											type="text" name="iva">
									</div>
								</div>
								<div class="row g-9 mb-8">
									<div class="col-md-6">
										<label class="required fs-6 fw-bold mb-2">Periodo inicial de facturación</label>
										<div class="position-relative d-flex align-items-center">
											<span class="svg-icon svg-icon-2 position-absolute mx-4">
												<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
													xmlns="http://www.w3.org/2000/svg">
													<path opacity="0.3"
														d="M21 22H3C2.4 22 2 21.6 2 21V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5V21C22 21.6 21.6 22 21 22Z"
														fill="currentColor" />
													<path
														d="M6 6C5.4 6 5 5.6 5 5V3C5 2.4 5.4 2 6 2C6.6 2 7 2.4 7 3V5C7 5.6 6.6 6 6 6ZM11 5V3C11 2.4 10.6 2 10 2C9.4 2 9 2.4 9 3V5C9 5.6 9.4 6 10 6C10.6 6 11 5.6 11 5ZM15 5V3C15 2.4 14.6 2 14 2C13.4 2 13 2.4 13 3V5C13 5.6 13.4 6 14 6C14.6 6 15 5.6 15 5ZM19 5V3C19 2.4 18.6 2 18 2C17.4 2 17 2.4 17 3V5C17 5.6 17.4 6 18 6C18.6 6 19 5.6 19 5Z"
														fill="currentColor" />
													<path
														d="M8.8 13.1C9.2 13.1 9.5 13 9.7 12.8C9.9 12.6 10.1 12.3 10.1 11.9C10.1 11.6 10 11.3 9.8 11.1C9.6 10.9 9.3 10.8 9 10.8C8.8 10.8 8.59999 10.8 8.39999 10.9C8.19999 11 8.1 11.1 8 11.2C7.9 11.3 7.8 11.4 7.7 11.6C7.6 11.8 7.5 11.9 7.5 12.1C7.5 12.2 7.4 12.2 7.3 12.3C7.2 12.4 7.09999 12.4 6.89999 12.4C6.69999 12.4 6.6 12.3 6.5 12.2C6.4 12.1 6.3 11.9 6.3 11.7C6.3 11.5 6.4 11.3 6.5 11.1C6.6 10.9 6.8 10.7 7 10.5C7.2 10.3 7.49999 10.1 7.89999 10C8.29999 9.90003 8.60001 9.80003 9.10001 9.80003C9.50001 9.80003 9.80001 9.90003 10.1 10C10.4 10.1 10.7 10.3 10.9 10.4C11.1 10.5 11.3 10.8 11.4 11.1C11.5 11.4 11.6 11.6 11.6 11.9C11.6 12.3 11.5 12.6 11.3 12.9C11.1 13.2 10.9 13.5 10.6 13.7C10.9 13.9 11.2 14.1 11.4 14.3C11.6 14.5 11.8 14.7 11.9 15C12 15.3 12.1 15.5 12.1 15.8C12.1 16.2 12 16.5 11.9 16.8C11.8 17.1 11.5 17.4 11.3 17.7C11.1 18 10.7 18.2 10.3 18.3C9.9 18.4 9.5 18.5 9 18.5C8.5 18.5 8.1 18.4 7.7 18.2C7.3 18 7 17.8 6.8 17.6C6.6 17.4 6.4 17.1 6.3 16.8C6.2 16.5 6.10001 16.3 6.10001 16.1C6.10001 15.9 6.2 15.7 6.3 15.6C6.4 15.5 6.6 15.4 6.8 15.4C6.9 15.4 7.00001 15.4 7.10001 15.5C7.20001 15.6 7.3 15.6 7.3 15.7C7.5 16.2 7.7 16.6 8 16.9C8.3 17.2 8.6 17.3 9 17.3C9.2 17.3 9.5 17.2 9.7 17.1C9.9 17 10.1 16.8 10.3 16.6C10.5 16.4 10.5 16.1 10.5 15.8C10.5 15.3 10.4 15 10.1 14.7C9.80001 14.4 9.50001 14.3 9.10001 14.3C9.00001 14.3 8.9 14.3 8.7 14.3C8.5 14.3 8.39999 14.3 8.39999 14.3C8.19999 14.3 7.99999 14.2 7.89999 14.1C7.79999 14 7.7 13.8 7.7 13.7C7.7 13.5 7.79999 13.4 7.89999 13.2C7.99999 13 8.2 13 8.5 13H8.8V13.1ZM15.3 17.5V12.2C14.3 13 13.6 13.3 13.3 13.3C13.1 13.3 13 13.2 12.9 13.1C12.8 13 12.7 12.8 12.7 12.6C12.7 12.4 12.8 12.3 12.9 12.2C13 12.1 13.2 12 13.6 11.8C14.1 11.6 14.5 11.3 14.7 11.1C14.9 10.9 15.2 10.6 15.5 10.3C15.8 10 15.9 9.80003 15.9 9.70003C15.9 9.60003 16.1 9.60004 16.3 9.60004C16.5 9.60004 16.7 9.70003 16.8 9.80003C16.9 9.90003 17 10.2 17 10.5V17.2C17 18 16.7 18.4 16.2 18.4C16 18.4 15.8 18.3 15.6 18.2C15.4 18.1 15.3 17.8 15.3 17.5Z"
														fill="currentColor" />
												</svg>
											</span>
											<input class="form-control  ps-12" id="kt_datepicker_2"
												ng-model="formData.initial_period"
												ng-change="monthsReceipCFE(formData.initial_period,formData.final_period)" />
										</div>
									</div>
									<div class="col-md-6">
										<label class="required fs-6 fw-bold mb-2">Periodo final de facturación</label>
										<div class="position-relative d-flex align-items-center">
											<span class="svg-icon svg-icon-2 position-absolute mx-4">
												<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
													xmlns="http://www.w3.org/2000/svg">
													<path opacity="0.3"
														d="M21 22H3C2.4 22 2 21.6 2 21V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5V21C22 21.6 21.6 22 21 22Z"
														fill="currentColor" />
													<path
														d="M6 6C5.4 6 5 5.6 5 5V3C5 2.4 5.4 2 6 2C6.6 2 7 2.4 7 3V5C7 5.6 6.6 6 6 6ZM11 5V3C11 2.4 10.6 2 10 2C9.4 2 9 2.4 9 3V5C9 5.6 9.4 6 10 6C10.6 6 11 5.6 11 5ZM15 5V3C15 2.4 14.6 2 14 2C13.4 2 13 2.4 13 3V5C13 5.6 13.4 6 14 6C14.6 6 15 5.6 15 5ZM19 5V3C19 2.4 18.6 2 18 2C17.4 2 17 2.4 17 3V5C17 5.6 17.4 6 18 6C18.6 6 19 5.6 19 5Z"
														fill="currentColor" />
													<path
														d="M8.8 13.1C9.2 13.1 9.5 13 9.7 12.8C9.9 12.6 10.1 12.3 10.1 11.9C10.1 11.6 10 11.3 9.8 11.1C9.6 10.9 9.3 10.8 9 10.8C8.8 10.8 8.59999 10.8 8.39999 10.9C8.19999 11 8.1 11.1 8 11.2C7.9 11.3 7.8 11.4 7.7 11.6C7.6 11.8 7.5 11.9 7.5 12.1C7.5 12.2 7.4 12.2 7.3 12.3C7.2 12.4 7.09999 12.4 6.89999 12.4C6.69999 12.4 6.6 12.3 6.5 12.2C6.4 12.1 6.3 11.9 6.3 11.7C6.3 11.5 6.4 11.3 6.5 11.1C6.6 10.9 6.8 10.7 7 10.5C7.2 10.3 7.49999 10.1 7.89999 10C8.29999 9.90003 8.60001 9.80003 9.10001 9.80003C9.50001 9.80003 9.80001 9.90003 10.1 10C10.4 10.1 10.7 10.3 10.9 10.4C11.1 10.5 11.3 10.8 11.4 11.1C11.5 11.4 11.6 11.6 11.6 11.9C11.6 12.3 11.5 12.6 11.3 12.9C11.1 13.2 10.9 13.5 10.6 13.7C10.9 13.9 11.2 14.1 11.4 14.3C11.6 14.5 11.8 14.7 11.9 15C12 15.3 12.1 15.5 12.1 15.8C12.1 16.2 12 16.5 11.9 16.8C11.8 17.1 11.5 17.4 11.3 17.7C11.1 18 10.7 18.2 10.3 18.3C9.9 18.4 9.5 18.5 9 18.5C8.5 18.5 8.1 18.4 7.7 18.2C7.3 18 7 17.8 6.8 17.6C6.6 17.4 6.4 17.1 6.3 16.8C6.2 16.5 6.10001 16.3 6.10001 16.1C6.10001 15.9 6.2 15.7 6.3 15.6C6.4 15.5 6.6 15.4 6.8 15.4C6.9 15.4 7.00001 15.4 7.10001 15.5C7.20001 15.6 7.3 15.6 7.3 15.7C7.5 16.2 7.7 16.6 8 16.9C8.3 17.2 8.6 17.3 9 17.3C9.2 17.3 9.5 17.2 9.7 17.1C9.9 17 10.1 16.8 10.3 16.6C10.5 16.4 10.5 16.1 10.5 15.8C10.5 15.3 10.4 15 10.1 14.7C9.80001 14.4 9.50001 14.3 9.10001 14.3C9.00001 14.3 8.9 14.3 8.7 14.3C8.5 14.3 8.39999 14.3 8.39999 14.3C8.19999 14.3 7.99999 14.2 7.89999 14.1C7.79999 14 7.7 13.8 7.7 13.7C7.7 13.5 7.79999 13.4 7.89999 13.2C7.99999 13 8.2 13 8.5 13H8.8V13.1ZM15.3 17.5V12.2C14.3 13 13.6 13.3 13.3 13.3C13.1 13.3 13 13.2 12.9 13.1C12.8 13 12.7 12.8 12.7 12.6C12.7 12.4 12.8 12.3 12.9 12.2C13 12.1 13.2 12 13.6 11.8C14.1 11.6 14.5 11.3 14.7 11.1C14.9 10.9 15.2 10.6 15.5 10.3C15.8 10 15.9 9.80003 15.9 9.70003C15.9 9.60003 16.1 9.60004 16.3 9.60004C16.5 9.60004 16.7 9.70003 16.8 9.80003C16.9 9.90003 17 10.2 17 10.5V17.2C17 18 16.7 18.4 16.2 18.4C16 18.4 15.8 18.3 15.6 18.2C15.4 18.1 15.3 17.8 15.3 17.5Z"
														fill="currentColor" />
												</svg>
											</span>
											<input class="form-control  ps-12" id="kt_datepicker_1"
												ng-model="formData.final_period"
												ng-change="monthsReceipCFE(formData.initial_period,formData.final_period)" />
										</div>
									</div>
								</div>
								<!--end::Input group-->

								<!--begin::Input group-->
								<div class="fv-row mb-8">
									<label class="fs-6 fw-bold mb-2">Número de servicio</label>
									<input class="form-control form-control" ng-model="formData.rpu" type="text" name="">
								</div>
								<!--end::Input group-->
							</div>
							<!--end::Wrapper-->
						</div>
						<!--end::Step 2-->
						<!--begin::Step 3-->
						<div data-kt-stepper-element="content">
							<!--begin::Wrapper-->
							<div class="w-100">
								<div class="pb-12" ng-show="formData.rate_id<12">
									<h1 class="fw-bolder text-dark">Agrega los consumos de energía </h1>
									<div class="text-muted fw-bold fs-4">
										<a href="#" class="link-primary"></a>
									</div>
								</div>
								<table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_customers_table"
									ng-show="formData.rate_id<12">
									<thead>
										<tr class="text-start text-gray-400 fw-bolder fs-7 gs-0">
											<th class="min-w-25px"></th>
											<th class="min-w-125px">Consumo (kWh)</th>
											<th class="text-end min-w-70px" ng-show="formData.rate_id > 9"> Demanda KW</th>
										</tr>
									</thead>
									<tbody class="fw-bold text-gray-600">
										<tr ng-repeat="item in formData.consumptions track by $index">
											<td>
												<span> @{{formData.monthNamesArray[$index]}}</span>
											</td>
											<td>
												<input class="form-control form-control" placeholder="Consumo (kWh)"
													type="number" min="0" name="consumptions"
													ng-model="formData.consumptions[$index]"
													ng-blur="calculateConsumption()">
											</td>
											<td class="text-end" ng-show="formData.rate_id > 9">
												<input class="form-control form-control" placeholder="Demanda (kW)"
													type="number" min="0" name="demand" ng-model="formData.demands[$index]"
													ng-blur="calculateAverageDemand()">
											</td>
											</td>
										</tr>
									</tbody>
								</table>
								<!--begin::Input group-->
								<div class="fv-row mb-8" ng-show="consumptions.length != 0 && formData.rate_id<12">
									<!--begin::Label-->
									<label class="fs-6 fw-bold mb-2"></label>
									<!--end::Label-->
									<!--begin::Row-->
									<div class="row g-9" data-kt-buttons="true"
										data-kt-buttons-target="[data-kt-button='true']">
										<div class="col-md-6 col-lg-6 col-xxl-6">
											<!--begin::Statistics Widget 5-->
											<a href="#"
												class="card bg-opacity-50 bg-primary hoverable card-xl-stretch mb-5 mb-xl-8">
												<!--begin::Body-->
												<div class="card-body">
													<!--begin::Svg Icon | path: icons/duotune/graphs/gra005.svg-->
													<span class="svg-icon svg-icon-white svg-icon-3x ms-n1">
														<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
															viewBox="0 0 24 24" fill="none">
															<path opacity="0.3"
																d="M14 12V21H10V12C10 11.4 10.4 11 11 11H13C13.6 11 14 11.4 14 12ZM7 2H5C4.4 2 4 2.4 4 3V21H8V3C8 2.4 7.6 2 7 2Z"
																fill="black"></path>
															<path
																d="M21 20H20V16C20 15.4 19.6 15 19 15H17C16.4 15 16 15.4 16 16V20H3C2.4 20 2 20.4 2 21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21C22 20.4 21.6 20 21 20Z"
																fill="black"></path>
														</svg>
													</span>
													<!--end::Svg Icon-->
													<div class="text-white fw-bolder fs-2 mb-2 mt-5">Consumo promedio @{{
														formData.invoice_type }}</div>
													<div class="fw-bold text-white"> @{{ formData.average_consumption}} kWh
													</div>
												</div>
												<!--end::Body-->
											</a>
											<!--end::Statistics Widget 5-->
										</div>

										<!--begin::Col-->
										<div class="col-md-6 col-lg-6 col-xxl-6">
											<!--begin::Statistics Widget 5-->
											<a href="#"
												class="card bg-opacity-50 bg-primary hoverable card-xl-stretch mb-5 mb-xl-8">
												<!--begin::Body-->
												<div class="card-body">
													<!--begin::Svg Icon | path: icons/duotune/graphs/gra005.svg-->
													<span class="svg-icon svg-icon-white svg-icon-3x ms-n1">
														<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
															viewBox="0 0 24 24" fill="none">
															<path opacity="0.3"
																d="M14 12V21H10V12C10 11.4 10.4 11 11 11H13C13.6 11 14 11.4 14 12ZM7 2H5C4.4 2 4 2.4 4 3V21H8V3C8 2.4 7.6 2 7 2Z"
																fill="black"></path>
															<path
																d="M21 20H20V16C20 15.4 19.6 15 19 15H17C16.4 15 16 15.4 16 16V20H3C2.4 20 2 20.4 2 21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21C22 20.4 21.6 20 21 20Z"
																fill="black"></path>
														</svg>
													</span>
													<!--end::Svg Icon-->
													<div class="text-white fw-bolder fs-2 mb-2 mt-5">Consumo promedio diario
													</div>
													<div class="fw-bold text-white"> @{{ formData.average_daily_consumption
														}} kWh</div>
												</div>
												<!--end::Body-->
											</a>
											<!--end::Statistics Widget 5-->
										</div>
										<!--end::Col-->
									</div>
									<!--end::Row-->
								</div>
								<!--end::Input group-->

								<div ng-show="formData.rate_id==12">
									<div class="alert alert-danger d-flex align-items-center p-5 mb-10"
										ng-show="( (formData.base + formData.intermediate + formData.tip) < average_consumption_minus_25   ||  (formData.base + formData.intermediate + formData.tip) > average_consumption_plus_10 ) &&  number_uploads_cfe_files<2">
										<span class="svg-icon svg-icon-2hx svg-icon-danger me-4">
											<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path opacity="0.3"
													d="M20.5543 4.37824L12.1798 2.02473C12.0626 1.99176 11.9376 1.99176 11.8203 2.02473L3.44572 4.37824C3.18118 4.45258 3 4.6807 3 4.93945V13.569C3 14.6914 3.48509 15.8404 4.4417 16.984C5.17231 17.8575 6.18314 18.7345 7.446 19.5909C9.56752 21.0295 11.6566 21.912 11.7445 21.9488C11.8258 21.9829 11.9129 22 12.0001 22C12.0872 22 12.1744 21.983 12.2557 21.9488C12.3435 21.912 14.4326 21.0295 16.5541 19.5909C17.8169 18.7345 18.8277 17.8575 19.5584 16.984C20.515 15.8404 21 14.6914 21 13.569V4.93945C21 4.6807 20.8189 4.45258 20.5543 4.37824Z"
													fill="currentColor"></path>
												<path
													d="M10.5606 11.3042L9.57283 10.3018C9.28174 10.0065 8.80522 10.0065 8.51412 10.3018C8.22897 10.5912 8.22897 11.0559 8.51412 11.3452L10.4182 13.2773C10.8099 13.6747 11.451 13.6747 11.8427 13.2773L15.4859 9.58051C15.771 9.29117 15.771 8.82648 15.4859 8.53714C15.1948 8.24176 14.7183 8.24176 14.4272 8.53714L11.7002 11.3042C11.3869 11.6221 10.874 11.6221 10.5606 11.3042Z"
													fill="currentColor"></path>
											</svg>
										</span>
										<div class="d-flex flex-column">
											<h4 class="mb-1 text-danger">Alerta</h4>
											<span> Se recomienda cargar el recibo del mes @{{index_month_average+1}} para
												tener un dimensionamiento más aproximado.
												<input class="form-control form-control" type="file" file-change="upload()"
													ng-model="file" accept=".pdf">

											</span>
										</div>
									</div>
									<span style="display:none">Consumo promedio: @{{average_consumption}} -
										@{{average_consumption_minus_25}} - @{{average_consumption_plus_10}} - Total kwh
										@{{formData.base + formData.intermediate + formData.tip}} </span>

									<div class="pb-12">
										<h1 class="fw-bolder text-dark">Agrega los consumos de energía </h1>
									</div>
									<div class="row g-9 mb-8">
										<div class="col-md-3">
											<label class="required fs-6 fw-bold mb-2">kWh Base</label>
											<input class="form-control form-control" ng-model="formData.base" id="base"
												type="number" name="">
										</div>
										<div class="col-md-3">
											<label class="required fs-6 fw-bold mb-2">kWh Intermedio</label>
											<input class="form-control form-control" ng-model="formData.intermediate"
												id="intermediate" type="number" name="">
										</div>
										<div class="col-md-3">
											<label class="required fs-6 fw-bold mb-2">kWh Punta</label>
											<input class="form-control form-control" ng-model="formData.tip" id="tip"
												type="number" name="">
										</div>
										<div class="col-md-3">
											<label class="required fs-6 fw-bold mb-2">kVArh</label>
											<input class="form-control form-control" ng-model="formData.kvarh" id="number"
												type="text" name="">
										</div>
										<div class="col-md-12"><strong> Total kWh: @{{ ( formData.base +
												formData.intermediate + formData.tip) }} </strong> </div>
									</div>
									<div class="pb-12">
										<h1 class="fw-bolder text-dark">Demanda </h1>
									</div>
									<div class="row g-9 mb-8">
										<div class="col-md-4">
											<label class="required fs-6 fw-bold mb-2">kW Base</label>
											<input class="form-control form-control" ng-model="formData.base_demand"
												id="base_demand" type="text" name="">
										</div>
										<div class="col-md-4">
											<label class="required fs-6 fw-bold mb-2">kW Intermedio</label>
											<input class="form-control form-control" ng-model="formData.intermediate_demand"
												id="intermediate_demand" type="text" name="">
										</div>
										<div class="col-md-4">
											<label class="required fs-6 fw-bold mb-2">kW Punta</label>
											<input class="form-control form-control" ng-model="formData.tip_demand"
												id="tip_demand" type="text" name="">
										</div>
									</div>
									<div class="row g-9 mb-8">
										<div class="col-md-4">
											<label class="required fs-6 fw-bold mb-2">IVA</label>
											<input class="form-control form-control" ng-model="formData.iva" id="iva"
												type="text" name="iva">
										</div>
										<div class="col-md-4">
											<label class="required fs-6 fw-bold mb-2">DAP(%)</label>
											<input class="form-control form-control" ng-model="formData.dap" type="text"
												name="">
										</div>
										<div class="col-md-4" ng-init="formData.low_voltage_measurement=0">
											<label class="required fs-6 fw-bold mb-2">Medición en baja tensión</label>
											<select class="form-select form-select" data-hide-search="true"
												data-placeholder="Select..." name="low_voltage_measurement"
												id="low_voltage_measurement" ng-model="formData.low_voltage_measurement">
												<option value=""> Selecciona</option>
												<option value="1">Si</option>
												<option value="0" ng-selected=true>No</option>
											</select>
										</div>
									</div>

									<div class="pb-12" ng-show="formData.rate_id<12">
										<h1 class="fw-bolder text-dark">Agrega los consumos de energía </h1>
										<div class="text-muted fw-bold fs-4">
											<a href="#" class="link-primary"></a>
										</div>
									</div>

									<table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_customers_table">
										<thead>
											<tr class="text-start text-gray-400 fw-bolder fs-7  gs-0">
												<th class="min-w-25px"></th>
												<th class="min-w-125px">Consumo (kWh)</th>
												<th class="text-end min-w-70px" ng-show="formData.rate_id > 9"> Demanda kW
												</th>
											</tr>
										</thead>
										<tbody class="fw-bold text-gray-600">
											<tr ng-repeat="item in formData.consumptions track by $index">
												<td>
													<span> @{{formData.monthNamesArray[$index]}} </span>
												</td>
												<td>
													<input class="form-control form-control" placeholder="Consumo (kWh)"
														type="number" min="0" name="consumptions"
														ng-model="formData.consumptions[$index]"
														ng-blur="calculateConsumption()">
													<div class="alert alert-warning d-flex align-items-center p-5 mb-10"
														ng-show="( ( (formData.base + formData.intermediate + formData.tip) < average_consumption_minus_25   ||  (formData.base + formData.intermediate + formData.tip) > average_consumption_plus_10 ) ) && $index  ==  index_month_average &&  number_uploads_cfe_files<2 ">
														<span class="svg-icon svg-icon-2hx svg-icon-warning me-4">
															<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
																xmlns="http://www.w3.org/2000/svg">
																<path opacity="0.3"
																	d="M20.5543 4.37824L12.1798 2.02473C12.0626 1.99176 11.9376 1.99176 11.8203 2.02473L3.44572 4.37824C3.18118 4.45258 3 4.6807 3 4.93945V13.569C3 14.6914 3.48509 15.8404 4.4417 16.984C5.17231 17.8575 6.18314 18.7345 7.446 19.5909C9.56752 21.0295 11.6566 21.912 11.7445 21.9488C11.8258 21.9829 11.9129 22 12.0001 22C12.0872 22 12.1744 21.983 12.2557 21.9488C12.3435 21.912 14.4326 21.0295 16.5541 19.5909C17.8169 18.7345 18.8277 17.8575 19.5584 16.984C20.515 15.8404 21 14.6914 21 13.569V4.93945C21 4.6807 20.8189 4.45258 20.5543 4.37824Z"
																	fill="currentColor"></path>
																<path
																	d="M10.5606 11.3042L9.57283 10.3018C9.28174 10.0065 8.80522 10.0065 8.51412 10.3018C8.22897 10.5912 8.22897 11.0559 8.51412 11.3452L10.4182 13.2773C10.8099 13.6747 11.451 13.6747 11.8427 13.2773L15.4859 9.58051C15.771 9.29117 15.771 8.82648 15.4859 8.53714C15.1948 8.24176 14.7183 8.24176 14.4272 8.53714L11.7002 11.3042C11.3869 11.6221 10.874 11.6221 10.5606 11.3042Z"
																	fill="currentColor"></path>
															</svg>
														</span>
														<div class="d-flex flex-column">
															<h4 class="mb-1 text-warning">Alerta</h4>
															<span>Se recomienda cargar el recibo de este mes para tener un
																dimensionamiento más aproximado.</span>
														</div>
													</div>
												</td>
												<td class="text-end" ng-show="formData.rate_id > 9">
													<input class="form-control form-control" placeholder="Demanda (kW)"
														type="number" min="0" name="demand"
														ng-model="formData.demands[$index]"
														ng-blur="calculateAverageDemand()">
												</td>
												</td>
											</tr>
										</tbody>
									</table>
									<!--begin::Input group-->
									<div class="fv-row mb-8" ng-show="consumptions.length != 0 && formData.rate_id<12">
										<!--begin::Label-->
										<label class="fs-6 fw-bold mb-2"></label>
										<!--end::Label-->
										<!--begin::Row-->
										<div class="row g-9" data-kt-buttons="true"
											data-kt-buttons-target="[data-kt-button='true']">
											<div class="col-md-6 col-lg-6 col-xxl-6">
												<!--begin::Statistics Widget 5-->
												<a href="#"
													class="card bg-opacity-50 bg-primary hoverable card-xl-stretch mb-5 mb-xl-8">
													<!--begin::Body-->
													<div class="card-body">
														<!--begin::Svg Icon | path: icons/duotune/graphs/gra005.svg-->
														<span class="svg-icon svg-icon-white svg-icon-3x ms-n1">
															<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
																viewBox="0 0 24 24" fill="none">
																<path opacity="0.3"
																	d="M14 12V21H10V12C10 11.4 10.4 11 11 11H13C13.6 11 14 11.4 14 12ZM7 2H5C4.4 2 4 2.4 4 3V21H8V3C8 2.4 7.6 2 7 2Z"
																	fill="black"></path>
																<path
																	d="M21 20H20V16C20 15.4 19.6 15 19 15H17C16.4 15 16 15.4 16 16V20H3C2.4 20 2 20.4 2 21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21C22 20.4 21.6 20 21 20Z"
																	fill="black"></path>
															</svg>
														</span>
														<!--end::Svg Icon-->
														<div class="text-white fw-bolder fs-2 mb-2 mt-5">Consumo promedio
															@{{ formData.invoice_type }}</div>
														<div class="fw-bold text-white"> @{{ formData.average_consumption}}
															kWh </div>
													</div>
													<!--end::Body-->
												</a>
												<!--end::Statistics Widget 5-->
											</div>

											<!--begin::Col-->
											<div class="col-md-6 col-lg-6 col-xxl-6">
												<!--begin::Statistics Widget 5-->
												<a href="#"
													class="card bg-opacity-50 bg-primary hoverable card-xl-stretch mb-5 mb-xl-8">
													<!--begin::Body-->
													<div class="card-body">
														<!--begin::Svg Icon | path: icons/duotune/graphs/gra005.svg-->
														<span class="svg-icon svg-icon-white svg-icon-3x ms-n1">
															<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
																viewBox="0 0 24 24" fill="none">
																<path opacity="0.3"
																	d="M14 12V21H10V12C10 11.4 10.4 11 11 11H13C13.6 11 14 11.4 14 12ZM7 2H5C4.4 2 4 2.4 4 3V21H8V3C8 2.4 7.6 2 7 2Z"
																	fill="black"></path>
																<path
																	d="M21 20H20V16C20 15.4 19.6 15 19 15H17C16.4 15 16 15.4 16 16V20H3C2.4 20 2 20.4 2 21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21C22 20.4 21.6 20 21 20Z"
																	fill="black"></path>
															</svg>
														</span>
														<!--end::Svg Icon-->
														<div class="text-white fw-bolder fs-2 mb-2 mt-5">Consumo promedio
															diario</div>
														<div class="fw-bold text-white"> @{{
															formData.average_daily_consumption }} kWh</div>
													</div>
													<!--end::Body-->
												</a>
												<!--end::Statistics Widget 5-->
											</div>
											<!--end::Col-->
										</div>
										<!--end::Row-->
									</div>
									<!--end::Input group-->
								</div>
							</div>
							<!--end::Wrapper-->
						</div>
						<!--end::Step 3-->
						<!--begin::Step 4-->
						<div data-kt-stepper-element="content" ng-init="formData.loss_factor = {{$settings->loss_factor}}">
							<!--begin::Wrapper-->
							<div class="w-100">
								<!--begin::Heading-->
								<div class="pb-12">
									<!--begin::Title-->
									<h1 class="fw-bolder text-dark">Selecciona un módulo fotovoltaico </h1>
									<!--end::Title-->
									<!--begin::Description-->
									<div class="text-muted fw-bold fs-4">
									</div>
									<!--end::Description-->
								</div>
								<!--end::Heading-->

								<!--begin::Input group-->
								<div class="fv-row mb-8">
									<div class="alert alert-warning d-flex align-items-center p-5 mb-10"
										ng-if="success===false">
										<span class="svg-icon svg-icon-2hx svg-icon-warning me-4">
											<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<path opacity="0.3"
													d="M20.5543 4.37824L12.1798 2.02473C12.0626 1.99176 11.9376 1.99176 11.8203 2.02473L3.44572 4.37824C3.18118 4.45258 3 4.6807 3 4.93945V13.569C3 14.6914 3.48509 15.8404 4.4417 16.984C5.17231 17.8575 6.18314 18.7345 7.446 19.5909C9.56752 21.0295 11.6566 21.912 11.7445 21.9488C11.8258 21.9829 11.9129 22 12.0001 22C12.0872 22 12.1744 21.983 12.2557 21.9488C12.3435 21.912 14.4326 21.0295 16.5541 19.5909C17.8169 18.7345 18.8277 17.8575 19.5584 16.984C20.515 15.8404 21 14.6914 21 13.569V4.93945C21 4.6807 20.8189 4.45258 20.5543 4.37824Z"
													fill="currentColor"></path>
												<path
													d="M10.5606 11.3042L9.57283 10.3018C9.28174 10.0065 8.80522 10.0065 8.51412 10.3018C8.22897 10.5912 8.22897 11.0559 8.51412 11.3452L10.4182 13.2773C10.8099 13.6747 11.451 13.6747 11.8427 13.2773L15.4859 9.58051C15.771 9.29117 15.771 8.82648 15.4859 8.53714C15.1948 8.24176 14.7183 8.24176 14.4272 8.53714L11.7002 11.3042C11.3869 11.6221 10.874 11.6221 10.5606 11.3042Z"
													fill="currentColor"></path>
											</svg>
										</span>
										<div class="d-flex flex-column">
											<h4 class="mb-1 text-warning">Alerta</h4>
											<span>@{{error}}</span>
										</div>
									</div>
									<select id="panel_id" name="panel_id" aria-label="Selecciona"
										data-placeholder="Selecciona ..." class="form-select form-select">
										<option value="">Selecciona...</option>
										@foreach($panels as $item)
											<option value="{{$item->id}}" @if($item->default == 1) selected @endif>{{$item->name}}
											</option>
										@endforeach
									</select>
									<!--end::Label-->
									<!--<select id="panel_idx" name="panel_id" ng-model="formData.panel_id" ng-options="item.name for item in panels track by $index" class="form-select form-select-solid" >-->
									<!--<option ng-repeat="item in panels" ng-value="@{{item.id}}" ng-selected="item.default" >@{{item.name}}</option>-->
									<!--</select> -->
								</div>
								<!--end::Input group-->
							</div>
							<!--end::Wrapper-->
						</div>
						<!--end::Step 4-->

						<!--begin::Actions-->
						<div class="d-flex flex-stack pt-10">
							<!--begin::Wrapper-->
							<div class="mr-2">
								<button type="button" class="btn btn-lg btn-light-primary me-3"
									data-kt-stepper-action="previous">
									<!--begin::Svg Icon | path: icons/duotune/arrows/arr063.svg-->
									<span class="svg-icon svg-icon-4 me-1">
										<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
											xmlns="http://www.w3.org/2000/svg">
											<rect opacity="0.5" x="6" y="11" width="13" height="2" rx="1"
												fill="currentColor" />
											<path
												d="M8.56569 11.4343L12.75 7.25C13.1642 6.83579 13.1642 6.16421 12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75L5.70711 11.2929C5.31658 11.6834 5.31658 12.3166 5.70711 12.7071L11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25C13.1642 17.8358 13.1642 17.1642 12.75 16.75L8.56569 12.5657C8.25327 12.2533 8.25327 11.7467 8.56569 11.4343Z"
												fill="currentColor" />
										</svg>
									</span>
									<!--end::Svg Icon-->Anterior
								</button>
							</div>
							<!--end::Wrapper-->
							<!--begin::Wrapper-->
							<div>
								<button type="button" class="btn btn-lg btn-primary me-3" data-kt-stepper-action="submit"
									ng-click="sendForm()">
									<span class="indicator-label"> Generar propuesta
										<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
										<span class="svg-icon svg-icon-3 ms-2 me-0">
											<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1"
													transform="rotate(-180 18 13)" fill="currentColor" />
												<path
													d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z"
													fill="currentColor" />
											</svg>
										</span>
										<!--end::Svg Icon-->
									</span>
									<span class="indicator-progress">Generando ...
										<span class="spinner-border spinner-border-sm align-middle ms-2"></span>
									</span>
								</button>
								@if(\Auth::user()->subscriptionActive()->status == 'active' && $available_projects)
									<button type="button" class="btn btn-lg btn-primary" data-kt-stepper-action="next">Siguiente
										<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.svg-->
										<span class="svg-icon svg-icon-4 ms-1 me-0">
											<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
												xmlns="http://www.w3.org/2000/svg">
												<rect opacity="0.5" x="18" y="13" width="13" height="2" rx="1"
													transform="rotate(-180 18 13)" fill="currentColor" />
												<path
													d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z"
													fill="currentColor" />
											</svg>
										</span>
										<!--end::Svg Icon-->
									</button>
								@endif
							</div>
							<!--end::Wrapper-->
						</div>
						<!--end::Actions-->
					</form>
					<!--end::Form-->

					<span class="overlay-layer card-rounded bg-dark bg-opacity-5 loader" ng-show="loading===false"
						style="display:block"></span>
					<div class="overlay-layer card-rounded bg-dark bg-opacity-5" ng-show="loading===false">
						<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs"
							type="module"></script>
						<dotlottie-player src="/assets/app/media/lottiefiles/sunone.lottie" background="transparent"
							speed="1" style="width: 300px; height: 300px;" loop autoplay></dotlottie-player>
					</div>

				</div>
				<!--end::Content-->
			</div>
			<!--end::Stepper-->
		</div>
		<!--end::Container-->

		<!-- Map-->
		<div class="modal fade" id="kt_modal_map" tabindex="-1" aria-hidden="true">
			<!--begin::Modal dialog-->
			<div class="modal-dialog modal-dialog-centered mw-900px">
				<!--begin::Modal content-->
				<div class="modal-content">
					<!--begin::Form-->
					<!--begin::Modal header-->
					<div class="modal-header" id="kt_modal_new_address_header">
						<!--begin::Modal title-->
						<h2>Selecciona la ubicación del proyecto para actualizar la hora solar pico</h2>
						<!--end::Modal title-->
						<!--begin::Close-->
						<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
							<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
							<span class="svg-icon svg-icon-1">
								<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
									xmlns="http://www.w3.org/2000/svg">
									<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
										transform="rotate(-45 6 17.3137)" fill="currentColor" />
									<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)"
										fill="currentColor" />
								</svg>
							</span>
							<!--end::Svg Icon-->
						</div>
						<!--end::Close-->
					</div>
					<!--end::Modal header-->
					<!--begin::Modal body-->
					<div class="modal-body py-10 px-lg-17">
						<!--begin::Scroll-->
						<div class="scroll-y me-n7 pe-7" id="kt_block_ui_2_target">
							<form action="/peak_solar_time" id="nasa" method="post">
								@csrf
								<div class="alert  bg-light-primary border border-primary  p-5 mb-10" style="display:none"
									id="peak_solar_div">
									<div class="d-flex flex-column pe-0 pe-sm-10">
										<h5 class="mb-1"> Hora Solar pico: <span id="peak_solar_time_label"></span> </h5>
									</div>
								</div>
								<ul id="predictions" class="predictions list-group"></ul>
								<div id="mapSearch">
									<input id="addressPoint" class="form-control controls margin-top-10" type="text"
										style="width:50%; font-size:16px; height: 35px!important;"
										placeholder="Escribir dirección">
								</div>

								<div style="height: 450px;" id="map_solar_app"></div>

								<input id="lat" name="lat" type="hidden">
								<input id="long" name="long" type="hidden">

								<input id="lat_init" name="lat_init" type="hidden" value="17.2163">
								<input id="long_init" name="long_init" type="hidden" value="-97.4395">
								<script>
									(g => {
										var h, a, k, p = "The Google Maps JavaScript API",
											c = "google",
											l = "importLibrary",
											q = "__ib__",
											m = document,
											b = window;
										b = b[c] || (b[c] = {});
										var d = b.maps || (b.maps = {}),
											r = new Set,
											e = new URLSearchParams,
											u = () => h || (h = new Promise(async (f, n) => {
												await (a = m.createElement("script"));
												e.set("libraries", [...r] + "");
												for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]);
												e.set("callback", c + ".maps." + q);
												a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
												d[q] = f;
												a.onerror = () => h = n(Error(p + " could not load."));
												a.nonce = m.querySelector("script[nonce]")?.nonce || "";
												m.head.append(a)
											}));
										d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n))
									})
										({
											key: "{{env('API_KEY_GOOGLE_MAPS')}}",
											v: "weekly"
										});
								</script>
							</form>
						</div>
						<!--end::Scroll-->
						<!--<span class="overlay-layer card-rounded bg-dark bg-opacity-5 loader"  style="display:block"></span>
																										<div class="overlay-layer card-rounded bg-dark bg-opacity-5" >
																											<div class="spinner-border text-primary" role="status">
																												<span class="visually-hidden">Obteniendo datos...</span>
																											</div>
																										</div> -->
					</div>
					<!--end::Modal body-->
					<!--begin::Modal footer-->
					<div class="modal-footer flex-center">
						<!--begin::Button-->
						<button type="reset" data-bs-dismiss="modal" class="btn btn-light me-3">Cerrar</button>
						<!--end::Button-->
					</div>
					<!--end::Modal footer-->
				</div>
			</div>
		</div>


		<!--modal consumos-->
		<div class="modal fade" id="kt_modal_consumos" tabindex="-1" aria-hidden="true">
			<!--begin::Modal dialog-->
			<div class="modal-dialog modal-xl">
				<!--begin::Modal content-->
				<div class="modal-content">
					<!--begin::Form-->
					<!--begin::Modal header-->
					<div class="modal-header" id="kt_modal_new_address_header">
						<!--begin::Modal title-->
						<h2>CONSUMOS</h2>
						<!--end::Modal title-->
						<!--begin::Close-->
						<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
							<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
							<span class="svg-icon svg-icon-1">
								<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
									xmlns="http://www.w3.org/2000/svg">
									<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
										transform="rotate(-45 6 17.3137)" fill="currentColor" />
									<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)"
										fill="currentColor" />
								</svg>
							</span>
							<!--end::Svg Icon-->
						</div>
						<!--end::Close-->
					</div>
					<!--end::Modal header-->
					<!--begin::Modal body-->
					<div class="modal-body py-10 px-lg-17">

						<div class="col-md-12" id="minimum_average">
							<!--begin::Tables Widget 9-->
							<div class="card card-xxl-stretch mb-5 mb-xl-8">

								<!--begin::Body-->
								<div class="card-body py-3">
									<!--begin::Table container-->
									<div class="table-responsive">
										<!--begin::Table-->
										<table class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4">
											<!--begin::Table head-->
											<thead>
												<tr class="fw-bold text-muted">
													<th>Periodo</th>
													<th>Número de servicio</br>@{{formData.rpu}}</th>
													<th ng-repeat="x in extra_consumption track by $index">Número de
														servicio</br>@{{x.numeroServicio}}</th>
													<th>Total</th>
												</tr>
											</thead>
											<!--end::Table head-->
											<!--begin::Table body-->
											<tbody>
												<tr ng-repeat="row in consumptionToUnify track by $index">
													<th ng-repeat="cell in row track by $index">@{{cell}}</th>
												</tr>
											</tbody>
											<!--end::Table body-->
										</table>
										<!--end::Table-->
									</div>
									<!--end::Table container-->
								</div>
								<!--begin::Body-->
							</div>
							<!--end::Tables Widget 9-->
						</div>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-light-primary font-weight-bold"
							data-bs-dismiss="modal">Close</button>
						<button type="button" class="btn btn-primary font-weight-bold"
							ng-click="unifyReceipts()">Unificar</button>
					</div>

				</div>
			</div>
		</div>
		<!--fin modal consumos-->
	</div>
@endsection

@section('js')
	<!--<script src="/assets/app/js/datos_nasa.js"></script>-->

	<script
		src="https://maps.googleapis.com/maps/api/js?libraries=places&key={{env('API_KEY_GOOGLE_MAPS')}}&callback=initAutocomplete"
		async defer></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
	<script type="text/javascript">
		// Stepper lement
		var element = document.querySelector("#kt_create_account_stepper");

		// Initialize Stepper
		var stepper = new KTStepper(element);

		// Handle navigation click
		stepper.on("kt.stepper.click", function (stepper) {
			console.log(stepper.getClickedStepIndex());
			stepper.goTo(stepper.getClickedStepIndex()); // go to clicked step
		});

		//var validations = [];
		// Handle next step
		stepper.on("kt.stepper.next", function (stepper) {
			// Validate form before change stepper step
			var validator = validations(stepper.getCurrentStepIndex()); // get validator for currnt step
			console.log(validator);
			if (validator.success) {

				console.log("Sig paso");
				stepper.goNext();
				KTUtil.scrollTop();

			} else {
				Swal.fire({
					text: validator.errors.join(' - '),
					icon: "error",
					buttonsStyling: false,
					confirmButtonText: "Ok",
					customClass: {
						confirmButton: "btn btn-light"
					}
				}).then(function () {
					KTUtil.scrollTop();
				});
			}
		});

		// Handle previous step
		stepper.on("kt.stepper.previous", function (stepper) {
			stepper.goPrevious(); // go previous step
		});



		function validations(step) {
			var form = $(this);
			console.log("funcion validar del paso " + step);
			success = true;
			errors = [];
			switch (step) {
				case 1:
					errors = [];

					if ($('#name_customer').val() == "") {
						success = false;
						errors.push('Introduce el nombre del cliente');
					}
					break;
				case 2:
					if ($('#state_id').val() == "") {
						success = false;
						errors.push('Selecciona el estado');
					}
					//console.log($('#rate_id').val() );
					if ($('#rate_id').val() == 12 || $('#rate_name').val() == 'GDMTH') //GDMTH
					{
						if ($('#municipality_id').val() == "") {
							success = false;
							errors.push('Selecciona el municipio');
						}
					}
					if ($('#peak_solar_time').val() == "") {
						success = false;
						errors.push('Introduce la hora solar pico');
					}
					if ($('#rate_id').val() == "") {
						success = false;
						errors.push('Selecciona la tarifa');
					}
					if ($('#invoice_type').val() == "") {
						success = false;
						errors.push('Selecciona el tipo de facturación');
					}
					if ($('#kt_datepicker_2').val() == "") {
						success = false;
						errors.push('Selecciona el periodo inicial de facturación');
					}
					if ($('#kt_datepicker_12').val() == "") {
						success = false;
						errors.push('Selecciona el periodo final de facturación');
					}
					break;
				case 3:
					if ($('#rate_id').val() == 12 || $('#rate_name').val() == 'GDMTH') //GDMTH
					{

						if ($('#base').val() == "") {
							success = false;
							errors.push('Introduce los kWh Base');
						}
						if ($('#intermediate').val() == "") {
							success = false;
							errors.push('Introduce los kWh Intermedio');
						}
						if ($('#tip').val() == "") {
							success = false;
							errors.push('Introduce los kWh Punta');
						}
						if ($('#kvarh').val() == "") {
							success = false;
							errors.push('Introduce el valor de kVArh');
						}
						if ($('#base_demand').val() == "") {
							success = false;
							errors.push('Introduce el valor de kWh Base - Demanda');
						}
						if ($('#intermediate_demand').val() == "") {
							success = false;
							errors.push('Introduce el valor de kWh Intermedio - Demanda');
						}
						if ($('#tip_demand').val() == "") {
							success = false;
							errors.push('Introduce el valor de kWh Punta - Demanda');
						}
						if ($('#iva').val() == "") {
							success = false;
							errors.push('Introduce el valor del iva');
						}
						if ($('#low_voltage_measurement').val() == "") {
							success = false;
							errors.push('Selecciona la Medición en baja tensión');
						}
					}
					break;

			}

			return {
				'success': success,
				'errors': errors
			}
		}
	</script>


	<script src="/assets/app/js/datos_nasa.js"></script>
	<script src="/assets/app/js/widgets.bundle.js"></script>
	<script src="/assets/app/js/custom/documentation/forms/inputmask.js"></script>
	<script src="/assets/app/js/custom/documentation/forms/flatpickr.js"></script>

@endsection