@extends('layouts.master_app')
@section('title') Inversores @endsection

@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">Productos
					<!--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"> Accesorios</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">
		<!--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-15" placeholder="Buscar" />
						</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-customer-table-toolbar="base">
							<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_product">Agregar accesorio</button>
						</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 pt-0">
					@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-gray-400 fw-bold fs-7 text-uppercase gs-0">
								<th class="w-10px pe-2">
								</th>
								<th class="min-w-25px">Código</th>
								<th class="min-w-125px">Marca</th>
								<th class="min-w-125px">Tipo</th>
								<th class="min-w-125px">Nombre</th>
								<th class="min-w-25px">Precio final</th>
								<th class="text-end min-w-90px"></th>
							</tr>
							<!--end::Table row-->
						</thead>
						<!--end::Table head-->
						<!--begin::Table body-->
						<tbody class="fw-semibold text-gray-600">
							@foreach($products_company as $item)
							<tr>
								<!--begin::Checkbox-->
								<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>
								<!--end::Checkbox-->
								<!--begin::Name=-->
								<td>
									<span class="text-gray-600 text-hover-primary mb-1">{{$item->code}}</span>
								</td>
								<!--end::Name=-->
								<!--begin::Email=-->
								<td>
									<span class="text-gray-600 text-hover-primary mb-1">{{$item->product->brand->name}}</span>
								</td>
								<!--end::Email=-->
								<!--begin::Company=-->
								<td>
									
								</td>
								<!--end::Company=-->
								<!--begin::Payment method=-->
								<td>
									<span class="text-gray-800 text-hover-primary mb-1">{{$item->name}}</span>
									@if($item->default==1)
									<br>
									<div class="badge badge-info fw-bold">Predeterminado</div>
									@endif
								</td>
								<td>{{$item->final_price}} {{$item->currency}}</td>
								<!--end::Payment method=-->
								<td>
									<a href="/company_products/edit/{{$item->id}}" class="btn btn-light-primary"> Editar</a>
									
									<button onclick="delete_item(this);" data="{{ route('company_products.destroy', [$item->id]) }}" class="btn btn-light-danger">Eliminar</button>
								</td>
							</tr>
							@endforeach
						</tbody>
						<!--end::Table body-->
					</table>
					<!--end::Table-->
				</div>
				<!--end::Card body-->
			</div>
			<!--end::Card-->
			<!--begin::Modals-->
			<!--begin::Modal - Product - Add-->
			<div class="modal fade" id="kt_modal_add_product" tabindex="-1" aria-hidden="true">
				<!--begin::Modal dialog-->
				<div class="modal-dialog modal-dialog-centered mw-950px">
					<!--begin::Modal content-->
					<div class="modal-content">
						<!--begin::Form-->
						<form class="form" action="/company_products" method="POST">
							<!--begin::Modal header-->
							<div class="modal-header" id="kt_modal_add_customer_header">
								<!--begin::Modal title-->
								<h2 class="fw-bold">Agregar Accesorio</h2>
								<!--end::Modal title-->
								<!--begin::Close-->
								<div id="kt_modal_add_customer_close" data-bs-dismiss="modal" class="btn btn-icon btn-sm btn-active-icon-primary">
									<!--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_add_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_add_customer_header" data-kt-scroll-wrappers="#kt_modal_add_customer_scroll" data-kt-scroll-offset="300px">
									<!--begin::Table-->
									<table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_customers_table">
										<!--begin::Table head-->
										<thead>
											<!--begin::Table row-->
											<tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
												<!--<th class="w-10px pe-2">
													<div class="form-check form-check-sm form-check-custom form-check-solid me-3">
														<input class="form-check-input" type="checkbox" data-kt-check="true" data-kt-check-target="#kt_customers_table .form-check-input" value="1" />
													</div>
												</th> -->
												<th class="min-w-25px">Código</th>
												<th class="min-w-125px">Marca</th>
												<th class="min-w-125px">Nombre</th>
												<th class="text-end min-w-90px"></th>
											</tr>
											<!--end::Table row-->
										</thead>
										<!--end::Table head-->
										<!--begin::Table body-->
										<tbody class="fw-semibold text-gray-600">
											@foreach($products as $item)
											<tr>
												<!--begin::Checkbox-->
												<!--<td>
													<div class="form-check form-check-sm form-check-custom form-check-solid">
														<input class="form-check-input" type="checkbox" value="1" />
													</div>
												</td> -->
												<!--end::Checkbox-->
												<!--begin::Name=-->
												<td>
													<span class="text-gray-600 text-hover-primary mb-1">{{$item->code}}</span>
												</td>
												<!--end::Name=-->
												<!--begin::Email=-->
												<td>
													<span class="text-gray-600 text-hover-primary mb-1">{{$item->brand->name}}</span>
												</td>
												<!--end::Email=-->
												
												<!--begin::Payment method=-->
												<td>
													<span class="text-gray-800 text-hover-primary mb-1">{{$item->name}}</span>
												</td>
												<!--end::Payment method=-->
												
												<!--begin::Action=-->
												<td class="text-end">
													<a href="/company_products/{{$item->id}}" class="btn btn-success"><i class="fas fa-plus fs-4 me-2"></i> Agregar</a>
												</td>
												<!--end::Action=-->
											</tr>
											@endforeach
										</tbody>
										<!--end::Table body-->
									</table>
									<!--end::Table-->
								</div>
								<!--end::Scroll-->
							</div>
							<!--end::Modal body-->
							<!--begin::Modal footer-->
							<div class="modal-footer flex-center">
								<!--begin::Button-->
								<button type="reset" id="kt_modal_add_customer_cancel"  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 - Product - Add-->
			
			<!--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/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