Mini Kabibi Habibi
| Current Path : C:/xampp/htdocs/cid/fts/SDO/ |
|
|
| Current File : C:/xampp/htdocs/cid/fts/SDO/manage_service_record.php |
<?php
@include '../database.php';
include('header.php');
include('script.php');
include('conn.php');
?>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SDO Batangas City Profiling System</title>
<meta name="description" content="Ela Admin - HTML5 Admin Template">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.2.0/css/flag-icon.min.css">
<link rel="stylesheet" href="assets/css/cs-skin-elastic.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> -->
<link href="https://cdn.jsdelivr.net/npm/chartist@0.11.0/dist/chartist.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/jqvmap@1.5.1/dist/jqvmap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/weathericons@2.1.0/css/weather-icons.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@3.9.0/dist/fullcalendar.min.css" rel="stylesheet" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<style>
}
#weatherWidget .currentDesc {
color: #ffffff!important;
}
.traffic-chart {
min-height: 335px;
}
#flotPie1 {
height: 150px;
}
#flotPie1 td {
padding:3px;
}
#flotPie1 table {
top: 20px!important;
right: -10px!important;
}
.chart-container {
display: table;
min-width: 270px ;
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
}
#flotLine5 {
height: 105px;
}
#flotBarChart {
height: 150px;
}
#cellPaiChart{
height: 160px;
}
</style>
<section class="content">
<div class="card mt-4">
<div class="card-header">
<h4>ENCODE SERVICE RECORD
<a href="javascript:void(0)" class="add-more-form float-end btn btn-primary">ADD MORE</a>
</h4>
</div>
<div class="card-body">
<form action="add_service_record.php" method="POST">
<div class="main-form mt-3 border-bottom">
<div class="row"> <div class="col-md-4">
<div class="form-group mb-2">
<label for="">Username</label>
<input type="text" name="username[]" class="form-control" required placeholder="Enter Username">
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-2">
<label for="">Start Date</label>
<input type="text" name="start_date[]" class="form-control" required placeholder="From">
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-2">
<label for="">End Date</label>
<input type="text" name="end_date[]" class="form-control" required placeholder="To">
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-2">
<label for="">Designation</label>
<input type="text" name="designation[]" class="form-control" required placeholder="">
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-2">
<label for="">Status</label>
<input type="text" name="status[]" class="form-control" required placeholder="">
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-2">
<label for="">Salary</label>
<input type="text" name="salary[]" class="form-control" required placeholder="Annual Salary">
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-2">
<label for="">Station/place of Assignment</label>
<input type="text" name="station[]" class="form-control" required placeholder="">
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-2">
<label for="">Div. Branch</label>
<input type="text" name="branch[]" class="form-control" required placeholder="">
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-2">
<label for="">LV ABS w/o Pay</label>
<input type="text" name="leaves[]" class="form-control" placeholder="">
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-2">
<label for="">Separation Date</label>
<input type="text" name="separation_date[]" class="form-control" placeholder="">
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-2">
<label for="">Separation Cause</label>
<input type="text" name="separation_cause[]" class="form-control" placeholder="">
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-2">
<label for="">Remarks</label>
<input type="text" name="remarks[]" class="form-control" placeholder="">
</div>
</div>
</div>
</div>
<div class="paste-new-forms"></div>
<button type="submit" name="save_multiple_data" class="btn btn-primary">Save Multiple Data</button>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function () {
$(document).on('click', '.remove-btn', function () {
$(this).closest('.main-form').remove();
});
$(document).on('click', '.add-more-form', function () {
$('.paste-new-forms').append('<div class="main-form mt-3 border-bottom">\
<div class="row"> <div class="col-md-4">\
<div class="form-group mb-2">\
<label for="">Username</label>\
<input type="text" name="username[]" class="form-control" required placeholder="Enter Username">\
</div>\
</div>\
<div class="col-md-4">\
<div class="form-group mb-2">\
<label for="">Start Date</label>\
<input type="text" name="start_date[]" class="form-control" required placeholder="From">\
</div>\
</div>\
<div class="col-md-4">\
<div class="form-group mb-2">\
<label for="">End Date</label>\
<input type="text" name="end_date[]" class="form-control" required placeholder="To">\
</div>\
</div>\
<div class="col-md-4">\
<div class="form-group mb-2">\
<label for="">Designation</label>\
<input type="text" name="designation[]" class="form-control" required placeholder="">\
</div>\
</div>\
<div class="col-md-4">\
<div class="form-group mb-2">\
<label for="">Status</label>\
<input type="text" name="status[]" class="form-control" required placeholder=" ">\
</div>\
</div>\
<div class="col-md-4">\
<div class="form-group mb-2">\
<label for="">Salary</label>\
<input type="text" name="salary[]" class="form-control" required placeholder="Annual Salary">\
</div>\
</div>\
<div class="col-md-4">\
<div class="form-group mb-2">\
<label for="">Station/place of Assignment</label>\
<input type="text" name="station[]" class="form-control" required placeholder="">\
</div>\
</div>\
<div class="col-md-4">\
<div class="form-group mb-2">\
<label for="">Div. Branch</label>\
<input type="text" name="branch[]" class="form-control" required placeholder="">\
</div>\
</div>\
<div class="col-md-4">\
<div class="form-group mb-2">\
<label for="">LV ABS w/o Pay</label>\
<input type="text" name="leaves[]" class="form-control" required placeholder="">\
</div>\
</div>\
<div class="col-md-4">\
<div class="form-group mb-2">\
<label for="">Separation Date</label>\
<input type="text" name="separation_date[]" class="form-control" placeholder="">\
</div>\
</div>\
<div class="col-md-4">\
<div class="form-group mb-2">\
<label for="">Separation Cause</label>\
<input type="text" name="separation_cause[]" class="form-control" placeholder="">\
</div>\
</div>\
<div class="col-md-4">\
<div class="form-group mb-2">\
<label for="">Remarks</label>\
<input type="text" name="remarks[]" class="form-control" placeholder="">\
</div>\
</div>\
<div class="col-md-4">\
<div class="form-group mb-2">\
<br>\
<button type="button" class="remove-btn btn btn-danger">Remove</button>\
</div>\
</div>\
</div>\
</div>');
});
});
</script>
<script>
function printDiv() {
//Get the HTML of div
var divElements = document.getElementById("print").innerHTML;
//Get the HTML of whole page
var oldPage = document.body.innerHTML;
//Reset the page's HTML with div's HTML only
document.body.innerHTML = "<table></table>" + divElements;
//Print Page
window.print();
//Restore orignal HTML
document.body.innerHTML = oldPage;
}
</script>
<script src="plugins/js/jquery-1.js"></script>
<script src="plugins/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
<?php
include("script.php");
?>