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

@section('css')
@endsection

@section('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" >
	
			<!--begin::Stepper-->
			<div class="stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid" id="kt_create_account_stepper">
				<!--begin::Content-->
				<div class="card d-flex flex-row-fluid flex-center" ng-class="{'overlay': loading===false, 'overlay-block': loading===false}" ng-init="infoState({{$proposal->project->state->id}}); initMunicipio({{$proposal->project->municipality_id}});">
					<!--begin::Form-->
					<form class="card-body" id="kt_create_account_form" method="POST" class="form" action="/proposals/edit">
					@csrf
						<input type="hidden" name="proposal_id" value="{{$proposal->id}}">
						<!--begin::Wrapper-->
						<div class="w-100">
							<div class="pb-7 pb-lg-12">
								<h1 class="fw-bolder text-dark">Datos del recibo</h1>
								<div class="text-muted fw-bold fs-4">
									<a href="#" class="link-primary fw-bolder"></a>
								</div>
							</div>

							<!--begin::Input group-->
							<div class="row g-9 mb-8">
								<div class="col-md-6 fv-row">
									<label class="required fs-6 fw-bold mb-2">Estado</label>
									<input class="form-control form-control" type="text" name="project_id" hidden value="{{ $proposal->project->id }}" >
									<select class="form-select form-select" data-hide-search="true" data-placeholder="Seleccionar estado" id="state_id" name="state_id" ng-change="infoState(formData.state_id); " ng-model="formData.state_id"  >
										<option value="">Seleccionar</option>
										@php $states = \App\Models\State::all(); @endphp
										@foreach($states as $state)
											<option value="{{$state->id}}" ng-selected="{{$state->id}} == {{$proposal->project->state->id}}">{{$state->name}}</option>
										@endforeach
									</select>
								</div>
								<div class="col-md-6 fv-row">
									<label class="required fs-6 fw-bold mb-2">Tarifa</label>
									<select class="form-select form-select" data-hide-search="true" data-placeholder="Seleccionar tarifa" name="rate_id" id="rate_id"  disabled>
										<option value="">Seleccionar</option>
										@php $rates = \App\Models\Rate::all(); @endphp
										@foreach($rates as $rate)
										<option value="{{$rate->id}}" ng-selected="{{$rate->id}} == {{$proposal->project->rate->id}}">{{$rate->name}}</option>
										@endforeach
									</select>
									<input class="form-control form-control" ng-model="rate_name" id="rate_name" type="text" ng-show="upload_file_cfe" disabled >
								</div>
							</div>
							<div class="row g-9 mb-8" ng-if="{{$proposal->project->rate->id}} == 12">
								<div class="col-md-6 fv-row">
									<label class="required fs-6 fw-bold mb-2">Municipio</label>
									<select class="form-select" name="municipality_id" id="municipality_id" ng-model="formData.municipality_id" ng-options="item.id as item.name for item in state.municipalities">
										<option value="" disabled>Seleccionar tarifa</option>
									</select>	
								</div>
								<div class="col-md-6 fv-row">
									<label class="required fs-6 fw-bold mb-2">Demanda contratada</label>
									<input class="form-control form-control" name="contracted_demand" type="text" value="{{$proposal->project->contracted_demand}}">
								</div>
							</div>

							<div class="row g-9 mb-8">
								<div class="col-md-6 fv-row">
									<label class="required fs-6 fw-bold mb-2">Facturación</label>
									<select class="form-select form-select"  data-hide-search="true" data-placeholder="Select..." name="invoice_type" id="invoice_type" ng-model="formData.invoice_type" ng-change="billingDays(); costRate()" disabled>
										<option value=""> Selecciona</option>
										<option value="bimestral" ng-selected="'{{$proposal->project->invoice_type}}' == 'bimestral'">Bimestral</option>
										<option value="mensual"   ng-selected="'{{$proposal->project->invoice_type}}' == 'mensual'" >Mensual</option>
									</select>
								</div>
								<div class="col-md-6 fv-row">
									<label class="fs-6 fw-bold mb-2">IVA CFE %</label>
									<input class="form-control form-control" type="text" name="iva" value="{{$proposal->project->iva}}">
								</div>
							</div>

							<div class="row g-9 mb-8">
								<div class="col-md-6 fv-row">
									<label class="fs-6 fw-bold mb-2">Número de servicio</label>
									<input class="form-control form-control" type="text" name="rpu" value="{{$proposal->project->rpu}}">
								</div>
								<div class="col-md-6 fv-row">
									<label class="required fs-6 fw-bold mb-2">Fases</label>
									<select class="form-select form-select" data-hide-search="true" name="threads" >
										<option value="1" @if($proposal->project->threads==1) selected @endif>1</option>
										<option value="2" @if($proposal->project->threads==2) selected @endif>2</option>
										<option value="3" @if($proposal->project->threads==3) selected @endif>3</option>
									</select>
								</div>
							</div>

							<div class="row g-9 mb-8">
								<div class="col-md-12 fv-row">
									<label class="fs-6 fw-bold mb-2">Dirección del recibo de CFE</label>
									<input class="form-control form-control" type="text" name="address" value="{{$proposal->project->address}}">
								</div>
						
							</div>
							
						</div>
						<!--end::Wrapper-->						
						<!--begin::Wrapper-->
						<div class="w-100">
							<div ng-if="{{$proposal->project->rate_id}} == 12">
								<div class="row g-9 mb-8">
									<div class="col-md-6">
										<label class="required fs-6 fw-bold mb-2">Periodo inicial de facturación</label>
										<div class="position-relative d-flex align-items-center">
											<span class="svg-icon svg-icon-2 position-absolute mx-4">
												<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
													<path opacity="0.3" d="M21 22H3C2.4 22 2 21.6 2 21V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5V21C22 21.6 21.6 22 21 22Z" fill="currentColor" />
													<path d="M6 6C5.4 6 5 5.6 5 5V3C5 2.4 5.4 2 6 2C6.6 2 7 2.4 7 3V5C7 5.6 6.6 6 6 6ZM11 5V3C11 2.4 10.6 2 10 2C9.4 2 9 2.4 9 3V5C9 5.6 9.4 6 10 6C10.6 6 11 5.6 11 5ZM15 5V3C15 2.4 14.6 2 14 2C13.4 2 13 2.4 13 3V5C13 5.6 13.4 6 14 6C14.6 6 15 5.6 15 5ZM19 5V3C19 2.4 18.6 2 18 2C17.4 2 17 2.4 17 3V5C17 5.6 17.4 6 18 6C18.6 6 19 5.6 19 5Z" fill="currentColor" />
													<path d="M8.8 13.1C9.2 13.1 9.5 13 9.7 12.8C9.9 12.6 10.1 12.3 10.1 11.9C10.1 11.6 10 11.3 9.8 11.1C9.6 10.9 9.3 10.8 9 10.8C8.8 10.8 8.59999 10.8 8.39999 10.9C8.19999 11 8.1 11.1 8 11.2C7.9 11.3 7.8 11.4 7.7 11.6C7.6 11.8 7.5 11.9 7.5 12.1C7.5 12.2 7.4 12.2 7.3 12.3C7.2 12.4 7.09999 12.4 6.89999 12.4C6.69999 12.4 6.6 12.3 6.5 12.2C6.4 12.1 6.3 11.9 6.3 11.7C6.3 11.5 6.4 11.3 6.5 11.1C6.6 10.9 6.8 10.7 7 10.5C7.2 10.3 7.49999 10.1 7.89999 10C8.29999 9.90003 8.60001 9.80003 9.10001 9.80003C9.50001 9.80003 9.80001 9.90003 10.1 10C10.4 10.1 10.7 10.3 10.9 10.4C11.1 10.5 11.3 10.8 11.4 11.1C11.5 11.4 11.6 11.6 11.6 11.9C11.6 12.3 11.5 12.6 11.3 12.9C11.1 13.2 10.9 13.5 10.6 13.7C10.9 13.9 11.2 14.1 11.4 14.3C11.6 14.5 11.8 14.7 11.9 15C12 15.3 12.1 15.5 12.1 15.8C12.1 16.2 12 16.5 11.9 16.8C11.8 17.1 11.5 17.4 11.3 17.7C11.1 18 10.7 18.2 10.3 18.3C9.9 18.4 9.5 18.5 9 18.5C8.5 18.5 8.1 18.4 7.7 18.2C7.3 18 7 17.8 6.8 17.6C6.6 17.4 6.4 17.1 6.3 16.8C6.2 16.5 6.10001 16.3 6.10001 16.1C6.10001 15.9 6.2 15.7 6.3 15.6C6.4 15.5 6.6 15.4 6.8 15.4C6.9 15.4 7.00001 15.4 7.10001 15.5C7.20001 15.6 7.3 15.6 7.3 15.7C7.5 16.2 7.7 16.6 8 16.9C8.3 17.2 8.6 17.3 9 17.3C9.2 17.3 9.5 17.2 9.7 17.1C9.9 17 10.1 16.8 10.3 16.6C10.5 16.4 10.5 16.1 10.5 15.8C10.5 15.3 10.4 15 10.1 14.7C9.80001 14.4 9.50001 14.3 9.10001 14.3C9.00001 14.3 8.9 14.3 8.7 14.3C8.5 14.3 8.39999 14.3 8.39999 14.3C8.19999 14.3 7.99999 14.2 7.89999 14.1C7.79999 14 7.7 13.8 7.7 13.7C7.7 13.5 7.79999 13.4 7.89999 13.2C7.99999 13 8.2 13 8.5 13H8.8V13.1ZM15.3 17.5V12.2C14.3 13 13.6 13.3 13.3 13.3C13.1 13.3 13 13.2 12.9 13.1C12.8 13 12.7 12.8 12.7 12.6C12.7 12.4 12.8 12.3 12.9 12.2C13 12.1 13.2 12 13.6 11.8C14.1 11.6 14.5 11.3 14.7 11.1C14.9 10.9 15.2 10.6 15.5 10.3C15.8 10 15.9 9.80003 15.9 9.70003C15.9 9.60003 16.1 9.60004 16.3 9.60004C16.5 9.60004 16.7 9.70003 16.8 9.80003C16.9 9.90003 17 10.2 17 10.5V17.2C17 18 16.7 18.4 16.2 18.4C16 18.4 15.8 18.3 15.6 18.2C15.4 18.1 15.3 17.8 15.3 17.5Z" fill="currentColor" />
												</svg>
											</span>
											<input class="form-control  ps-12" id="kt_datepicker_2" name="initial_period" value="{{$proposal->project->initial_period}}" />
										</div>
									</div>
									<div class="col-md-6">
										<label class="required fs-6 fw-bold mb-2">Periodo final de facturación</label>
										<div class="position-relative d-flex align-items-center">
											<span class="svg-icon svg-icon-2 position-absolute mx-4">
												<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
													<path opacity="0.3" d="M21 22H3C2.4 22 2 21.6 2 21V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5V21C22 21.6 21.6 22 21 22Z" fill="currentColor" />
													<path d="M6 6C5.4 6 5 5.6 5 5V3C5 2.4 5.4 2 6 2C6.6 2 7 2.4 7 3V5C7 5.6 6.6 6 6 6ZM11 5V3C11 2.4 10.6 2 10 2C9.4 2 9 2.4 9 3V5C9 5.6 9.4 6 10 6C10.6 6 11 5.6 11 5ZM15 5V3C15 2.4 14.6 2 14 2C13.4 2 13 2.4 13 3V5C13 5.6 13.4 6 14 6C14.6 6 15 5.6 15 5ZM19 5V3C19 2.4 18.6 2 18 2C17.4 2 17 2.4 17 3V5C17 5.6 17.4 6 18 6C18.6 6 19 5.6 19 5Z" fill="currentColor" />
													<path d="M8.8 13.1C9.2 13.1 9.5 13 9.7 12.8C9.9 12.6 10.1 12.3 10.1 11.9C10.1 11.6 10 11.3 9.8 11.1C9.6 10.9 9.3 10.8 9 10.8C8.8 10.8 8.59999 10.8 8.39999 10.9C8.19999 11 8.1 11.1 8 11.2C7.9 11.3 7.8 11.4 7.7 11.6C7.6 11.8 7.5 11.9 7.5 12.1C7.5 12.2 7.4 12.2 7.3 12.3C7.2 12.4 7.09999 12.4 6.89999 12.4C6.69999 12.4 6.6 12.3 6.5 12.2C6.4 12.1 6.3 11.9 6.3 11.7C6.3 11.5 6.4 11.3 6.5 11.1C6.6 10.9 6.8 10.7 7 10.5C7.2 10.3 7.49999 10.1 7.89999 10C8.29999 9.90003 8.60001 9.80003 9.10001 9.80003C9.50001 9.80003 9.80001 9.90003 10.1 10C10.4 10.1 10.7 10.3 10.9 10.4C11.1 10.5 11.3 10.8 11.4 11.1C11.5 11.4 11.6 11.6 11.6 11.9C11.6 12.3 11.5 12.6 11.3 12.9C11.1 13.2 10.9 13.5 10.6 13.7C10.9 13.9 11.2 14.1 11.4 14.3C11.6 14.5 11.8 14.7 11.9 15C12 15.3 12.1 15.5 12.1 15.8C12.1 16.2 12 16.5 11.9 16.8C11.8 17.1 11.5 17.4 11.3 17.7C11.1 18 10.7 18.2 10.3 18.3C9.9 18.4 9.5 18.5 9 18.5C8.5 18.5 8.1 18.4 7.7 18.2C7.3 18 7 17.8 6.8 17.6C6.6 17.4 6.4 17.1 6.3 16.8C6.2 16.5 6.10001 16.3 6.10001 16.1C6.10001 15.9 6.2 15.7 6.3 15.6C6.4 15.5 6.6 15.4 6.8 15.4C6.9 15.4 7.00001 15.4 7.10001 15.5C7.20001 15.6 7.3 15.6 7.3 15.7C7.5 16.2 7.7 16.6 8 16.9C8.3 17.2 8.6 17.3 9 17.3C9.2 17.3 9.5 17.2 9.7 17.1C9.9 17 10.1 16.8 10.3 16.6C10.5 16.4 10.5 16.1 10.5 15.8C10.5 15.3 10.4 15 10.1 14.7C9.80001 14.4 9.50001 14.3 9.10001 14.3C9.00001 14.3 8.9 14.3 8.7 14.3C8.5 14.3 8.39999 14.3 8.39999 14.3C8.19999 14.3 7.99999 14.2 7.89999 14.1C7.79999 14 7.7 13.8 7.7 13.7C7.7 13.5 7.79999 13.4 7.89999 13.2C7.99999 13 8.2 13 8.5 13H8.8V13.1ZM15.3 17.5V12.2C14.3 13 13.6 13.3 13.3 13.3C13.1 13.3 13 13.2 12.9 13.1C12.8 13 12.7 12.8 12.7 12.6C12.7 12.4 12.8 12.3 12.9 12.2C13 12.1 13.2 12 13.6 11.8C14.1 11.6 14.5 11.3 14.7 11.1C14.9 10.9 15.2 10.6 15.5 10.3C15.8 10 15.9 9.80003 15.9 9.70003C15.9 9.60003 16.1 9.60004 16.3 9.60004C16.5 9.60004 16.7 9.70003 16.8 9.80003C16.9 9.90003 17 10.2 17 10.5V17.2C17 18 16.7 18.4 16.2 18.4C16 18.4 15.8 18.3 15.6 18.2C15.4 18.1 15.3 17.8 15.3 17.5Z" fill="currentColor" />
												</svg>
											</span>
											<input class="form-control  ps-12" id="kt_datepicker_12" name="final_period" value="{{$proposal->project->final_period}}" />
										</div>
									</div>
								</div>
								<div class="pb-12">
									<h1 class="fw-bolder text-dark">Historial de consumos de energía </h1>
								</div>
								<div class="row g-9 mb-8">
									<div class="col-md-3">
										<label class="required fs-6 fw-bold mb-2">kWh Base</label>
										<input class="form-control form-control"  id="base" type="text" name="base" value="{{$proposal->project->base}}" >
									</div>
									<div class="col-md-3">
										<label class="required fs-6 fw-bold mb-2">kWh Intermedio</label>
										<input class="form-control form-control" id="intermediate"  type="text" name="intermediate" value="{{$proposal->project->intermediate}}" >
									</div>
									<div class="col-md-3">
										<label class="required fs-6 fw-bold mb-2">kWh Punta</label>
										<input class="form-control form-control"  id="tip" type="text" name="tip" value="{{$proposal->project->tip}}" >
									</div>
									<div class="col-md-3">
										<label class="required fs-6 fw-bold mb-2">kVArh</label>
										<input class="form-control form-control"  id="kvarh" type="text" name="kvarh" value="{{$proposal->project->kvarh}}" >
									</div>
								</div>
								<div class="pb-12">
									<h1 class="fw-bolder text-dark">Demanda </h1>
								</div>
								<div class="row g-9 mb-8">
									<div class="col-md-4">
										<label class="required fs-6 fw-bold mb-2">kWh Base</label>
										<input class="form-control form-control"  id="base_demand" type="text" name="base_demand" value="{{$proposal->project->base_demand}}">
									</div>
									<div class="col-md-4">
										<label class="required fs-6 fw-bold mb-2">kWh Intermedio</label>
										<input class="form-control form-control"  id="intermediate_demand" type="text" name="intermediate_demand" value="{{$proposal->project->intermediate_demand}}">
									</div>
									<div class="col-md-4">
										<label class="required fs-6 fw-bold mb-2">kWh Punta</label>
										<input class="form-control form-control"  id="tip_demand" type="text" name="tip_demand" value="{{$proposal->project->tip_demand}}">
									</div>
								</div>
								<div class="row g-9 mb-8">
									<div class="col-md-4" ng-model="formData.iva='16'">
										<label class="required fs-6 fw-bold mb-2">IVA</label>
										<input class="form-control form-control"  id="iva" type="text" name="iva" value="{{$proposal->project->iva}}">
									</div>
									<div class="col-md-4">
										<label class="required fs-6 fw-bold mb-2">DAP %</label>
										<input class="form-control form-control"  type="text"   name="dap" value="{{$proposal->project->dap}}">
									</div>
									<div class="col-md-4" ng-init="formData.low_voltage_measurement=0">
										<label class="required fs-6 fw-bold mb-2">Medición en baja tensión</label>
										<select class="form-select form-select"  data-hide-search="true" data-placeholder="Select..." name="low_voltage_measurement" id="low_voltage_measurement" ng-model="formData.low_voltage_measurement">
											<option value=""> Selecciona</option>
											
											<option value="1" ng-selected="{{$proposal->project->low_voltage_measurement}} == 1">Si</option>
											<option value="0" ng-selected="{{$proposal->project->low_voltage_measurement}} == 0">No</option>
										</select>
									</div>
								</div>
							</div>
							<div>
								<div class="pb-12" >
									<h1 class="fw-bolder text-dark">Historial de consumos de energía </h1>
									<div class="text-muted fw-bold fs-4"> 
									<a href="#" class="link-primary"></a></div>
								</div>

								<table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_customers_table" >
									<thead>
										<tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
											<th class="min-w-25px"></th>
											<th class="min-w-125px">Consumo (kWh)</th>
											<th class="min-w-70px" ng-show="{{$proposal->project->rate_id}}  > 9"> Demanda (KW)</th>
											<th class="text-end min-w-125px">Costo CFE</th>
										</tr>
									</thead>
									
									<tbody class="fw-bold text-gray-600" >
										@foreach($proposal->project->consumptions as $index => $item)
											<tr>
												<td> 
													<span>
														{{ \App\Utilities\Utility::getMonthNamesFromRange($item->period); }}
													</span>
												</td>
												<td>
													<div class="input-group ">
														<input class="form-control form-control" placeholder="Consumo (kWh)" type="text" min="0" name="consumptions[{{ $item->id }}]" value="{{ $item->consumption }}">
														<span class="input-group-text" id="basic-addon2">kWh </span>
													</div>
												</td>
												@if($proposal->project->rate_id > 9)
												<td class="text-end">
													<div class="input-group ">
													<input class="form-control form-control" placeholder="Demanda (kW)" type="text" min="0" name="demand[{{ $item->id }}]" value="{{ $item->demand }}">
														<span class="input-group-text" id="basic-addon2">kW</span>
													</div>
													
												</td>
												@endif
												<td>
													<div class="input-group">
														<span class="input-group-text" id="basic-addon2">$</span>
														<input class="form-control form-control" placeholder="Costo" type="number" min="0" name="costs[{{ $item->id }}]" value="{{ $item->cost }}">
													</div>
													
												</td>
											</tr>
										@endforeach
									</tbody>
								</table>
							</div>
						</div>
						<!--end::Wrapper-->
						<button type="submit" class="btn btn-sm btn-info">Actualizar</button>
					</form>
					<!--end::Form-->
				</div>
				<!--end::Content-->
			</div>
			<!--end::Stepper-->
		</div>
		<!--end::Container-->


	</div>
@endsection

@section('js')

<script>
	$("#kt_datepicker_12").flatpickr({
		enableTime: true,
		dateFormat: "Y-m-d",
	});
</script>
<script src="/assets/app/js/custom/documentation/forms/flatpickr.js"></script>
@endsection