@extends('layouts.master_app')
@section('title') Cotizaciones @endsection
@section('menu_proposals', 'here show')
@section('css')
	<link href="/assets/app/plugins/custom/datatables/datatables.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">Cotizaciones
						<!--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"> Listar todos</small>
						<!--end::Description-->
					</h1>
					<!--end::Title-->
				</div>
				<!--end::Page title-->
			</div>
			<!--end::Page title-->
			<!--begin::Action group-->
			<div class="d-flex align-items-center flex-wrap">
				<!--begin::Wrapper-->
				<div class="flex-shrink-0 me-2">

				</div>
				<!--end::Wrapper-->
				<!--begin::Wrapper-->
				<div class="d-flex align-items-center">

				</div>
				<!--end::Wrapper-->
			</div>
			<!--end::Action group-->
		</div>
		<!--end::Container-->
	</div>
	<!--end::Toolbar-->

	<div class="content d-flex flex-column flex-column-fluid" id="kt_content" ng-controller="crmController">
		<!--begin::Container-->
		<div id="kt_content_container" class="container-xxl">
			<!--begin::Card-->
			<div class="card">
				<!--begin::Card header-->
				<div class="card-header border-0 pt-6">
					<!--begin::Card title-->
					<div class="card-title">
						<!--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 cotización" />
						</div>
						<!--end::Search-->
					</div>
					<div class="card-toolbar">
						<div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
							<a href="/proposals/new" type="button" class="btn btn-primary">
								<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="11.364" y="20.364" width="16" height="2" rx="1"
											transform="rotate(-90 11.364 20.364)" fill="currentColor" />
										<rect x="4.36396" y="11.364" width="16" height="2" rx="1" fill="currentColor" />
									</svg>
								</span>
								Agregar
							</a>
						</div>
						<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>
					</div>
				</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"></th>
								<th class="min-w-125px"></th>
								<th class="min-w-125px">Total</th>
								<th class="min-w-125px"></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($proposals as $proposal)
								<!--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/{{$proposal->project->contact->id}}">
												<div class="symbol-label fs-3 bg-light-danger text-danger">
													{{$proposal->project->contact->person->letters_name}}
												</div>
											</a>
										</div>
										<!--end::Avatar-->
										<!--begin::User details-->
										<div class="d-flex flex-column">
											<a href="/contacts/{{$proposal->project->contact->id}}"
												class="text-gray-800 text-hover-primary mb-1">{{$proposal->project->contact->person->full_name}}</a>
											<span
												class="fs-7 text-muted fw-bold">{{$proposal->project->contact->name_business}}</span>
											<span>
												@if(count($proposal->project->contact->person->phones) != 0)
													<i class="fas fa-phone"></i>
													@foreach($proposal->project->contact->person->phones as $item)
														{{$item->phone}}
														@if(count($proposal->project->contact->person->phones) > 1 && !$loop->last),
														@endif
													@endforeach
												@endif
											</span>
										</div>
										<!--begin::User details-->
									</td>
									<!--end::User=-->
									<!--begin::Advisor=-->
									<td>
										<!--begin::Advisors-->
										<div class="symbol-group symbol-hover mb-1">
											@foreach($proposal->proposal_advisors as $i)
												<div class="symbol symbol-circle symbol-25px">
													@if(\Str::contains($i->user->person->photo, 'avatar.png'))
														<div class="symbol-label bg-danger" data-bs-toggle="tooltip"
															data-bs-placement="top" title="{{$i->user->person->fullname}}">
															<span
																class="fs-7 text-inverse-danger">{{$i->user->person->letters_name}}</span>
														</div>
													@else
														<img src="{{$i->user->person->photo}}" data-bs-toggle="tooltip"
															data-bs-placement="top" title="{{$i->user->person->fullname}}" />
													@endif
												</div>
											@endforeach
										</div>
										<!--end::Advisors-->
										<a href="#" data-bs-toggle="modal" data-bs-target="#kt_modal_add_advisor"
											ng-click="proposal_id='{{$proposal->id}}'; infoProposal('{{$proposal->id}}')"
											class="fs-7 fw-bold text-muted">Asesores</a>
									</td>
									<!--end::Advisor=-->
									<!--begin::Phone=-->
									<td>
										<span>${{ number_format($proposal->total, 2, '.', ',') . ' ' . $proposal->currency }}</span>
									</td>
									<!--end::Phone=-->
									<!--begin::Two step=-->
									<td>
										Folio #{{$proposal->folio}}<br>
										<span
											class="badge badge-{{$proposal->status->color}} fw-bold">{{$proposal->status->name}}</span>
										@if($proposal->project->type != null)
											<br>
											<span class="badge badge-warning fw-bold">{{$proposal->project->type}}</span>
										@endif
									</td>
									<!--end::Two step=-->
									<!--begin::Joined-->
									<td>{{$proposal->created_at}}</td>
									<!--begin::Joined-->
									<!--begin::Action=-->
									<td class="text-end">
										<a href="/proposals/followup/{{$proposal->id}}"
											class="btn btn-sm btn-secondary">Seguimiento </a>
										<a href="/proposals/{{$proposal->id}}"
											class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1">
											<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 opacity="0.3"
														d="M21.4 8.35303L19.241 10.511L13.485 4.755L15.643 2.59595C16.0248 2.21423 16.5426 1.99988 17.0825 1.99988C17.6224 1.99988 18.1402 2.21423 18.522 2.59595L21.4 5.474C21.7817 5.85581 21.9962 6.37355 21.9962 6.91345C21.9962 7.45335 21.7817 7.97122 21.4 8.35303ZM3.68699 21.932L9.88699 19.865L4.13099 14.109L2.06399 20.309C1.98815 20.5354 1.97703 20.7787 2.03189 21.0111C2.08674 21.2436 2.2054 21.4561 2.37449 21.6248C2.54359 21.7934 2.75641 21.9115 2.989 21.9658C3.22158 22.0201 3.4647 22.0084 3.69099 21.932H3.68699Z"
														fill="currentColor" />
													<path
														d="M5.574 21.3L3.692 21.928C3.46591 22.0032 3.22334 22.0141 2.99144 21.9594C2.75954 21.9046 2.54744 21.7864 2.3789 21.6179C2.21036 21.4495 2.09202 21.2375 2.03711 21.0056C1.9822 20.7737 1.99289 20.5312 2.06799 20.3051L2.696 18.422L5.574 21.3ZM4.13499 14.105L9.891 19.861L19.245 10.507L13.489 4.75098L4.13499 14.105Z"
														fill="currentColor" />
												</svg>
											</span>
										</a>
										<button onclick="delete_item(this);"
											data="{{ route('proposals.destroy', [$proposal->id]) }}"
											class="btn btn-icon btn-bg-light btn-active-color-danger btn-sm">
											<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>
										</button>
									</td>
									<!--end::Action=-->

								</tr>
								<!--end::Table row-->
							@endforeach

						</tbody>
						<!--end::Table body-->
					</table>
					<!--end::Table-->
				</div>
				<!--end::Card body-->
			</div>
			<!--end::Card-->
		</div>
		<!--end::Container-->

		<!--begin::Modal - Add Advisor-->
		<div class="modal fade" id="kt_modal_add_advisor" 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">Asesores</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 scroll-y mx-5 mx-xl-15 my-7">
						<!--begin::Form-->
						<form id="kt_modal_add_user_form" class="form" action="/advisor_proposals" method="POST">
							@csrf
							<!--begin::Scroll-->
							<div class="d-flex flex-column scroll-y me-n7 pe-7" id="kt_modal_add_user_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_add_user_header"
								data-kt-scroll-wrappers="#kt_modal_add_user_scroll" data-kt-scroll-offset="300px">
								<!--begin::Input group-->
								<div class="row">
									<!--begin::Label-->
									<label class="required fw-semibold fs-6 mb-2">Asesor</label>
									<!--end::Label-->
									<div class="col-md-6">
										<select name="user_id" aria-label="Selecciona" data-placeholder="Selecciona ..."
											class="form-select form-select-solid" required>
											<option value="">Selecciona...</option>
											@foreach($users as $user)
												<option value="{{$user->id}}" @if ($loop->first) selected @endif>
													{{$user->person->name}}
												</option>
											@endforeach
										</select>
									</div>
									<div class="col-md-6">
										<input type="text" ng-model="proposal_id" name="proposal_id" style="display:none">
										<button type="submit" class="btn btn-sm btn-primary"
											data-kt-users-modal-action="submit">
											<span class="indicator-label">Agregar asesor</span>
											<span class="indicator-progress">Please wait...
												<span
													class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
										</button>
									</div>
								</div>
								<!--end::Input group-->
								<div class="mt-5">
									<div class="d-flex flex-stack mb-5" ng-repeat="item in proposal.proposal_advisors">
										<!--begin::Section-->
										<div class="d-flex align-items-center me-2">
											<div class="symbol symbol-50px me-3">
												<img src="@{{item.user.person.photo}}" class="h-40" alt="">
											</div>
											<div>
												<span
													class="fs-6 text-gray-800 text-hover-primary fw-bold">@{{item.user.person.name}}
													@{{item.user.person.last_name}}</span>
											</div>
										</div>
										<!--end::Section-->
										<!--begin::Label-->
										<a href="/advisor_proposals/delete/@{{item.id}}"
											class="btn btn-sm btn-light-danger ">Eliminar</a>
										<!--end::Label-->
									</div>
								</div>

							</div>
							<!--end::Scroll-->
							<!--begin::Actions-->
							<div class="text-center pt-15">
								<button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Cerrar</button>
							</div>
							<!--end::Actions-->
						</form>
						<!--end::Form-->
					</div>
					<!--end::Modal body-->
				</div>
				<!--end::Modal content-->
			</div>
			<!--end::Modal dialog-->
		</div>
	</div>
@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