<!-- $spo=Supplier::class -->
<!-- $oo=Supplier/{type}::class -->

@use(App\Models\Supplier)

@php
if(isset($spo)) {
	$oo = $spo->detail?->supplier_product(request()->route()->parameter('type'),request()->route()->parameter('id'));
	$oo?->load(['products.products.services']);

	$breadcrumb = [$spo->name=>route('supplier.details',['spo'=>$spo->id])];
}
@endphp

@extends('adminlte::layouts.app')

@section('htmlheader_title')
	Supplier Product - @if (isset($oo) && $oo->exists)Edit @else New @endif
@endsection
@section('page_title')
	@if (isset($oo) && $oo->exists){{ $oo->name }} @else New @endif Product
@endsection

@section('contentheader_title')
	Supplier Product - @if (isset($oo) && $oo->exists){{ $oo->name }} @else New @endif
@endsection
@section('contentheader_description')
@endsection

@section('main-content')
	<div class="row">
		<div class="col-8">
			<div class="card card-dark">
				<div class="card-header p-2">
					<h1 class="card-title">Supplier Product</h1>
					<!-- @todo Should this be a x-leenooks::success component -->
					@if(session()->has('success'))
						<span class="ml-3 pt-0 pb-0 pr-1 pl-1 btn btn-outline-success"><small>{{ session()->get('success') }}</small></span>
					@endif
				</div>

				<div class="card-body">
					<form method="POST">
						@csrf

						<input type="hidden" name="id" value="{{ $oo?->id ?? '' }}">

						<div class="row">
							<div class="col-4">
								<!-- Supplier -->
								<x-leenooks::form.select name="supplier_detail_id" icon="fa-handshake" label="Supplier" :choose="true" :value="$spo->id ?? ''" :options="Supplier::active()->orderBy(DB::raw('UPPER(name)'))->get()->map(fn($item,$key)=>['id'=>$item->id,'value'=>$item->name])"/>
							</div>

							<div class="col-4">
								<!-- Offering Type -->
								<x-leenooks::form.select name="offering_type" icon="fa-cogs" label="Type" helper="Offering Type" :choose="true" :value="$oo?->category_lc ?? ''" :options="Supplier::offeringTypes()->sortBy(fn($item)=>$item->category_name)->map(fn($item)=>['id'=>$item->category_lc,'value'=>$item->category_name])"/>
							</div>
						</div>

						<div id="type">
							@if(($x=old('offering_type')) && ((! isset($oo)) || (! $oo->exists)))
								@include('theme.backend.adminlte.supplier.product.widget.'.$x,['o'=>NULL])
							@endif
						</div>

						<div class="row">
							<!-- Buttons -->
							<div class="col">
								<x-leenooks::button.cancel/>
								<x-leenooks::button.submit class="float-right">@if(isset($spo) && $spo?->exists)Update @else Add @endif</x-leenooks::button.submit>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>

		@if(isset($oo) && $oo->exists)
			<div class="col-4">
				<div class="row">
					<div class="col-12">
						<div class="card card-info">
							<div class="card-header p-2">
								<h1 class="card-title">Offering Products</h1>
							</div>

							<div class="card-body p-2">
								<table class="table table-sm">
									<thead>
									<tr>
										<th>ID</th>
										<th>Name</th>
										<th class="text-right">Services</th>
										<th class="text-right">Sold</th>
									</tr>
									</thead>

									<tbody>
									@foreach ($oo->products as $pto)
										@foreach ($pto->products as $po)
											<tr>
												<td><a href="{{ route('product',['pdo'=>$po->id]) }}">{{ $po->id }}</a></td>
												<td>{{ $po->name }}</td>
												<td class="text-right">{{ $po->services->where('active',true)->count() }}</td>
												<td class="text-right">{{ $po->services->count() }}</td>
											</tr>
										@endforeach
									@endforeach
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-12">
						<div class="card card-info">
							<div class="card-header p-2">
								<h1 class="card-title">Services Using this Supplier Product</h1>
							</div>

							<div class="card-body p-2">
								<table class="table table-hover table-sm" id="services">
									<thead>
									<tr>
										<th>ID</th>
										<th>Product</th>
										<th>Name</th>
										<th>Status</th>
									</tr>
									</thead>

									<tbody>
									@foreach ($oo->products as $pto)
										@foreach ($pto->products as $po)
											@foreach ($po->services as $so)
												<tr>
													<td><a href="{{ url('u/service',[$so->id]) }}">{{ $so->lid }}</a></td>
													<td>{{ $po->name }}</td>
													<td>{{ $so->name }}</td>
													<td>{{ $so->active ? 'Active' : 'Not Active' }}</td>
												</tr>
											@endforeach
										@endforeach
									@endforeach
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		@endif
	</div>
@endsection

@pa(datatables,rowgroup|conditionalpaging)

@section('page-scripts')
	<script type="text/javascript">
		function load_type(type,id) {
			$.ajax({
				type: 'POST',
				dataType: 'html',
				cache: false,
				data: {errors: {!! $errors !!}, old: {!! json_encode(old()) !!} },
				url: '{{ url('a/supplier/product/view') }}/'+type+(id ? '/'+id : ''),
				timeout: 2000,
				error: function(x) {
					//spinner.toggleClass('d-none').toggleClass('fa-spin');
					alert('Failed to submit');
				},
				success: function(data) {
					$("div[id=type]").empty().append(data);
				}
			});
		}

		$(document).ready(function() {
			@if(isset($oo) && $oo->exists)
				$('#offering_type').attr('style','pointer-events: none;');
				load_type('{{$oo->category_lc}}',{{$oo->id}})
			@endif

			$('#offering_type').on('change',function() {
				if (! $(this).val())
					return;

				load_type($(this).val());
			});

			$('#services').DataTable({
				conditionalPaging: true,
				order: [[3,'asc'],[1,'asc'],[2,'asc']],
				rowGroup: {
					dataSrc: 1,
				},
				columnDefs: [
					{
						targets: [1],
						visible: false,
					}
				],
			});
		});
	</script>
@append