@extends('layouts.master_app')
@section('title') Contacto @endsection
@section('menu_contacts', 'here show')

@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">Contactos
					<!--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"> </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="projectsController" >
		<!--begin::Container-->
		<div id="kt_content_container" class="container-xxl">
			<!--begin::Layout-->
			<div class="d-flex flex-column flex-xl-row">
				<!--begin::Sidebar-->
				<div class="flex-column flex-lg-row-auto w-100 w-xl-350px mb-10">
					<!--begin::Card-->
					<div class="card mb-5 mb-xl-8">
						<!--begin::Card body-->
						<div class="card-body pt-15">
							<!--begin::Summary-->
							<div class="d-flex flex-center flex-column mb-5">
								<!--begin::Avatar-->
								<div class="symbol symbol-150px symbol-circle mb-7">
								<div class="symbol-label fs-3 bg-light-danger text-danger" style="font-size: 3.5rem!important">{{$contact->person->letters_name}}</div>
								</div>
								<!--end::Avatar-->
								<!--begin::Name-->
								<a href="#" class="fs-3 text-gray-800 text-hover-primary fw-bold mb-1">{{$contact->person->full_name}}</a>
								<!--end::Name-->
								<!--begin::Email-->
								<a href="#" class="fs-5 fw-semibold text-muted text-hover-primary mb-6">
									@if(isset($contact->person->emails[0]))
									<i class="fa-solid fa-envelope"></i> {{$contact->person->emails[0]->email}}
									@endif
									<br>
									@if(isset($contact->person->phones[0]))
									<i class="fa-solid fa-phone"></i> {{$contact->person->phones[0]->phone}}
									@endif
								</a>
								<!--end::Email-->
							</div>
							<!--end::Summary-->
							<!--begin::Details toggle-->
							<div class="d-flex flex-stack fs-4 py-3">
								<div class="fw-bold">Detalles</div>
								<!--begin::Badge-->
								<a href="/contacts/edit/{{$contact->id}}" class="btn btn-sm btn-light-primary" >Editar</a>
								<!--begin::Badge-->
							</div>
							<!--end::Details toggle-->
							<div class="separator separator-dashed my-3"></div>
							<!--begin::Details content-->
							<div class="pb-5 fs-6">
								<!--begin::Details item-->
								<div class="fw-bold mt-5"> ID</div>
								<div class="text-gray-600">ID-{{$contact->id}}</div>
								<!--begin::Details item-->
								<!--begin::Details item-->
								<div class="fw-bold mt-5">Status</div>
								<div class="text-gray-600"> <span class="badge badge-{{$contact->status->color}}">{{$contact->status->name}}</span> </div>
								<!--begin::Details item-->
								<!--begin::Details item-->
								<div class="fw-bold mt-5">Empresa</div>
								<div class="text-gray-600">
									<a href="#" class="text-gray-600 text-hover-primary">{{$contact->name_business}}</a>
								</div>
								<!--begin::Details item-->
								<!--begin::Details item-->
								@if(isset($contact->contact_medium))
								<div class="fw-bold mt-5">Medio de contacto</div>
								<div class="text-gray-600"> {{$contact->contact_medium->name}}</div>
								@endif()
								<!--begin::Details item-->
								
							</div>
							<!--end::Details content-->
						</div>
						<!--end::Card body-->
					</div>
					<!--end::Card-->
				</div>
				<!--end::Sidebar-->
				<!--begin::Content-->
				<div class="flex-lg-row-fluid ms-lg-15">
					<!--begin:::Tabs-->
					<ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-4 fw-semibold mb-8">
						<!--begin:::Tab item-->
						<li class="nav-item">
							<a class="nav-link text-active-primary pb-4 active" data-bs-toggle="tab" href="#kt_ecommerce_customer_overview">Proyectos</a>
						</li>
						<!--<li class="nav-item">
							<a class="nav-link text-active-primary pb-4" data-bs-toggle="tab" href="#kt_ecommerce_customer_general">Tareas</a>
						</li>
						<li class="nav-item">
							<a class="nav-link text-active-primary pb-4" data-bs-toggle="tab" href="#kt_ecommerce_customer_advanced">Documentos</a>
						</li>-->
					</ul>
					<!--end:::Tabs-->
					<!--begin:::Tab content-->
					<div class="tab-content" id="myTabContent">
						<!--begin:::Tab pane-->
						<div class="tab-pane fade show active" id="kt_ecommerce_customer_overview" role="tabpanel">
							@if(count($contact->projects) != 0)
							<div class="d-flex flex-wrap flex-stack mb-6">
								<h3 class="fw-bold my-2">
								<span class="fs-6 text-gray-400 fw-semibold ms-1"></span></h3>
								@if(\Auth::user()->subscriptionActive()->status=='active')
								<div class="me-0">
									<button class="btn btn-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
									Crear proyecto
									</button>
									<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px py-3 " data-kt-menu="true" data-popper-placement="bottom-end" style="z-index: 105; position: fixed; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-64px, 214px, 0px);">
										<div class="menu-item px-3">
											<a href="/proposals/new/{{$contact->id}}" class="menu-link px-3">Sistema interconectado</a>
										</div>
										<div class="menu-item px-3">
											<a href="/proposals/create/{{$contact->id}}" class="menu-link px-3">Otro</a>
										</div>
									</div>
								</div>
								@endif
							</div>
							@endif
							@if(count($contact->projects) != 0)
							<!--end::Documents toolbar-->
							<div class="row g-6 g-xl-9 mb-6 mb-xl-9">
								@foreach($contact->projects as $project)
									<!--begin::Col-->
									<div class="col-md-6 col-lg-4 col-xl-4">
										<!--begin::Card-->
										<div class="card h-100">
											<!--begin::Card body-->
											<div class="card-body d-flex justify-content-center text-center flex-column p-8">
												<!--begin::Name-->
												<a ng-click="infoProject('{{$project->id}}')" href="#" class="text-gray-800 text-hover-primary d-flex flex-column">
													<div class="symbol symbol-75px mb-5">
														<img src="/assets/app/media/svg/files/folder-document.svg" class="theme-light-show" alt="" />
														<img src="/assets/app/media/svg/files/folder-document-dark.svg" class="theme-dark-show" alt="" />
													</div>
													<div class="fs-5 fw-bold mb-2">{{$project->name}}</div>
												</a>
												<!--end::Name-->
												<!--begin::Description-->
												@if($project->service_number!=NULL)
												<div class="fs-7 fw-semibold text-gray-400">Num servicio {{$project->service_number}}</div>
												@endif
												<!--end::Description-->
											</div>
											<!--end::Card body-->
										</div>
										<!--end::Card-->
									</div>
									<!--end::Col-->
								@endforeach
							</div>
							@endif
							@if(count($contact->projects) == 0)
							<!--begin::Card-->
							<div class="card">
								<!--begin::Card body-->
								<div class="card-body p-0">
									<!--begin::Wrapper-->
									<div class="card-px text-center py-20 my-10">
										<!--begin::Title-->
										<h2 class="fs-2x fw-bold mb-10">Aún no hay proyectos para este contacto</h2>
										<!--end::Title-->
										<!--begin::Description-->
										<p class="text-gray-400 fs-4 fw-semibold mb-10">Empieza creando una cotización  para este contacto.
										 </p>
										<!--end::Description-->
										<!--begin::Action-->
										<div class="me-0">
											<button class="btn btn-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
											Crear proyecto
											</button>
											<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px py-3 " data-kt-menu="true" data-popper-placement="bottom-end" style="z-index: 105; position: fixed; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-64px, 214px, 0px);">
												<div class="menu-item px-3">
													<a href="/proposals/new/{{$contact->id}}" class="menu-link px-3">Sistema interconectado</a>
												</div>
												<div class="menu-item px-3">
													<a href="/proposals/create/{{$contact->id}}" class="menu-link px-3">Otro</a>
												</div>
											</div>
										</div>
									</div>
									<!--end::Wrapper-->
								</div>
								<!--end::Card body-->
							</div>
							<!--end::Card-->
							@endif

							<div class="card mb-5 mb-xl-10" ng-show="loading_project">
								<!--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"> @{{formData.name}}</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" method="POST" action="/projects/update">
										@csrf
										<input type="text" name="project_id" value="" ng-model="formData.id" style="display:none">
										<!--begin::Card body-->
										<div class="card-body border-top p-9">
											<div class="row mb-6">
												<label class="col-lg-4 col-form-label fw-semibold fs-6">Nombre del proyecto </label>
												<div class="col-lg-8 fv-row">
													<input type="text" ng-model="formData.name" name="name" class="form-control form-control-lg form-control-solid" placeholder="Nombre del proyecto" value="" />
												</div>
											</div>
											<!--begin::Input group-->
											<div class="row mb-6">
												<!--begin::Label-->
												<label class="col-lg-4 col-form-label fw-semibold fs-6"></label>
												<!--end::Label-->
												<!--begin::Col-->
												<div class="col-lg-8">
													<!--begin::Row-->
													<div class="row">
														<!--begin::Col-->
														<div class="col-lg-6 fv-row">
															<select class="form-select form-select-solid" data-hide-search="true" data-placeholder="Seleccionar tarifa" name="rate_id" id="rate_id" ng-model="formData.rate_id" ng-show="!upload_file_cfe">
																<option value="">Seleccionar</option>
																@php $rates = \App\Models\Rate::all(); @endphp
																@foreach($rates as $rate)
																<option value="{{$rate->id}}" ng-selected="formData.rate_id=={{$rate->id}}">{{$rate->name}}</option>
																@endforeach
															</select>
														</div>
														<!--end::Col-->
														<!--begin::Col-->
														<div class="col-lg-6 fv-row">
															<select class="form-select form-select-solid"  data-hide-search="true" data-placeholder="Select..." name="invoice_type" id="invoice_type" ng-model="formData.invoice_type" ng-change="billingDays(); costRate()">
																<option value=""> Selecciona</option>
																<option value="bimestral" ng-selected="formData.invoice_type=='bimestral'">Bimestral</option>
																<option value="mensual" ng-selected="formData.invoice_type=='mensual'" >Mensual</option>
															</select>
														</div>
														<!--end::Col-->
													</div>
													<!--end::Row-->
												</div>
												<!--end::Col-->
											</div>
											<!--end::Input group-->
										</div>
										<!--end::Card body-->
										<!--begin::Actions-->
										<div class="card-footer d-flex justify-content-end py-6 px-9">
											<button type="button" onclick="delete_item(this);" data="/projects/destroy/@{{formData.id}}" class="btn btn-sm  btn-light-danger me-3">
												<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="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>
											</button>
											<button type="submit" class="btn btn-primary" id="kt_account_profile_details_submit">Actualizar información</button>
										</div>
										<!--end::Actions-->
									</form>
									<!--end::Form-->
								</div>
								<!--end::Content-->
							</div>

							<!--begin::Proposals-->
							<div class="card mb-5 mb-xl-10" ng-show="loading_project">
								<!--begin::Card header-->
								<div class="card-header">
									<!--begin::Title-->
									<div class="card-title">
										<h3>Propuestas</h3>
									</div>
									<!--end::Title-->
								</div>
								<!--end::Card header-->
								<!--begin::Card body-->
								<div class="card-body">
									<!--begin::Addresses-->
									<div class="row gx-9 gy-6">
										<div class="col-xl-6" ng-repeat="item in project.proposals" >
											<!--begin::Card-->
											<div class="card card-dashed h-xl-100 flex-row flex-stack flex-wrap p-6">
												<!--begin::Info-->
												<div class="d-flex flex-column py-2">
													<!--begin::Owner-->
													<div class="d-flex align-items-center fs-4 fw-bold mb-5">
														<a href="/proposals/@{{item.id}}" ng-click="nameproposalsUpdate()"> @{{item.name}} </a>
														<span class="badge badge-light-@{{item.status.color}} fs-7 ms-2">@{{item.status.name}}</span>
													</div>
													<!--end::Owner-->
													<!--begin::Wrapper-->
													<div class="d-flex align-items-center">
														<div>
															<div class="fs-4 fw-bold">Tamaño del sistema: @{{item.system_size}} kWp</div>
															<div class="fs-6 fw-semibold text-gray-400">Folio # @{{item.folio}}</div>
														</div>
													</div>
													<!--end::Wrapper-->
												</div>
												<!--end::Info-->
												<!--begin::Actions-->
												<div class="d-flex align-items-center py-2">
													<button type="button" onclick="delete_item(this);" data="/proposals/delete/@{{item.id}}" class="btn btn-sm  btn-light-danger me-3">
														<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="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>
													</button>
													<button data-bs-toggle="modal" ng-click="formData.name_proposal = 'Copia de '+item.name; formData.proposal_id = item.id" data-bs-target="#kt_modal_duplicate_proposal" class="btn btn-sm btn-light btn-active-light-primary me-3">Duplicar</button>
													<button class="btn btn-sm btn-light btn-active-light-primary" data-bs-toggle="modal" data-bs-target="#modal_edit_name_propsalt" ng-click="editNameProposalShow(item.id, item.name);">Cambiar nombre</button>
												</div>
												<!--end::Actions-->
											</div>
											<!--end::Card-->
										</div>
									</div>
								</div>
								<!--end::Card body-->
							</div>
							<!--end::Proposals-->

						</div>
						<!--end:::Tab pane-->

					</div>
					<!--end:::Tab content-->
				</div>
				<!--end::Content-->
			</div>
			<!--end::Layout-->
			<!--begin::Modals-->

			<!--begin::Modal - Send Quotation email-->
			<div class="modal fade" id="kt_modal_duplicate_proposal" tabindex="-1" aria-hidden="true">
				<!--begin::Modal dialog-->
				<div class="modal-dialog modal-dialog-centered mw-700px" >
					<!--begin::Modal content-->
					<div class="modal-content">
						<!--begin::Form-->
							<!--begin::Modal header-->
							<div class="modal-header" id="kt_modal_new_address_header">
								<!--begin::Modal title-->
								<h2>Duplicar propuesta</h2>
								<!--end::Modal title-->
								<!--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>
							<!--end::Modal header-->
							<!--begin::Modal body-->
							<div class="modal-body py-10 px-lg-17">
								<!--begin::Scroll-->
								<div class="scroll-y me-n7 pe-7" id="kt_modal_new_address_scroll" >
									<!--begin::Notice-->
									<!--begin::Input group-->
									<form class="form" ng-submit="duplicateProposal()" method="POST" id="kt_modal_new_address_form" >
										<div class="row g-9 mb-8" >
											@csrf
											<div class=" col-md-8 fv-row mb-1">
												<input type="text" ng-model="formData.name_proposal" name="name_proposal" value="" class="form-control form-control-solid mb-3 mb-lg-0"> 
											</div>
											<div class="col-md-4 fv-row mb-1">
												<button type="submit" id="kt_modal_new_address_submit" class="btn btn-info">
													<i class="fa fa-paper-plane" aria-hidden="true"></i> Duplicar
												</button>
											</div>
											
										</div>
									</form>
								
								</div>
								<!--end::Scroll-->
							</div>
							<!--end::Modal body-->
							<!--begin::Modal footer-->
							<div class="modal-footer flex-center">
								<!--begin::Button-->
								<button type="reset" id="kt_modal_duplicate_proposal" data-bs-dismiss="modal" class="btn btn-light me-3">Cerrar</button>
								<!--end::Button-->
							</div>
							<!--end::Modal footer-->
						</form>
						<!--end::Form-->
					</div>
				</div>
			</div>
			<!--end::Modal -  Send Quotation email -->
			<!--begin::Modal - Add Advisor-->
			<div class="modal fade" id="modal_edit_name_propsalt" 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" id="kt_modal_add_user_header">
							<!--begin::Modal title-->
							<h2 class="fw-bold">Editar nombre</h2>
							<!--end::Modal title-->
							<!--begin::Close-->
							<div class="btn btn-icon btn-sm btn-active-icon-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>
						<!--end::Modal header-->
						<!--begin::Modal body-->
						<div class="modal-body ">
						<!--begin::Form-->
							<form id="edit_name_propsalt" class="form" ng-submit="editNameProposal()">
								@csrf
								<input id="id" name="id"  ng-model="formData.id" hidden>
								<div class="row">
									<div class="col-lg-12 fv-row">
										<label for="observations">Nombre:</label>
										<input type="text" id="name" name="name" ng-model="formData.name" class="form-control form-control-lg form-control-solid">
									</div>
								</div>
								<div  class="row">
									<br>
								</div>
								<button type="submit" class="btn btn-primary">Actualizar</button>
								&nbsp;
								&nbsp;
								<button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Cerrar</button>
							</form>							
						<!--end::Form-->
						</div>
						<!--end::Modal body-->
					</div>
					<!--end::Modal content-->
				</div>
				<!--end::Modal dialog-->
			</div>
			<!--end::Modal - Add Advisor-->
			<!--end::Modals-->
		</div>
		<!--end::Container-->
	</div>
	<!--end::Content-->
@endsection

@section('js')
<script src="/assets/app/js/custom/confirm_delete.js"></script>
<script src="/assets/app/js/custom/utilities/modals/create-campaign.js"></script>
@endsection