@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">
			<!--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">
					<!--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' ">
							<!--begin::Wrapper-->
							<div class="w-100" ng-init="formData.name='{{isset($contact)? $contact->person->name : 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-->
									<!--begin::Description-->
									<div class="text-muted fw-bold fs-4">
										<a href="#" class="link-primary fw-bolder"></a>
										@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
									</div>
									<!--end::Description-->
								</div>
								<!--end::Heading-->
								<!--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-solid" type="text" name="name_customer" ng-model="formData.name">
									</div>
									<div class="col-md-6 fv-row">
										<label class="form-label mb-3">Teléfono</label>
										<input class="form-control form-control-solid" type="text" name="" ng-model="formData.phone">
									</div>
								</div>
								<!--end::Input group-->

								

								<!--begin::Input group-->
								<div class="fv-row mb-8">
									<!--begin::Label-->
									<label class="form-label mb-3">Email</label>
									<!--end::Label-->
									<!--begin::Input-->
									<input class="form-control form-control-solid" type="text" name="" ng-model="formData.email">
									<!--end::Input-->
								</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">
									<!--begin::Title-->
									<h1 class="fw-bolder text-dark">Datos del recibo</h1>
									
									<!--end::Title-->
									<!--begin::Description-->
									<div class="text-muted fw-bold fs-4">
									<a href="#" class="link-primary fw-bolder"></a></div>
									<!--end::Description-->
								</div>
								<!--end::Heading-->
								
								<!--begin::Input group-->
								<div class="fv-row mb-8">
									@csrf
									<!--begin::Label-->
									<label class="required fs-6 fw-bold mb-2">Estado</label>
									<!--end::Label-->
									<!--begin::Input-->
									<select class="form-select form-select-solid" data-hide-search="true" data-placeholder="Seleccionar estado" name="state_id" ng-change="infoState(formData.state_id)" ng-model="formData.state_id">
										<option value="">Seleccionar</option>
										@php $states = \App\Models\State::all(); @endphp
										@foreach($states as $state)
										<option value="{{$state->id}}">{{$state->name}}</option>
										@endforeach
									</select>
									<!--end::Input-->
								</div>
								<!--end::Input group-->
								<!--begin::Input group-->
								<div class="row g-9 mb-8">

									<div class="col-md-6">
										<label class="required fs-6 fw-bold mb-2">Tarifa</label>
										<select class="form-select form-select-solid" data-hide-search="true" data-placeholder="Seleccionar tarifa" name="rate_id" ng-change="infoRate(); selectedInvoiceType(); costRate();billingDays();" ng-model="formData.rate_id">
											<option value="">Seleccionar</option>
											@php $rates = \App\Models\Rate::all(); @endphp
											{{$rates}}
											@foreach($rates as $rate)
											<option value="{{$rate->id}}">{{$rate->name}}</option>
											@endforeach
										</select>
									</div>
									<div class="col-md-6" ng-init="threads='220'">
										<label class="required fs-6 fw-bold mb-2">Hilos</label>
										<select class="form-select form-select-solid" data-hide-search="true" data-placeholder="Seleccionar tarifa" 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-->

								<!--begin::Input group-->
								<div class="fv-row mb-8" ng-if="formData.rate_id > 8">
									<!--begin::Label-->
									<label class="required fs-6 fw-bold mb-2">Demanda contratada</label>
									<!--end::Label-->
									<!--begin::Input-->
									<input class="form-control form-control-solid" ng-model="formData.contracted_demand" type="text">
									<!--end::Input-->
								</div>
								<!--end::Input group-->

								<!--begin::Input group-->
								<div class="fv-row mb-8">
									<!--begin::Label-->
									<label class="required fs-6 fw-bold mb-2">Tipo de facturación</label>
									<!--end::Label-->
									<!--begin::Input-->
									<select class="form-select form-select-solid"  data-hide-search="true" data-placeholder="Select..." name="invoice_type" ng-model="formData.invoice_type" ng-change="billingDays(); costRate()">
										<option value=""> Selecciona</option>
										<option value="bimestral" ng-disabled="formData.rate_id > 8" ng-selected="formData.rate_id < 9">Bimestral</option>
										<option value="mensual" ng-selected="formData.rate_id == 9 || formData.rate_id == 10" >Mensual</option>
									</select>
									<!--end::Input-->
								</div>
								<!--end::Input group-->

								<!--begin::Input group-->
								<div class="fv-row mb-8">
									<!--begin::Label-->
									<label class="fs-6 fw-bold mb-2">Número de servicio</label>
									<!--end::Label-->
									<!--begin::Input-->
									<input class="form-control form-control-solid" ng-model="formData.service_number" type="text" name="">
									<!--end::Input-->
								</div>
							<!--end::Input group-->

							<!--begin::Input group-->
							<!-- <div class="fv-row mb-8">
								<label class="required fs-6 fw-bold mb-2">DAP (Derecho de Alumbrado Público) %</label>
								<input class="form-control form-control-solid" type="text" name="" ng-model="formData.dap">
							</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">
							
								<!--begin::Heading-->
								<div class="pb-12">
									<!--begin::Title-->
									<h1 class="fw-bolder text-dark">Agrega los consumos de energía </h1>
									<!--end::Title-->
									<!--begin::Description-->
									<div class="text-muted fw-bold fs-4"> 
									<a href="#" class="link-primary"></a></div>
									<!--end::Description-->
								</div>
								<!--end::Heading-->
								<!--
								<div class="fv-row mb-8">
									<label class="required fs-6 fw-bold mb-2">Consumo @{{formData.invoice_type}} (kWh)</label>
									<input class="form-control form-control-solid" type="text" name="consumo" ng-model="consumo">
								</div>

								<div class="fv-row mb-8">
									<a  ng-click="agregarConsumo(consumo)" class="btn btn-xs btn-info">Agregar consumo</a>
								</div>  -->

								<table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_customers_table" >
									<!--begin::Table head-->
									<thead>
										<!--begin::Table row-->
										<tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase 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 > 8"> Demanda KW</th>
										</tr>
										<!--end::Table row-->
									</thead>
									<!--end::Table head-->
									<!--begin::Table body-->
									<tbody class="fw-bold text-gray-600" >
										<tr ng-repeat="item in formData.consumptions track by $index">
											<td> 
												<span ng-if="formData.invoice_type=='mensual'"> Mes @{{$index+1}} </span>
												<span ng-if="formData.invoice_type=='bimestral'"> Bimestre @{{$index+1}} </span>
											</td>
											<td>
												<input class="form-control form-control-solid" placeholder="Consumo (kWh)" type="number" name="consumptions" ng-model="formData.consumptions[$index]" ng-blur="calculateConsumption()" >
											</td>
											<td class="text-end" ng-show="formData.rate_id > 8">
												<input class="form-control form-control-solid" placeholder="Demanda  (kW)" type="number" name="demand" ng-model="formData.demands[$index]" ng-blur="calculateAverageDemand()"></td>
											</td>
											<!--end::Action=-->
										</tr>
										
									</tbody>
									<!--end::Table body-->
								</table>


								<!--begin::Input group-->
								<div class="fv-row mb-8" ng-show="consumptions.length != 0">
									<!--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-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-success 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>
							<!--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"> 
									<a href="#" class="link-primary"></a></div>
									<!--end::Description-->
								</div>
								<!--end::Heading-->

								<!--begin::Input group-->
								<div class="fv-row mb-8">
									<!--end::Label-->
									<select name="panel_id"  ng-model="formData.panel_id"  aria-label="Selecciona" data-placeholder="Selecciona ..." class="form-select form-select-solid"  ng-change="infoPanel(formData.panel_id);" >
										<option value="">Selecciona...</option>
										@foreach($panels as $item)
										<option value="{{$item->id}}">{{$item->name}}</option>
										@endforeach
									</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>
								<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>
							</div>
							<!--end::Wrapper-->
						</div>
						<!--end::Actions-->
					</form>
					<!--end::Form-->
				</div>
				<!--end::Content-->
			</div>
			<!--end::Stepper-->
			
		</div>
		<!--end::Container-->
	</div>
@endsection

@section('js')
<script src="/assets/app/js/custom/utilities/modals/create-account.js"></script>
<script src="/assets/app/js/widgets.bundle.js"></script>
@endsection