@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" />

@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">
		<!--begin::Container-->
		<div id="kt_content_container" class="container-xxl" ng-init="formData.status_proposal_id = '{{$proposal->status_proposal_id}}'; formData.proposal_id = '{{$proposal->id}}'; peak_solar_time='{{$peak_solar_time}}'; formData.average_demand = {{$proposal->project->average_demand == null ? 0 : $proposal->project->average_demand}}; formData.average_consumption = {{$proposal->project->average_consumption}}; formData.average_daily_consumption = {{$proposal->project->average_daily_consumption}}; formData.rate_id = {{$proposal->project->rate_id}}; formData.state_id = {{$proposal->project->state_id}}; formData.invoice_type = '{{$proposal->project->invoice_type}}'; formData.proposal_id = '{{$proposal->id}}'; discount = {{$proposal->discount}}; tax_amount={{isset($proposal->tax) ? $proposal->tax->amount : 0 }}; tax_name='{{$tax_name}}'; formData.date='{{$proposal->date}}'; formData.due_date='{{$proposal->due_date}}'; formData.currency='{{$proposal->currency}}'; formData.template_id={{$proposal->template_id}}; formData.break_down_amounts={{$proposal->break_down_amounts}}; formData.notes='{{$proposal->notes == null ? '' :  $proposal->notes }}'; formData.tax_incentive={{ $proposal->tax_incentive == 0 ?  'false' : 'true' }};  formData.tax_incentive_percentage={{$proposal->tax_incentive_percentage}}; formData.loss_factor={{$proposal->loss_factor}}; formData.rate_increase = {{$settings->rate_increase}}; formData.relation_cd_ca = {{$settings->relation_cd_ca}}; formData.exchange_rate_mxn = {{$proposal->exchange_rate_mxn}}  ">

			<div class="row g-5 g-xl-8" ng-init="costRate(); infoRate(); billingDays(); costsProposal('{{$proposal->id}}');">
				
				<div class="col-md-4">
					
					<div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-center h-md-10 mb-5 h-xl-10" style="background-color: #7239EA;background-image:url('assets/media/svg/shapes/wave-bg-purple.svg')">
						
						<!--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);background-color: #7239EA">
								<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}} kW</span>
								<span class="opacity-50">Tamaño del sistema</span>
							</div>
							<!--end::Progress-->
						</div>
						<!--end::Card footer-->
					</div>
				</div>
				<div class="col-xl-4">
					<!--begin::Card widget 1-->
					<div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-center border-0 h-md-10 mb-5 mb-xl-10 "  style="background-color: #1bcf7d">
					
						<!--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 actual a CFE</div>
									<!--end::Label-->
								</div>
								<!--end::Stat-->
								<!--begin::Stat-->
								<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</div>
									<!--end::Label-->
								</div>
								<!--end::Stat-->
							</div>
							<!--end::Wrapper-->

							<!--begin:: -->
							<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 - formData.new_payment_cfe)*months  | 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::-->

						</div>
						<!--end::Body-->
					</div>
					<!--end::Card widget 1-->
				</div>
				<div class="col-md-4">
					
					<div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-center border-0 h-md-10 mb-5 mb-xl-10" style="background-color: #080655">
						<!--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  }} Kw/h</span>
								<!--end::Amount-->
								<!--begin::Subtitle-->
								<span class="text-white opacity-50 pt-1 fw-semibold fs-6">Consumo actual {{$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  }} Kw/h</span>
								<!--end::Amount-->
								<!--begin::Subtitle-->
								<span class="text-white opacity-50 pt-1 fw-semibold fs-6">Generación 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-success 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>
				
			</div>
			<!--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">
					<!--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</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-->
										</div>
										<!--end::Col-->
										<!--begin::Col-->
										<div class="col-lg-6">
										
											<!--end::Row-->
											<label class="form-label fs-6 fw-bold text-gray-700 mb-3"></label>
											<!--begin::Input group-->
											<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>
											<!--end::Input group-->
											<!--begin::Input group-->
											<div class="mb-5">
												<span class="text-gray-400">Tarifa:</span>
												<span class="text-gray-800">{{$proposal->project->rate->name}}</span>
											</div>
											<!--end::Input group-->
											<!--begin::Input group-->
											<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>
											<!--end::Input group-->

											<div class="mb-5">
												<span class="text-gray-400">Número de servicio:</span>
												<span class="text-gray-800">{{$proposal->project->service_number}}</span>
											</div>
										</div>
										<!--end::Col-->
									</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-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="pe-7">
														<input type="text" class="form-control form-control-solid mb-2" name="" value="@{{item.company_product.name}}" disabled/>
													</td>
													<td class="ps-0">
														<input class="form-control form-control-solid" type="text" min="1" name="" value="@{{item.quantity}}" data-kt-element="quantity" disabled />
													</td>
													<td>
														<input type="text" class="form-control form-control-solid text-end"  value="@{{item.unit_price}}" data-kt-element="unit_price"  disabled/>
													</td>
													<td class="pt-8 text-end text-nowrap">
													<span data-kt-element="total">@{{item.total | currency }}</span></td>
													<td class="pt-5 text-end">
														<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>
												</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 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="">
														<!--begin::Menu item-->
														<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>
														<!--end::Menu item-->
														<!--begin::Menu item-->
														<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>
														<!--end::Menu item-->
														<!--begin::Menu item-->
														<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>
														<!--end::Menu item-->
														<!--begin::Menu item-->
														<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>
														<!--end::Menu item-->
														<!--begin::Menu item-->
														<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>
														<!--end::Menu item-->
														<!--begin::Menu item-->
														<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>
														<!--end::Menu item-->
													</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}}</span></th>
												</tr>
												<tr>
													<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) | number : fractionSize}}</span>
													</th>
												</tr>
												<tr>
													<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)) | number : fractionSize }}</span>
													</th>
												</tr>
												
												<tr class="align-top fw-bold text-gray-700">
													<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)) | number : fractionSize }}</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"></textarea>
									</div>
									<!--end::Notes-->
								</div>
								<!--end::Wrapper-->
							</form>
							<!--end::Form-->
						</div>
						<!--end::Card body-->
					</div>
					<!--end::Card-->
				</div>
				<!--end::Content-->
				<!--begin::Sidebar-->
				<div class="flex-lg-auto min-w-lg-300px">
					<!--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-->
						<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" value="1" 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>
						<!--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">
								<!--begin::Label-->
								<label class="form-label fw-bold fs-6 text-gray-700">Estatus</label>
								<!--end::Label-->
								<!--begin::Select-->
								<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>
								<!--end::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 form-select-solid">
									<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 form-control-solid" 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-solid">
								    <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-->
							</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">
									<!--begin::Col-->
									<!--<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> -->
									<!--end::Col-->
								</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>
						<!--end::Card body-->
					</div>
					<!--end::Card-->
				</div>
				<!--end::Sidebar-->
			</div>
			<!--end::Layout-->
		</div>
		<!--end::Container-->

		<!--begin::Modal - Add workforce-->
		<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>
							<div class="text-muted fw-semibold fs-5"  ng-show="type_add_cost_proposal=='inverter' "> Necesitas un inversor mayor a  @{{ formData.system_size / formData.relation_cd_ca   | number:2 }} Kw para este proyecto</div>
						</div>
						<!--end::Content-->
						<!--begin::Search-->
						<div>
							<div class="row">
								<div class="col-md-3">
									<div class="form-floating mb-7">
										<input type="text" class="form-control" id="floatingInput" ng-model="formData.quantity" ng-disabled="type_add_cost_proposal=='workforce' || type_add_cost_proposal=='structure' || type_add_cost_proposal=='additional'" required/>
										<label for="floatingInput">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>
									<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>
										@php
										switch($proposal->project->threads)
										{
											case 1:
												$tension = ['127'];
												break;
											case 2:
												$tension = ['220','240','127'];
												break;
											case 3:
												$tension = ['480','220'];
												break;
										}
										@endphp

										@foreach($company_products as $item)
											@if( ($item->type_product_id == 2  || $item->type_product_id == 3 )  && Str::contains($item->product->tension, $tension) )
											<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=='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>
							
							<!--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">Cancelar</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 workforce	-->
	</div>
	<!--end::Content-->

	
	
@endsection

@section('js')

<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