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

@section('htmlheader_title')
	Product List
@endsection
@section('page_title')
	Product List
@endsection

@section('contentheader_title')
	Product List
@endsection
@section('contentheader_description')
@endsection

@section('main-content')
	<div class="col-md-12">
		<table class="table table-sm table-striped" id="table">
			<thead>
			<tr>
				<th>ID</th>
				<th>Service</th>
				<th>Product</th>
				<th>Monthly</th>
				<th>Cost</th>
				<th>Traffic</th>
			</tr>
			</thead>

			<tbody>
			@foreach (\App\Models\Service::active()->get() as $o)
				<tr>
					<td><a href="{{ url('u/service',[$o->id]) }}">{{ $o->id }}</a></td>
					<td>{{ $o->sname }}</td>
					<td>{{ $o->product->name }}</td>
					<td>{{ number_format($o->billing_monthly_price,2) }}</td>
					<td>{{ $o->product->type ? number_format($o->product->type->cost,2) : 'NO TYPE' }}</td>
					<td>{{ $o->product->type ? $o->product->type->allowance_string() : '-' }}</td>
				</tr>
			@endforeach
			</tbody>
		</table>
	</div>
@endsection

@section('page-scripts')
	@css('//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css','datatables-css')
	@js('//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js','datatables-js')
	@css('//cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css','datatables-responsive-css')
	@js('//cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js','datatables-responsive-js')
	@css('//cdn.datatables.net/rowgroup/1.1.0/css/rowGroup.dataTables.min.css','datatables-rowgroup-css')
	@js('//cdn.datatables.net/rowgroup/1.1.0/js/dataTables.rowGroup.min.js','datatables-rowgroup-js')
	@css('//cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css','datatables-button-css')
	@js('//cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js','datatables-button-js')
	@css('//cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css','datatables-fixed-css')
	@js('//cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js','datatables-fixed-js')
	@css('/plugin/dataTables/dataTables.bootstrap4.css','datatables-bootstrap4-css')
	@js('/plugin/dataTables/dataTables.bootstrap4.js','datatables-bootstrap4-js')
	@css('/plugin/dataTables/dataTables.bootstrap4.css','datatables-bootstrap4-css')
	@js('//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js','jszip')
	@js('//cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js','datatables-buttons-html5')

	<style>
		tr.odd td:first-child,
		tr.even td:first-child {
			padding-left: 3em;
		}
		table.dataTable tr.dtrg-group.dtrg-level-1 td {
			background-color: #e0e0e0;
			color: #4c110f;
		}
	</style>

	<script type="text/javascript">
        $(document).ready(function() {
            $('#table').DataTable({
                //oSearch: { sSearch: searchString ? decodeURIComponent(searchString) : '' },
                aLengthMenu: [
                    [25, 50, 100, 200, -1],
                    [25, 50, 100, 200, "All"]
                ],
                paging: true,
                pageLength: 25,
                lengthChange: true,
                searching: true,
                ordering: true,
                info: true,
                autoWidth: false,
                fixedHeader: true,
                order: [
                    [2,'asc'],
                    [1,'asc'],
                ],
                rowGroup: {
                    dataSrc: [2],
                },
                columnDefs: [
                    {
                        targets: [2],
                        visible: false,
                    },
                ],
            });
        });
    </script>
@append