One Hat Cyber Team

View File Name : evaluationform.php

<?php
session_start();
error_reporting(0);
include('includes/config.php');
if (strlen($_SESSION['alogin']) == 0) {
    header('location:index.php');
} else {
?>
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
    <title>Employee Evaluation Form</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="UTF-8">
    <meta name="description" content="Employee Evaluation Form">
    <meta name="author" content="Steelcoders">

    <!-- Bootstrap 5.1.3 Dark Theme -->
    <link rel="stylesheet" href="includes/assets/bootstrap.min.css">
    <!-- DataTables -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.3.0/css/responsive.bootstrap5.min.css"/>
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;600&display=swap" rel="stylesheet">

    <style>
        :root {
            --bg-base:       #0d0f14;
            --bg-card:       #151820;
            --bg-card-inner: #1c2030;
            --bg-input:      #1a1d27;
            --border-color:  #2a2f42;
            --accent:        #3b82f6;
            --accent-glow:   rgba(59,130,246,.25);
            --accent-2:      #22d3ee;
            --success:       #10b981;
            --warning:       #f59e0b;
            --danger:        #ef4444;
            --text-primary:  #e2e8f0;
            --text-muted:    #64748b;
            --text-label:    #94a3b8;
            --cat-a:         #3b82f6;
            --cat-b:         #8b5cf6;
            --cat-c:         #10b981;
            --cat-d:         #f59e0b;
            --cat-e:         #ef4444;
        }

        * { box-sizing: border-box; }

        body {
            background-color: var(--bg-base);
            color: var(--text-primary);
            font-family: 'Source Sans 3', sans-serif;
            font-size: 14px;
        }

        h5, h6, .card-header, label {
            font-family: 'Rajdhani', sans-serif;
            letter-spacing: .03em;
        }

        /* ── Cards ── */
        .card {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 10px;
        }
        .card-header {
            background-color: var(--bg-card-inner) !important;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-primary) !important;
            font-size: .95rem;
            font-weight: 600;
            padding: .65rem 1rem;
            border-radius: 10px 10px 0 0 !important;
        }
        .card-header.accent-a { border-left: 3px solid var(--cat-a); }
        .card-header.accent-b { border-left: 3px solid var(--cat-b); }
        .card-header.accent-c { border-left: 3px solid var(--cat-c); }
        .card-header.accent-d { border-left: 3px solid var(--cat-d); }
        .card-header.accent-e { border-left: 3px solid var(--cat-e); }

        /* ── Floating inputs ── */
        .form-floating > .form-control,
        .form-floating > .form-select {
            background-color: var(--bg-input) !important;
            border: 1px solid var(--border-color);
            color: var(--text-primary) !important;
            border-radius: 7px;
            transition: border-color .2s, box-shadow .2s;
        }
        .form-floating > .form-control:focus,
        .form-floating > .form-select:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-glow);
            outline: none;
        }
        .form-floating > label {
            color: var(--text-label) !important;
            font-family: 'Rajdhani', sans-serif;
            font-weight: 500;
            font-size: .88rem;
        }
        .form-floating > .form-control:focus ~ label,
        .form-floating > .form-control:not(:placeholder-shown) ~ label,
        .form-floating > .form-select ~ label {
            color: var(--accent) !important;
        }
        .form-control[readonly] {
            background-color: #12151e !important;
            color: var(--text-muted) !important;
            cursor: not-allowed;
        }
        select option {
            background-color: var(--bg-card-inner);
            color: var(--text-primary);
        }

        /* ── Score input ── */
        .score-input {
            background-color: var(--bg-input) !important;
            border: 1px solid var(--border-color);
            color: var(--text-primary) !important;
            border-radius: 7px;
            text-align: center;
            font-family: 'Rajdhani', sans-serif;
            font-weight: 700;
            font-size: 1.1rem;
            transition: border-color .2s, box-shadow .2s;
        }
        .score-input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-glow);
            outline: none;
        }

        /* ── Category list items ── */
        .cat-list { list-style: none; padding: 0; margin: 0; }
        .cat-list li {
            padding: .45rem .75rem;
            border-bottom: 1px solid var(--border-color);
            font-size: .83rem;
            color: var(--text-label);
            line-height: 1.4;
        }
        .cat-list li:last-child { border-bottom: none; }
        .cat-list li.cat-title {
            font-family: 'Rajdhani', sans-serif;
            font-weight: 700;
            font-size: .95rem;
            color: var(--text-primary);
            background-color: rgba(255,255,255,.04);
        }

        /* ── Employee card ── */
        .emp-card {
            background-color: var(--bg-card-inner);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            overflow: hidden;
            transition: transform .15s, box-shadow .15s;
        }
        .emp-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 24px rgba(0,0,0,.4);
        }
        .emp-card .emp-img {
            width: 100%;
            aspect-ratio: 1/1;
            object-fit: cover;
        }
        .emp-card .emp-info {
            padding: .6rem .75rem;
        }
        .emp-card .emp-name {
            font-family: 'Rajdhani', sans-serif;
            font-weight: 700;
            font-size: .95rem;
            margin-bottom: .15rem;
            color: var(--text-primary);
        }
        .emp-card .emp-badge {
            font-size: .72rem;
            padding: .2rem .5rem;
            border-radius: 4px;
            background-color: rgba(59,130,246,.15);
            color: var(--accent);
            border: 1px solid rgba(59,130,246,.3);
            display: inline-block;
            margin-bottom: .3rem;
        }
        .emp-card .emp-meta {
            font-size: .78rem;
            color: var(--text-muted);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .emp-card .score-row {
            padding: .5rem .75rem;
            border-top: 1px solid var(--border-color);
            background-color: rgba(0,0,0,.2);
        }

        /* ── Buttons ── */
        .btn-eval-generate {
            background: linear-gradient(135deg, #1d4ed8, #2563eb);
            border: none;
            color: #fff;
            font-family: 'Rajdhani', sans-serif;
            font-weight: 700;
            font-size: .95rem;
            letter-spacing: .04em;
            border-radius: 7px;
            padding: .55rem 1.2rem;
            transition: opacity .15s, transform .1s;
        }
        .btn-eval-generate:hover { opacity: .9; transform: translateY(-1px); color: #fff; }

        .btn-eval-submit {
            background: linear-gradient(135deg, #0f766e, #0d9488);
            border: none;
            color: #fff;
            font-family: 'Rajdhani', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            letter-spacing: .05em;
            border-radius: 7px;
            padding: .6rem 1.5rem;
            transition: opacity .15s, transform .1s;
        }
        .btn-eval-submit:hover { opacity: .9; transform: translateY(-1px); color: #fff; }

        /* ── Period filter bar ── */
        .filter-bar {
            background-color: var(--bg-card-inner);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 1rem;
        }

        /* ── Category legend panel ── */
        .legend-panel {
            background-color: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            overflow: hidden;
        }
        .legend-panel-header {
            padding: .55rem 1rem;
            font-family: 'Rajdhani', sans-serif;
            font-weight: 700;
            font-size: .9rem;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: var(--text-muted);
            background-color: var(--bg-card-inner);
            border-bottom: 1px solid var(--border-color);
        }
        .cat-badge {
            display: inline-block;
            width: 10px; height: 10px;
            border-radius: 50%;
            margin-right: 6px;
        }

        /* ── Section dividers ── */
        .section-label {
            font-family: 'Rajdhani', sans-serif;
            font-weight: 700;
            font-size: .78rem;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin: 1.5rem 0 .75rem;
            display: flex;
            align-items: center;
            gap: .5rem;
        }
        .section-label::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border-color);
        }

        /* ── Alert overrides ── */
        .alert-success {
            background-color: rgba(16,185,129,.12);
            border-color: rgba(16,185,129,.3);
            color: #6ee7b7;
        }
        .alert-danger {
            background-color: rgba(239,68,68,.12);
            border-color: rgba(239,68,68,.3);
            color: #fca5a5;
        }

        /* ── Page header ── */
        .page-header {
            padding: 1.25rem 0 .75rem;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 1.5rem;
        }
        .page-header h4 {
            font-family: 'Rajdhani', sans-serif;
            font-weight: 700;
            font-size: 1.4rem;
            margin: 0;
            color: var(--text-primary);
        }
        .page-header .breadcrumb { margin: 0; font-size: .8rem; }
        .page-header .breadcrumb-item { color: var(--text-muted); }
        .page-header .breadcrumb-item.active { color: var(--accent); }

        /* ── Spinner ── */
        .spinner-border-sm { width: .85rem; height: .85rem; }
    </style>
</head>
<?php include('header.php'); ?>
<body>

<div class="container-fluid" style="padding-top: 80px; padding-bottom: 3rem;">
    <div class="row justify-content-center">
        <div class="col-xl-11 col-12">

            <!-- Page Header -->
            <div class="page-header">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <div>
                        <h4><img src="https://img.icons8.com/fluency/28/test.png" alt="eval" class="me-2">Employee Performance Evaluation</h4>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">HR Module</li>
                                <li class="breadcrumb-item active">Evaluation Form</li>
                            </ol>
                        </nav>
                    </div>
                    <a href="evaluationformlist.php" class="btn btn-sm btn-outline-secondary">
                        <img src="https://img.icons8.com/fluency/16/list.png" alt="list" class="me-1">View List
                    </a>
                </div>
            </div>

            <!-- Category Legend -->
            <div class="row g-3 mb-4">
                <?php
                $categories = [
                    ['id'=>'a','color'=>'var(--cat-a)','title'=>'Category A','label'=>'Kalidad ng Trabaho','items'=>['May sapat na kaalaman sa trabaho.','Epektibong natatapos ang trabaho sa oras.','Nagpapakita ng magandang serbisyo sa kliyente.','Nagtatrabaho nang di binabantayan nang husto.']],
                    ['id'=>'b','color'=>'var(--cat-b)','title'=>'Category B','label'=>'Pakikitungo sa katrabaho','items'=>['Ginagalang ang mga kasamahan at nakakataas.','Marunong makinig at madaling lapitan.','Team player at marunong makibagay.']],
                    ['id'=>'c','color'=>'var(--cat-c)','title'=>'Category C','label'=>'Pag-uugali sa trabaho','items'=>['Pumapasok sa tamang oras.','Kusang-loob na ginagawa ang trabaho.','Ganado at masigla sa trabaho.','Nakakapaghayag ng ideya at saloobin.']],
                    ['id'=>'d','color'=>'var(--cat-d)','title'=>'Category D','label'=>'Iba pang katangian','items'=>['Mapanuri at nais pang matuto.','Naagapan ang mga problema.','Mapagkakatiwalaan at maasahan.']],
                ];
                foreach ($categories as $cat): ?>
                <div class="col-md-3 col-sm-6">
                    <div class="legend-panel h-100">
                        <div class="legend-panel-header" style="border-left: 3px solid <?= $cat['color'] ?>;">
                            <span class="cat-badge" style="background:<?= $cat['color'] ?>"></span><?= $cat['title'] ?>
                        </div>
                        <ul class="cat-list p-2">
                            <li class="cat-title"><?= $cat['label'] ?></li>
                            <?php foreach ($cat['items'] as $item): ?>
                            <li>• <?= $item ?></li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>

            <!-- Filter / Generate Form -->
            <div class="card mb-4">
                <div class="card-header">
                    <img src="https://img.icons8.com/fluency/20/filter.png" alt="filter" class="me-2">Generate Employee List
                </div>
                <div class="card-body">
                    <?php
                    // ── POST handler ──────────────────────────────────────────────────
                    try {
                        if ($_SERVER["REQUEST_METHOD"] === "POST" && isset($_POST['submitevaluation'])) {
                            include('evaluationform_php/insert_evaluation.php');
                        }
                    } catch (PDOException $e) {
                        echo "<div class='alert alert-danger alert-dismissible'>
                                <button type='button' class='btn-close' data-bs-dismiss='alert'></button>
                                <strong>Error:</strong> " . $e->getMessage() . " — contact HR Administrator
                              </div>";
                    }
                    ?>

                    <form method="POST" id="generateForm">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <div class="form-floating">
                                    <select onChange="getdistrict(this.value);" name="company" id="company" class="form-select" required>
                                        <option value="">Select main…</option>
                                        <?php
                                        $sql = "SELECT * FROM tblcompany";
                                        $stmt = $dbh->query($sql);
                                        $stmt->setFetchMode(PDO::FETCH_ASSOC);
                                        while ($row = $stmt->fetch()) { ?>
                                        <option value="<?= $row['StCode'] ?>"><?= $row['CompanyName'] ?></option>
                                        <?php } ?>
                                    </select>
                                    <label for="company">Main Company</label>
                                </div>
                                <input type="hidden" id="comp" name="comp">
                            </div>
                            <div class="col-md-3">
                                <div class="form-floating">
                                    <select onChange="getdepartment(this.value);" name="comp_area" id="comp_area" class="form-select">
                                        <option value="">Select…</option>
                                    </select>
                                    <label for="comp_area">Company / Area</label>
                                </div>
                                <input type="hidden" id="area" name="area">
                            </div>
                            <div class="col-md-3">
                                <div class="form-floating">
                                    <select onChange="getposition(this.value);" name="department" id="department" class="form-select">
                                        <option value="">Select…</option>
                                    </select>
                                    <label for="department">Department</label>
                                </div>
                                <input type="hidden" id="dept" name="dept">
                            </div>
                            <div class="col-md-2">
                                <div class="form-floating">
                                    <select name="poslevel" id="poslevel" class="form-select">
                                        <option value="">Select…</option>
                                    </select>
                                    <label for="poslevel">Position Level</label>
                                </div>
                                <input type="hidden" id="position" name="position">
                            </div>
                            <div class="col-md-1 d-flex align-items-center">
                                <button type="submit" name="generate" id="generate" class="btn-eval-generate w-100">
                                    <img src="https://img.icons8.com/fluency/18/search.png" alt="search" class="me-1">Go
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Employee Cards + Submit Form -->
            <form method="POST" action="evaluationform.php" id="evaluationForm">
                <div class="row g-3" id="employeeCards">
                <?php
                if (isset($_POST['generate'])) {
                    include('evaluationform_ext/evaluationform_extension.php');
                }
                ?>
                </div>

                <!-- Period + Submit -->
                <?php if (isset($_POST['generate']) && isset($hasResults) && $hasResults): ?>
                <div class="section-label mt-4">Evaluation Period</div>
                <div class="filter-bar">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-4">
                            <div class="form-floating">
                                <input type="date" class="form-control" id="fromdate" name="fromdate" placeholder="From" required>
                                <label for="fromdate">Period Covered — From</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-floating">
                                <input type="date" class="form-control" id="todate" name="todate" placeholder="To" required>
                                <label for="todate">Period Covered — To</label>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <button type="submit" name="submitevaluation" id="submitevaluation" class="btn-eval-submit w-100">
                                <img src="https://img.icons8.com/fluency/20/test.png" alt="submit" class="me-2">Submit Evaluation
                            </button>
                        </div>
                    </div>
                </div>
                <?php endif; ?>
            </form>

        </div>
    </div>
</div>

<!-- JS Libraries -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.3.0/js/responsive.bootstrap5.js"></script>

<!-- Evaluation-specific JS -->
<script src="evaluationform_js/cascading_dropdowns.js"></script>
<script src="evaluationform_js/period_sync.js"></script>
<script src="evaluationform_js/submit_evaluation.js"></script>

</body>
</html>
<?php } ?>