@extends('layouts.master_app')
@section('title') {{$type_product->name}} @endsection

@section('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"> {{$type_product->name}}</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">
						
					</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">
							<!--end::Export-->
							<!--begin::Add customer-->
							<a href="/company_products/add/{{$type_product->slug}}" class="btn btn-primary">Agregar </a>
							<!--end::Add customer-->
						</div>
						<!--end::Toolbar-->
						
					</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_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">Proveedor</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">
										<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>
								<td>
									<span class="text-gray-600 text-hover-primary mb-1">{{$item->brand->name}}</span>
								</td>
								
								<!--begin::Payment method=-->
								<td>
									<span class="text-gray-800 text-hover-primary mb-1">{{$item->name}}</span>
								</td>
								<td>
									@if($item->cost_by=='range')
									<button type="button" class="btn btn-outline btn-outline-dashed btn-outline-primary btn-active-light-primary"data-bs-toggle="popover" data-bs-trigger="hover" data-bs-html="true" data-bs-content="&lt;div class='p-4 rounded bg-light'&gt; &lt;div class='d-flex flex-stack text-muted mb-4'&gt; &lt;i class='fas fa-dollar fs-3 me-3'&gt;&lt;/i&gt; &lt;div class='fw-bold'&gt; {{$item->name}} &lt;/div&gt; &lt;/div&gt; &lt;div class='d-flex flex-stack fw-semibold text-gray-600'&gt; &lt;div&gt;Rango&lt;/div&gt; &lt;div&gt;Precio final&lt;/div&gt; &lt;/div&gt; &lt;div class='separator separator-dashed my-2'&gt;&lt;/div&gt; @foreach($item->prices as $i) &lt;div class='d-flex flex-stack text-dark fw-bold mb-2'&gt;  &lt;div&gt;{{$i->since}} -{{ $i->until}}&lt;/div&gt; &lt;div&gt; ${{$i->final_price}}&lt;/div&gt; &lt;/div&gt; @endforeach  &lt;/div&gt;">
										Rango por {{ $item->unit_costing }} 
									</button>
									@else
										{{$item->final_price}} {{$item->currency}}
									@endif
								</td>
								<!--end::Payment method=-->
								<td>
									<a href="/inventories/{{$item->id}}" class="btn btn-light-primary"> Inventario</a>
									<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 - Adjust Balance-->
			<div class="modal fade" id="kt_customers_export_modal" 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">
							<!--begin::Modal title-->
							<h2 class="fw-bold">Export Customers</h2>
							<!--end::Modal title-->
							<!--begin::Close-->
							<div id="kt_customers_export_close" 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 scroll-y mx-5 mx-xl-15 my-7">
							<!--begin::Form-->
							<form id="kt_customers_export_form" class="form" action="#">
								<!--begin::Input group-->
								<div class="fv-row mb-10">
									<!--begin::Label-->
									<label class="fs-5 fw-semibold form-label mb-5">Select Export Format:</label>
									<!--end::Label-->
									<!--begin::Input-->
									<select data-control="select2" data-placeholder="Select a format" data-hide-search="true" name="format" class="form-select form-select-solid">
										<option value="excell">Excel</option>
										<option value="pdf">PDF</option>
										<option value="cvs">CVS</option>
										<option value="zip">ZIP</option>
									</select>
									<!--end::Input-->
								</div>
								<!--end::Input group-->
								<!--begin::Input group-->
								<div class="fv-row mb-10">
									<!--begin::Label-->
									<label class="fs-5 fw-semibold form-label mb-5">Select Date Range:</label>
									<!--end::Label-->
									<!--begin::Input-->
									<input class="form-control form-control-solid" placeholder="Pick a date" name="date" />
									<!--end::Input-->
								</div>
								<!--end::Input group-->
								<!--begin::Row-->
								<div class="row fv-row mb-15">
									<!--begin::Label-->
									<label class="fs-5 fw-semibold form-label mb-5">Payment Type:</label>
									<!--end::Label-->
									<!--begin::Radio group-->
									<div class="d-flex flex-column">
										<!--begin::Radio button-->
										<label class="form-check form-check-custom form-check-sm form-check-solid mb-3">
											<input class="form-check-input" type="checkbox" value="1" checked="checked" name="payment_type" />
											<span class="form-check-label text-gray-600 fw-semibold">All</span>
										</label>
										<!--end::Radio button-->
										<!--begin::Radio button-->
										<label class="form-check form-check-custom form-check-sm form-check-solid mb-3">
											<input class="form-check-input" type="checkbox" value="2" checked="checked" name="payment_type" />
											<span class="form-check-label text-gray-600 fw-semibold">Visa</span>
										</label>
										<!--end::Radio button-->
										<!--begin::Radio button-->
										<label class="form-check form-check-custom form-check-sm form-check-solid mb-3">
											<input class="form-check-input" type="checkbox" value="3" name="payment_type" />
											<span class="form-check-label text-gray-600 fw-semibold">Mastercard</span>
										</label>
										<!--end::Radio button-->
										<!--begin::Radio button-->
										<label class="form-check form-check-custom form-check-sm form-check-solid">
											<input class="form-check-input" type="checkbox" value="4" name="payment_type" />
											<span class="form-check-label text-gray-600 fw-semibold">American Express</span>
										</label>
										<!--end::Radio button-->
									</div>
									<!--end::Input group-->
								</div>
								<!--end::Row-->
								<!--begin::Actions-->
								<div class="text-center">
									<button type="reset" id="kt_customers_export_cancel" class="btn btn-light me-3">Discard</button>
									<button type="submit" id="kt_customers_export_submit" class="btn btn-primary">
										<span class="indicator-label">Submit</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 - New Card-->
			<!--end::Modals-->
		</div>
		<!--end::Container-->
	</div>
	<!--end::Content-->
@endsection

@section('js')
<script src="/assets/app/js/custom/confirm_delete.js"></script>
@endsection