<?php
include 'connect/cms-config.php' ;
include 'requires/function.php' ;
include 'requires/session.php' ;

// include the class
include 'requires/class_resize.php' ;

// keep parameter in value
$page = escapeString($_GET['page']) ;
$page_mode = escapeString($_GET['page_mode']) ;
$type = escapeString($_GET['type']) ;
$search = escapeString($_GET['search']) ;

// active menu bar
$active_main_menu = 'setting' ;
$active_sub_menu = 'setting-hr' ;
$active_menu = 'setting-hr-branch' ;

// mode type | all list | new | edit
switch($page_mode){
	
	// edit branch
	case 'new' :
	case 'edit' :

		// check query exsits
		$submit_type = 'new' ;
		$mysqli_page = $mysqli->query("SELECT * FROM branch
									   WHERE branch_id = '".$page."' LIMIT 1");
		if ($mysqli_page->num_rows > 0){
			// keep query value in array
			$row_page    = $mysqli_page->fetch_array(MYSQLI_ASSOC) ;
			$submit_type = 'edit' ;
		}

		// update database
		if ( isset($type) && ( $type == 'new' || $type == 'edit' ) && $_POST['hide'] == 1 ){

			// keep value in variable
			$page_title          = escapeString($_POST['title']) ;
			$page_title          = ($page_title != '' ? $page_title : 'No Title') ;
			$page_content        = resetString(escapeString($_POST['content'])) ;
			$branch_email_footer = resetString(escapeString($_POST['branch_email_footer'])) ;
			$branch_geometry     = escapeString($_POST['branch_geometry']) ;
			$hq_branch           = escapeString($_POST['hq_branch']) ;
			$branch_show         = escapeString($_POST['branch_show']) ;
			$branch_binding_id   = escapeString($_POST['branch_binding_id']) ;
			$branch_hr_contact   = escapeString($_POST['branch_hr_contact']) ;
			$branch_hr_email     = escapeString($_POST['branch_hr_email']) ;
			$branch_hr_cc        = escapeString($_POST['branch_hr_cc']) ;

			if( $branch_show    == '' ){
				$branch_show     = 'no';
			}

			if ( $page == '' ){
				$mysqli->query("INSERT INTO branch (created_at) VALUES ('".TODAYDATE."')") ;
				$page   = $mysqli->insert_id ;	
			}
			
			// update database
			$mysqli->query("UPDATE branch SET
							branch_name         = '".$page_title."',
							branch_content      = '".$page_content."',
							branch_email_footer = '".$branch_email_footer."',
							branch_hq           = '".$hq_branch."',
							branch_show         = '".$branch_show."',
							branch_binding_id   = '".$branch_binding_id."',
							branch_geometry     = '".$branch_geometry."',
							branch_hr_contact   = '".$branch_hr_contact."',
							branch_hr_email     = '".$branch_hr_email."',
							branch_hr_cc        = '".$branch_hr_cc."',
							updated_at          = '".TODAYDATE."'
							WHERE branch_id     = '".$page."'") ;

			// refresh page
			header("Location:setting-branch.php?page_mode=edit&page=".$page."&success=1") ;
			$_SESSION['system_result'] = 'success-updated' ;
			exit ;
		}

		if ( ( $page_mode == 'new' && !permissionCheck($row_user, 'hr-branch-new') ) ){
			header('Location: index.php') ;
			exit ;
		}

		// start header here
		include 'requires/page_header.php';
		include 'requires/page_top.php';

		?>

		<style>
		#map-container, #canvas, #existMap {
		    height: 400px;
		}
		</style>

		<div class="warper container-fluid">   	
		<div class='container' style="background-color: white; border-radius: 10px;">
			<div class="page-header" style="margin: 30px 0px 0px 0px;padding: 0px;">
				<h1><?= $lang['branch'] ?> <small><?= $lang[$page_mode] ?></small></h1></div>
			<?php
            if ($_SESSION['system_result'] != ''){
                switch($_SESSION['system_result']){
                    case 'success-updated' :
                        echo '
                        <div class="result_success">
                           '.$lang['thank_you_your_branch_has_been_updated'].'
                        </div>' ;	
                    break ;
                }
                unset($_SESSION['system_result']) ;
            }
            ?>
            <div class="panel panel-default">
                <div class="panel-heading"></div>
                <div class="panel-body">
                    <form method="post" class="form-horizontal" id="quotationForm" enctype="multipart/form-data" action="setting-branch.php?page_mode=edit&page=<?= $page ?>&type=edit" novalidate="novalidate">
                        <div class="form-group">
                            <div class="col-sm-2 control-label"><?= $lang['HQ'] ?></div>
                            <div class="col-sm-9">
                                <input type="checkbox" name="hq_branch" value="1" <?= ($row_page['branch_hq'] == 1 ? 'checked' : '') ?>>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label"><?= $lang['branch'] ?></div>
                            <div class="col-sm-9">
                                <input type="text" name="title" class="form-control ui-search-input" value="<?= dataFilter($row_page['branch_name']) ?>" placeholder="<?= $lang['branch'] ?>" >
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label"><?= $lang['Show'] ?></div>
                            <div class="col-sm-9">
                                <input type="checkbox" name="branch_show" value="yes" <?= ($row_page['branch_show'] == 'yes' ? 'checked' : '') ?>>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">Binding Branch ID</div>
                            <div class="col-sm-9">
                                <input type="text" name="branch_binding_id" class="form-control ui-search-input" value="<?= dataFilter($row_page['branch_binding_id']) ?>" placeholder="Binding Branch ID" >
                            </div>
                        </div>

		                <hr />

		                <div class="form-group">
                            <div class="col-sm-2 control-label">HR Contact</div>
                            <div class="col-sm-9">
                                <input type="text" name="branch_hr_contact" class="form-control ui-search-input" value="<?= dataFilter($row_page['branch_hr_contact']) ?>" placeholder="HR Contact" >
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">HR Email</div>
                            <div class="col-sm-9">
                                <input type="text" name="branch_hr_email" class="form-control ui-search-input" value="<?= dataFilter($row_page['branch_hr_email']) ?>" placeholder="HR Email" >
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-2 control-label">HR CC</div>
                            <div class="col-sm-9">
                                <input type="text" name="branch_hr_cc" class="form-control ui-search-input" value="<?= dataFilter($row_page['branch_hr_cc']) ?>" placeholder="HR CC" >
                                * put comma if cc more, example : 1@gmail.com, 2@gmail.com
                            </div>
                        </div>
                        
                        <hr />

                        <div class="form-group">
		                    <div class="col-sm-2 control-label"><?= $lang['Letterhead'] ?></div>
		                    <div class="col-sm-9">
		                        <textarea name="content" class="content" id="editor1" rows="10" cols="80"><?= dataFilter($row_page['branch_content']) ?></textarea>
		                        <script>
		                        // Replace the <textarea id="editor1"> with a CKEditor
		                        // instance, using default configuration.
		                        CKEDITOR.replace('editor1');
		                        </script>
		                    </div>
		                </div>

		                <hr />

                        <div class="form-group">
		                    <div class="col-sm-2 control-label">Email Footer</div>
		                    <div class="col-sm-9">
		                        <textarea name="branch_email_footer" class="branch_email_footer" id="editor2" rows="10" cols="80"><?= dataFilter($row_page['branch_email_footer']) ?></textarea>
		                        <script>
		                        // Replace the <textarea id="editor1"> with a CKEditor
		                        // instance, using default configuration.
		                        CKEDITOR.replace('editor2');
		                        </script>
		                    </div>
		                </div>

		                <hr />
		                
                        <div class="form-group">
                            <div class="col-sm-2 control-label"><?= $lang['Branch Geometry'] ?></div>
                            <div class="col-sm-9">
                                <div  id="canvas"></div>
								<div id="controls">
									<div id="form" style="display:none;">
					                    <textarea type="text" name="branch_geometry" id="wkt" required><?= ( $row_page['branch_geometry'] != '' ? $row_page['branch_geometry'] : '' ) ?></textarea>
					                    <textarea type="text" name="branch_geometry_custom" id="wkt_custom" required><?= ( $row_page['branch_geometry'] != '' ? $row_page['branch_geometry'] : '' ) ?></textarea>
					                </div>
					            </div>
                            </div>
                        </div>
                        <?php if (  $page_mode == 'new'  || ( $page_mode == 'edit' && permissionCheck($row_user, 'hr-branch-edit') ) ) { ?>
	                        <div class="form-group">
	                            <div class="col-sm-2 control-label"></div>
	                            <div class="col-sm-9">
	                                <button type="submit" class="btn" style="color:white;background-color: #5e5bd0;float:right; margin-top: 5px;width: 100px;"><?= $lang['submit'] ?></button>
	                                <input type="hidden" name="hide_status" value="<?= $row_page['post_status'] ?>" />
	                                <input type="hidden" name="hide" value="1">
	                                <input type="hidden" name="page_status" value="<?= $submit_type ?>">
	                            </div>
	                        </div>   
						<?php } ?>
                    </form>
                </div>
            </div>
        </div>
		</div>

		<script src="https://maps.googleapis.com/maps/api/js?key=<?= MAPKEY ?>&libraries=drawing,places"></script>
		<script>
			$(window).load(function(){
				app.gmap=app.init("canvas","wkt") ;
			}) ;

			// combine map
			// https://gis.stackexchange.com/questions/85229/looking-for-dissolve-algorithm-for-javascript/100262#100262
			// https://stackoverflow.com/questions/24064125/googlemaps-api-v3-build-polygon-containing-multiple-zipcodes
			// https://stackoverflow.com/questions/42689915/jsts-how-to-union-of-more-then-two-polygons-in-openlayer2-using-jsts-library
			function DissolveTwoGeometriesWithJSTS(polygon1, polygon2){
			    // Instantiate Wicket
			    var wicket = new Wkt.Wkt();

			    wicket.fromObject(polygon1);  // import a Google Polygon
			    var wkt1 = wicket.write();    // read the polygon into a WKT object

			    wicket.fromObject(polygon2);  // repeat, creating a second WKT ojbect
			    var wkt2 = wicket.write();

			    // Instantiate JSTS WKTReader and get two JSTS geometry objects
			    var wktReader = new jsts.io.WKTReader();
			    var geom1 = wktReader.read(wkt1);
			    var geom2 = wktReader.read(wkt2);


			    // In JSTS, "union" is synonymous with "dissolve"
			    var dissolvedGeometry = '', polygonsLength = polygons.length;

			    for(var i = 0; i < polygonsLength; i++) {
			        dissolvedGeometry = geom.union(polygons[i]);
			    }
			    var dissolvedGeometry = geom1.union(geom2);

			    // Instantiate JSTS WKTWriter and get new geometry's WKT
			    var wktWriter = new jsts.io.WKTWriter();
			    var wkt = wktWriter.write(dissolvedGeometry);

			    // Reuse your Wicket object to ingest the new geometry's WKT
			    wicket.read(wkt);

			    // Assemble your new polygon's options, I used object notation
			    var polyOptions = {
			        strokeColor: '#1E90FF',
			        strokeOpacity: 0.8,
			        strokeWeight: 2,
			        fillColor: '#1E90FF',
			        fillOpacity: 0.35    
			    };

			    // Let wicket create a Google Polygon with the options you defined above
			    var newPoly = wicket.toObject(polyOptions);        

			    // Now I'll hide the two original polygons and add the new one.
			    polygon1.setMap(null);
			    polygon2.setMap(null);

			    newPoly.setMap(map);
			}

			var app = (function () {
			    return {
			        features: [],
			        /**
			         * Clears the map contents.
			         */
			        clearMap: function (y) {
			            var i;

			            // Reset the remembered last string (so that we can clear the map,
			            //  paste the same string, and see it again)
			            document.getElementById(y).last = '';

			            for (i in this.features) {
			                if (this.features.hasOwnProperty(i)) {
			                    this.features[i].setMap(null);
			                }
			            }
			            this.features.length = 0;
			        },
			        /**
			         * Clears the current contents of the textarea.
			         */
			        clearText: function (y) {
			            document.getElementById(y).value = '';
			        },
			        /**
			         * Maps the current contents of the textarea.
			         * @return  {Object}    Some sort of geometry object
			         */
			        mapIt: function (y) {
			            var el, obj, wkt;
			           
			            el = document.getElementById(y);
			            wkt = new Wkt.Wkt();

			            if (el.last === el.value) { // Remember the last string
			                return; // Do nothing if the WKT string hasn't changed
			            } else {
			                el.last = el.value;
			            }

			            try { // Catch any malformed WKT strings
			                wkt.read(el.value);
			            } catch (e1) {
			                try {
			                    wkt.read(el.value.replace('\/n', '').replace('\/r', '').replace('\/t', ''));
			                } catch (e2) {
			                    if (e2.name === 'WKTError') {
			                        alert('Wicket could not understand the WKT string you entered. Check that you have parentheses balanced, and try removing tabs and newline characters.');
			                        return;
			                    }
			                }
			            }

			            obj = wkt.toObject(this.gmap.defaults); // Make an object

			            // Add listeners for overlay editing events
			            if (!Wkt.isArray(obj) && wkt.type !== 'point') {
			                // New vertex is inserted
			                google.maps.event.addListener(obj.getPath(), 'insert_at', function (n) {
			                    app.updateText(y);
			                });
			                // Existing vertex is removed (insertion is undone)
			                google.maps.event.addListener(obj.getPath(), 'remove_at', function (n) {
			                    app.updateText(y);
			                });
			                // Existing vertex is moved (set elsewhere)
			                google.maps.event.addListener(obj.getPath(), 'set_at', function (n) {
			                    app.updateText(y);
			                });
			            } else {
			                if (obj.setEditable) {obj.setEditable(false);}
			            }

			            if (Wkt.isArray(obj)) { // Distinguish multigeometries (Arrays) from objects
			                for (i in obj) {
			                    if (obj.hasOwnProperty(i) && !Wkt.isArray(obj[i])) {
			                        obj[i].setMap(this.gmap);
			                    }

			                    if (wkt.type !== 'point') {
			                        // New vertex is inserted
			                        google.maps.event.addListener(obj[i].getPath(), 'insert_at', function (n) {
			                            app.updateTextPart(y);
			                        });
			                        // Existing vertex is removed (insertion is undone)
			                        google.maps.event.addListener(obj[i].getPath(), 'remove_at', function (n) {
			                            app.updateTextPart(y);
			                        });
			                        // Existing vertex is moved (set elsewhere)
			                        google.maps.event.addListener(obj[i].getPath(), 'set_at', function (n) {
			                            app.updateTextPart(y);
			                        });
			                    }
			                }

			                this.features = this.features.concat(obj);
			            } else {
			                obj.setMap(this.gmap); // Add it to the map
			                this.features.push(obj);
			            }

			            // Pan the map to the feature
			            if (obj.getBounds !== undefined && typeof obj.getBounds === 'function') {
			                // For objects that have defined bounds or a way to get them
			                this.gmap.fitBounds(obj.getBounds());
			            } else {
			                if (obj.getPath !== undefined && typeof obj.getPath === 'function') {
			                // For Polygons and Polylines
			                this.gmap.panTo(obj.getPath().getAt(0));
			                } else { // But points (Markers) are different
			                    if (obj.getPosition !== undefined && typeof obj.getPosition === 'function') {
			                        this.gmap.panTo(obj.getPosition());
			                    }
			                }
			            }

			            return obj;
			        },
			        /**
			         * Updates the textarea based on the first available feature.
			         */
			        updateText: function (y) {
			            var wkt = new Wkt.Wkt();
			            wkt.fromObject(this.features[0]);
			            document.getElementById(y).value = wkt.write();

			        },
			        updateTextPart: function (y) {
			            var i, w, v;

			            w = new Wkt.Wkt(this.features[0]);

			            i = 1;
			            while (i < this.features.length) {
			                v = new Wkt.Wkt(this.features[i]);
			                w.merge(v);
			                i += 1;
			            }

			            document.getElementById(y).value = w.write();
			        },
			        /**
			         * Formats the textarea contents for a URL.
			         * @param   checked {Boolean}   The check state of the associated checkbox
			         */
			        urlify: function (checked,y) {
			            var wkt = new Wkt.Wkt();
			            wkt.read(document.getElementById(y).value);
			            wkt.delimiter = (checked) ? '+' : ' ';
			            document.getElementById(y).value = wkt.write();
			            return wkt;
			        },
			        /**
			         * Application entry point.
			         * @return  {<google.maps.Map>} The Google Maps API instance
			         */
			        init: function (x,y) {
			            var gmap;


			            gmap = new google.maps.Map(document.getElementById(x), {
			                center: new google.maps.LatLng(2.060963, 102.561529),
			                defaults: {
			                    icon: 'red_dot.png',
			                    shadow: 'dot_shadow.png',
			                    editable: true,
			                    strokeColor: '#990000',
			                    fillColor: '#EEFFCC',
			                    fillOpacity: 0.6
			                },
			                disableDefaultUI: true,
			                mapTypeControl: true,
			                mapTypeId: google.maps.MapTypeId.ROADMAP,
			                mapTypeControlOptions: {
			                    position: google.maps.ControlPosition.TOP_LEFT,
			                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
			                },
			                panControl: false,
			                streetViewControl: false,
			                zoom: 15,
			                zoomControl: true,
			                zoomControlOptions: {
			                    position: google.maps.ControlPosition.LEFT_TOP,
			                    style: google.maps.ZoomControlStyle.SMALL
			                }
			            });

			            /* search area */           
			            var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));
						google.maps.event.addListener(searchBox, 'places_changed', function(){
							var places = searchBox.getPlaces();
							 // For each place, get the icon, name and location.
							var bounds = new google.maps.LatLngBounds();
							var i, place;

							for(i=0; place = places[i]; i++){
								bounds.extend(place.geometry.location);
								//marker.setPosition(place.geometry.location);
								//console.log(place.geometry.location.lat());
								//console.log(place.geometry.location.lng());
								//updateLatLng( marker.getPosition().lat() , marker.getPosition().lng() );
							}

							gmap.fitBounds(bounds);
							gmap.setZoom(15);
						});
						/* search area */

			            google.maps.event.addListener(gmap, 'tilesloaded', function () {
			                if (!this.loaded) {
			                    this.loaded = true;
			                    // NOTE: We start with a MULTIPOLYGON; these aren't easily deconstructed, so we won't set this object to be editable in this example
			                    document.getElementById('wkt_custom').value = 'POLYGON((102.53671827547032 2.1393298374531513,102.88896742097813 2.1393298374531513,102.88896742097813 1.991110787025244,102.53671827547032 1.991110787025244,102.53671827547032 2.1393298374531513))';
			                    app.clearMap(y);
			                    app.mapIt(y);
			                }
			            });

			            gmap.drawingManager = new google.maps.drawing.DrawingManager({
			                drawingControlOptions: {
			                    position: google.maps.ControlPosition.TOP_CENTER,
			                    drawingModes: [
			                        //google.maps.drawing.OverlayType.MARKER,
			                        //google.maps.drawing.OverlayType.POLYLINE,
			                        google.maps.drawing.OverlayType.POLYGON,
			                        google.maps.drawing.OverlayType.RECTANGLE
			                    ]
			                },
			                markerOptions: gmap.defaults,
			                polygonOptions: gmap.defaults,
			                polylineOptions: gmap.defaults,
			                rectangleOptions: gmap.defaults
			            });
			            gmap.drawingManager.setMap(gmap);

			            google.maps.event.addListener(gmap.drawingManager, 'overlaycomplete', function (event) {
			                var wkt;

			                app.clearText(y);
			                app.clearMap(y);

			                // Set the drawing mode to "pan" (the hand) so users can immediately edit
			                this.setDrawingMode(null);

			                // Polygon drawn
			                if (event.type === google.maps.drawing.OverlayType.POLYGON || event.type === google.maps.drawing.OverlayType.POLYLINE) {
			                    // New vertex is inserted
			                    google.maps.event.addListener(event.overlay.getPath(), 'insert_at', function (n) {
			                        app.updateText(y);
			                    });

			                    // Existing vertex is removed (insertion is undone)
			                    google.maps.event.addListener(event.overlay.getPath(), 'remove_at', function (n) {
			                        app.updateText(y);
			                    });

			                    // Existing vertex is moved (set elsewhere)
			                    google.maps.event.addListener(event.overlay.getPath(), 'set_at', function (n) {
			                        app.updateText(y);
			                    });
			                } else if (event.type === google.maps.drawing.OverlayType.RECTANGLE) { // Rectangle drawn
			                    // Listen for the 'bounds_changed' event and update the geometry
			                    google.maps.event.addListener(event.overlay, 'bounds_changed', function () {
			                        app.updateText(y);
			                    });
			                }

			                app.features.push(event.overlay);
			                wkt = new Wkt.Wkt();
			                wkt.fromObject(event.overlay);
			                console.log(wkt.write());
			                document.getElementById(y).value = wkt.write();
			                });

			            return gmap;
			        }
			    };
			}()); // Execute immediately

		</script>
		<script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/1.6.0/jsts.min.js" type="text/javascript"></script>
		<script src="scripts/wicket.js" type="text/javascript"></script>
		<script src="scripts/wicket-gmap3.js" type="text/javascript"></script>

		<?php
		
	break ;
	
	// all branch list
	case 'all' :
	default :

		// check permission
		if ( !permissionCheck($row_user, 'hr-branch-view') ){
			header('Location: index.php') ;
			exit ;
		}
		
		$search_title = escapeString($_GET['search_title']) ;
		$search_date = ( $_GET['search_date']!= '' ? date('Y-m-d', strtotime($_GET['search_date'])) : '' ) ;

		// query type
		$search_query = '' ;
		
		// search query
		if ($search != ''){
			$search_query .= " AND (branch_name LIKE '%".$search."%')" ;
		}
		if( $search_title != ''){
			$search_query .= " AND branch_name LIKE '%".$search_title."%'" ;
		}
		if ( $search_date != '' ){
		    $search_query .= " AND created_at like '%".$search_date."%' " ;
		}
		
		// form submit
		if ($_POST['hide'] == '1' && $_POST['hide_status'] == 'action'){
			// trash item
			switch($_POST['page_action']){
				case 'trash':
					$mysqli_query = "UPDATE " . branch . " SET
									deleted_at = '".TODAYDATE."'
									WHERE branch_id = " ;
					$trash_page = trashPage('branch', $mysqli, $mysqli_query, $_POST['multiple_trash']) ;
				break;
			}
		}
		
		// pagination
		if (isset($page) && !empty($page)) { $product_page = $page ; } else { $product_page = 1 ; } // next and prev page (5 thing need to change)
		$start_from = ($product_page - 1) * LIMIT ; //end next and prev page
		
		// set search url
		$search_url = 'search='.$search.'&search_title='.$search_title.'&search_date='.$search_date.'&page_mode='.$page_mode ;
		
		// page query
		$mysqli_query = "SELECT * FROM branch
						 WHERE deleted_at IS NULL " . $search_query ;
		$mysqli_page = $mysqli->query($mysqli_query." ORDER BY branch_id LIMIT $start_from, " . LIMIT) ;

		// load pagination
		$page_pagination = nextPrevious($product_page, LIMIT, $search_url, $mysqli_query) ;
		
		// start header here
		include 'requires/page_header.php' ;
		include 'requires/page_top.php' ;
		
		?>
		<!-- Header Ends -->
		<div class="warper container-fluid">   	
		<div class='container' style="background-color: white; border-radius: 10px;">
			<div class="page-header" style="margin: 30px 0px 0px 0px;padding: 0px;">
				<div class="row">
                	<div class="pull-left col">
						<h1><?= $lang['branch'] ?> <small><?= $lang['list'] ?></small></h1>
					</div>
                	<div class="pull-right col">
				<?php if ( permissionCheck($row_user, 'hr-branch-new') ){ ?>
					<a href="setting-branch.php?page_mode=new" class="btn" style="color:white;background-color: #5e5bd0;" target="_blank"><?= $lang['add_new'] ?></a>
				<?php } ?>
					</div>
				</div>
			</div>

		    <div class="panel panel-default" id="basic-table-title">
		        <div class="panel-heading">search</div>
		        <div class="panel-body">
		            <form method="get" class="form-horizontal">
		                <div class="form-group">
		                    <label class="col-sm-2 control-label"><?= $lang['branch'] ?></label>
		                    <div class="col-sm-9">
		                        <input type="text" name="search_title" value="<?= $search_title ?>" class="form-control" />
		                    </div>
		                </div>
	                    <div class="form-group">
		                    <label class="col-sm-2 control-label"><?= $lang['date'] ?></label>
		                    <div class="col-sm-9">
		                        <input class="form-control" name="search_date" type="date" value="<?= $search_date ?>" placeholder="Date Resigned">
		                    </div>
		                </div>
		                <div class="form-group">
		                    <div class="col-sm-11">
		                        <input type="hidden" name="page_mode" value="<?= $page_mode ?>" />
		                        <input type="hidden" name="search" value="<?= $search ?>" />
		                        <button type="submit" class="btn" style="color:white;background-color: #5e5bd0;float:right; margin-top: 5px;width: 100px;"><?= $lang['submit'] ?></button>
		                    </div>
		                </div>
		            </form>
		        </div>
		    </div>

            <form method="post">
                <?php if ( permissionCheck($row_user, 'hr-branch-trash') ){ ?>
	                <!-- trash -->
	                <div class="panel panel-default">
	                    <div class="panel-body">
	                        <select name="page_action" class="form-control selectpicker">
	                            <option value=""><?= $lang['select'] ?></option>
	                            <option value="trash"><?= $lang['move_to_trash'] ?></option>
	                        </select>
	                        <input type="hidden" name="hide" value="1" />
	                        <input type="hidden" name="hide_status" value="action" />
	                        <input type="submit" class="btn" style="color:white; background-color:#5e5bd0; width:100px;" value="<?= $lang['submit'] ?>" />
	                    </div>
	                </div>
	                <!-- end trash -->
                <?php } ?>
                <div class="panel panel-default">
                    <div class="panel-heading">listing</div>
                    <div class="panel-body">
						<table cellpadding="0" cellspacing="0" border="0" class="responsive table table-striped table-bordered" id="basic-datatable">
							<thead>
								<tr>
									<th><?= $lang['title'] ?></th>
									<th><?= $lang['date'] ?></th>
                                    <th width="50"><?= $lang['trash'] ?></th>
								</tr>
							</thead>
							<tbody>
								<?php
								if ($mysqli_page->num_rows > 0){
									while ($row_page = $mysqli_page->fetch_array(MYSQLI_ASSOC)){

										// default variable
										$id = $row_page['branch_id'] ;
										$title = dataFilter($row_page['branch_name']) ;
		
										echo '
										 <tr class="odd gradeX">
											<td><a href="setting-branch.php?page_mode=edit&page='.$id.'">'.$title.'</a></td>
											<td>'.resetDateFormat($row_page['created_at']).'</td>
											<td>
												<div class="checkbox multiple_trash">
													<input type="checkbox" name="multiple_trash['.$id.']" class="trash_button" value="1">
													<label for="checkbox1"></label>
												</div>
											</td>
										</tr>';
									}
								}else{
									echo '
									<tr class="odd gradeX">
										<td class="border_none">'.$lang['no_data'].'</td>
										<td class="border_none"></td>
										<td class="border_none"></td>
									</tr>' ;
								}
								?>
							</tbody>
						</table>
						<?= $page_pagination['page_pagination'] ?>
                    </div>
                </div>
			</form>
		</div>
		</div>
		<?php
	break ;
}
// footer
include 'requires/page_footer.php' ;
?>