@extends('layouts.master_app')
@section('title') CRM @endsection
@section('menu_crm', 'here show')
@section('css')
<link href="/assets/app/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
<link href="/assets/app/plugins/custom/prismjs/prismjs.bundle.css" rel="stylesheet" type="text/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">CRM
						<!--begin::Separator-->
						<span class="h-20px border-gray-200 border-start ms-3 mx-2"></span>
						<!--end::Separator-->
						<!--begin::Description-->
					<!--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">
		<!--begin::Container--> 
		<div id="kt_content_container" class="container-xxl">
			<!--begin::Row-->
			<div class="row g-5 g-xl-10">
				<!--begin::Col-->
				<div class="col-xl-4 mb-xl-10">
					<!--begin::List widget 20-->
					<div class="card h-xl-100">
						
						<!--begin::Body-->
						<div class="card-body pt-6">
							@foreach($cp as $item)
							<!--begin::Item-->
							<div class="d-flex flex-stack ">
								<!--begin::Symbol-->
								<div class="symbol symbol-40px me-4">
									<div class="symbol-label fs-2 fw-semibold bg-{{$item->color}} text-inverse-{{$item->color}}">{{$item->id}}</div>
								</div>
								<!--end::Symbol-->
								<!--begin::Section-->
								<div class="d-flex align-items-center flex-row-fluid flex-wrap">
									<!--begin:Author-->
									<div class="flex-grow-1 me-2">
										<a href="/crm/1" class="text-gray-800 text-hover-primary fs-6 fw-bold">{{$item->name}}</a>
										<span class="text-muted fw-semibold d-block fs-7"> {{count($crm)}} contactos</span>
									</div>
									<!--end:Author-->
									<!--begin::Actions-->
							
									<a href="/crm/{{$item->id}}" class="btn btn-sm btn-icon btn-bg-light btn-active-color-primary w-30px h-30px @if($item->id == $crm_process->id)  btn-bg-success btn-icon-white @endif">
										<!--begin::Svg Icon | path: icons/duotune/arrows/arr064.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="18" y="13" width="13" height="2" rx="1" transform="rotate(-180 18 13)" fill="currentColor" />
												<path d="M15.4343 12.5657L11.25 16.75C10.8358 17.1642 10.8358 17.8358 11.25 18.25C11.6642 18.6642 12.3358 18.6642 12.75 18.25L18.2929 12.7071C18.6834 12.3166 18.6834 11.6834 18.2929 11.2929L12.75 5.75C12.3358 5.33579 11.6642 5.33579 11.25 5.75C10.8358 6.16421 10.8358 6.83579 11.25 7.25L15.4343 11.4343C15.7467 11.7467 15.7467 12.2533 15.4343 12.5657Z" fill="currentColor" />
											</svg>
										</span>
										<!--end::Svg Icon-->
									</a>
									<!--begin::Actions-->
								</div>
								<!--end::Section-->
							</div>
							<!--end::Item-->
							@if(!$loop->last)
							<div class="separator separator-dashed my-4"></div>
							@endif
							@endforeach
							<!--begin::Separator-->
						
			
						</div>
						<!--end::Body-->
					</div>
					<!--end::List widget 20-->
				</div>
				<!--end::Col-->
				<!--begin::Col-->
				<div class="col-xl-8 mb-5 mb-xl-10">
					<div id="kt_content_container" class="container-xxl">

						<!--begin::Crm-->
						<div class="card">
							<!--begin::Card header-->
							<div class="card-header border-0 pt-6">
								<!--begin::Card title-->
								<div class="card-title">
									<span class="card-label fw-bold fs-3 mb-1">{{$crm_process->name}}</span>
								</div>
								<!--begin::Card title-->
								<!--begin::Card toolbar-->
								<div class="card-toolbar">
									<!--begin::Toolbar-->
									<div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
										<!--begin::Search-->
										<div class="d-flex align-items-center position-relative my-1">
											<!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
											<span class="svg-icon svg-icon-1 position-absolute ms-6">
												<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
													<rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor" />
													<path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="currentColor" />
												</svg>
											</span>
											<!--end::Svg Icon-->
											<input type="text" data-kt-user-table-filter="search" class="form-control form-control-solid w-250px ps-14" placeholder="Buscar propuesta" />
										</div>
										<!--end::Search-->
									</div>
									<!--end::Toolbar-->
									<!--begin::Group actions-->
									<div class="d-flex justify-content-end align-items-center d-none" data-kt-user-table-toolbar="selected">
										<div class="fw-bold me-5">
											<span class="me-2" data-kt-user-table-select="selected_count"></span>Selected
										</div>
										<button type="button" class="btn btn-danger" data-kt-user-table-select="delete_selected">Delete Selected</button>
									</div>
									<!--end::Group actions-->
									
								</div>
								<!--end::Card toolbar-->
							</div>
							<!--end::Card header-->
							<!--begin::Card body-->
							<div class="card-body py-4">
								@include('partials.success')
								<!--begin::Table-->
								<table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_users">
									<!--begin::Table head-->
									<thead>
										<!--begin::Table row-->
										<tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
											<th class="w-10px pe-2"></th>
											<th class="min-w-125px">Nombre</th>
											<th class=""></th>
											<th class="min-w-125px">Total</th>
											<th class=""></th>
											<th class="min-w-125px">Fecha</th>
											<th class="text-end min-w-100px"></th>
										</tr>
										<!--end::Table row-->
									</thead>
									<!--end::Table head-->
									<!--begin::Table body-->
									<tbody class="text-gray-600 fw-semibold">
										@foreach($crm as $item)
										<!--begin::Table row-->
										<tr>
											<td>
												<div class="form-check form-check-sm form-check-custom form-check-solid" style="display:none">
													<input class="form-check-input" type="checkbox" value="1" />
												</div>
											</td>
											<!--begin::User=-->
											<td class="d-flex align-items-center">
												<!--begin:: Avatar -->
												<div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
													<a href="/contacts/{{$item->proposal->project->contact->id}}">
														<div class="symbol-label fs-3 bg-light-danger text-danger">{{$item->proposal->project->contact->person->letters_name}}</div>
													</a>
												</div>
												<!--end::Avatar-->
												<!--begin::User details-->
												<div class="d-flex flex-column">
													<a href="/contacts/{{$item->proposal->project->contact->id}}" class="text-gray-800 text-hover-primary mb-1">{{$item->proposal->project->contact->person->full_name}}</a>
													<span>
													@if(count($item->proposal->project->contact->person->phones) !=  0)
													<i class="fas fa-phone"></i>
														@foreach($item->proposal->project->contact->person->phones as $i)
														{{$i->phone}} @if(count($item->proposal->project->contact->person->phones)>1 && !$loop->last), @endif
														@endforeach
													@endif
													</span>
												</div>
												<!--begin::User details-->
											</td>
											<td></td>
											<td>
												<div>${{ number_format($item->proposal->total,2,'.',',')}} </div>
												<div class="badge badge-{{$item->proposal->status->color}} fw-bold">{{$item->proposal->status->name}}</div>
											</td>
											<td></td>
											<td>{{$item->proposal->created_at}}</td>
											<td class="text-end">
												@if($crm_process->id==1)
												<a href="/proposals/{{$item->proposal_id}}" class="btn btn-primary">Ver propuesta</a>
												@else
												<a href="/crm/detail/{{$item->id}}" class="btn btn-primary">Ver</a>
												@endif
											</td>
										
										</tr>
										<!--end::Table row-->
										@endforeach
								
									</tbody>
									<!--end::Table body-->
								</table>
								<!--end::Table-->
							</div>
							<!--end::Card body-->
						</div>
						<!--end::Crm-->

						
					</div>
				</div>
				<!--end::Col-->
			</div>
			<!--end::Row-->
		</div>
		<!--end::Container-->
	</div>

	<!--begin::Modal - New Address-->
	<div class="modal fade" id="kt_modal_new_ticket" 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::Form-->
				<form class="form" action="/roles" method="POST" id="kt_modal_new_address_form">
					@csrf
					<!--begin::Modal header-->
					<div class="modal-header" id="kt_modal_new_address_header">
						<!--begin::Modal title-->
						<h2>Agregar nuevo rol</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" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_new_address_header" data-kt-scroll-wrappers="#kt_modal_new_address_scroll" data-kt-scroll-offset="300px">
							<!--begin::Notice-->
							<!--begin::Input group-->
							<div class="row g-9 mb-8">

								<!--begin::Input group-->
								<div class="fv-row mb-7">
									<!--begin::Label-->
									<label class="required fw-semibold fs-6 mb-2">Nombre</label>
									<!--end::Label-->
									<!--begin::Input-->
									<input type="text" name="name" id ="name" class="form-control form-control-solid mb-3 mb-lg-0"  />
									<!--end::Input-->
								</div>
								<!--end::Input group-->
								<!--
								<div class="fv-row mb-7">
									<label class="required fw-semibold fs-6 mb-2">Foto:</label>
									<input type="file" name="currency" id="currency" class="form-control form-control-solid mb-3 mb-lg-0"  />
								</div>								
								-->
							</div>
							<!--end::Input group-->
						</div>
						<!--end::Scroll-->
					</div>
					<!--end::Modal body-->
					<!--begin::Modal footer-->
					<div class="modal-footer flex-center">
						<!--begin::Button-->
						<button type="reset" data-bs-dismiss="modal" class="btn btn-light me-3">Cancelar</button>
						<!--end::Button-->
						<!--begin::Button-->
						<button type="submit" id="kt_modal_new_address_submit" class="btn btn-primary">
							<span class="indicator-label">Guardar</span>
							<span class="indicator-progress">Please wait...
							<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
						</button>
						<!--end::Button-->
					</div>
					<!--end::Modal footer-->
				</form>
				<!--end::Form-->
			</div>
		</div>
	</div>
	<!--end::Modal - New Address-->

@endsection

@section('js')
<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>

<script src="/assets/app/js/widgets.bundle.js"></script>
<script src="/assets/app//js/custom/widgets.js"></script>
<script src="/assets/app/js/custom/apps/chat/chat.js"></script>
<script src="/assets/app/js/custom/utilities/modals/upgrade-plan.js"></script>
<script src="/assets/app/js/custom/utilities/modals/create-campaign.js"></script>
<script src="/assets/app/js/custom/utilities/modals/users-search.js"></script>
@endsection