@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->contact->id}}"> {{ $proposal->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"> Realizar pedido</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="proposalsController">
		<!--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}}'; 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 }}' ">

			<!--begin::Layout-->
			<div class="d-flex flex-column flex-lg-row" ng-init="costsProposal('{{$proposal->id}}');">
				<!--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-->
									
								</div>
								<!--end::Top-->
								<!--begin::Separator-->
								<div class="separator separator-dashed my-10"></div>
								<!--end::Separator-->
								<!--begin::Wrapper-->
								<div class="mb-0">
								
									<!--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">
														@if($proposal->status->id != 2 )
														<a href="#" class="btn btn-outline btn-outline-dashed btn-outline-primary btn-active-light-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_cost_proposal"><i class="fas fa-plus"></i> Agregar concepto 
														</a>
														@endif
														<!--<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="">
															@foreach($type_products as $type_product)
															<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="companyProducts('{{$type_product->slug}}')">{{$type_product->name}}</a>
															</div>
															@endforeach
														</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"></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::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-->
							@if(\Auth::user()->person->employee->rol->name == 'admin')
							<div class="mb-10" ng-init="formData.user_id={{$proposal->user_id}}">
								<label class="form-label fw-bold fs-6 text-gray-700">Vendedor </label>
								<select name="user_id" ng-model="formData.user_id"  class="form-select form-select-solid">
									<option>Selecciona</option>
									@foreach($vendedores as $item)
									<option value="{{$item->id}}" ng-selected="formData.user_id == '{{$item->id}}'">{{$item->person->fullname}}</option>
									@endforeach
								</select>
							</div>
							@endif
							<div class="separator separator-dashed mb-8"></div>
							@if($proposal->payment == null)
							<div class="mb-10" ng-init="formData.template_id=1">
								<label class="form-label fw-bold fs-6 text-gray-700">Pago del cliente</label>
								<input class="form-control" ng-model="formData.payment" type="text" min="0" name=""   />
							</div>
							@endif
							<!--end::Input group-->
							<!--begin::Separator-->
							<div class="separator separator-dashed mb-8"></div>

							<!--end::Separator-->
							<!--begin::Input group-->
							<div class="mb-8" >
								<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">Imprimir copia</span>
									<input class="form-check-input" type="checkbox" ng-checked="formData.break_down_amounts==1" ng-model="formData.break_down_amounts" />
								</label>
							</div>
							<div class="separator separator-dashed mb-8"></div>
							<div class="mb-0">
								<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-->Realizar pedido
								</button>
							</div>
							<!--end::Actions-->
						</div>
						<!--end::Card body-->
					</div>
					<!--end::Card-->
				</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">
						<div class="text-center mb-13">
							<h1 class="mb-3">Agregar concepto </h1>
						</div>
						<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" 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" required>
										<option value="" disabled>Selecciona... </option>
										@foreach($prices_contact as $item)
											@if(isset($item->company_product))
											<option value="{{$item->company_product_id}}" > {{$item->company_product->name}}</option>
											@endif
										@endforeach
									</select>
									
								</div>
								<div class="col-md-1" ng-init="formData.contact_id = '{{$proposal->contact_id}}'">
									<a href="/products/@{{ type_product }}" class="btn btn-clean btn-sm btn-icon btn-icon-primary btn-active-light-primary me-n3" title="Agrega @{{ type_product | replace: '-':' ' }}">
										<i class="fonticon-settings fs-1"></i>
									</a>
								</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="submit" id="kt_modal_users_search_submit" class="btn btn-primary" ng-click="addCostProposal()">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