@extends('layouts.master_app')
@section('title') {{$proposal->name}} @endsection

@section('css')
<link href="/assets/app/plugins/custom/prismjs/prismjs.bundle.css" rel="stylesheet" type="text/css" />

<!--CSS ANGULAR -->
<link rel="stylesheet" href="/assets/app/css/sweetalert/sweetalert.css">
<link rel="stylesheet" href="/assets/app/css/toastr/angular-toastr.css" />
<style>
    [ng-cloak], .ng-cloak {
        display: none !important;
    }
</style>
@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"><a href="/contacts/{{$proposal->project->contact->id}}"> {{$proposal->project->contact->person->fullname}}</a>
						<!--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"> {{$proposal->name}}</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-->

	<!--begin::Content-->
	<div class="content d-flex flex-column flex-column-fluid" id="kt_content" ng-controller="quoteInterController" ng-init="infoProposal('{{$proposal->id}}') ;  months={{$months}}; invoice_days = {{$invoice_days}}" >
		<!--begin::Container-->
		<div id="kt_content_container" class="container-xxl">
			@if($proposal->project->type=='interconectados')
			<div class="row g-5 g-xl-8" ng-init="formData.state_id = {{$proposal->project->state_id}}; ">
				
				<div class="col-md-4">
					<div class="card bg-info bg-opacity-75 card-flush bgi-no-repeat bgi-size-contain bgi-position-x-center h-md-10 mb-5 h-xl-10">
						<!--begin::Card body-->
						<div class="card-body d-flex align-items-end mb-3">
							<!--begin::Info-->
							<div class="d-flex align-items-center">
								<!--begin::Icon-->
								<div class="d-flex flex-center rounded-circle h-80px w-80px" style="border: 1px dashed rgba(255, 255, 255, 0.4);">
								<i class="fas fa-solar-panel text-white fs-3qx lh-0"></i>
								</div>
								<span class="fs-4hx text-white fw-bold me-6"> &nbsp; @{{formData.number_modules }}</span>
								<div class="fw-bold fs-6 text-white">
									<span class="d-block">Módulos</span>
									<span class="">Fotovoltaicos</span>
								</div>
								
							</div>
							<!--end::Info-->
							
						</div>
						<!--<div class="mb-10">
							<input type="range" min=2 max="100" class="form-range" id="customRange1" ng-model="formData.number_modules" ng-change="changeNumberPanels()"/>
						</div> -->
						<!--end::Card body-->
						<!--begin::Card footer-->
						<div class="card-footer" style="border-top: 1px solid rgba(255, 255, 255, 0.3);background: rgba(0, 0, 0, 0.15);">
							<!--begin::Progress-->
							<div class="fw-bold text-white py-2">
								<span class="fs-1 d-block">@{{formData.system_size | number : fractionSize}} kWp</span>
								<span class="opacity-50">Tamaño del sistema</span>
							</div>
							<!--end::Progress-->
						</div>
						<!--end::Card footer-->
					</div>
				</div>
				<div class="col-md-4">
					<!--begin::Card widget 1-->
					<div class="card card-flush  bg-info bg-opacity-75 bgi-no-repeat bgi-size-contain bgi-position-x-center border-0 h-md-10 mb-5 mb-xl-10" >
						<!--begin::Body-->
						<div class="card-body d-flex justify-content-between flex-column pt-1 px-0 pb-0">
							<!--begin::Wrapper-->
							<div class="d-flex flex-wrap px-9 mb-5">
								<!--begin::Stat-->
								<div class="rounded min-w-125px py-3 px-4 my-1 me-6" style="border: 1px dashed rgba(255, 255, 255, 0.2)">
									<!--begin::Number-->
									<div class="d-flex align-items-center">
										<span class="text-white fs-2 fw-bold" >$ @{{formData.current_payment_cfe | number : fractionSize  }}</span>
									</div>
									<!--end::Number-->
									<!--begin::Label-->
									<div class="fw-semibold fs-6 text-white opacity-50">Pago promedio a CFE</div>
									<a href="/proposals/edit/{{$proposal->id}}" type="button" class="text-white opacity-50 pt-1 fw-semibold fs-6"> Editar consumos </a>
									<!--end::Label-->
								</div>
								<!--end::Stat-->
								<!--begin::Stat-->
								@if($proposal->project->rate_id < 12)
								<div class="rounded min-w-125px py-3 px-4 my-1" style="border: 1px dashed rgba(255, 255, 255, 0.2)">
									<!--begin::Number-->
									<div class="d-flex align-items-center">
										<span class="text-white fs-2 fw-bold">$ @{{formData.new_payment_cfe | number : fractionSize  }}</span>
									</div>
									<!--end::Number-->
									<!--begin::Label-->
									<div class="fw-semibold fs-6 text-white opacity-50">Nuevo pago a CFE <br>(promedio)</div>
									<!--end::Label-->
								</div>
								<!--end::Stat-->
								@endif
								@if($proposal->project->rate_id == 12)
								<div class="rounded min-w-125px py-3 px-4 my-1" style="border: 1px dashed rgba(255, 255, 255, 0.2)">
									<!--begin::Number-->
									<div class="d-flex align-items-center">
										<span class="text-white fs-2 fw-bold">
											$ @{{ formData.current_annual_cfe_payment  | number : fractionSize  }}
											<button type="button" class="btn btn-default" data-bs-toggle="modal" data-bs-target="#kt_modal_new_payment_cfe_gdmth">
												Ver detalles
											</button>
										</span>
									</div>
									<!--end::Number-->
									<!--begin::Label-->
									<div class="fw-semibold fs-6 text-white opacity-50">Ahorro anual</div>
									<!--end::Label-->
								</div>
								<!--end::Stat-->
								@endif
							</div>
							<!--end::Wrapper-->

							<!--begin:: -->
							@if($proposal->project->rate_id < 12)
							<div class="d-flex flex-wrap px-9 mb-5">
							<!--begin::Stat-->
								<div class="rounded min-w-125px py-3 px-4 my-1 me-6" style="border: 1px dashed rgba(255, 255, 255, 0.2)">
									<!--begin::Number-->
									<div class="d-flex align-items-center">
										<span class="text-white fs-2 fw-bold" >$ @{{ cfe.total_annual_savings_per_period | number : fractionSize  }}</span>
									</div>
									<!--end::Number-->
									<!--begin::Label-->
									<div class="fw-semibold fs-6 text-white opacity-50">Ahorro anual </div>
									<!--end::Label-->
								</div>
								<!--end::Stat-->
							</div>
							<!--end::-->
							@endif
							@if($proposal->project->rate_id == 12)
							<div class="d-flex flex-wrap px-9 mb-5">
								<!--begin::Stat-->
								<div class="rounded min-w-125px py-3 px-4 my-1 me-6" style="border: 1px dashed rgba(255, 255, 255, 0.2)">
									<!--begin::Number-->
									<div class="d-flex align-items-center">
										<span class="text-white fs-2 fw-bold" >$ @{{ cfe.total_annual_current_payment_cfe | number : fractionSize  }}</span>
									</div>
									<!--end::Number-->
									<!--begin::Label-->
									<div class="fw-semibold fs-6 text-white opacity-50">Pago anual sin SFVI</div>
									<!--end::Label-->
								</div>
								<!--end::Stat-->
								<div class="rounded min-w-125px py-3 px-4 my-1 me-6" style="border: 1px dashed rgba(255, 255, 255, 0.2)">
									<!--begin::Number-->
									<div class="d-flex align-items-center">
										<span class="text-white fs-2 fw-bold" >$ @{{ cfe.total_annual_new_payment_cfe | number : fractionSize  }}</span>
									</div>
									<!--end::Number-->
									<!--begin::Label-->
									<div class="fw-semibold fs-6 text-white opacity-50">Nuevo pago anual con SFVI</div>
									<!--end::Label-->
								</div>
								<!--end::Stat-->
							</div>
							<!--end::-->
							@endif
						</div>
						<!--end::Body-->
					</div>
					<!--end::Card widget 1-->
				</div>
				@if($proposal->project->rate_id<12)
				<div class="col-md-4" >
					<div class="card card-flush bg-info bg-opacity-75 bgi-no-repeat bgi-size-contain bgi-position-x-center border-0 h-md-10 mb-5 mb-xl-10">
						<!--begin::Header-->
						<div class="card-header pt-5">
							<!--begin::Title-->
							<div class="card-title d-flex flex-column">
								<!--begin::Amount-->
								<span class="fs-1hx fw-bold text-white me-2 lh-1 ls-n2">@{{formData.average_consumption | number : fractionSize  }} kWh</span>
								<!--end::Amount-->
								<!--begin::Subtitle-->
								<span class="text-white opacity-50 pt-1 fw-semibold fs-6">Consumo promedio {{$proposal->project->invoice_type}} </span>
								<!--end::Subtitle-->
								
							</div>
							<!--end::Title-->
						</div>
						<!--end::Header-->
						<!--begin::Header-->
						<div class="card-header pt-5">
							<!--begin::Title-->
							<div class="card-title d-flex flex-column">
								<!--begin::Amount-->
								<span class="fs-1hx fw-bold text-white me-2 lh-1 ls-n2">@{{formData.energy_generation | number : fractionSize  }} kWh</span>
								<!--end::Amount-->
								<!--begin::Subtitle-->
								<span class="text-white opacity-50 pt-1 fw-semibold fs-6">Generación promedio de energía {{$proposal->project->invoice_type}}</span>
								<!--end::Subtitle-->
							</div>
							<!--end::Title-->
						</div>
						<!--end::Header-->
						
						<!--begin::Card body-->
						<div class="card-body d-flex align-items-end pt-0">
							<!--begin::Progress-->
							<div class="d-flex align-items-center flex-column mt-3 w-100">
								<div class="d-flex justify-content-between fw-bold fs-6 text-white opacity-50 w-100 mt-auto mb-2">
									<span>Ahorro de energía</span>
									<span>@{{formData.energy_saving}}%</span>
								</div>
								<div class="h-8px mx-3 w-100 bg-light-danger rounded">
									<div class="bg-warning rounded h-8px" role="progressbar" style="width: @{{ formData.energy_saving >= 100 ? 100 : formData.energy_saving }}%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
								</div>
							</div>
							<!--end::Progress-->
						</div>
						<!--end::Card body-->
					</div>
				</div>
				@endif
			</div>
			<div class="alert alert-dismissible bg-light-danger border border-danger border-3 d-flex flex-column flex-sm-row w-100 p-5 mb-10"  ng-show="ratio_inverter > 500">
				<i class="fa fa-warning fs-2tx text-danger "></i>
				<div class="d-flex flex-column ">
					<h4 class="mb-1 text-danger" style="margin-left: 20px;"> FUERA DE RANGO DE GENERACIÓN DISTRIBUIDA</h4>
					<p style="margin-left: 20px;"> Central Mayor a 500kW requieren permisos de instalación y generación adicionales </p>
				</div>
			</div>
			@if(isset($proposal->project->rate) && $proposal->project->rate->name == 'GDMTH')
			<div class="alert alert-dismissible bg-light-danger border border-danger border-3 d-flex flex-column flex-sm-row w-100 p-5 mb-10"  ng-show="proposal.system_size > proposal.project.contracted_demand">
				<i class="fa fa-warning fs-2tx text-danger "></i>
				<div class="d-flex flex-column ">
					<h4 class="mb-1 text-danger" style="margin-left: 20px;"> ADVERTENCIA </h4>
					<p style="margin-left: 20px;"> La potencia sugerida del SFV supera la demanda contratada</p>
				</div>
			</div>
			@endif
			@endif
			<!--begin::Layout-->
			<div class="d-flex flex-column flex-lg-row ">
				<!--begin::Content-->
				<div class="flex-lg-row-fluid mb-10 mb-lg-0 me-lg-7 me-xl-10" ng-class="{'overlay': !loading, 'overlay-block': !loading}">
					<!--begin::Card-->
					<div class="card">
						<!--begin::Card body-->
						<div class="card-body p-12">
							<!--begin::Form-->
							<form action="" id="kt_invoice_form">
								<!--begin::Wrapper-->
								<div class="d-flex flex-column align-items-start flex-xxl-row">
									<!--begin::Input group-->
									<div class="d-flex align-items-center flex-equal fw-row me-4 order-2" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Especifica la fecha de la cotización">
										<!--begin::Date-->
										<div class="fs-6 fw-bold text-gray-700 text-nowrap">Fecha:</div>
										<!--end::Date-->
										<!--begin::Input-->
										<div class="position-relative d-flex align-items-center w-150px">
											<!--begin::Datepicker-->
											<input class="form-control form-control-transparent fw-bold pe-5" id="kt_datepicker_2" ng-model="formData.date" placeholder="Selecciona" name="invoice_date" />
											<!--end::Datepicker-->
											<!--begin::Icon-->
											<!--begin::Svg Icon | path: icons/duotune/arrows/arr072.svg-->
											<span class="svg-icon svg-icon-2 position-absolute ms-4 end-0">
												<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
													<path d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z" fill="currentColor" />
												</svg>
											</span>
											<!--end::Svg Icon-->
											<!--end::Icon-->
										</div>
										<!--end::Input-->
									</div>
									<!--end::Input group-->
									<!--begin::Input group-->
									<div class="d-flex flex-center flex-equal fw-row text-nowrap order-1 order-xxl-2 me-4" data-bs-toggle="tooltip" data-bs-trigger="hover" >
										<span class="fs-2x fw-bold text-gray-800">Folio #</span>
										<input type="text" class="form-control form-control-flush fw-bold text-muted fs-3 w-125px" value="{{$proposal->folio}}" placehoder="..." disabled />
									</div>
									<!--end::Input group-->
									<!--begin::Input group-->
									<div class="d-flex align-items-center justify-content-end flex-equal order-3 fw-row" data-bs-toggle="tooltip" data-bs-trigger="hover" title="Especifica la fecha de vencimiento de la cotización">
										<!--begin::Date-->
										<div class="fs-6 fw-bold text-gray-700 text-nowrap">Fecha vencimiento:</div>
										<!--end::Date-->
										<!--begin::Input-->
										<div class="position-relative d-flex align-items-center w-150px">
											<!--begin::Datepicker-->
											<input class="form-control form-control-transparent fw-bold pe-5" id="kt_datepicker_1" ng-model="formData.due_date" placeholder="Selecciona" name="invoice_due_date" />
											<!--end::Datepicker-->
											<!--begin::Icon-->
											<!--begin::Svg Icon | path: icons/duotune/arrows/arr072.svg-->
											<span class="svg-icon svg-icon-2 position-absolute end-0 ms-4">
												<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
													<path d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z" fill="currentColor" />
												</svg>
											</span>
											<!--end::Svg Icon-->
											<!--end::Icon-->
										</div>
										<!--end::Input-->
									</div>
									<!--end::Input group-->
								</div>
								<!--end::Top-->
								<!--begin::Separator-->
								<div class="separator separator-dashed my-10"></div>
								<!--end::Separator-->
								<!--begin::Wrapper-->
								<div class="mb-0">
								
									<!--begin::Row-->
									<div class="row gx-10 mb-5">
										<!--begin::Col-->
										<div class="col-lg-6">
											<label class="form-label fs-6 fw-bold text-gray-700 mb-3">Datos del cliente
												<a data-bs-toggle="modal" data-bs-target="#kt_modal_edit_contact"  >
													<span class="fs-2x fw-bold text-gray-800"><i class="fa fa-edit"></i></span>
												</a>
											</label>
											<!--begin::Input group-->
											<div class="mb-5">
												<span class="text-gray-400 min-w-175px w-175px">Email:</span>
												<span class="text-gray-800 min-w-200px">
												@if(count($proposal->project->contact->person->emails) !=  0)
													<i class="fas fa-envelope"></i>
													@foreach($proposal->project->contact->person->emails as $item)
													{{$item->email}} @if(count($proposal->project->contact->person->emails)>1 && !$loop->last), @endif
													@endforeach
												@endif	
												</span>
											</div>
											<!--end::Input group-->
											
											<!--begin::Input group-->
											<div class="mb-5">
												<span class="text-gray-400">Teléfono:</span>
												<span class="text-gray-800">
													@if(count($proposal->project->contact->person->phones) !=  0)
													<i class="fas fa-phone"></i>
														@foreach($proposal->project->contact->person->phones as $item)
														{{$item->phone}} @if(count($proposal->project->contact->person->phones)>1 && !$loop->last), @endif
														@endforeach
													@endif
												</span>
											</div>
											<!--end::Input group-->
											<!--begin::Input group-->
											<div class="mb-5">
												<span class="text-gray-400">Nombre:</span>
												<span class="text-gray-800">{{$proposal->project->contact->person->full_name}}</span>
											</div>
											<!--end::Input group-->
											@if($proposal->project->contact->name_business != null)
											<div class="mb-5">
												<span class="text-gray-400">Empresa:</span>
												<span class="text-gray-800">{{$proposal->project->contact->name_business}}</span>
											</div>
											@endif
										</div>
										<!--end::Col-->
										<!--begin::Col-->
										@if($proposal->project->type=='interconectados')
										<div class="col-lg-6">
											<label class="form-label fs-6 fw-bold text-gray-700 mb-3"></label>
											<div class="mb-5">
												<span class="text-gray-400 min-w-175px w-175px">Estado:</span>
												<span class="text-gray-800 min-w-200px">{{$proposal->project->state->name}}</span>
											</div>
											<div class="mb-5">
												<span class="text-gray-400">Tarifa:</span>
												<span class="text-gray-800">{{$proposal->project->rate->name}}</span>
											</div>
											<div class="mb-5">
												<span class="text-gray-400">Tipo de facturación:</td>
												<spantd class="text-gray-800">{{$proposal->project->invoice_type}}</span>
											</div>
											<div class="mb-5">
												<span class="text-gray-400">Número de servicio:</span>
												<span class="text-gray-800">{{$proposal->project->rpu}}</span>
											</div>
											@if($proposal->project->address != null)
											<div class="mb-5">
												<span class="text-gray-400">Dirección:</span>
												<span class="text-gray-800">{{$proposal->project->address}}</span>
											</div>
											@endif
										</div>
										@endif
									</div>
									
									<!--end::Row-->
									<!--begin::Table wrapper-->
									<div class="table-responsive mb-10">
										<!--begin::Table-->
										<table class="table g-5 gs-0 mb-0 fw-bold text-gray-700" data-kt-element="items">
											<!--begin::Table head-->
											<thead>
												<tr class="border-bottom fs-7 fw-bold text-gray-700 text-uppercase">
													<th class="min-w-5px w-5px"></th>
													<th class="min-w-300px w-475px">Concepto</th>
													<th class="min-w-100px w-100px">Cantidad</th>
													<th class="min-w-150px w-150px">Precio unitario</th>
													<th class="min-w-100px w-150px text-end">Total</th>
													<th class="min-w-75px w-75px text-end"></th>
												</tr>
											</thead>
											<!--end::Table head-->
											<!--begin::Table body-->
											<tbody>
												<tr class="border-bottom border-bottom-dashed" data-kt-element="item" ng-repeat="item in costs">
													<td class="pt-5">
														<button type="button" class="btn btn-sm btn-icon" ng-click="deleteCostProposal(item.id,item.company_product.name)">
															<!--begin::Svg Icon | path: icons/duotune/general/gen027.svg-->
															<span class="svg-icon svg-icon-3 text-danger">
																<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
																	<path d="M5 9C5 8.44772 5.44772 8 6 8H18C18.5523 8 19 8.44772 19 9V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V9Z" fill="currentColor" />
																	<path opacity="0.5" d="M5 5C5 4.44772 5.44772 4 6 4H18C18.5523 4 19 4.44772 19 5V5C19 5.55228 18.5523 6 18 6H6C5.44772 6 5 5.55228 5 5V5Z" fill="currentColor" />
																	<path opacity="0.5" d="M9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V4H9V4Z" fill="currentColor" />
																</svg>
															</span>
															<!--end::Svg Icon-->
														</button>
													</td>
													<td class="pe-7"  ng-init="company_product_name[item.id]=item.company_product.name; quantity[item.id]=item.quantity; unit_price[item.id]=item.unit_price; company_product_concept[item.id]=item.concept">
														<input type="text" class="form-control mb-2" ng-model="company_product_name[item.id]"  ng-disabled="item.company_product.name != null"  ng-show="item.company_product.name != null"/>
														<input type="text" class="form-control mb-2" ng-model="company_product_concept[item.id]"  ng-show="item.company_product.name == null" ng-blur="updateCostProposal(item.id,quantity[item.id],unit_price[item.id], company_product_concept[item.id])"/>
													</td>
													<td class="ps-0">
														<input class="form-control" type="text" min="1" ng-model="quantity[item.id]" data-kt-element="quantity" ng-blur="updateCostProposal(item.id,quantity[item.id],unit_price[item.id], company_product_concept[item.id])"/>
													</td>
													<td>
														<input type="text" class="form-control text-end" ng-model="unit_price[item.id]" data-kt-element="unit_price" ng-blur="updateCostProposal(item.id,quantity[item.id],unit_price[item.id], company_product_concept[item.id])"/>
														<small>@{{item.currency}}</small>
													</td>
													<td class="pt-8 text-end text-nowrap">
													<span data-kt-element="total">@{{item.total | currency }}</span></td>
													
												</tr>
											</tbody>
											<!--end::Table body-->
											<!--begin::Table foot-->
											<tfoot>
												<tr class="border-top border-top-dashed align-top fs-6 fw-bold text-gray-700">
													<th></th>
													<th class="text-primary">
													<a href="#" class="btn btn-outline btn-outline-dashed btn-outline-primary btn-active-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end"><i class="fas fa-plus"></i> Agregar concepto <span class="svg-icon svg-icon-5 m-0">
														<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
															<path d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z" fill="currentColor"></path>
														</svg>
														</span>
													</a>
													<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true" style="">
														<div class="menu-item px-3">
															<a href="#" data-bs-toggle="modal" data-bs-target="#kt_modal_add_cost_proposal" class="menu-link px-3" ng-click="type_add_cost_proposal='panel'">Módulo fotovoltaico</a>
														</div>
														<div class="menu-item px-3">
															<a href="#" class="menu-link px-3" data-bs-toggle="modal" data-bs-target="#kt_modal_add_cost_proposal" ng-click="type_add_cost_proposal='inverter'"> Inversor</a>
														</div>
														<div class="menu-item px-3">
															<a href="#" class="menu-link px-3" data-bs-toggle="modal" data-bs-target="#kt_modal_add_cost_proposal" ng-click="type_add_cost_proposal='accesory'"> Accesorio</a>
														</div>
														<div class="menu-item px-3">
															<a href="#" class="menu-link px-3" data-bs-toggle="modal" data-bs-target="#kt_modal_add_cost_proposal" ng-click="type_add_cost_proposal='structure'"> Estructura</a>
														</div>
														<div class="menu-item px-3">
															<a href="#" class="menu-link px-3" data-bs-toggle="modal" data-bs-target="#kt_modal_add_cost_proposal" ng-click="type_add_cost_proposal='workforce'"> Mano de obra</a>
														</div>
														<div class="menu-item px-3">
															<a href="#" class="menu-link px-3" data-bs-toggle="modal" data-bs-target="#kt_modal_add_cost_proposal" ng-click="type_add_cost_proposal='additional'"> Adicional</a>
														</div>
														<div class="menu-item px-3">
															<a href="#" class="menu-link px-3" ng-click="formData.quantity= 0; addCostProposal()"> Concepto propio</a>
														</div>
													</div>

													</th>
													<th colspan="1" class="ps-0">
														<div class="d-flex flex-column align-items-start">
															<div class="fs-5">Subtotal</div>
														</div>
													</th>
													<th colspan="2" class="text-end">
													<span data-kt-element="sub-total">@{{formData.subtotal_costs | currency  }}</span></th>
												</tr>
												<tr>
												<th></th>
													<th class=" text-end" ng-init="discount!=0 ? add_discount=true : false">
														<a class="btn btn-sm btn-outline btn-outline-dashed btn-outline-primary btn-active-light-primary" ng-show="!add_discount" ng-click="add_discount=true"><i class="fas fa-plus"></i>Agregar descuento</a>
													</th>
													<th class="ps-0"   >
														<div class="d-flex flex-column align-items-start" ng-show="add_discount">
															<div class="fs-5">Descuento</div>
														</div>
													</th>
													<th colspan="1" class=" ps-0">
														<div class="input-group mb-5" ng-show="add_discount">
															<input class="form-control" ng-model="discount" type="text" min="1" name="" ng-blur="updateTaxDiscount()"  />
															<span class="input-group-text">%</span>
														</div>
													</th>
													<th colspan="1" class=" text-end" ng-show="add_discount">
														<span data-kt-element="sub-total">@{{formData.subtotal_costs * (discount/100) | currency}}</span>
													</th>
												</tr>
												<tr>
													<th></th>
													<th class="border-bottom text-end" ng-init="tax_amount!=0 ? add_tax=true : false; ">
														<a class="btn btn-sm btn-outline btn-outline-dashed btn-outline-primary btn-active-light-primary" ng-show="!add_tax" ng-click="add_tax=true"> <i class="fas fa-plus"></i>Agregar impuesto</a>
													</th>
													<th class="border-bottom border-bottom-dashed ps-0" ng-show="add_tax">
														<div class="input-group mb-5" >
															<input class="form-control" type="text" ng-model="tax_name"/>
														</div>
													</th>
													<th colspan="1" class="border-bottom border-bottom-dashed ps-0" ng-show="add_tax">
														<div class="input-group mb-5" >
															<input class="form-control" ng-model="tax_amount" type="text" min="1" ng-blur="updateTaxDiscount()"  />
															<span class="input-group-text">%</span>
														</div>
														
													</th>
													<th class="border-bottom border-bottom-dashed text-end" ng-show="add_tax">
														<span data-kt-element="sub-total">@{{  (formData.subtotal_costs - (formData.subtotal_costs * (discount /100 )) ) * ((tax_amount/100)) | currency }}</span>
													</th>
												</tr>
												
												<tr class="align-top fw-bold text-gray-700">
													<th></th>
													<th></th>
													<th colspan="2" class="fs-4 ps-0">Total</th>
													<th class="text-end fs-4 text-nowrap">
														<span data-kt-element="grand-total">@{{  (formData.subtotal_costs - (formData.subtotal_costs * (discount /100 )) )* (1+(tax_amount/100)) | currency }}</span>
													</th>
												</tr>
											</tfoot>
											<!--end::Table foot-->
										</table>
									</div>
									<!--end::Table-->
								
									<!--begin::Notes-->
									<div class="mb-0">
										<label class="form-label fs-6 fw-bold text-gray-700">Notas</label>
										<textarea name="notes" ng-model="formData.notes" class="form-control form-control-solid" rows="3" placeholder="Notas adicionales para la propuesta" ng-blur="saveNote()"></textarea>
									</div>
									<!--end::Notes-->
								</div>
								<!--end::Wrapper-->
							</form>
							<!--end::Form-->
						</div>
						<!--end::Card body-->


					</div>
					<!--end::Card-->
					<br>
					<!--begin::Card body-->
					
					<span class="overlay-layer card-rounded bg-dark bg-opacity-5 loader" ng-show="!loading" style="display:block"></span>
					<div class="overlay-layer card-rounded bg-dark bg-opacity-5" ng-show="!loading" >
						<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 class="spinner-border text-primary" role="status">
							<span class="visually-hidden">Loading...</span>
						</div> -->
					</div>

				</div>
				<!--end::Content-->
				<!--begin::Sidebar-->
				<div class="flex-lg-auto min-w-lg-300px"  ng-class="{'overlay': !loading, 'overlay-block': !loading}">
					<!--begin::Card-->
					<div class="card" data-kt-sticky="true" data-kt-sticky-name="invoice" data-kt-sticky-offset="{default: false, lg: '200px'}" data-kt-sticky-width="{lg: '250px', lg: '300px'}" data-kt-sticky-left="auto" data-kt-sticky-top="150px" data-kt-sticky-animation="false" data-kt-sticky-zindex="95">
						<!--begin::Beader-->
						@if($proposal->project->type=='interconectados')
						<div class="card-header border-0 py-5">
							<h3 class="card-title align-items-start flex-column">
								<span class="card-label fw-bold fs-3 mb-1">Config. avanzada</span>
							</h3>
							<div class="card-toolbar">
								<!--begin::Menu-->
								<button type="button" class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
									<i class="fonticon-setting fs-1"></i>
								</button>
								<!--begin::Menu 1-->
								<div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true" id="kt_menu_62cfc4b593a16">
									<!--begin::Header-->
									<div class="px-7 py-5">
										<div class="fs-5 text-dark fw-bold">Configuración avanzada </div>
									</div>
									<!--end::Header-->
									<!--begin::Menu separator-->
									<div class="separator border-gray-200"></div>
									<!--end::Menu separator-->
									<!--begin::Form-->
									<div class="px-7 py-5">
										
										<div class="mb-10" >
											<label class="form-label fw-semibold">Retorno de inversión:</label>
											<div class="d-flex">
												<label class="form-check form-check-sm form-check-custom form-check-solid me-5">
													<input class="form-check-input" type="checkbox" ng-model="formData.tax_incentive"/>
													<span class="form-check-label">Incentivo fiscal</span>
												</label>
											</div>
											<label class="form-label fw-semibold" ng-show="formData.tax_incentive">Porcentaje:</label>
											<div class="input-group mb-5" ng-show="formData.tax_incentive">
												<input type="text" class="form-control" ng-model="formData.tax_incentive_percentage" aria-describedby="basic-addon2">
												<span class="input-group-text" id="basic-addon2"> %</span>
											</div>
										</div>
										<div class="mb-10">
											<label class="form-label fw-semibold">Factor de pérdida:</label>
											<div class="input-group mb-5">
												<input type="text" class="form-control" ng-model="formData.loss_factor" aria-describedby="basic-addon2">
												<span class="input-group-text" id="basic-addon2"> %</span>
											</div>
										</div>
										<div class="mb-10">
											<label class="form-label fw-semibold">Incremento anual tarifario (CFE):</label>
											<div class="input-group mb-5">
												<input type="text" class="form-control" ng-model="formData.rate_increase" aria-describedby="basic-addon2">
												<span class="input-group-text" id="basic-addon2"> %</span>
											</div>
										</div>
										
										<!--begin::Actions-->
										<div class="d-flex justify-content-end">
											<button type="button" class="btn btn-sm btn-primary" data-kt-menu-dismiss="true" ng-click="saveSettings()">Guardar configuración</button>
										</div>
										<!--end::Actions-->
									</div>
									<!--end::Form-->
								</div>
								<!--end::Menu 1-->
								<!--end::Menu-->
							</div>
						</div>
						@endif
						<!--end::Header-->
						<!--begin::Card body-->
						<div class="card-body p-10">
							<!--begin::Input group-->
							@if($proposal->created_at != $proposal->updated_at)
							<!--<div class="mb-10">
								<label class="form-label fw-bold fs-6 text-gray-700">Estatus</label>
								<select name="status_proposal_id" ng-model="formData.status_proposal_id" class="form-select form-select-solid">
									<option value="" disabled >Selecciona </option>
									@foreach($status_proposals as $item)
									<option value="{{$item->id}}" ng-selected="formData.status_proposal_id == {{$item->id	}}">{{$item->name}}</option>
									@endforeach
								</select>
							</div>-->
							@endif
							<!--end::Input group-->
							<!--begin::Input group-->
							<div class="mb-10">
								<!--begin::Label-->
								<label class="form-label fw-bold fs-6 text-gray-700">Moneda</label>
								<!--end::Label-->
								<!--begin::Select-->
								<select name="currency" ng-model="formData.currency" aria-label="Select a Timezone" data-placeholder="Select currency" class="form-select" ng-change="updateCostProposalCurrency('{{$proposal->id}}',formData.currency)">
									<option value="USD">USD</option>
									<option value="MXN">MXN</option>
								</select>
								<!--end::Select-->
							</div>
							<!--end::Input group-->

							<!--begin::Input group-->
							<div class="mb-10">
								<label class="form-label fw-bold fs-6 text-gray-700">Tipo de cambio</label>
								<input class="form-control" type="text" ng-model="formData.exchange_rate_mxn">
							</div>
							<!--end::Input group-->
							<!--begin::Separator-->
							<div class="separator separator-dashed mb-8"></div>

							<!--begin::Input group-->
							<div class="mb-10">
								<!--begin::Label-->
								<label class="form-label fw-bold fs-6 text-gray-700">Plantilla</label>
								<!--end::Label-->
								<!--begin::Select-->
								<select name="currency" ng-model="formData.template_id"  data-placeholder="Selecciona la plantilla" class="form-select form-select">
									<option value="" disabled>Selecciona ...</option>
									@foreach($templates as $template)
									<option value="{{$template->id}}" ng-selected="formData.template_id == {{$template->id	}}">{{$template->name}}</option>
									@endforeach
								</select>
								<!--end::Select-->
								<!--<i class="fa fa-info-circle" data-bs-toggle="popover" data-bs-html="true" data-bs-placement="left"  data-bs-trigger="hover" data-bs-content="<img src='/assets/app/media/templates/@{{formData.template_id}}.jpg' width='200'> "></i>-->
							</div>
							<!--end::Input group-->
							<!--begin::Separator-->
							<div class="separator separator-dashed mb-8"></div>

							<!--end::Separator-->
							<!--begin::Input group-->
							<div class="mb-8">
								<!--begin::Option-->
								<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack mb-5">
									<span class="form-check-label ms-0 fw-bold fs-6 text-gray-700">Desglosar cantidades</span>
									<input class="form-check-input" type="checkbox" ng-checked="formData.break_down_amounts==1" ng-model="formData.break_down_amounts" />
								</label>
								<!--end::Option-->
								<!--begin::Option-->
								<!--<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack mb-5">
									<span class="form-check-label ms-0 fw-bold fs-6 text-gray-700">Late fees</span>
									<input class="form-check-input" type="checkbox" value="" />
								</label>-->
								<!--end::Option-->
								
							</div>
							<!--end::Input group-->
							<!--begin::Separator-->
							<div class="separator separator-dashed mb-8"></div>
							<!--end::Separator-->
							<!--begin::Actions-->
							<div class="mb-0">
								<!--begin::Row-->
								<!--<div class="row mb-5">
									<div class="col">
										<a href="#" class="btn btn-light btn-active-light-primary w-100">Preview</a>
									</div>
									<div class="col">
										<a href="#" class="btn btn-light btn-active-light-primary w-100">Download</a>
									</div>
								</div>-->
								<!--end::Row-->
								<button type="button" href="#" class="btn btn-primary w-100" ng-click="printQuote()">
									<!--begin::Svg Icon | path: icons/duotune/general/gen016.svg-->
									<span class="svg-icon svg-icon-3">
										<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
											<path d="M15.43 8.56949L10.744 15.1395C10.6422 15.282 10.5804 15.4492 10.5651 15.6236C10.5498 15.7981 10.5815 15.9734 10.657 16.1315L13.194 21.4425C13.2737 21.6097 13.3991 21.751 13.5557 21.8499C13.7123 21.9488 13.8938 22.0014 14.079 22.0015H14.117C14.3087 21.9941 14.4941 21.9307 14.6502 21.8191C14.8062 21.7075 14.9261 21.5526 14.995 21.3735L21.933 3.33649C22.0011 3.15918 22.0164 2.96594 21.977 2.78013C21.9376 2.59432 21.8452 2.4239 21.711 2.28949L15.43 8.56949Z" fill="currentColor" />
											<path opacity="0.3" d="M20.664 2.06648L2.62602 9.00148C2.44768 9.07085 2.29348 9.19082 2.1824 9.34663C2.07131 9.50244 2.00818 9.68731 2.00074 9.87853C1.99331 10.0697 2.04189 10.259 2.14054 10.4229C2.23919 10.5869 2.38359 10.7185 2.55601 10.8015L7.86601 13.3365C8.02383 13.4126 8.19925 13.4448 8.37382 13.4297C8.54839 13.4145 8.71565 13.3526 8.85801 13.2505L15.43 8.56548L21.711 2.28448C21.5762 2.15096 21.4055 2.05932 21.2198 2.02064C21.034 1.98196 20.8409 1.99788 20.664 2.06648Z" fill="currentColor" />
										</svg>
									</span>
									<!--end::Svg Icon-->Generar cotización
								</button>
							</div>
							<!--end::Actions-->
						</div>
						@if($proposal->project->type=='interconectados')
						<!--end::Card body-->
						<div class="card" style="margin-top:40px">
							<button type="button" href="#" class="btn btn-light-success w-100" data-bs-toggle="modal" data-bs-target="#kt_modal_graph_energy_generation" >
							<i class="fa fa-bar-chart" aria-hidden="true"></i> Generación de energía
							</button>
						</div>
						<div class="card" style="margin-top:10px">
							<button type="button" href="#" class="btn btn-light-success w-100" data-bs-toggle="modal" data-bs-target="#kt_modal_graph_roi" >
							<i class="fa fa-line-chart" aria-hidden="true"></i> Retorno de inversión
							</button>
						</div>
						<div class="card" style="margin-top:10px">
							<button type="button" href="#" class="btn btn-light-success w-100" data-bs-toggle="modal" data-bs-target="#kt_modal_panels" onclick="main()">
							<i class="fa fa-globe" aria-hidden="true"></i> Sembrado de paneles
							</button>
						</div>
						@endif	
						<!--end::Card-->

					</div>
					
					<span class="overlay-layer card-rounded bg-dark bg-opacity-5 loader" ng-show="!loading" style="display:block"></span>
				</div>
				<!--end::Sidebar-->
			</div>
			<!--end::Layout-->
		</div>
		<!--end::Container-->

		<!--begin::Modal - Add Concept-->
		<div class="modal fade" id="kt_modal_add_cost_proposal" tabindex="-1" aria-hidden="true">
			<!--begin::Modal dialog-->
			<div class="modal-dialog modal-dialog-centered mw-650px">
				<!--begin::Modal content-->
				<div class="modal-content">
					<!--begin::Modal header-->
					<div class="modal-header pb-0 border-0 justify-content-end">
						<!--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>
					<!--begin::Modal header-->
					<!--begin::Modal body-->
					<div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
						<!--begin::Content-->
						<div class="text-center mb-13">
							<h1 class="mb-3">Agregar
								<span ng-if="type_add_cost_proposal=='panel'"> Módulo fotovoltaico</span>
								<span ng-if="type_add_cost_proposal=='inverter'"> Inversor</span>
								<span ng-if="type_add_cost_proposal=='accesory'"> Accesorio</span>
								<span ng-if="type_add_cost_proposal=='structure'"> Estructura</span>
								<span ng-if="type_add_cost_proposal=='workforce'"> Mano de obra</span>
								<span ng-if="type_add_cost_proposal=='additional'"> Adicional</span>
							</h1>
							@if($proposal->project->type=='interconectados')
							<div class="text-muted fw-semibold fs-5"  ng-show="type_add_cost_proposal=='inverter'"> 
								Con el ratio seleccionado necesitas un inversor de @{{ ratio_inverter }} kW.
								<span class="badge badge-success fw-bold" ng-show="total_power_inverters >= ratio_inverter && total_power_inverters < formData.system_size && inverter"> El sistema FV operará con muy buena eficiencia </span>
								<span class="badge badge-warning fw-bold" ng-show="total_power_inverters == formData.system_size && inverter"> El sistema FV operará con muy baja eficiencia </span>
								<span class="badge badge-danger fw-bold" ng-show="total_power_inverters > formData.system_size && inverter "> ADVERTENCIA: Seleccionar una  capacidad menor del inversor</span>
								<span class="badge badge-warning fw-bold" ng-show= "total_power_inverters > 0 && total_power_inverters < ratio_inverter && inverter">Te hace falta una potencia de inversor de @{{ ratio_inverter - total_power_inverters | number:1 }}kW </span>
								<span class="badge badge-warning fw-bold" ng-show="microinverter && sum_total_num_inputs < formData.number_modules">Con los microinversores seleccionados te harían falta conectar  @{{formData.number_modules - sum_total_num_inputs }} paneles solares</span>
								<span class="badge badge-warning fw-bold" ng-show="microinverter && sum_total_num_inputs > formData.number_modules">Con los microinversores seleccionados te sobran @{{ sum_total_num_inputs - formData.number_modules  }} entradas para conectar   @{{ sum_total_num_inputs - formData.number_modules  }} paneles solares</span>
							</div>
							@endif
						</div>
						<!--end::Content-->
						<!--begin::Search-->
						<div>
							<div class="row">
								<div class="col-md-3">
									<div class="form-floating mb-7">
										<input type="number" min="0" class="form-control" id="floatingInput" ng-model="formData.quantity" ng-hide="type_add_cost_proposal=='workforce' || type_add_cost_proposal=='structure' || type_add_cost_proposal=='additional'" ng-blur="warningInverter()" />
										<label for="floatingInput" ng-hide="type_add_cost_proposal=='workforce' || type_add_cost_proposal=='structure' || type_add_cost_proposal=='additional'">Cantidad</label>
									</div>
								</div>
								<div class="col-md-8">
									<select  ng-model="formData.company_product_id" aria-label="Selecciona" data-placeholder="Selecciona ..." class="form-select mb-2"   ng-if="type_add_cost_proposal=='panel' ">
										<option value="">Selecciona un módulo fotovoltaico</option>
										@foreach($company_products as $item)
											@if($item->type_product_id == 1)
											<option value="{{$item->id}}">{{$item->name}}</option>
											@endif
										@endforeach
									</select>
									@foreach($inverters as $item)
									 <!-- {{$item->name}} -->
									@endforeach
									<select  ng-model="formData.company_product_id" aria-label="Selecciona" data-placeholder="Selecciona ..." class="form-select mb-2"   ng-if="type_add_cost_proposal=='inverter' " ng-change="calculateNumberInverters()">
										<option value="">Selecciona un inversor</option>
										@foreach($inverters as $item)
											<option value="{{$item->id}}">{{$item->code}} {{$item->name}}</option>
										@endforeach
									</select>
									<select  ng-model="formData.company_product_id" aria-label="Selecciona" data-placeholder="Selecciona ..." class="form-select mb-2"   ng-if="type_add_cost_proposal=='accesory' ">
										<option value="">Selecciona un accesorio</option>
										@foreach($company_products as $item)
											@if($item->type_product_id == 4)
											<option value="{{$item->id}}">{{$item->name}}</option>
											@endif
										@endforeach
									</select>
									<select  ng-model="formData.company_product_id" aria-label="Selecciona" data-placeholder="Selecciona ..." class="form-select mb-2"   ng-if="type_add_cost_proposal=='structure' ">
										<option value="">Selecciona una estructura</option>
										@foreach($company_products as $item)
											@if($item->type_product_id == 5)
											<option value="{{$item->id}}">{{$item->name}}</option>
											@endif
										@endforeach
									</select>
									<select  ng-model="formData.company_product_id" aria-label="Selecciona" data-placeholder="Selecciona ..." class="form-select mb-2"   ng-if="type_add_cost_proposal=='workforce' ">
										<option value="">Selecciona ..</option>
										@foreach($company_products as $item)
											@if($item->type_product_id == 6)
											<option value="{{$item->id}}">{{$item->name}}</option>
											@endif
										@endforeach
									</select>
									<select  ng-model="formData.company_product_id" aria-label="Selecciona" data-placeholder="Selecciona ..." class="form-select mb-2"   ng-if="type_add_cost_proposal=='additional' ">
										<option value="">Selecciona ..</option>
										@foreach($company_products as $item)
											@if($item->type_product_id == 7)
											<option value="{{$item->id}}">{{$item->name}}</option>
											@endif
										@endforeach
									</select>
								</div>
							</div>
							<div ng-show="type_add_cost_proposal=='inverter'">
								<div class="d-flex align-items-center mb-8" ng-repeat="item in costs" ng-show="item.company_product.product.type_product_id==2 ||  item.company_product.product.type_product_id==3 ">
									<span class="bullet bullet-vertical h-40px " ng-class="{'bg-light-success': total_power_inverters >= ratio_inverter && total_power_inverters < formData.system_size, 'bg-light-warning':total_power_inverters == formData.system_size, 'bg-danger':total_power_inverters > formData.system_size, 'bg-light-warning': total_power_inverters > 0 && total_power_inverters < ratio_inverter }"></span>
									<div class="form-check form-check-custom form-check-solid mx-5">
									</div>
									<div class="flex-grow-1">
										<a href="#" class="text-gray-800 text-hover-primary fw-bold fs-6">@{{item.company_product.name}}</a>
										<span class="text-muted fw-semibold d-block">Cantidad: @{{item.quantity}}</span>
									</div>
									<!--end::Description-->
									<button type="button" class="btn btn-sm btn-icon" ng-click="deleteCostProposal(item.id,item.company_product.name)">
										<span class="svg-icon svg-icon-3 text-danger">
											<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
												<path d="M5 9C5 8.44772 5.44772 8 6 8H18C18.5523 8 19 8.44772 19 9V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V9Z" fill="currentColor" />
												<path opacity="0.5" d="M5 5C5 4.44772 5.44772 4 6 4H18C18.5523 4 19 4.44772 19 5V5C19 5.55228 18.5523 6 18 6H6C5.44772 6 5 5.55228 5 5V5Z" fill="currentColor" />
												<path opacity="0.5" d="M9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V4H9V4Z" fill="currentColor" />
											</svg>
										</span>
									</button>
								</div>
							</div>
							<!--begin::Wrapper-->
							<div class="py-5">
								<!--begin::Suggestions-->
								<div >
									<!--begin::Actions-->
									<div class="d-flex flex-center mt-15">
										<button type="reset" id="kt_modal_add_cost_reset" data-bs-dismiss="modal" class="btn btn-active-light me-3">Cerrar</button>
										<button type="button" id="kt_modal_users_search_submit" class="btn btn-primary" ng-click="addCostProposal(formData.company_product_id)">Agregar</button>
									</div>
									<!--end::Actions-->
								</div>
								<!--end::Suggestions-->
							</div>
							<!--end::Wrapper-->
						</div>
						<!--end::Search-->
					</div>
					<!--end::Modal body-->
				</div>
				<!--end::Modal content-->
			</div>
			<!--end::Modal dialog-->
		</div>
		<!--end::Modal - Add concept-->
		@if(isset($proposal->project->rate) && $proposal->project->rate->name == 'GDMTH')
		<div class="modal fade" id="kt_modal_new_payment_cfe_gdmth" 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>Nuevo pago a CFE</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">
										<strong> Nota: Estimaciones realizadas con base al comportamiento de consumo mostrado en el recibo cargado. </strong>
										<!--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 class=""></th>
													<th class=""></th>
													<th colspan="4" class="bg-light-warning text-center"><strong>PAGO SIN SISTEMA FOTOVOLTAICO</strong></th>
													<th colspan="4" class="bg-light-success text-center"><strong>PAGO CON SISTEMA FOTOVOLTAICO</strong></th>
												</tr>
												<tr class="fw-bold text-muted">
													<th class=""></th>
													<th class="">Consumo (kWh)</th>
													<th class="bg-light-warning">Energía </th>
													<th class="bg-light-warning">Capacidad</th>
													<th class="bg-light-warning">Distribución</th>
													<th class="bg-light-warning">Pago </th>
													<th class="bg-light-success">Energía </th>
													<th class="bg-light-success">Capacidad</th>
													<th class="bg-light-success">Distribución</th>
													<th class="bg-light-success">Pago </th>
													<th class="">% de Ahorro </th>
												</tr>
											</thead>
											<!--end::Table head-->
											<!--begin::Table body-->
											<tbody>
												<tr ng-repeat="item in proposal.project.consumptions">
													<td> Mes @{{ $index+1 }} </td>
													<td> @{{item.consumption | number:2}} </td>
													<td class="bg-light-warning"> @{{cfe.energy_without_sfvi_array[$index] | currency  }} </td>
													<td class="bg-light-warning"> @{{cfe.capacity_without_sfvi_array[$index] | currency  }} </td>
													<td class="bg-light-warning"> @{{cfe.distribution_without_sfvi_array[$index] | currency  }} </td>
													<td class="bg-light-warning"> <strong> $@{{cfe.total_payment_without_sfvi_array[$index] | number:0   }} </strong> </td>

													<td class="bg-light-success"> @{{cfe.energy_with_sfvi_array[$index] | currency  }} </td>
													<td class="bg-light-success"> @{{cfe.capacity_with_sfvi_array[$index] | currency  }} </td>
													<td class="bg-light-success"> @{{cfe.distribution_with_sfvi_array[$index] | currency  }} </td>
													<td class="bg-light-success"> <strong >$@{{ cfe.total_monthly_payment_cfe_array[$index] | number:0 }} </strong> </td>
													<td class=""> @{{  100 - (cfe.total_monthly_payment_cfe_array[$index] / cfe.total_payment_without_sfvi_array[$index] ) * 100   | number:1 }} %</td>
												</tr>
												<tr>
													<td></td>
													<td></td>
													<td></td>
													<td></td>
													<td><strong >TOTAL</strong></td>
													<td><strong >$@{{cfe.total_annual_current_payment_cfe | number:0  }}</td>
													<td></td>
													<td></td>
													<td><strong >TOTAL</strong></td>
													<td><strong >@{{cfe.total_annual_new_payment_cfe | number:0 }}</strong></td>
												</tr>
												
											</tbody>
											<!--end::Table body-->
										</table>
										<!--end::Table-->
									</div>
									<!--end::Table container-->
								</div>
								<!--begin::Body-->
							</div>
							<!--end::Tables Widget 9-->
						</div>
							
					</div>
					
				</div>
			</div>
		</div>
		@endif
		@if($proposal->project->type=="interconectados")
		<div class="modal fade" id="kt_modal_graph_energy_generation" 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>Proyección de generación de energía</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">
									<canvas id="graph_energy_generation" style="height: 100%;"></canvas>
									<!--begin::Table container-->
									<div class="table-responsive" style="margin-top:20px">
										<!--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 class=""></th>
													<th class="" ng-repeat="item in projections.original.months track by $index " > @{{item}}  </th>
												</tr>
											</thead>
											<!--end::Table head-->
											<!--begin::Table body-->
											<tbody>
												@if($proposal->project->rate->name == 'GDMTH')
												<tr>
													<td style="background-color: #4F79CB "> kWh Intermedio </td>
													<td  ng-repeat="item in projections.original.intermediate track by $index"> @{{item | number:1}} </td>
												</tr>
												<tr>
													<td style="background-color: #2ecc71 "> kWh Base </td>
													<td  ng-repeat="item in projections.original.base track by $index"> @{{item | number:1 }} </td>
												</tr>
												<tr>
													<td > <strong> kWh Totales </strong></td>
													<td  ng-repeat="item in projections.original.base track by $index"><strong>  @{{item +  projections.original.intermediate[$index] | number:1}}  </strong></td>
												</tr>
												@else
												<tr>
													<td style="background-color: #2ecc71 "> Generación de energía kWh </td>
													<td  ng-repeat="item in projections.original.energy_generation track by $index"> @{{item | number:1}} </td>
												</tr>
												@endif
												<tr>
													<td style="background-color: #f1c40f "> Consumo actual kWh </td>
													<td  ng-repeat="item in projections.original.consumptions track by $index "> @{{item | number:1 }} </td>
												</tr>
											</tbody>
											<!--end::Table body-->
										</table>
										<!--end::Table-->
									</div>
									<!--end::Table container-->
									<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
									<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
									<canvas id="graph_payment_cfe" style="height: 100%;"></canvas>
								</div>
								<!--begin::Body-->
							</div>
							<!--end::Tables Widget 9-->
						</div>
							
					</div>
					
				</div>
			</div>
		</div>
		<div class="modal fade" id="kt_modal_graph_roi" 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>Retorno de inversión: @{{roi.years | number:1 }} años </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">
									<canvas id="graph_roi" style="height: 100%;"></canvas>
									<!--begin::Table container-->
									<div class="table-responsive" style="margin-top:20px">
										<!--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 class="">Año</th>
													<th class="">Pago Actual Anual</th>
													<th class="">Nuevo pago Anual a CFE </th>
													<th class="">Beneficio fiscal </th>
													<th class="">Ahorro económico anual </th>
													<th class="">Ahorro económico total </th>
													<th class="">Ahorro económico acumulado </th>
												</tr>
											</thead>
											<!--end::Table head-->
											<!--begin::Table body-->
											<tbody>
												<tr ng-repeat="item in years_roi" >
													<td > @{{item }} </td>
													<td > @{{roi.current_annual_payment[$index] | currency}} </td>
													<td > @{{roi.new_payment_cfe_annually[$index] | currency}} </td>
													<td > @{{roi.fiscal_incentive[$index] | currency}} </td>
													<td > @{{roi.current_annual_payment[$index] - roi.new_payment_cfe_annually[$index] | currency }} </td>
													<td > @{{ (roi.current_annual_payment[$index] - roi.new_payment_cfe_annually[$index])+roi.fiscal_incentive[$index]  | currency}} </td>
													<td ng-class="{'bg-light-danger':  roi.annual_accumulated_savings[$index] < 0}" > @{{roi.annual_accumulated_savings[$index] | currency }} </td>
												</tr>
											</tbody>
											<!--end::Table body-->
										</table>
										<!--end::Table-->
									</div>
									<!--end::Table container-->
								</div>
								<!--begin::Body-->
							</div>
							<!--end::Tables Widget 9-->
						</div>
							
					</div>
					
				</div>
			</div>
		</div>

		<div class="modal fade" id="kt_modal_panels" tabindex="-1" aria-hidden="true">
			<div class="modal-dialog modal-fullscreen p-9">
				<div class="modal-content" style="position: relative; height: 100vh;">
					<!-- Modal Header -->
					<div class="modal-header d-flex justify-content-between" id="kt_modal_new_address_header" ng-init="formData.number_modules = {{$proposal->number_modules}}">
					<input type="hidden" id="proposal_id" value="{{$proposal->id}}">
					<h2 id="alert-paneles-colocados"> </h2>
					<small>@{{name_panel}}</small>

<!-- <div id="floor-plan-img-controls" class="controls" hidden>
    <button onclick="rotateLeft()">↺ Rotar Izquierda</button>
    <button onclick="rotateRight()">↻ Rotar Derecha</button>
    <button onclick="rotateImage(45)">Rotar 45°</button>
    <button onclick="rotateImage(-45)">Rotar -45°</button>
    
    <button onclick="resizeImage(1.1)">Zoom In (+10%)</button>
    <button onclick="resizeImage(0.9)">Zoom Out (-10%)</button>
	
    <button onclick="anclar()">Anclar</button>
    <button onclick="desanclar()">Desanclar Imagen</button>
</div> -->

    				<div class="d-flex">
    				</div>

    				<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
        				<span class="svg-icon svg-icon-2x">
            				<i class="fa fa-times"></i>
        				</span>
    				</div>
				</div>
					<!-- Contenedor del Mapa -->
					<div id="map"></div>

					<!-- Div flotante alineado a la derecha -->
					<div id="segments">
						<button id="btn-guardar-mapa" class="btn btn-sm btn-info fw-bolder mb-2" onclick="guardar()">
							<i class="fa fa-save"></i> Guardar
						</button>
						<!-- Segment controls will be added here -->
						<button class="btn btn-sm btn-light-primary fw-bolder mb-2" onclick="addSegment()">
							<i class="fa fa-plus"></i>
							Segmento
						</button>
						<button id="btn-recortar-mapa" class="btn btn-sm btn-light-primary fw-bolder mb-2" onclick="dibujarArea()" hidden>
							<i class="fa fa-cut"></i> 
						</button>
						<button id="btn-cargar-plano" class="btn btn-sm btn-light-primary fw-bolder mb-2" onclick="loadImage()" >
							<i class="fa fa-image"></i>
						</button>
						<input type="file" id="imgInput" accept="image/*">

						<!-- Began::Img options -->

						<div   class="d-flex align-items-center gap-2 gap-lg-3" >
									<!--begin::Filter menu-->
									<div id="floor-plan-img-controls" class="m-0" hidden>
										<!--begin::Menu toggle-->
										<a href="#" class="btn btn-sm btn-flex btn-light btn-active-primary fw-bolder show menu-dropdown" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
										<!--begin::Svg Icon | path: icons/duotune/general/gen031.svg-->
										<i class="fa-solid fa-sliders"></i>

										<!--end::Svg Icon--></a>
										<!--end::Menu toggle-->
										<!--begin::Menu 1-->
										<div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px show" data-kt-menu="true" id="kt_menu_6205ad357830a" style="z-index: 105; position: fixed; inset: 0px 0px auto auto; margin: 0px; transform: translate(-115px, 110px);" data-popper-placement="bottom-end" >
											<!--begin::Header-->
											<div class="px-7 py-5" >
												<div class="fs-5 text-dark fw-bolder">Ajustar imagen</div>
											</div>
											<!--end::Header-->
											<!--begin::Menu separator-->
											<div class="separator border-gray-200"></div>
											<!--end::Menu separator-->
											<!--begin::Form-->
											<div class="px-7 py-5">
											<div class="controls" >
    <button onclick="rotateLeft()">↺ Rotar Izquierda</button>
    <button onclick="rotateRight()">↻ Rotar Derecha</button>
    <button onclick="rotateImage(45)">Rotar 45°</button>
    <button onclick="rotateImage(-45)">Rotar -45°</button>
    
    <button onclick="resizeImage(1.1)">Zoom In (+10%)</button>
    <button onclick="resizeImage(0.9)">Zoom Out (-10%)</button>
	
    <button id="btn-anclar" onclick="anchorFloorPlan()">Anclar</button>
    <button id="btn-desanclar" onclick="desanclar()" disabled>Desanclar Imagen</button>
	<button onclick="deleteFloorPlan()"><i class="fa fa-trash"></i></button>
</div>
											</div>
											<!--end::Form-->
										</div>
										<!--end::Menu 1-->
									</div>
									<!--end::Filter menu-->
									<!--begin::Secondary button-->
									<!--end::Secondary button-->
									<!--begin::Primary button-->
									<!-- <a href="../../demo1/dist/.html" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_create_app">Create</a> -->
									<!--end::Primary button-->
								</div>
					</div>

			</div>
		</div>

<style>
    /* Asegurar que la modal-content se posicione correctamente */

    /* Ajustar el mapa debajo del header */
    #map {
        //position: absolute;
        //top: 60px; /* Ajusta según la altura del header */
        left: 0;
        width: 100%;
        height:  calc(100vh - 60px); /* Resta la altura del header */
        z-index: 1;
    }

    /* Hacer que el div de segmentos sea flotante, alineado a la derecha y con scroll */
    #segments {
        position: absolute;
        top: 84px; /* Para que no se sobreponga con el header */
        right: 20px; /* Alineado a la derecha */
        width: 300px; /* Ajusta el ancho según necesites */
        max-height: calc(100vh - 100px); /* Resta la altura del header y deja un margen */
        overflow-y: auto; /* Agrega scroll vertical si el contenido es muy grande */
        background: rgba(255, 255, 255, 0.8);
        padding: 10px;
        border-radius: 8px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 2;
		/* display: none; */
    }

	#imgInput{
		display: none;
	}

	.pac-target-input {
    	padding: 10px;
    	width: 100%;
    	background-color: #f6f8fc;
    	border: none;
    	border-radius: 7px;
	}

	.pac-container {
    	z-index: 10000 !important; 
	}

	.controls {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.controls button {
    padding: 5px 10px;
    cursor: pointer;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.controls button:hover {
    background-color: #e0e0e0;
}

</style>


		
		@endif

		<!--begin::Modal - Edit contact-->
		<div class="modal fade" id="kt_modal_edit_contact" tabindex="-1" aria-hidden="true">
			<!--begin::Modal dialog-->
			<div class="modal-dialog modal-dialog-centered mw-800px">
				<!--begin::Modal content-->
				<div class="modal-content">
					<!--begin::Modal header-->
					<div class="modal-header pb-0 border-0 justify-content-end">
						<!--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>
					<!--begin::Modal header-->
					<!--begin::Modal body-->
					<div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
						<!--begin::Content-->
						<div class="text-center mb-13">
							<h1 class="mb-3">Editar contacto</h1>
						</div>
						<!--end::Content-->
						<!--begin::Search-->
						<div>
							<form id="kt_account_profile_details_form" class="form" method="POST" action="/contacts/update">
							@csrf
							<input type="hidden" value="{{$proposal->project->contact->id}}" name="contact_id">
							<input type="hidden" value="{{$proposal->id}}" name="proposal_id">
								<!--begin::Card body-->
								<div class="card-body border-top p-9">
									
									<!--begin::Input group-->
									<div class="row mb-6">
										<!--begin::Label-->
										<label class="col-lg-4 col-form-label required fw-semibold fs-6">Nombre</label>
										<!--end::Label-->
										<!--begin::Col-->
										<div class="col-lg-8">
											<!--begin::Row-->
											<div class="row">
												<!--begin::Col-->
												<div class="col-lg-4 fv-row">
													<input type="text" name="name" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Nombre" value="{{$proposal->project->contact->person->name}}" required />
												</div>
												<!--end::Col-->
												<!--begin::Col-->
												<div class="col-lg-4 fv-row">
													<input type="text" name="last_name" class="form-control form-control-lg form-control-solid" placeholder="Apellido Paterno" value="{{$proposal->project->contact->person->last_name}}" />
												</div>
												<!--end::Col-->
												<!--begin::Col-->
												<div class="col-lg-4 fv-row">
													<input type="text" name="mothers_last_name" class="form-control form-control-lg form-control-solid" placeholder="Apellido Materno" value="{{$proposal->project->contact->person->mothers_last_name}}" />
												</div>
												<!--end::Col-->
											</div>
											<!--end::Row-->
										</div>
										<!--end::Col-->
									</div>
									<!--end::Input group-->
									<!--begin::Input group-->
									<div class="row mb-6">
										<!--begin::Label-->
										<label class="col-lg-4 col-form-label fw-semibold fs-6">Empresa</label>
										<!--end::Label-->
										<!--begin::Col-->
										<div class="col-lg-8 fv-row">
											<input type="text" name="name_business" class="form-control form-control-lg form-control-solid" placeholder="Nombre de empresa" value="{{$proposal->project->contact->name_business}}" />
										</div>
										<!--end::Col-->
									</div>
									<!--end::Input group-->
									<!--begin::Input group-->
									<div class="row mb-6">
										<!--begin::Label-->
										<label class="col-lg-4 col-form-label fw-semibold fs-6">Puesto</label>
										<!--end::Label-->
										<!--begin::Col-->
										<div class="col-lg-8 fv-row">
											<input type="text" name="position" class="form-control form-control-lg form-control-solid" placeholder="Puesto" value="{{$proposal->project->contact->position}}" />
										</div>
										<!--end::Col-->
									</div>
									<!--end::Input group-->
									<!--<div class="row mb-6">
										<label class="col-lg-4 col-form-label fw-semibold fs-6">
											<span class="required">Contact Phone</span>
											<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" title="Phone number must be active"></i>
										</label>
									
										<div class="col-lg-8 fv-row">
											<input type="tel" name="phone" class="form-control form-control-lg form-control-solid" placeholder="Phone number" value="044 3276 454 935" />
										</div>
									</div> -->
									<!--end::Input group-->
									<!--begin::Input group-->
									<div class="row mb-6">
										<!--begin::Label-->
										<label class="col-lg-4 col-form-label fw-semibold fs-6">Medio de contacto</label>
										<!--end::Label-->
										<!--begin::Col-->
										<div class="col-lg-8 fv-row">
											<select name="contact_medium_id" aria-label="Select a Country" data-placeholder="Selecciona ..." class="form-select form-select-solid form-select-lg fw-semibold">
												<option value="">Selecciona...</option>
												@foreach($contact_mediums as $item)
												<option value="{{$item->id}}"  @if($item->id == $proposal->project->contact->contact_medium_id) selected @endif>{{$item->name}}</option>
												@endforeach
											</select>
										</div>
										<!--end::Col-->
									</div>
									<!--end::Input group-->

									<!--begin::Input group-->
									<div class="row mb-6">
										<!--begin::Label-->
										<label class="col-lg-4 col-form-label fw-semibold fs-6">Tipo de contacto</label>
										<!--end::Label-->
										<!--begin::Col-->
										<div class="col-lg-8 fv-row">
										<select name="status_contact_id" aria-label="Select a Country" data-placeholder="Selecciona ..." class="form-select form-select-solid form-select-lg fw-semibold">
												<option value="">Selecciona...</option>
												@foreach($status_contacts as $item)
												<option value="{{$item->id}}" @if($item->id == $proposal->project->contact->status_contact_id) selected @endif>{{$item->name}}</option>
												@endforeach
											</select>
										</div>
										<!--end::Col-->
									</div>
									<!--end::Input group-->
									
								</div>
								<!--end::Card body-->
								<!--begin::Actions-->
								<div class="card-footer d-flex justify-content-end py-6 px-9">
									<button type="submit" class="btn btn-primary" id="kt_account_profile_details_submit">Actualizar información</button>
								</div>
								<!--end::Actions-->
							</form>
							
						</div>
						<!--end::Search-->
					</div>
					<!--end::Modal body-->
				</div>
				<!--end::Modal content-->
			</div>
			<!--end::Modal dialog-->
		</div>

	</div>
	<!--end::Content-->
	
@endsection

@section('js')
<script>
    window.Laravel = {!! json_encode(['url' => config('app.url')]) !!};
</script>

<script async src="https://maps.googleapis.com/maps/api/js?key={{ env('API_KEY_GOOGLE_MAPS') }}&loading=async&libraries=marker,places,drawing,geometry"> </script>
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<script src="/assets/app/js/maps.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>



<script src="/assets/app/plugins/custom/prismjs/prismjs.bundle.js"></script>

<script src="/assets/app/js/custom/apps/invoices/create.js"></script>
<script src="/assets/app/js/custom/documentation/documentation.js"></script>
<script src="/assets/app/js/custom/documentation/forms/flatpickr.js"></script>


@endsection