<?php
//1.munculkan data yang akan kita edit
//tangkap id users yang akan kita edit
?>

<!DOCTYPE html>
<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>Tambah Data Pengguna Admin</title>


    <style>

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
        }


        body {
            background-color: #f4f6f9;
            padding: 20px;
        }


        /* Container utama */
        .card {
            background-color: #ffffff;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            max-width: 900px;
            margin: 0 auto;
            overflow: hidden;
        }


        /* Header */
        .card-header {
            background-color: #17a2b8;
            color: white;
            padding: 12px 20px;
            font-size: 14px;
            font-weight: bold;
        }


        .card-body {
            padding: 25px;
        }


        /* Layout Form */
        .form-group {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 15px;
        }


        .form-group label {
            width: 180px;
            font-weight: bold;
            font-size: 13px;
            color: #333;
        }


        /* Input */
        .form-group input[type="text"],
        .form-group input[type="number"],
        .form-group input[type="email"],
        .form-group input[type="password"],
        .form-group textarea {

            flex: 1;

            padding: 8px 12px;

            border: 1px solid #dcdcdc;

            border-radius: 3px;

            font-size: 13px;

            color: #495057;

            outline: none;
        }


        .form-group input:focus,
        .form-group textarea:focus {

            border-color: #17a2b8;
        }


        /* ID Admin */
        .input-readonly {

            background-color: #e9ecef;

            color: #6c757d;
        }


        .form-group textarea {

            resize: vertical;
        }


        /* Radio Button */
        .radio-group {

            display: flex;

            gap: 15px;

            font-size: 13px;
        }


        .radio-group label {

            width: auto;

            font-weight: normal;

            cursor: pointer;
        }


        .radio-group input {

            margin-right: 5px;
        }


        /* File Upload */
        .file-upload-wrapper {

            flex: 1;

            display: flex;

            gap: 10px;
        }


        .file-input-container {

            flex: 1;

            border: 1px solid #dcdcdc;

            border-radius: 3px;

            padding: 4px;

            background-color: #fff;
        }


        .file-input-container input[type="file"] {

            font-size: 12px;

            width: 100%;
        }


        .btn-upload {

            background-color: #e9ecef;

            border: 1px solid #ced4da;

            color: #495057;

            padding: 6px 15px;

            border-radius: 3px;

            cursor: pointer;

            font-size: 13px;
        }


        .btn-upload:hover {

            background-color: #dae0e5;
        }


        .help-text {

            width: 100%;

            margin-left: 180px;

            margin-top: 5px;

            font-size: 11px;

            color: #6c757d;
        }


        /* Tombol */
        .btn-group {

            margin-left: 180px;

            display: flex;

            gap: 8px;

            margin-top: 10px;
        }


        .btn {

            padding: 8px 16px;

            border: none;

            border-radius: 3px;

            color: white;

            font-weight: bold;

            font-size: 13px;

            cursor: pointer;
        }


        .btn-tambah {

            background-color: #17a2b8;
        }


        .btn-tambah:hover {

            background-color: #138496;
        }


        .btn-hapus {

            background-color: #dc3545;
        }


        .btn-hapus:hover {

            background-color: #bd2130;
        }


        .btn-cancel {

            background-color: #ffc107;

            color: #212529;
        }


        .btn-cancel:hover {

            background-color: #e0a800;
        }


        /* Responsif */
        @media (max-width: 600px) {

            .form-group {

                flex-direction: column;

                align-items: flex-start;
            }


            .form-group label {

                width: 100%;

                margin-bottom: 5px;
            }


            .btn-group,
            .help-text {

                margin-left: 0;
            }


            .file-upload-wrapper {

                width: 100%;
            }
        }

    </style>

</head>


<body>


    <div class="card">


        <div class="card-header">

            Tambah Data Pengguna Admin

        </div>


        <div class="card-body">


            <form
                action=""
                method="POST"
                enctype="multipart/form-data"
            >


                <!-- ID ADMIN -->

                <div class="form-group">

                    <label for="id-admin">
                        ID Admin
                    </label>

                    <input
                        type="text"
                        id="id-admin"
                        value="Otomatis"
                        readonly
                        class="input-readonly"
                    >

                </div>


                <!-- ID USER -->

                <div class="form-group">

                    <label for="id-user">
                        ID User
                    </label>

                    <input
                        type="text"
                        id="id-user"
                        value="Otomatis dibuat sistem"
                        readonly
                        class="input-readonly"
                    >

                </div>


                <!-- NAMA ADMIN -->

                <div class="form-group">

                    <label for="nama-admin">
                        Nama Admin
                    </label>

                    <input
                        type="text"
                        id="nama-admin"
                        name="nama_admin"
                        placeholder="Nama Admin"
                        required
                    >

                </div>


                <!-- ALAMAT -->

                <div class="form-group">

                    <label for="alamat-admin">
                        Alamat Admin
                    </label>

                    <textarea
                        id="alamat-admin"
                        name="alamat_admin"
                        placeholder="Alamat Admin"
                        rows="3"
                        required
                    ></textarea>

                </div>


                <!-- TELEPON -->

                <div class="form-group">

                    <label for="nomor-telepon">
                        Nomor Telepon
                    </label>

                    <input
                        type="text"
                        id="nomor-telepon"
                        name="telepon_admin"
                        placeholder="Nomor Telepon Admin"
                        required
                    >

                </div>


                <!-- JENIS KELAMIN -->

                <div class="form-group">

                    <label>
                        Jenis Kelamin
                    </label>

                    <div class="radio-group">

                        <label>
                            <input
                                type="radio"
                                name="jenis_kelamin"
                                value="L"
                                checked
                            >
                            Laki-laki
                        </label>


                        <label>
                            <input
                                type="radio"
                                name="jenis_kelamin"
                                value="P"
                            >
                            Perempuan
                        </label>

                    </div>

                </div>


                <!-- EMAIL -->

                <div class="form-group">

                    <label for="email">
                        Email
                    </label>

                    <input
                        type="email"
                        id="email"
                        name="email"
                        placeholder="Email"
                        required
                    >

                </div>


                <!-- PASSWORD -->

                <div class="form-group">

                    <label for="password">
                        Password
                    </label>

                    <input
                        type="password"
                        id="password"
                        name="password"
                        placeholder="Password"
                        required
                    >

                </div>


                <!-- CONFIRM PASSWORD -->

                <div class="form-group">

                    <label for="password2">
                        Confirm Password
                    </label>

                    <input
                        type="password"
                        id="password2"
                        name="password2"
                        placeholder="Confirm Password"
                        required
                    >

                </div>


                <!-- FOTO -->

                <div class="form-group">

                    <label for="photo-admin">
                        Photo Admin
                    </label>


                    <div class="file-upload-wrapper">

                        <div class="file-input-container">

                            <input
                                type="file"
                                id="photo-admin"
                                name="photo_admin"
                                accept=".jpg,.jpeg,.png,.bmp"
                            >

                        </div>


                        <button
                            type="button"
                            class="btn-upload"
                            onclick="document.getElementById('photo-admin').click();"
                        >
                            Upload
                        </button>

                    </div>


                    <small class="help-text">

                        ℹ Foto tidak wajib diupload.
                        Format: JPG, JPEG, PNG, BMP.
                        Maksimal 1MB.

                    </small>

                </div>


                <!-- BUTTON -->

                <div class="form-group">

                    <div class="btn-group">

                        <button
                            type="submit"
                            class="btn btn-tambah"
                        >
                            Tambah
                        </button>


                        <button
                            type="reset"
                            class="btn btn-hapus"
                        >
                            Hapus
                        </button>


                        <button
                            type="button"
                            class="btn btn-cancel"
                            onclick="window.location.href='admin.php';"
                        >
                            Cancel
                        </button>

                    </div>

                </div>


            </form>

        </div>

    </div>


</body>

</html>
```
