<?php
 
/*
 * Example PHP implementation used for the index.html example
 */
 
// DataTables PHP library
define( 'ROOT_DIR', dirname(__FILE__) );

// connect to the database
//require_once( ROOT_DIR.'/../connect-db.php');
include( "../../datatables/lib/DataTables.php" );
//include( ROOT_DIR."../../datatables/lib/DataTables.php" );
 
// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions;
 
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'datatables_demo' )
    ->fields(
        Field::inst( 'first_name' )
            ->validator( Validate::notEmpty( ValidateOptions::inst()
                ->message( 'A first name is required' ) 
            ) ),
        Field::inst( 'last_name' )
            ->validator( Validate::notEmpty( ValidateOptions::inst()
                ->message( 'A last name is required' )  
            ) ),
        Field::inst( 'position' ),
        Field::inst( 'email' )
            ->validator( Validate::email( ValidateOptions::inst()
                ->message( 'Please enter an e-mail address' )   
            ) ),
        Field::inst( 'office' ),
        Field::inst( 'extn' ),
        Field::inst( 'age' )
            ->validator( Validate::numeric() )
            ->setFormatter( Format::ifEmpty(null) ),
        Field::inst( 'salary' )
            ->validator( Validate::numeric() )
            ->setFormatter( Format::ifEmpty(null) ),
        Field::inst( 'start_date' )
            ->validator( Validate::dateFormat( 'Y-m-d' ) )
            ->getFormatter( Format::dateSqlToFormat( 'Y-m-d' ) )
            ->setFormatter( Format::dateFormatToSql('Y-m-d' ) )
    )
    ->process( $_POST )
    ->json();
    
echo"<!DOCTYPE html>
<html>
<head>
<script type=\"text/javascript\" language=\"javascript\" >
/*! Bootstrap integration for DataTables' Editor
 * ©2015 SpryMedia Ltd - datatables.net/license
 */

(function( factory ){
	if ( typeof define === 'function' && define.amd ) {
		// AMD
		define( ['jquery', 'datatables.net-bs', 'datatables.net-editor'], function ( $ ) {
			return factory( $, window, document );
		} );
	}
	else if ( typeof exports === 'object' ) {
		// CommonJS
		module.exports = function (root, $) {
			if ( ! root ) {
				root = window;
			}

			if ( ! $ || ! $.fn.dataTable ) {
				$ = require('datatables.net-bs')(root, $).$;
			}

			if ( ! $.fn.dataTable.Editor ) {
				require('datatables.net-editor')(root, $);
			}

			return factory( $, root, root.document );
		};
	}
	else {
		// Browser
		factory( jQuery, window, document );
	}
}(function( $, window, document, undefined ) {
'use strict';
var DataTable = $.fn.dataTable;

/*
 * Set the default display controller to be our bootstrap control 
 */
DataTable.Editor.defaults.display = 'bootstrap';


/*
 * Alter the buttons that Editor adds to TableTools so they are suitable for bootstrap
 */
var i18nDefaults = DataTable.Editor.defaults.i18n;
i18nDefaults.create.title = '<h3>'+i18nDefaults.create.title+'</h3>';
i18nDefaults.edit.title = '<h3>'+i18nDefaults.edit.title+'</h3>';
i18nDefaults.remove.title = '<h3>'+i18nDefaults.remove.title+'</h3>';

var tt = DataTable.TableTools;
if ( tt ) {
	tt.BUTTONS.editor_create.formButtons[0].className = 'btn btn-primary';
	tt.BUTTONS.editor_edit.formButtons[0].className = 'btn btn-primary';
	tt.BUTTONS.editor_remove.formButtons[0].className = 'btn btn-danger';
}


/*
 * Change the default classes from Editor to be classes for Bootstrap
 */
$.extend( true, $.fn.dataTable.Editor.classes, {
	'header': {
		'wrapper': 'DTE_Header modal-header'
	},
	'body': {
		'wrapper': 'DTE_Body modal-body'
	},
	'footer': {
		'wrapper': 'DTE_Footer modal-footer'
	},
	'form': {
		'tag': 'form-horizontal',
		'button': 'btn btn-default',
		'buttonInternal': 'btn btn-default'
	},
	'field': {
		'wrapper': 'DTE_Field',
		'label':   'col-lg-4 control-label',
		'input':   'col-lg-8 controls',
		'error':   'error has-error',
		'msg-labelInfo': 'help-block',
		'msg-info':      'help-block',
		'msg-message':   'help-block',
		'msg-error':     'help-block',
		'multiValue':    'well well-sm multi-value',
		'multiInfo':     'small',
		'multiRestore':  'well well-sm multi-restore'
	}
} );

$.extend( true, DataTable.ext.buttons, {
	create: {
		formButtons: {
			className: 'btn-primary'
		}
	},
	edit: {
		formButtons: {
			className: 'btn-primary'
		}
	},
	remove: {
		formButtons: {
			className: 'btn-danger'
		}
	}
} );


console.log('bellas');

/*
 * Bootstrap display controller - this is effectively a proxy to the Bootstrap
 * modal control.
 */
DataTable.Editor.display.bootstrap = $.extend( true, {}, DataTable.Editor.models.displayController, {
	'init': function ( dte ) {
		var content = $(
			'<div class='modal fade DTED'>'+
				'<div class='modal-dialog'>'+
					'<div class='modal-content'/>'+
				'</div>'+
			'</div>'
		);
		var conf = {
			content: content,
			close: $('<button class='close'>&times;</div>')
				.on('click', function () {
					dte.close('icon');
				}),
			modalContent: content.find('div.modal-content'),
			shown: false
		};

		$(document).on('click', 'div.modal', function (e) {
			if ( $(e.target).hasClass('modal') && conf.shown ) {
				dte.background();
			}
		} );

		// Add `form-control` to required elements
		dte.on( 'displayOrder.dtebs', function ( e, display, action, form ) {
			$.each( dte.s.fields, function ( key, field ) {
				$('input:not([type=checkbox]):not([type=radio]), select, textarea', field.node() )
					.addClass( 'form-control' );
			} );
		} );

		dte._bootstrapDisplay = conf;

		return DataTable.Editor.display.bootstrap;
	},

	'open': function ( dte, append, callback ) {
		var conf = dte._bootstrapDisplay;

		if ( conf.shown ) {
			if ( callback ) {
				callback();
			}
			return;
		}

		conf.shown = true;

		var content = conf.modalContent;
		content.children().detach();
		content.append( append );

		$('div.modal-header', append).prepend( conf.close );

		$(conf.content)
			.one('shown.bs.modal', function () {
				// Can only give elements focus when shown
				if ( dte.s.setFocus ) {
					dte.s.setFocus.focus();
				}

				if ( callback ) {
					callback();
				}
			})
			.one('hidden', function () {
				conf.shown = false;
			})
			.appendTo( 'body' )
			.modal( {
				backdrop: 'static',
				keyboard: false
			} );
	},

	'close': function ( dte, callback ) {
		var conf = dte._bootstrapDisplay;

		if ( !conf.shown ) {
			if ( callback ) {
				callback();
			}
			return;
		}

		$(conf.content)
			.one( 'hidden.bs.modal', function () {
				$(this).detach();
			} )
			.modal('hide');

		conf.shown = false;

		if ( callback ) {
			callback();
		}
	},

	node: function ( dte ) {
		return dte._bootstrapDisplay.content[0];
	}
} );

return DataTable.Editor;
}));



var editor;

// Display an Editor form that allows the user to pick the CSV data to apply to each column
function selectColumns ( editor, csv, header ) {
    var selectEditor = new $.fn.dataTable.Editor();
    var fields = editor.order();
 
    for ( var i=0 ; i<fields.length ; i++ ) {
        var field = editor.field( fields[i] );
 
        selectEditor.add( {
            label: field.label(),
            name: field.name(),
            type: 'select',
            options: header,
            def: header[i]
        } );
    }
 
    selectEditor.create({
        title: 'Map CSV fields',
        buttons: 'Import '+csv.length+' records',
        message: 'Select the CSV column you want to use the data from for each field.'
    });
 
    selectEditor.on('submitComplete', function (e, json, data, action) {
        // Use the host Editor instance to show a multi-row create form allowing the user to submit the data.
        editor.create( csv.length, {
            title: 'Confirm import',
            buttons: 'Submit',
            message: 'Click the <i>Submit</i> button to confirm the import of '+csv.length+' rows of data. Optionally, override the value for a field to set a common value by clicking on the field below.'
        } );
 
        for ( var i=0 ; i<fields.length ; i++ ) {
            var field = editor.field( fields[i] );
            var mapped = data[ field.name() ];
 
            for ( var j=0 ; j<csv.length ; j++ ) {
                field.multiSet( j, csv[j][mapped] );
            }
        }
    } );
}

$(document).ready(function() {
   
  //$.fn.dataTable.render.moment('M/D/YYYY');
  editor = new $.fn.dataTable.Editor({
    table: '#example',
    fields: [
			{
				label: 'Name:',
				name: 'name'
			},
			{
				label: 'Position:',
				name: 'position'
			},
			{
				label: 'Office:',
				name: 'office'
			},
			{
				label: 'Age:',
				name: 'age'
			},
			{
				label: 'Start date:',
				name: 'start_date',
				type: 'datetime',
                format: 'YYYY/M/D'
			},
			{
				label: 'Salary:',
				name: 'salary'
			}
    ]
  });

    // Upload Editor - triggered from the import button. Used only for uploading a file to the browser
    var uploadEditor = new $.fn.dataTable.Editor( {
        fields: [ {
            label: 'CSV file:',
            name: 'csv',
            type: 'upload',
            ajax: function ( files ) {
                // Ajax override of the upload so we can handle the file locally. Here we use Papa
                // to parse the CSV.
                Papa.parse(files[0], {
                    header: true,
                    skipEmptyLines: true,
                    complete: function (results) {
                        if ( results.errors.length ) {
                            console.log( results );
                            uploadEditor.field('csv').error( 'CSV parsing error: '+ results.errors[0].message );
                        }
                        else {
                            uploadEditor.close();
                            selectColumns( editor, results.data, results.meta.fields );
                        }
                    }
                });
            }
        } ]
    } );
 
  $('#example').DataTable({
    dom: 'Bfrtip',
    columns: [
			{ data: 'name' },
			{ data: 'position' },
			{ data: 'office' },
			{ data: 'age' },
			{ data: 'start_date' },
			{ data: 'salary' }
    ],
    select: true,
    buttons: [
      { extend: 'create', editor: editor },
      { extend: 'edit', editor: editor },
      { extend: 'remove', editor: editor },
            {
                text: 'Import CSV',
                action: function () {
                    uploadEditor.create( {
                        title: 'CSV file import'
                    } );
                }
            },
    ]
  });
  

});

<script type=\"text/javascript\" language=\"javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.6.3/papaparse.min.js\"></script>
<script type=\"text/javascript\" language=\"javascript\" src=\"https://code.jquery.com/jquery-3.3.1.js\"></script>
<script type=\"text/javascript\" language=\"javascript\" src=\"https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js\"></script>
<script type=\"text/javascript\" language=\"javascript\" src=\"../../datatables/js/dataTables.editor.min.js\"></script>
<script type=\"text/javascript\" language=\"javascript\" src=\"https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js\"></script>
<script type=\"text/javascript\" language=\"javascript\" src=\"https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js\"></script>
<script type=\"text/javascript\" language=\"javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js\"></script>
<script type=\"text/javascript\" language=\"javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js\"></script>
<script type=\"text/javascript\" language=\"javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js\"></script>
<script type=\"text/javascript\" language=\"javascript\" src=\"https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js\"></script>
<script type=\"text/javascript\" language=\"javascript\" src=\"https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js\"></script>

<link rel='stylesheet' type='text/css' href='https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css'/>
<link rel='stylesheet' type='text/css' href='../../datatables/css/editor.dataTables.min.css'/>
<link rel='stylesheet' type='text/css' href='https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css'/>
<link rel='stylesheet' type='text/css' href='https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css'/>

<style>
button.btn-space {
        margin-left: 1em;
    }
  </style>
</head>
<body>
<table id='example' class='display' style=\"width:100%\">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
</body>";    

?>