<style>
    *{
        box-sizing:border-box;
        font-family: Arial, Helvetica, sans-serif;
    }

    body{
        background:#eef2f7;
        margin:0;
        padding:15px;
    }

    .container{
        max-width:700px;
        margin:auto;
        background:#ffffff;
        border-radius:18px;
        padding:20px;
        box-shadow:0 4px 15px rgba(0,0,0,0.08);
    }

    .nav-table{
        width:100%;
        border-collapse:collapse;
        margin-bottom:25px;
    }

    .nav-table td{
        padding:5px;
    }

    .nav-btn{
        width:100%;
        padding:14px;
        border:none;
        border-radius:12px;
        background:linear-gradient(135deg,#4b79a1,#283e51);
        color:white;
        font-size:15px;
        font-weight:bold;
        cursor:pointer;
        transition:0.3s;
    }

    .nav-btn:hover{
        transform:translateY(-2px);
        opacity:0.92;
    }

    .judul{
        text-align:center;
        margin-bottom:20px;
    }

    .judul h1{
        margin:0;
        color:#283e51;
        font-size:32px;
        letter-spacing:2px;
    }

    .judul h2{
        margin:5px 0 0;
        color:#4b79a1;
        font-weight:normal;
        letter-spacing:3px;
    }

    .check-wrapper{
        text-align:center;
        margin-bottom:25px;
    }

    .check-wrapper input[type="checkbox"]{
        width:28px;
        height:28px;
        cursor:pointer;
    }

    .form-box{
        background:#f8fafc;
        border-radius:15px;
        padding:20px;
        border:1px solid #dbe3ea;
    }

    .form-table{
        width:100%;
    }

    .form-table td{
        padding:8px;
    }

    textarea{
        width:100%;
        min-height:140px;
        border:1px solid #cfd8e3;
        border-radius:12px;
        padding:15px;
        resize:vertical;
        font-size:15px;
        outline:none;
        transition:0.3s;
        background:white;
    }

    textarea:focus,
    input[type="text"]:focus{
        border-color:#4b79a1;
        box-shadow:0 0 5px rgba(75,121,161,0.3);
    }

    input[type="text"]{
        width:100%;
        padding:12px;
        border:1px solid #cfd8e3;
        border-radius:10px;
        font-size:14px;
        outline:none;
    }

    .submit-btn{
        width:100%;
        padding:12px;
        border:none;
        border-radius:10px;
        background:linear-gradient(135deg,#11998e,#38ef7d);
        color:white;
        font-size:15px;
        font-weight:bold;
        cursor:pointer;
        transition:0.3s;
    }

    .submit-btn:hover{
        transform:translateY(-2px);
        opacity:0.95;
    }

    @media(max-width:600px){

        .nav-table tr{
            display:flex;
            flex-direction:column;
        }

        .judul h1{
            font-size:26px;
        }

        .judul h2{
            font-size:18px;
        }

        .form-table tr{
            display:flex;
            flex-direction:column;
        }
    }
</style>

<div class="container">

    <table class="nav-table">
        <tr>
            <td>
                <a href="../administrasi.php" title="Navigasi">
                    <button class="nav-btn">PUSAT NAVIGASI</button>
                </a>
            </td>

            <td>
                <a href="../index.php" title="Halaman Awal">
                    <button class="nav-btn">HOME</button>
                </a>
            </td>
        </tr>
    </table>

    <div class="judul">
        <h1>CATATAN</h1>
        <h2>HARIAN</h2>
    </div>

    <div class="check-wrapper">
        <?php
            if($userini_id == "3" && $check =="0"){
        ?>
            <input type="checkbox" id="checkIndex" name="checklist[]" value="">
        <?php
            }

            if($userini_id == "3" && $check =="1"){
        ?>
            <input type="checkbox" id="checkIndex" name="checklist[]" value="" checked>
        <?php
            }
        ?>
    </div>

    <script>
        document.getElementById("checkIndex").addEventListener("change", function() {

            if (this.checked) {
                window.location.href = "index.php?check=1";
            } else {
                window.location.href = "index.php?check=0";
            }

        });
    </script>

    <form method="post" action="">
        
        <div class="form-box">

            <table class="form-table">

                <tr>
                    <td colspan="2">
                        <textarea 
                            name="note" 
                            placeholder="Tulis catatan harian Anda di sini..."
                        ></textarea>
                    </td>
                </tr>

                <tr>
                    <td>
                        <input 
                            type="text" 
                            name="TglJam"
                            autocomplete="off"
                            value="<?php echo date("Y-m-d H:i:s")?>"
                        />
                    </td>

                    <td width="180">
                        <input 
                            type="submit" 
                            name="submit" 
                            value="SIMPAN CATATAN"
                            class="submit-btn"
                        >
                    </td>
                </tr>

            </table>

        </div>

    </form>

</div>