@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">
		<!--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 contacto" />
						</div>
						<!--end::Search-->
					</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::Add user-->
							<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_new_proposal">
								<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
							</button>
							<!--end::Add user-->
						</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">Contacto</th>
								<th class="min-w-125px">Asesor</th>
								<th class="min-w-125px">Total</th>
								<th class="min-w-125px">Status</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->contact->id}}">
											<div class="symbol-label fs-3 bg-light-danger text-danger">{{$proposal->contact->person->letters_name}}</div>
										</a>
									</div>
									<!--end::Avatar-->
									<!--begin::User details-->
									<div class="d-flex flex-column">
										<a href="/contacts/{{$proposal->contact->id}}" class="text-gray-800 text-hover-primary mb-1">{{$proposal->contact->person->full_name}}</a>
										<span>
										@if(count($proposal->contact->person->phones) !=  0)
										<i class="fas fa-phone"></i>
											@foreach($proposal->contact->person->phones as $item)
											{{$item->phone}} @if(count($proposal->contact->person->phones)>1 && !$loop->last), @endif
											@endforeach
										@endif
										</span>
									</div>
									<!--begin::User details-->
								</td>
								<!--end::User=-->
								<!--begin::Advisor=-->
								<td>
									@if(count($proposal->proposal_advisors) >1)
									<button type="button" class="btn btn-outline btn-outline-dashed btn-outline-primary btn-active-light-primary">
										Ver asesores
									</button>
									@endif
									@if(count($proposal->proposal_advisors) == 1)
									{{$proposal->proposal_advisors[0]->user->person->fullname}}
									@endif
								</td>
								<!--end::Advisor=-->
								<!--begin::Phone=-->
								<td>
									<span>${{ number_format($proposal->total,2,'.',',') .' '. $proposal->currency }}</span>
								</td>
								<!--end::Phone=-->
								<!--begin::Two step=-->
								<td>
									<div class="badge badge-{{$proposal->status->color}} fw-bold">{{$proposal->status->name}}</div>
								</td>
								<!--end::Two step=-->
								<!--begin::Joined-->
								<td>{{$proposal->created_at}}</td>
								<!--begin::Joined-->
								<!--begin::Action=-->
								<td class="text-end">
									<a href="/proposals/{{$proposal->id}}" class="btn btn-sm btn-primary">Ver cotización</a>
									<button onclick="delete_item(this);" data="{{ route('proposals.destroy', [$proposal->id]) }}" class="btn btn-sm btn-danger">Eliminar</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-->
	</div>

	<!--begin::Modal - New proposal-->
	<div class="modal fade" id="kt_modal_new_proposal" tabindex="-1" aria-hidden="true">
		<!--begin::Modal dialog-->
		<div class="modal-dialog modal-dialog-centered mw-650px">
			<!--begin::Modal content-->
			<div class="modal-content">
				<!--begin::Modal header-->
				<div class="modal-header" id="kt_modal_add_user_header">
					<!--begin::Modal title-->
					<h2 class="fw-bold">Nueva cotización</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="/proposals/new" 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">
							<!--end::Input group-->
							<div class="row g-9 mb-7">
								<!--begin::Col-->
								<div class="col-md-6 fv-row fv-plugins-icon-container">
									<!--begin::Label-->
									<label class="required fs-6 fw-semibold mb-2">Nombre</label>
									<!--end::Label-->
									<!--begin::Input-->
									<input type="text" name="name" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="Nombre" required />
									<!--end::Input-->
									<div class="fv-plugins-message-container invalid-feedback"></div>
								</div>
								<!--end::Col-->
								<!--begin::Col-->
								<div class="col-md-6 fv-row fv-plugins-icon-container">
									<!--begin::Label-->
									<label class="fs-6 fw-semibold mb-2">Apellido paterno</label>
									<!--end::Label-->
									<!--begin::Input-->
									<input class="form-control form-control-solid" placeholder="" name="last_name" >
									<!--end::Input-->
								<div class="fv-plugins-message-container invalid-feedback"></div></div>
								<!--end::Col-->
							</div>
							<!--begin::Input group-->
							<div class="fv-row mb-7">
								<!--begin::Label-->
								<label class="fw-semibold fs-6 mb-2">Email</label>
								<!--end::Label-->
								<!--begin::Input-->
								<input type="email" name="email" class="form-control form-control-solid mb-3 mb-lg-0" placeholder="example@domain.com" />
								<!--end::Input-->
							</div>
							<!--end::Input group-->
							<!--begin::Input group-->
							<div class="fv-row mb-7">
								<!--begin::Label-->
								<label class="fw-semibold fs-6 mb-2">Teléfono</label>
								<!--end::Label-->
								<!--begin::Input-->
								<input type="text" name="phone" class="form-control form-control-solid mb-3 mb-lg-0" />
								<!--end::Input-->
							</div>
							<!--end::Input group-->
							<!--begin::Input group-->
							<div class="fv-row mb-7">
								<!--begin::Label-->
								<label class="fw-semibold fs-6 mb-2">Status del contacto</label>
								<!--end::Label-->
								<select name="status_contact_id" aria-label="Selecciona" data-placeholder="Selecciona ..." class="form-select form-select-solid"  required>
									<option value="">Selecciona...</option>
									@foreach($status_contacts as $item)
									<option value="{{$item->id}}" @if ($loop->first) selected @endif>{{$item->name}}</option>
									@endforeach
								</select>
							</div>
							<!--end::Input group-->
							
						</div>
						<!--end::Scroll-->
						<!--begin::Actions-->
						<div class="text-center pt-15">
							<button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Cancelar</button>
							<button type="submit" class="btn btn-primary" data-kt-users-modal-action="submit">
								<span class="indicator-label">Crear cotización</span>
								<span class="indicator-progress">Please wait...
								<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
							</button>
						</div>
						<!--end::Actions-->
					</form>
					<!--end::Form-->
				</div>
				<!--end::Modal body-->
			</div>
			<!--end::Modal content-->
		</div>
		<!--end::Modal dialog-->
	</div>
	<!--end::Modal - Add proposal-->
@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