<!-- $o = Supplier::class -->
<!-- $oo = Supplier/{type}::class -->
@extends('adminlte::layouts.app')

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

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

@section('main-content')
	<div class="row">
		<div class="col-8">
			<div class="card card-dark">
				<div class="card-header">
					<h1 class="card-title">Supplier Product</h1>
					@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 class="g-0 needs-validation" method="POST" enctype="multipart/form-data" role="form">
						@csrf
						<input type="hidden" name="id" value="{{ $oo?->id }}">

						<div class="row">
							<div class="col-4">
								<!-- Supplier -->
								<div class="form-group has-validation">
									<label for="supplier_detail_id">Supplier</label>
									<select class="form-control form-control-border @error('supplier_detail_id') is-invalid @enderror" id="supplier_detail_id" name="supplier_detail_id">
										<option value=""></option>
										@foreach(\App\Models\Supplier::active()->orderBy('name')->get() as $so)
											<option value="{{ $so->id }}" {{ old('supplier_detail_id',$o->id) == $so->detail->id ? 'selected' : ''}}>{{ $so->name }}</option>
										@endforeach
									</select>
									<span class="invalid-feedback" role="alert">
										@error('supplier_detail_id')
											{{ $message }}
										@else
											Date is required.
										@enderror
									</span>
									<span class="input-helper">Suppliers Name</span>
								</div>
							</div>

							<div class="col-4">
								<!-- Offering Type -->
								<div class="form-group has-validation">
									<label for="offering_type">Type</label>
									<select class="form-control form-control-border @error('offering_type') is-invalid @enderror" id="offering_type" name="offering_type">
										<option value=""></option>
										@foreach(\App\Models\Supplier::offeringTypes()->sortBy(function($item) { return $item->category_name; }) as $to)
											<option value="{{ $to->category }}" {{ old('offering_type',$oo?->category) == $to->category ? 'selected' : ''}}>{{ $to->category_name }}</option>
										@endforeach
									</select>
									<span class="invalid-feedback" role="alert">
										@error('offering_type')
											{{ $message }}
										@else
											Offering Type is Required
										@enderror
									</span>
									<span class="input-helper">Offering Type</span>
								</div>
							</div>
						</div>

						<div id="type"></div>

						<div class="row">
							<div class="col-12">
								<a href="{{ url('/home') }}" class="btn btn-danger">Cancel</a>
								@can('wholesaler')
									<button type="submit" name="submit" class="btn btn-success mr-0 float-right">@if ($oo && $oo->exists)Save @else Add @endif</button>
								@endcan
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>

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

							<div class="card-body">
								<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)
										<tr>
											<td>{{ $pto->id }}</td>
											<td>{{ $pto->product->name }}</td>
											<td class="text-right">{{ $pto->product->services->where('active',true)->count() }}</td>
											<td class="text-right">{{ $pto->product->services->count() }}</td>
										</tr>
									@endforeach
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>

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

							<div class="card-body">
								<table class="table 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->product->services as $so)
											<tr>
												<td><a href="{{ url('u/service',[$so->id]) }}">{{ $so->lid }}</a></td>
												<td>{{ $so->product->type->id }}</td>
												<td>{{ $so->name }}</td>
												<td>{{ $so->active ? 'Active' : 'Not Active' }}</td>
											</tr>
										@endforeach
									@endforeach
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		@endif
	</div>
@endsection

@section('page-scripts')
	@css(datatables,bootstrap4|rowgroup)
	@js(datatables,bootstrap4|responsive|rowgroup)

	<script type="text/javascript">
		$(document).ready(function() {
			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);
					}
				});
			}

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

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

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

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