@extends('layouts.main')

@section('title')
	System Matrix | System
@endsection

@section('menu')
	{!! $menu !!}
@endsection

@section('content')
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="{{URL('/')}}">Home</a></li>
  <li class="breadcrumb-item active">System</li>
</ol>
<div class="row">
	<div class="col-lg-12 sm-no-padding">
	  <div class="card card-transparent">
	    <div class="card-body no-padding">
	      <div id="card-advance" class="card card-default">
	        <div class="card-body">
	        	<table style="width:100%" class="table table-hover demo-table-search table-responsive-block dataTable no-footer" id="table_id">
	        		<thead>
	        			<tr>
	        				<th>Parent System</th>
	        				<th>System</th>
	        				<th>Status</th>
	        				<th>Created By</th>
	        				<th>Created Date</th>
	        				<th>Last Modified By</th>
	        				<th>Modified Date</th>
	        				<th>Action</th>
	        			</tr>
	        		<thead>
	        		<tbody>
	        			
	        		<tbody>
	        	</table>
	        </div>
	      </div>
	    </div>
	  </div>
	</div>
</div>

@endsection

@section('page-script')
<script>
	$(function(){
		$("#masterData").addClass('open');
		$("#masterData").addClass('active');
		$("#masterDataArrow").addClass('open');
		$("#masterDataArrow").addClass('active');
		$("#system").addClass('active');
	});
	
	var table = $('#table_id').DataTable( {
			"order": ['0', 'asc'],
			// "bPaginate": false,
			// "processing": true,	
			dom: '<"upload">Bfrtip',
	    // scrollX: true,
	    buttons: [
	    	@if(in_array('CREATE', $access['function']['SYS']))
	    	{
	        className: 'btn-primary',
	        text: "<i class='fa fa-plus'></i> Add",
			    action: function (e, dt, node, config) {
			        window.location = "{{URL('/')}}/system/create";
			    }
		    },
		    @endif
	      {
	          extend: 'pageLength', 
	          className: 'datatable_button',
	          title: 'System List as of {{date('M d, Y')}}'
	      },
	      {
	          extend: 'csv', 
	          className: 'datatable_button',
	          text: 'Export',
	          title: 'System List as of {{date('M d, Y')}}',
	          exportOptions: {
              // columns: ":visible",
              columns: ':not(:last-child)'
            },
	      },
		    {
		      extend: 'colvis',
		    },
		    {
		      className: 'datatable_button',
		      text: "Refresh",
				    action: function (e, dt, node, config) {
				        table.ajax.reload();
				    }
    		}
	    ],
	    responsive: true,
	    "ajax": {
	        "url": "{{URL('/')}}/fetchSystems",
	        "type": "POST",
	        "data" : {
	            "_token": "{{ csrf_token() }}",
	        }
	    }
	});

	$('#table_id tbody').on('click', 'button.icon-delete', function() {
    var getid = $(this).data('id');

    var row;

    if ($(this).closest('table').hasClass("collapsed")) {
        var child = $(this).parents("tr.child");
        row = $(child).prevAll(".parent");
    } else {
        row = $(this).parents('tr');
    }

    myrow = table
        .row(row);

    swal("Are you sure?", "You will not be able to recover this System!", {
            icon: 'warning',
            buttons: ["Cancel", {
                text: "Yes!",
                closeModal: false,
                className: "btn-danger",
            }],
        })
        .then(name => {
            if (!name) throw null;

            $.ajax({
                url: "{{URL('/')}}/system/" + getid,
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    "_method": "DELETE",
                },
                success: function(data) {
                	 	myrow.remove().draw();
                    swal("", "Data has successfully deleted", "success", {
                        timer: 1500,
                    });
                    swal.close()

                }
            });


        })
        .then(results => {
            // swal("","Data has successfully deleted","success");

        });

});

document.querySelector('div.upload').innerHTML = '<form class="mb-3" action="{{URL('/')}}/system/upload" method="POST" enctype="multipart/form-data"><input type="hidden" name="_token" value="{{csrf_token()}}"><input type="file" name="file" required="required"/><button class="btn btn-success"><i class="fa fa-upload"></i>&nbsp;Upload</button></form>';
</script>
@endsection