@extends('layouts.master_admin')
@section('title')Usuarios @endsection

@section('css')
<link href="/assets/app/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
@endsection

@section('content')
	
	<!--begin::Content-->
	<div class="content d-flex flex-column flex-column-fluid" id="kt_content" ng-controller="followupUsersService">
		<!--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-100px symbol-circle mb-7">
									<img src="{{$user->person->photo}}" alt="image" />
								</div>
								<!--end::Avatar-->
								<!--begin::Name-->
								<a href="#" class="fs-3 text-gray-800 text-hover-primary fw-bold mb-1">{{$user->person->fullname}}</a>
								<!--end::Name-->
								<!--begin::Position-->
								<div class="fs-5 fw-semibold text-muted mb-6"></div>
								<!--end::Position-->
								<!--begin::Info-->
								<div class="d-flex flex-wrap flex-center">
									<!--begin::Stats-->
									<div class="border border-gray-300 border-dashed rounded py-3 px-3 mb-3">
										<div class="fs-4 fw-bold text-gray-700">
											@if(isset($user->companies[0]) )
											<span class="w-75px">{{ count($user->companies[0]->company->projects) }}</span>
											@endif
											<i class="ki-outline ki-arrow-up fs-3 text-success"></i>
										</div>
										<div class="fw-semibold text-muted">Proyectos</div>
									</div>
									<!--end::Stats-->
									
								</div>
								<!--end::Info-->
							</div>
							<!--end::Summary-->
							<!--begin::Details toggle-->
							<div class="d-flex flex-stack fs-4 py-3">
								<div class="fw-bold rotate collapsible" data-bs-toggle="collapse" href="#kt_customer_view_details" role="button" aria-expanded="false" aria-controls="kt_customer_view_details">Detalles 
									<span class="ms-2 rotate-180">
										<i class="ki-outline ki-down fs-3"></i>
									</span>
								</div>
								<span data-bs-toggle="tooltip" data-bs-trigger="hover" title="Edit customer details">
									<a href="/admin/users/edit/{{$user->id}}" class="btn btn-sm btn-light-primary" >Editar</a>
								</span>
							</div>
							<!--end::Details toggle-->
							<div class="separator separator-dashed my-3"></div>
							<!--begin::Details content-->
							<div id="kt_customer_view_details" class="collapse show">
								<div class="py-5 fs-6">
									<div class="d-flex flex-stack fs-4 py-3">
										<a href="/admin/login/{{$user->id}}" class="btn btn-sm btn-light-warning">Login</a>
										<a href="#" class="btn btn-sm btn-bg-light btn-active-color-primary me-2" id="kt_drawer_chat_toggle"data-bs-toggle="tooltip" data-bs-placement="top" @if(count($user->observations)> 0 ) title="{{$user->observations[0]->observation}}" @endif ng-click="observationsUsers('{{$user->id}}'); user_id = {{$user->id}}">
											{{count($user->observations) }} <i class="fa fa-comments" aria-hidden="true"></i>
										</a>
										<div class="me-2">
											<button class="btn btn-sm btn-bg-light btn-active-color-primary me-2" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
												Pasar a <i class="bi bi-three-dots fs-3"></i>
											</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" style="">
												<div class="menu-item px-3">
													<div class="menu-content text-muted pb-2 px-3 fs-7 text-uppercase">Pasar a </div>
												</div>
												@foreach($sales_funnel as $sf)
												<div class="menu-item px-3">
													<a href="/admin/followup_user/sale_funnel/{{$user->id}}/{{$sf->id}}" class="menu-link px-3">{{$sf->name}}</a>
												</div>
												@endforeach
											</div>
										</div>
									</div>
									<!--begin::Details item-->
									<div class="fw-bold mt-5">ID</div>
									<div class="text-gray-600">{{$user->id}}</div>
									<!--begin::Details item-->
									<!--begin::Details item-->
									<div class="fw-bold mt-5">Email</div>
									<div class="text-gray-600">
										<a href="#" class="text-gray-600 text-hover-primary">{{$user->email}}</a>
									</div>

									<div class="fw-bold mt-5">Fecha de registro</div>
									<div class="text-gray-600">
										<a href="#" class="text-gray-600 text-hover-primary">{{$user->created_at}}</a>
									</div>

									<div class="fw-bold mt-5">Último acceso</div>
									<div class="text-gray-600">
										<a href="#" class="text-gray-600 text-hover-primary">{{$user->last_access}}</a>
									</div>
									
								</div>
							</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">
					@include('partials.success')
					<!--begin::Card-->
					<div class="card pt-4 mb-6 mb-xl-9">
						<!--begin::Card header-->
						<div class="card-header border-0">
							<!--begin::Card title-->
							<div class="card-title">
								<h2>Suscripciones</h2>
							</div>
							<!--end::Card title-->
							<!--begin::Card toolbar-->
							<div class="card-toolbar">
								<button type="button" class="btn btn-sm btn-flex btn-light-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_subscription">
								<i class="ki-outline ki-plus-square fs-3"></i>Agregar suscripción</button>
							</div>
							<!--end::Card toolbar-->
						</div>
						<!--end::Card header-->
						<!--begin::Card body-->
						<div class="card-body pt-0 pb-5">
							<!--begin::Table-->
							<table class="table align-middle table-row-dashed gy-5" id="kt_table_customers_payment">
								<thead class="border-bottom border-gray-200 fs-7 fw-bold">
									<tr class="text-start text-muted text-uppercase gs-0">
									<th class="min-w-25px"></th>
									<th class="min-w-125px">Status</th>
									<th class="min-w-125px">Vendedor</th>
									<th class="min-w-130px">Fechas</th>
									<th class="min-w-25px"></th>
									<th class="text-end min-w-90px"></th>
									</tr>
								</thead>
								<tbody class="fs-6 fw-semibold text-gray-600">
									@foreach($user->subscriptions as $item)
									<tr>
										<td>
											<span class="text-gray-900 text-hover-primary mb-1">{{$item->plan->name}}</span>
											@if($item->stripe_subscription!=null)
											<span class="badge-light-info fw-bold px-4 "> {{$item->stripe_subscription}}</span>
											@endif
											@if($item->coupon!=null)
											<span class="badge-light-primary fw-bold px-4 "> {{$item->coupon}}</span>
											@endif
										</td>
										<td>
											<span class="badge @if($item->status=='active') badge-light-success @else badge-light-danger @endif fw-bold me-auto px-4 py-3">{{$item->status }}</span>
										</td>
										<td>
											
											<span class="text-gray-800 text-hover-primary mb-1"> {{$item->seller->person->name ?? '' }}</span>
										</td>
										<td>
											<span class="text-gray-800 text-hover-primary mb-1"> {{$item->subscription_start_at}} {{$item->subscription_ends_at}}</span>
										</td>
										<td></td>
										<td>
											<a href="/admin/subscriptions/edit/{{$item->id}}" class="btn btn-sm btn-light-primary"> Editar</a>
											<button onclick="delete_item(this);" data="{{ route('subscriptions.destroy', [$item->id]) }}" class="btn btn-sm btn-danger">Eliminar</button>
										</td>
									</tr>
									@endforeach
								</tbody>
								<!--end::Table body-->
							</table>
							<!--end::Table-->
						</div>
						<!--end::Card body-->
					</div>
					<!--end::Card-->
					<!--begin::Card-->
					<div class="card pt-4 mb-6 mb-xl-9">
						<!--begin::Card header-->
						<div class="card-header border-0">
							<!--begin::Card title-->
							<div class="card-title">
								<h2>Pagos</h2>
							</div>
							<!--end::Card title-->
							<!--begin::Card toolbar-->
							<div class="card-toolbar">
								<button type="button" class="btn btn-sm btn-flex btn-light-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_payment">
								<i class="ki-outline ki-plus-square fs-3"></i>Agregar pago</button>
							</div>
							<!--end::Card toolbar-->
						</div>
						<!--end::Card header-->
						<!--begin::Card body-->
						<div class="card-body pt-0 pb-5">
							<!--begin::Table-->
							<table class="table align-middle table-row-dashed gy-5" id="kt_table_customers_payment">
								<thead class="border-bottom border-gray-200 fs-7 fw-bold">
									<tr class="text-start text-muted text-uppercase gs-0">
									<th class="min-w-25px">Fecha</th>
									<th class="min-w-125px">Status</th>
									<th class="min-w-125px">Cantidad</th>
									<th class="min-w-130px">Forma de pago</th>
									<th class="text-end min-w-90px"></th>
									</tr>
								</thead>
								<tbody class="fs-6 fw-semibold text-gray-600">
									@foreach($user->payments as $item)
									<tr>
										<td>
											<span class="text-gray-600 text-hover-primary mb-1">{{$item->date}}</span>
										</td>
										<td>
											<span class="badge @if($item->status=='active') badge-light-success @else badge-light-danger @endif fw-bold me-auto px-4 py-3">{{$item->status }}</span>
										</td>
										<td>
											<span class="text-gray-800 text-hover-primary mb-1"> {{$item->amount}} {{$item->currency}}</span>
										</td>
										<td>
											<span class="text-gray-800 text-hover-primary mb-1"> {{$item->type->name}}</span>
										</td>
										<td>
											@if(\Auth::user()->type_user_id==3)
											<button onclick="delete_item(this);" data="{{ route('payments.destroy', [$item->id]) }}" class="btn btn-sm btn-danger">Eliminar</button>
											@endif
										</td>
									</tr>
									@endforeach
								</tbody>
								<!--end::Table body-->
							</table>
							<!--end::Table-->
						</div>
						<!--end::Card body-->
					</div>
					<!--end::Card-->

					
				</div>
				<!--end::Content-->
			</div>
			<!--end::Layout-->

			<!--begin::Modal - Add subscription-->
			<div class="modal fade" id="kt_modal_add_subscription" tabindex="-1" aria-hidden="true">
				<form id="kt_modal_add_payment_form" method="POST" class="form" action="/admin/subscriptions">
				@csrf
				<!--begin::Modal dialog-->
				<div class="modal-dialog mw-650px">
					<!--begin::Modal content-->
					<div class="modal-content">
						<!--begin::Modal header-->
						<div class="modal-header">
							<!--begin::Modal title-->
							<h2 class="fw-bold">Agregar suscripción</h2>
							<!--end::Modal title-->
							<!--begin::Close-->
							<div id="kt_modal_add_payment_close" data-bs-dismiss="modal" class="btn btn-icon btn-sm btn-active-icon-primary">
								<i class="ki-outline ki-cross fs-1"></i>
							</div>
							<!--end::Close-->
						</div>
						<!--end::Modal header-->
						<!--begin::Modal body-->
						<div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
							<!--begin::Form-->
							<input type="hidden" name="user_id" value="{{$user->id}}">
							<!--begin::Scroll-->
							<div class="d-flex flex-column scroll-y me-n7 pe-7" id="kt_modal_update_customer_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_update_customer_header" data-kt-scroll-wrappers="#kt_modal_update_customer_scroll" data-kt-scroll-offset="300px">
								<!--begin::Billing form-->
								<div id="kt_modal_update_customer_billing_info" >
									<!--begin::Input group-->
									<div class="d-flex flex-column mb-7 fv-row">
										<!--begin::Label-->
										<label class="fs-6 fw-semibold mb-2">Plan</label>
										<!--end::Label-->
										<!--begin::Input-->
										<select class="form-select" data-control="select2" data-placeholder="Selecciona un plan" name="plan_id" required>
											<option></option>
											@foreach($plans as $plan)
											<option value="{{$plan->id}}">{{$plan->name}} - {{$plan->cost}} {{$plan->currency}}</option>
											@endforeach
										</select>
									</div>
									<div class="row g-9 mb-7">
										<!--begin::Col-->
										<div class="col-md-6 fv-row">
											<!--begin::Label-->
											<label class="fs-6 fw-semibold mb-2">Fecha de inicio </label>
											<!--end::Label-->
											<!--begin::Input-->
											<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_3" value="" name="subscription_start_at" required/>
											</div>
											<!--end::Input-->
										</div>
										<!--end::Col-->
										<!--begin::Col-->
										<div class="col-md-6 fv-row">
											<label class="fs-6 fw-semibold mb-2">Fecha de terminació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_11" value="" name="subscription_ends_at" required/>
											</div>
										</div>
										<!--end::Col-->
									</div>
									<div class="row g-9 mb-7">
										<div class="col-md-6 fv-row">
											<label class="fs-6 fw-semibold mb-2">Costo</label>
											<input class="form-control " placeholder="" name="amount"/>
										</div>
										<div class="col-md-6 fv-row">
											<label class="fs-6 fw-semibold mb-2">Forma de pago</label>
											<select class="form-select" data-control="select2" data-placeholder="Selecciona un tipo de pago" name="type_payment_id" required>
												@foreach($type_payments as $item)
												<option value="{{$item->id}}">{{$item->name}}</option>
												@endforeach
											</select>
										</div>
									</div>
									@if(\Auth::user()->type_user_id==3 || \Auth::user()->type_user_id==4)
									<div class="d-flex flex-column mb-7 fv-row">
										<!--begin::Label-->
										<label class="fs-6 fw-semibold mb-2">Vendedor</label>
										<!--end::Label-->
										<!--begin::Input-->
										<select class="form-select" data-placeholder="Asignar vendedor" name="seller_id" >
											<option value="" >Selecciona </option>
											@foreach($sellers as $item)
											<option value="{{$item->id}}">{{$item->person->fullname}}</option>
											@endforeach
										</select>
									</div>
									@endif
									<div class="d-flex flex-column mb-7 fv-row">
										<label class="fs-6 fw-semibold mb-2">Observaciones</label>
										<input class="form-control" placeholder="" name="observations"/>
									</div>
								</div>
								<!--end::Billing form-->
							</div>
							<!--end::Scroll-->
							
						</div>
						<!--end::Modal body-->
						<div class="modal-footer flex-center">
							<!--begin::Button-->
							<button type="reset" data-bs-dismiss="modal"class="btn btn-light me-3">Cerrar</button>
							<!--end::Button-->
							<!--begin::Button-->
							<button type="submit" class="btn btn-primary">
								<span class="indicator-label">Agregar suscripción</span>
								<span class="indicator-progress">Please wait... 
								<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
							</button>
							<!--end::Button-->
						</div>
					</div>
					<!--end::Modal content-->
				</div>
				<!--end::Modal dialog-->
				</form>
				<!--end::Form-->
			</div>
			<!--end::Modal - Add subscription-->

			<!--begin::Modal - Add payment-->
			<div class="modal fade" id="kt_modal_add_payment" tabindex="-1" aria-hidden="true">
				<form id="kt_modal_add_payment_form" method="POST" class="form" action="/admin/payments">
				@csrf
				<!--begin::Modal dialog-->
				<div class="modal-dialog mw-650px">
					<!--begin::Modal content-->
					<div class="modal-content">
						<!--begin::Modal header-->
						<div class="modal-header">
							<!--begin::Modal title-->
							<h2 class="fw-bold">Agregar pago</h2>
							<!--end::Modal title-->
							<!--begin::Close-->
							<div id="kt_modal_add_payment_close" data-bs-dismiss="modal" class="btn btn-icon btn-sm btn-active-icon-primary">
								<i class="ki-outline ki-cross fs-1"></i>
							</div>
							<!--end::Close-->
						</div>
						<!--end::Modal header-->
						<!--begin::Modal body-->
						<div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
							<!--begin::Form-->
							<input type="hidden" name="user_id" value="{{$user->id}}">
							<input type="hidden" name="status" value="active">
							<!--begin::Scroll-->
							<div class="d-flex flex-column scroll-y me-n7 pe-7" id="kt_modal_update_customer_scroll" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_update_customer_header" data-kt-scroll-wrappers="#kt_modal_update_customer_scroll" data-kt-scroll-offset="300px">
								<!--begin::Billing form-->
								<div id="kt_modal_update_customer_billing_info" >
									
									<div class="row g-9 mb-7">
										<!--begin::Col-->
										<div class="col-md-6 fv-row">
											<!--begin::Label-->
											<label class="fs-6 fw-semibold mb-2">Fecha </label>
											<!--end::Label-->
											<!--begin::Input-->
											<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_1" value="" name="date" required/>
											</div>
											<!--end::Input-->
										</div>
										<!--end::Col-->
										
									</div>
									<div class="row g-9 mb-7">
										<div class="col-md-6 fv-row">
											<label class="fs-6 fw-semibold mb-2">Cantidad</label>
											<input class="form-control " placeholder="" name="amount"/>
										</div>
										<div class="col-md-6 fv-row">
											<label class="fs-6 fw-semibold mb-2">Forma de pago</label>
											<select class="form-select" data-control="select2" data-placeholder="Selecciona un tipo de pago" name="type_payment_id" required>
												@foreach($type_payments as $item)
												<option value="{{$item->id}}">{{$item->name}}</option>
												@endforeach
											</select>
										</div>
									</div>
									
									<div class="d-flex flex-column mb-7 fv-row">
										<label class="fs-6 fw-semibold mb-2">Observaciones</label>
										<input class="form-control" placeholder="" name="observations"/>
									</div>
								</div>
								<!--end::Billing form-->
							</div>
							<!--end::Scroll-->
							
						</div>
						<!--end::Modal body-->
						<div class="modal-footer flex-center">
							<!--begin::Button-->
							<button type="reset" data-bs-dismiss="modal"class="btn btn-light me-3">Cerrar</button>
							<!--end::Button-->
							<!--begin::Button-->
							<button type="submit" class="btn btn-primary">
								<span class="indicator-label">Agregar Pago</span>
								<span class="indicator-progress">Please wait... 
								<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
							</button>
							<!--end::Button-->
						</div>
					</div>
					<!--end::Modal content-->
				</div>
				<!--end::Modal dialog-->
				</form>
				<!--end::Form-->
			</div>
			<!--end::Modal - Add payment-->

			<!--begin::User notes-->
			<div id="kt_drawer_chat" class="bg-body " data-kt-drawer="true" data-kt-drawer-name="chat" data-kt-drawer-activate="true" data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'400px', 'md': '500px'}" data-kt-drawer-direction="end" data-kt-drawer-toggle="#kt_drawer_chat_toggle" data-kt-drawer-close="#kt_drawer_chat_close">
				<!--begin::Messenger-->
				<div class="card w-100 rounded-0 border-0" id="kt_drawer_chat_messenger">
					<!--begin::Card header-->
					<div class="card-header pe-5" id="kt_drawer_chat_messenger_header">
						<!--begin::Title-->
						<div class="card-title">
							<!--begin::User-->
							<div class="d-flex justify-content-center flex-column me-3">
								<div class="d-flex flex-wrap fw-semibold fs-6  pe-2">
									<a href="/proposals/@{{proposal.id}}" target="_blank" class="d-flex align-items-center text-gray-400 text-hover-primary me-5 mb-2">
										<span class="svg-icon svg-icon-4 me-1">
											<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
												<path opacity="0.3" d="M16.5 9C16.5 13.125 13.125 16.5 9 16.5C4.875 16.5 1.5 13.125 1.5 9C1.5 4.875 4.875 1.5 9 1.5C13.125 1.5 16.5 4.875 16.5 9Z" fill="currentColor"></path>
												<path d="M9 16.5C10.95 16.5 12.75 15.75 14.025 14.55C13.425 12.675 11.4 11.25 9 11.25C6.6 11.25 4.57499 12.675 3.97499 14.55C5.24999 15.75 7.05 16.5 9 16.5Z" fill="currentColor"></path>
												<rect x="7" y="6" width="4" height="4" rx="2" fill="currentColor"></rect>
											</svg>
										</span>
										@{{ user.person.name }}
									</a>
									<a target="_blank" href="https://api.whatsapp.com/send?phone=@{{user.whatsapp}}&text=Hola" class="d-flex align-items-center text-gray-400 text-hover-primary me-5 mb-2" ng-show="user.whatsapp!=null">
										<i class="fa fa-phone me-1" aria-hidden="true"></i>
										@{{ user.phone }}
									</a>
									
								</div>
								
							</div>
							<!--end::User-->
						</div>
						<!--end::Title-->
						<!--begin::Card toolbar-->
						<div class="card-toolbar">
							<!--<div class="me-2">
								<button class="btn btn-sm btn-icon btn-active-light-primary" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
									<i class="bi bi-three-dots fs-3"></i>
								</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" style="">
									<div class="menu-item px-3">
										<div class="menu-content text-muted pb-2 px-3 fs-7 text-uppercase">Contacts</div>
									</div>
									<div class="menu-item px-3">
										<a href="#" class="menu-link px-3" data-bs-toggle="modal" data-bs-target="#kt_modal_users_search">Add Contact</a>
									</div>
									<div class="menu-item px-3">
										<a href="#" class="menu-link flex-stack px-3" data-bs-toggle="modal" data-bs-target="#kt_modal_invite_friends">Invite Contacts
										<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" aria-label="Specify a contact email to send an invitation" data-kt-initialized="1"></i></a>
									</div>
								</div>
							</div>-->
							<div class="btn btn-sm btn-icon btn-active-light-primary" id="kt_drawer_chat_close">
								<span class="svg-icon svg-icon-2">
									<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>
							</div>
						</div>
					</div>
					<!--end::Card header-->
					<!--begin::Card body-->
					<div class="card-body" id="kt_drawer_chat_messenger_body" ng-init="user_id2 = {{\Auth::id() }}">
						<!--begin::Messages-->
						<div class="scroll-y me-n5 pe-5" data-kt-element="messages" data-kt-scroll="true" data-kt-scroll-activate="true" data-kt-scroll-height="auto" data-kt-scroll-dependencies="#kt_drawer_chat_messenger_header, #kt_drawer_chat_messenger_footer" data-kt-scroll-wrappers="#kt_drawer_chat_messenger_body" data-kt-scroll-offset="0px">

							<div class="d-flex  mb-10" ng-repeat="item in observations" ng-class=" user_id2 == item.user_id2 ? 'justify-content-start' : 'justify-content-end' ">
								<!--begin::Wrapper-->
								<div class="d-flex flex-column " ng-class="user_id2 == item.user_id2 ? 'align-items-start' : 'align-items-end' ">
									<!--begin::User-->
									<div class="d-flex align-items-center mb-2" ng-show="user_id2 != item.user_id2">
										<!--begin::Avatar-->
										<div class="symbol symbol-35px symbol-circle" >
											<img alt="" src="@{{item.user2.person.photo}}" />
										</div>
										<!--end::Avatar-->
										<!--begin::Details-->
										<div class="ms-3">
											<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary me-1">@{{item.user2.person.name}}</a>
											<span class="text-muted fs-7 mb-1">@{{item.created_at}}</span>
										</div>
										<!--end::Details-->
									</div>
									<div class="d-flex align-items-center mb-2" ng-show="user_id2 == item.user_id2">
										<!--begin::Avatar-->
										<div class="symbol symbol-35px symbol-circle">
											<img alt="" src="@{{item.user2.person.photo}}" />
										</div>
										<!--end::Avatar-->
										<!--begin::Details-->
										<div class="ms-3">
											<a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary me-1">@{{item.user2.person.name}}</a>
											<span class="text-muted fs-7 mb-1">@{{item.created_at}}</span>
										</div>
										<!--end::Details-->
									</div>
									<!--end::User-->
									<!--begin::Text-->
									<div class="p-5 rounded  text-dark fw-semibold mw-lg-400px text-start" ng-class="user_id2 == item.user_id2 ? 'bg-light-info' : 'bg-light-primary' " data-kt-element="message-text">@{{item.observation}}</div>
									<span class="badge" ng-class="{'badge-light-danger': item.done==false, 'badge-light-success': item.done }" ng-show="item.reminder">Recordatorio: @{{item.date_reminder |date:"dd/MM/yyyy" }}</span>
									<!--end::Text-->
								</div>
								<!--end::Wrapper-->
							</div>
						</div>
						<!--end::Messages-->
						<!--<a href="/crm/next/@{{crm.id}}" class="btn btn-sm btn-success me-2" style="display: block">Vender proyecto</a> -->
					</div>
					<!--end::Card body-->
					<!--begin::Card footer-->
					<div class="card-footer pt-4" id="kt_drawer_chat_messenger_footer">
						
						<!--begin::Input-->
						<textarea class="form-control form-control-flush mb-3" rows="1" data-kt-element="input" placeholder="Escribe un comentario" ng-model="observation"></textarea>
						<!--end::Input-->
						<!--begin:Toolbar-->
						<div class="d-flex flex-stack">
							<!--begin::Actions-->
							<div class="d-flex align-items-center me-2">
								<input class="form-check-input" type="checkbox" value="1" id="flexCheckDefault" ng-model="reminder"/> &nbsp; 
								<label for="flexCheckDefault">Recordatorio</label>&nbsp;&nbsp;
								<div class="position-relative d-flex align-items-center" ng-show="reminder">
									<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>
											<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>
											<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"></path>
										</svg>
									</span>
									<input class="form-control ps-12 flatpickr-input active" id="kt_datepicker_2" value="" name="date" required="" type="text" readonly="readonly" ng-model="date_reminder">
								</div>
							</div>
							<!--end::Actions-->
							<!--begin::Send-->
							<!--<button type="button"   class="btn btn-primary" id="kt_scroll_change_pos_bottom">Scroll to Bottom</button>  -->
							<button class="btn btn-primary" type="button"  ng-click="saveObservation(observation,user_id,reminder,date_reminder)">Enviar</button>
							<!--end::Send-->
						</div>
						<!--end::Toolbar-->
					</div>
					<!--end::Card footer-->
				</div>
				<!--end::Messenger-->
			</div>
			<!--end::User notes-->
		</div>
		<!--end::Container-->
	</div>
	<!--end::Content-->
@endsection

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

<script src="/assets/app/js/custom/confirm_delete.js"></script>
<script src="/assets/app/plugins/custom/datatables/datatables.bundle.js"></script>

<script src="/assets/app/js/custom/apps/user-management/users/list/table.js"></script>
<script src="/assets/app/js/custom/apps/user-management/users/list/add.js"></script>

@endsection