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

@section('css')
@endsection

@section('content')
	<!--begin::Toolbar-->
	<div class="toolbar py-2" id="kt_toolbar">
		<!--begin::Container-->
		<div id="kt_toolbar_container" class="container-fluid d-flex align-items-center">
			<!--begin::Page title-->
			<div class="flex-grow-1 flex-shrink-0 me-5">
				<!--begin::Page title-->
				<div data-kt-swapper="true" data-kt-swapper-mode="prepend" data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}" class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
					<!--begin::Title-->
					<h1 class="d-flex align-items-center text-dark fw-bold my-1 fs-3">Propuesta
						<!--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="peak_solar_time={{$peak_solar_time}}; formData.average_consumption = {{$proposal->project->average_consumption}}; formData.average_daily_consumption = {{$proposal->project->average_daily_consumption}}; formData.rate_id = {{$proposal->project->rate_id}}; formData.invoice_type = '{{$proposal->project->invoice_type}}'; formData.proposal_uuid = '{{$proposal->uuid}}'">
			<!--begin::Form-->
			<form id="kt_ecommerce_edit_order_form" class="form d-flex flex-column flex-lg-row" ng-init="infoRate(); costRate(); billingDays();">
				<!--begin::Aside column-->
				<div class="w-100 flex-lg-row-auto w-lg-300px mb-7 me-7 me-lg-10">

					<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 </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 </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}}%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
								</div>
							</div>
							<!--end::Progress-->
						</div>
						<!--end::Card body-->
					</div>

					<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::Header-->
						<div class="card-header pt-5 mb-3">
							<!--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>
							<!--end::Icon-->
						</div>
						<!--end::Header-->
						<!--begin::Card body-->
						<div class="card-body d-flex align-items-end mb-3">
							<!--begin::Info-->
							<div class="d-flex align-items-center">
								<span class="fs-4hx text-white fw-bold me-6">@{{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>
						<!--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}} W</span>
								<span class="opacity-50">Tamaño del sistema</span>
							</div>
							<!--end::Progress-->
						</div>
						<!--end::Card footer-->
					</div>
	
					<!--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: #22232B">
						<!--begin::Header-->
						<div class="card-header pt-2">
							<!--begin::Title-->
							<h3 class="card-title">
								<span class="text-white fs-3 fw-bold me-2">Pago CFE</span>
							</h3>
							<!--end::Title-->
						</div>
						<!--end::Header-->
						<!--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</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</div>
									<!--end::Label-->
								</div>
								<!--end::Stat-->
							</div>
							<!--end::Wrapper-->
							<!--begin::Chart-->
							<div id="kt_card_widget_1_chart" data-kt-chart-color="#8F5FF4" style="height: 105px"></div>
							<!--end::Chart-->
						</div>
						<!--end::Body-->
					</div>
					<!--end::Card widget 1-->

				</div>
				<!--end::Aside column-->
				<!--begin::Main column-->
				<div class="d-flex flex-column flex-lg-row-fluid gap-7 gap-lg-10">
					<!--begin::Order details-->
					<div class="card card-flush py-4">
						<div class="card-header">
							<div class="card-title">
								<h2>Cotización</h2>
							</div>
						</div>
						<!--begin::Accordion-->
						<div class="accordion" id="kt_accordion_1">
							<div class="accordion-item">
								<h2 class="accordion-header" id="kt_accordion_1_header_1">
									<button class="accordion-button fs-4 fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_1" aria-expanded="true" aria-controls="kt_accordion_1_body_1">
										Módulo fotovoltaico
									</button>
								</h2>
								<div id="kt_accordion_1_body_1" class="accordion-collapse collapse show" aria-labelledby="kt_accordion_1_header_1" data-bs-parent="#kt_accordion_1">
									<div class="accordion-body">

										<select name="panel_id"  ng-model="formData.panel_id" aria-label="Selecciona" data-placeholder="Selecciona ..." class="form-select mb-2"  >
											<option value="">Selecciona un módulo fotovoltaico</option>
											@foreach($panels as $item)
											<option value="{{$item->id}}">{{$item->name}}</option>
											@endforeach
										</select>
									</div>
								</div>
							</div>

							<div class="accordion-item">
								<h2 class="accordion-header" id="kt_accordion_1_header_2">
									<button class="accordion-button fs-4 fw-semibold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_2" aria-expanded="false" aria-controls="kt_accordion_1_body_2">
									Inversores
									</button>
								</h2>
								<div id="kt_accordion_1_body_2" class="accordion-collapse collapse" aria-labelledby="kt_accordion_1_header_2" data-bs-parent="#kt_accordion_1">
									<div class="accordion-body">
										...
									</div>
								</div>
							</div>

							<div class="accordion-item">
								<h2 class="accordion-header" id="kt_accordion_1_header_3">
									<button class="accordion-button fs-4 fw-semibold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_3" aria-expanded="false" aria-controls="kt_accordion_1_body_3">
									Baterías
									</button>
								</h2>
								<div id="kt_accordion_1_body_3" class="accordion-collapse collapse" aria-labelledby="kt_accordion_1_header_3" data-bs-parent="#kt_accordion_1">
									<div class="accordion-body">
									...
									</div>
								</div>
							</div>

							<div class="accordion-item">
								<h2 class="accordion-header" id="kt_accordion_1_header_4">
									<button class="accordion-button fs-4 fw-semibold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_4" aria-expanded="false" aria-controls="kt_accordion_1_body_4">
									Estructuras
									</button>
								</h2>
								<div id="kt_accordion_1_body_4" class="accordion-collapse collapse" aria-labelledby="kt_accordion_1_header_4" data-bs-parent="#kt_accordion_1">
									<div class="accordion-body">
									...
									</div>
								</div>
							</div>

							<div class="accordion-item">
								<h2 class="accordion-header" id="kt_accordion_1_header_5">
									<button class="accordion-button fs-4 fw-semibold collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_5" aria-expanded="false" aria-controls="kt_accordion_1_body_5">
									Mano de obra
									</button>
								</h2>
								<div id="kt_accordion_1_body_5" class="accordion-collapse collapse" aria-labelledby="kt_accordion_1_header_5" data-bs-parent="#kt_accordion_1">
									<div class="accordion-body">
									...
									</div>
								</div>
							</div>

							
						</div>
						<!--end::Accordion-->
					</div>
					<!--end::Order details-->
					
					<div class="d-flex justify-content-end">
						
						<!--begin::Button-->
						<button type="submit" ng-click="printQuote()" class="btn btn-primary">
							<span class="indicator-label">Generar cotización</span>
							
						</button>
						<!--end::Button-->
					</div>
				</div>
				<!--end::Main column-->
			</form>
			<!--end::Form-->
		</div>
		<!--end::Container-->
	</div>
	<!--end::Content-->
@endsection

@section('js')
@endsection