@extends("LaravelVueAdmin.layouts.app")

@section("contentheader_title", "Detail Monitoring")
@section("section", "Detail")
@section("sub_section", "Monitoring")
@section("htmlheader_title", "Detail Monitoring")

@section("headerElems")
@endsection

@section("main-content")

@if (count($errors) > 0)
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif


<!-- Ajax sourced data -->
<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title text-center">@yield("sub_section")</h5>
			<div class="heading-elements">
				<ul class="icons-list">
					<li><a data-action="reload"></a></li>
					<li><a data-action="collapse"></a></li>
				</ul>
			</div>
		</div>

		@hasSection('description')
		<div class="panel-body">
			@yield('description')
		</div>
		@endif

		<table id="example1" class="table datatable-ajax">
			<thead>
				<tr>
          <th></th>
          <th>Kategori</th>
					<!-- <th>URL</th> -->
					<!-- <th>Last Update</th> -->
					<!-- <th>Aksi</th> -->
				</tr>
			</thead>
		</table>
		<script id="details-template" type="text/x-handlebars-template">
			<table class="table details-table" id="posts-@{{0}}">
				<thead>
					<tr>
						<th>Id</th>
						<th>Waktu</th>
						<th>ID Monitor</th>
						<th>V1</th>
						<th>V2</th>
						<th>V3</th>
						<th>Catatan </th>
						<th>Lampiran</th>
						<th>Di-update Oleh</th>
						<th>Aksi</th>
					</tr>
				</thead>
			</table>
			<button class="text-center center-block label label-info quickAdd" data-id="@{{0}}" data-name="@{{1}}" data-pic="@{{2}}" data-periode="@{{3}}" data-value="@{{11}}"  data-k[0]="@{{8}}" data-k[1]="@{{9}}" data-k[2]="@{{10}}"  data-v[0]="" data-v[1]="" data-v[2]="" data-toggle="modal" data-target="#AddModal"><i class="fa fa-check-square-o"></i> Tambah @{{1}}</button>
			<br/>
		</script>
	</div>
		<!-- /ajax sourced data -->

@lv_access("Monitoring_ds", "create")
<div class="modal fade" id="AddModal" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">Tambah Stok Monitor</h4>
			</div>
			{!! Form::open(['action' => 'LaravelVueAdmin\Monitoring_dsController@store', 'id' => 'monitoring_d-add-form']) !!}
			<div class="modal-body">
				<div class="box-body">
					<input class="form-control" type="hidden" id="monitor_id" name="monitor_id"></input>
					<div class="form-group"><label for="name">Nama Kategori : </label> <span id="name"></span></div>
					<div class="form-group"><label for="pic">PIC : </label> <span id="pic"></span></div>
					<div class="form-group"><label for="periode">Periode : </label> <span id="periode"></span></div>
					<div id="value"></div>
					@lv_input($detail, 'monitor_id')
					@lv_input($detail, 'note')
					@lv_input($detail, 'doc')
					@lv_input($detail, 'created_by')
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				{!! Form::submit( 'Submit', ['class'=>'btn btn-success']) !!}
			</div>
			{!! Form::close() !!}
		</div>
	</div>
</div>
@endlv_access

@endsection

@push('scripts')
<script src="{{ asset('LaravelVueAdmin/assets/plugins/datatables/datatables.min.js') }}"></script>
<script src="{{ asset('LaravelVueAdmin/assets/plugins/handlebars.js') }}"></script>
<script>
	var template = Handlebars.compile($("#details-template").html());

	$(document).on("click", ".quickAdd", function () {
		$(".modal-body #monitor_id").val( $(this).data('id'));
		$(".modal-body #name").html( $(this).data('name'));
		$(".modal-body #pic").html($(this).data('pic'));
		$(".modal-body #periode").html($(this).data('periode')+' hari');
		var total = parseInt($(this).data('value'));
		var kolom ='';
		for (var i = 0; i < total; i++) {
			var label = $(this).data('k['+i+']');
			var value = $(this).data('v['+i+']');
			kolom += '<div class="form-group k'+i+'"><label for="k'+i+'">'+ label +'</label><input class="form-control" type="number" step="1" name="value[]" value="'+value+'" id="k'+i+'"></input></div>';
		}
		$(".modal-body #value").html(kolom);
	});

    var table = $('#example1').DataTable({
        processing: true,
        serverSide: true,
        autoWidth: false,
		searching: false,
		dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
		language: {
			"url": "{{ asset('LaravelVueAdmin/assets/plugins/datatables/Indonesian.json') }}"
		},
    "fnDrawCallback": function (oSettings) {
       $('#example1 tbody tr').each(function () {
         $('[data-popup="tooltip"]').tooltip();
         $('[data-popup="popover"]').popover();
       });
    },
		ajax: "{{ url(config('LaravelVueAdmin.adminRoute') . '/monitoring_d_dt_ajax') }}",
        columns: [
            {
                "className":      'details-control',
                "orderable":      false,
                "searchable":      false,
				"data":           null,
				"render": function ( data, type, row ) {
					return '<div class="parent"><i class="text-center center-block fa fa-plus-square"></i></div>';
				},
                "defaultContent": ''
            },
            {data: 0, name: 'id', visible:false},
            {data: 1, name: 'name'},
            {data: 2, name: 'pic'},
            {data: 3, name: 'periode', render: function ( data, type, row ) {
				return data + ' hari';
			},},
            {data: 4, name: 'kolom', visible:false},
            {data: 5, name: 'details_url', visible:false},
            {data: 6, name: 'Update'},
            {data: 7, name: 'aksi', visible:@if (Auth::user()->hasRole('SUPER_ADMIN')) true @else false @endif}
        ],
        order: [[1, 'asc']]
	});
	$.fn.dataTable.ext.errMode = 'none';
	$('#example1').on('error.dt', function(e, settings, techNote, message) {
		(function($) {
			$('body').pgNotification({
				style: 'circle',
				message: 'Mohon <a class="alert-danger" onclick="window.location.reload(true);"><u><i class="fa fa-refresh"></i>Reload halaman</u></a>',
				position: "top-right",
				type: "danger",
				showClose: false,
				timeout: 0,
				title: 'PROSES DIHENTIKAN',
				thumbnail: '<i class="fa fa-exclamation-circle fa-4x"></i>'
			}).show();
		})(window.jQuery);
	});

    // Add event listener for opening and closing details
    $('#example1 tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
		var i = $(this).find('i');
        var row = table.row(tr);
		var tableId = 'posts-' + row.data()[0];

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
			i.removeClass("fa-minus-square");
			i.addClass("fa-plus-square");
        } else {
			// Open this row
			row.child(template(row.data())).show();
			var obj = JSON.parse(row.data()[4]);
			if(obj.length>0){
				if(obj.length===3){
					initTable3(tableId, row.data(), obj);
			}else if(obj.length===2){
					initTable2(tableId, row.data(), obj);
				}else if(obj.length===1){
					initTable(tableId, row.data(), obj);
				}
			}
            tr.addClass('shown');
			i.removeClass("fa-plus-square");
			i.addClass("fa-minus-square");
            tr.next().find('td').addClass('no-padding bg-gray');
        }
    });

    function initTable3(tableId, data, obj) {
        $('#' + tableId).DataTable({
            processing: true,
            serverSide: true,
			autoWidth: false,
			responsive: true,
			pageLength: 5,
			dom: '<"top"i>rt<"bottom"p><"clear">',
			language: {
			emptyTable: "Tidak ada data"
		  },
            ajax: data[5],
            columns: [
                { data: 0, name: 'id', visible:false },
                { data: 1, name: 'created_at' },
                { data: 2, name: 'monitor_id', visible:false },
                { data: 8, name: 'v1', title:''+obj[0] },
                { data: 9, name: 'v2', title:''+obj[1] },
                { data: 10, name: 'v3', title:''+obj[2] },
                { data: 4, name: 'note' },
                { data: 5, name: 'doc', visible:false },
                { data: 6, name: 'created_by' },
                { data: 7, name: 'aksi' }
            ]
        })
	}

    function initTable2(tableId, data, obj) {
        $('#' + tableId).DataTable({
            processing: true,
            serverSide: true,
			autoWidth: false,
			responsive: true,
			pageLength: 5,
			dom: '<"top"i>rt<"bottom"p><"clear">',
			language: {
			emptyTable: "Tidak ada data"
		  },
            ajax: data[5],
            columns: [
                { data: 0, name: 'id', visible:false },
                { data: 1, name: 'created_at' },
                { data: 2, name: 'monitor_id', visible:false },
                { data: 8, name: 'v1', title:''+obj[0] },
                { data: 9, name: 'v2', title:''+obj[1] },
                { data: 10, name: 'v3', visible:false },
                { data: 4, name: 'note' },
                { data: 5, name: 'doc', visible:false },
                { data: 6, name: 'created_by' },
                { data: 7, name: 'aksi' }
            ]
        })
	}

    function initTable(tableId, data, obj) {
        $('#' + tableId).DataTable({
            processing: true,
            serverSide: true,
			autoWidth: false,
			responsive: true,
			pageLength: 5,
			dom: '<"top"i>rt<"bottom"p><"clear">',
			language: {
			emptyTable: "Tidak ada data"
		  },
            ajax: data[5],
            columns: [
                { data: 0, name: 'id', visible:false },
                { data: 1, name: 'created_at' },
                { data: 2, name: 'monitor_id', visible:false },
                { data: 8, name: 'v1', title:''+obj[0] },
                { data: 9, name: 'v2', visible:false },
                { data: 10, name: 'v3', visible:false },
                { data: 4, name: 'note' },
                { data: 5, name: 'doc', visible:false },
                { data: 6, name: 'created_by' },
                { data: 7, name: 'aksi' }
            ]
        })
    }
</script>
@endpush