@extends('layouts.master_app')
@section('title') Editar producto @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">Editar Producto
					<!--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"> {{$company_product->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-->
	
	<div class="content d-flex flex-column flex-column-fluid" id="kt_content" ng-controller="productsController" >
		<!--begin::Container-->
		<div id="kt_content_container" class="container-xxl">
			
			<!--begin::Basic info-->
			<div class="card mb-5 mb-xl-10">
				<!--begin::Card header-->
				<div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#kt_account_profile_details" aria-expanded="true" aria-controls="kt_account_profile_details">
					<!--begin::Card title-->
					<div class="card-title m-0">
						<h3 class="fw-bold m-0">Editar producto</h3>
					</div>
					<!--end::Card title-->
				</div>
				<!--begin::Card header-->
				<!--begin::Content-->
				<div id="kt_account_settings_profile_details" class="collapse show" >
					<!--begin::Form-->
					<form id="kt_account_profile_details_form" class="form" ng-submit="editCompanyProduct()">
					@csrf
						<div> <div ng-init="companyProductPrices({{$company_product->id}})"></div> </div>
						<!--begin::Card body-->
						<div class="card-body border-top p-9" ng-init="formData.id={{$company_product->id}}; formData.code='{{$company_product->code}}'; formData.name='{{$company_product->name}}'; formData.description='{{$company_product->description}}'; formData.type_product='{{$company_product->type_product->name}}'; formData.unit_costing='{{$company_product->unit_costing}}';  formData.cost_by='{{$company_product->cost_by}}'; formData.currency='{{$company_product->currency}}'; formData.cost='{{$company_product->cost }}'; formData.margin='{{$company_product->margin}}'; final_price = {{$company_product->final_price}};">
							<!--begin::Input group-->
							<div class="row mb-6">
								<!--begin::Label-->
								<label class="col-lg-4 col-form-label fw-semibold fs-6">Código</label>
								<!--end::Label-->
								<!--begin::Col-->
								<div class="col-lg-8 fv-row">
									<input type="text" name="code" class="form-control form-control-lg form-control-solid" placeholder="Código" ng-model="formData.code" />
								</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 required fw-semibold fs-6">Nombre</label>
								<!--end::Label-->
								<!--begin::Col-->
								<div class="col-lg-8 fv-row">
									<input type="text" name="name" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Nombre"  ng-model="formData.name"  />
								</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">Descripción</label>
								<!--end::Label-->
								<!--begin::Col-->
								<div class="col-lg-8 fv-row">
									<input type="text" name="description" class="form-control form-control-lg form-control-solid" placeholder="Descripción" ng-model="formData.description"/>
								</div>
								<!--end::Col-->
							</div>
							<!--end::Input group-->
							
							<div class="row mb-6" ng-init="">
								<label class="col-lg-4 col-form-label fw-semibold fs-6">
									<span class="required">Moneda</span>
								</label>
								<div class="col-lg-8 fv-row">
									<select name="currency" aria-label="Selecciona" data-placeholder="Selecciona ..." class="form-select form-select-solid form-select-lg fw-semibold" ng-model="formData.currency" required>
										<option value="USD"  @if($company_product->currency=='USD') selected @endif>USD</option>
										<option value="MXN" @if($company_product->currency=='MXN') selected @endif>MXN</option>
									</select>
								</div>
							</div>
							
							@if($company_product->product_id!=NULL)
							<div class="row mb-6">
								<label class="col-lg-4 col-form-label fw-semibold fs-6">
									<span class="required">Precio</span>
								</label>
								<div class="col-lg-8">
									<div class="row">
										<!--begin::Col-->
										<div class="col-lg-4 fv-row" >
											<input type="text" step="any" name="cost" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Precio" value="" ng-model="formData.cost" ng-blur="final_price = formData.cost *( 1+ (formData.margin/100))"/>
											<small style="margin-left: 17px;">Precio</small>
										</div>
										<!--end::Col-->
										<!--begin::Col-->
										<div class="col-lg-4 fv-row" >
											<input type="text" step="any" name="margin" class="form-control form-control-lg form-control-solid" placeholder="Margen %" value=""  ng-model="formData.margin" ng-blur="final_price = formData.cost *( 1+ (formData.margin/100))" />
											<small  style="margin-left: 17px;">Margen de utilidad %</small>
										</div>
										<!--end::Col-->
										<!--begin::Col-->
										<div class="col-lg-4 fv-row" >
											<input type="text" step="any" name="final_price" class="form-control form-control-lg form-control-solid" placeholder="Precio final" value="" ng-model="final_price" ng-blur="final_price > formData.cost ? formData.margin = (final_price - formData.cost) * (100/formData.cost ) : formData.margin = 0" ng-disabled="formData.cost<=0"/>
											<small  style="margin-left: 17px;">Precio final</small>
										</div>
										<!--end::Col-->
									</div>
								</div>
							</div>
								
							@endif
							@if($company_product->product_id==NULL)	
							<!--begin::Input group-->
							<div class="rounded border p-10" >
								<!--begin::Input group-->
								<div class="row mb-6">
									<!--begin::Label-->
									<label class="col-lg-4 col-form-label  fw-semibold fs-6">
										<select name="unit_costing" aria-label="Selecciona" data-placeholder="Costo unitario" class="form-select form-select-solid form-select-lg fw-semibold" ng-model="formData.unit_costing">
											<option value="" @if($company_product->unit_costing=='') selected @endif >Selecciona</option>
											<option value="panel"  @if($company_product->unit_costing=='panel') selected @endif >Por panel</option>
											<!--<option value="inversor" @if($company_product->unit_costing=='inversor') selected @endif>Por inversor</option> -->
											<option value="watt" @if($company_product->unit_costing=='watt') selected @endif >Por watt</option>
										</select>
										<small style="margin-left: 17px;">Costo unitario</small>
									</label>
									<!--end::Label-->
									<!--begin::Col-->
									<div class="col-lg-8">
										<div class="row mb-2" data-kt-buttons="true" data-kt-initialized="1">
											<!--begin::Col-->
											<div class="col">
												<!--begin::Option-->
												<label class="btn btn-outline btn-outline-dashed btn-active-light-primary w-100 p-4  " ng-class="{'active': formData.cost_by=='unit'}" >
												<img src="/assets/app/media/icons/price-tag.png" class="" style="margin-top: -5px;height: 30px;"> &nbsp;&nbsp;
												<input type="radio" class="btn-check" name="cost_by" value="unit" ng-model="formData.cost_by">
												<span class="fw-bold fs-3">Costo por unidad</span>
												</label>
												<!--end::Option-->
											</div>
											<!--end::Col-->
											<!--begin::Col-->
											<div class="col">
												<!--begin::Option-->
												<label class="btn btn-outline btn-outline-dashed btn-active-light-primary w-100 p-4 " ng-class="{'active': formData.cost_by=='range'}">
												<img src="/assets/app/media/icons/range.png" class="" style="margin-top: -5px;height: 30px;"> &nbsp;&nbsp;
												<input type="radio" class="btn-check" name="cost_by"  value="range" ng-model="formData.cost_by">

												<span class="fw-bold fs-3">Costo por rango</span>
												</label>
												<!--end::Option-->
											</div>
											<!--end::Col-->
										</div>
									</div>
									<!--end::Card body-->
								</div>

								<div class="row mb-6" ng-show="formData.cost_by=='unit'">
									<!--begin::Label-->
									<label class="col-lg-4 col-form-label required fw-semibold fs-6">Precio (@{{formData.currency}})</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" step="any" name="cost" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Precio" value="" ng-model="formData.cost" ng-blur="final_price = formData.cost *( 1+ (formData.margin/100))"/>
												<small style="margin-left: 17px;">Precio</small>
											</div>
											<!--end::Col-->
											<!--begin::Col-->
											<div class="col-lg-4 fv-row" >
												<input type="text" step="any" name="margin" class="form-control form-control-lg form-control-solid" placeholder="Margen %" value=""  ng-model="formData.margin" ng-blur="final_price = formData.cost *( 1+ (formData.margin/100))" />
												<small  style="margin-left: 17px;">Margen de utilidad %</small>
											</div>
											<!--end::Col-->
											<!--begin::Col-->
											<div class="col-lg-4 fv-row" >
												<input type="number" name="final_price" class="form-control form-control-lg form-control-solid" placeholder="Precio final" value="" ng-model="final_price" ng-model="final_price" ng-blur="final_price > formData.cost ? formData.margin = (final_price - formData.cost) * (100/formData.cost ) : formData.margin = 0" ng-disabled="formData.cost<=0" step="any" />
												<small  style="margin-left: 17px;">Precio final</small>
											</div>
											<!--end::Col-->
										</div>
										<!--end::Row-->
									</div>
									<!--end::Col-->
								</div>
								<!--begin::Input group-->
								<div class="row mb-6" ng-show="formData.cost_by=='range'" ng-repeat="item in formData.range track by $index">
									<!--begin::Label-->
									<label class="col-lg-4 col-form-label fw-semibold fs-6" >
										<a class="btn btn-sm btn-light-primary" ng-click="addRange()" ng-if="$index==0"><i class="la la-plus"></i>Agregar rango</a>
										<a class="btn btn-sm btn-light-danger" ng-click="deleteRange($index)" ng-show="$index>0"><i class="fa fa-times"></i>Eliminar rango </a>
									</label>
									<!--end::Label-->
									
									<!--begin::Col-->
									<div class="col-lg-8" >
										<!--begin::Row-->
										<div class="row">
											<!--begin::Col-->
											<div class="col-lg-2 fv-row" >
												<input type="number" name="since" class="form-control form-control-lg form-control-solid" placeholder="Desde" value="" ng-model="item.since" />
												<small  style="margin-left: 17px;">Desde</small>
											</div>
											<!--end::Col-->

											<!--begin::Col-->
											<div class="col-lg-2 fv-row" >
												<input type="number" name="until" class="form-control form-control-lg form-control-solid" placeholder="Hasta" value="" ng-model="item.until"  />
												<small  style="margin-left: 17px;">Hasta</small>
											</div>
											<!--end::Col-->
											<!--begin::Col-->
											<div class="col-lg-3 fv-row" >
												<input type="text" step="any" name="cost" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Precio"  ng-model="item.cost"  ng-blur="item.final_price = item.cost *( 1+ (item.margin/100))"/>
												<small  style="margin-left: 17px;">Precio</small>
											</div>
											<!--end::Col-->
											<!--begin::Col-->
											<div class="col-lg-2 fv-row" >
												<input type="text" name="margin" class="form-control form-control-lg form-control-solid" placeholder="Margen %" ng-model="item.margin" ng-blur="item.final_price = item.cost *( 1+ (item.margin/100))" />
												<small  style="margin-left: 17px;">Utilidad %</small>
											</div>
											<!--end::Col-->
											<!--begin::Col-->
											<div class="col-lg-3 fv-row" >
												<input type="number" name="final_price" class="form-control form-control-lg form-control-solid" placeholder="Precio final" ng-model="item.final_price" ng-value="item.final_price = item.cost *( 1+ (item.margin/100))" disabled/>
												<small  style="margin-left: 17px;">Precio final</small>
											</div>
											<!--end::Col-->
										</div>
										<!--end::Row-->
									</div>
									<!--end::Col-->
								</div>
								<!--end::Input group-->
							</div>
							<!--end::Input group-->
							@endif
						</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">Guardar</button>
						</div>
						<!--end::Actions-->
					</form>
					<!--end::Form-->
				</div>
				<!--end::Content-->
			</div>
			<!--end::Basic info-->
		
		</div>
		<!--end::Container-->
	</div>
@endsection

@section('js')
@endsection