@extends('layouts.app')
@section('title', 'Tambah Pengguna')
@section('content')
{{-- @include('layouts.sidebar') --}}

<div style="margin-left:261px; margin-top:107px; min-height:calc(100vh - 107px); background:#F4FFFF; padding:32px 40px 40px 40px;">
    <div style="max-width:1200px; margin:0;">
        <div style="background:#fff; border-radius:16px; padding:32px 40px 40px 40px; box-shadow:0 4px 16px rgba(0,0,0,0.08);">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:32px;">
                <h2 style="font-family:'Poppins',sans-serif; font-size:2rem; font-weight:600; color:#222; margin:0;">Tambah Pengguna</h2>
                @include('layouts.date-clock')
            </div>
            <div style="display:flex; flex-direction:column; align-items:center;">
                <div style="position:relative; margin-bottom:32px; width:120px; height:120px; border-radius:50%; object-fit:cover; background: #0B6477;">
                    <img src="{{ asset('images/icon/user.svg') }}" alt="" style="width:60px; height:60px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">
                    <a href="#" style="position:absolute; right:8px; bottom:8px; background:#fff; border-radius:50%; padding:4px; box-shadow:0 2px 6px rgba(0,0,0,0.08);">
                        <img src="{{ asset('images/icon/Group 1000001113.svg') }}" alt="" style="width:30px; height:30px;">
                    </a>
                </div>
               <!-- Form here  -->
                    <div style="display:flex; flex-direction:column; gap:16px;">
                        <input type="text" name="nama_penuh" placeholder="Nama Penuh" 
                            style="width:993px; height:35px; border-radius:4px; border-width:1px; opacity:1; padding:12px; border:1px solid #ccc; background:#fff; color:#000;">
                        <div style="display:flex; gap:16px;">
                            <input type="text" name="ic_nic" placeholder="IC/NIC" style="flex:1; padding:12px; border:1px solid #ccc; border-radius:6px; background:#fff; color:#000;">
                            <input type="number" name="umur" placeholder="Umur" style="flex:1; padding:12px; border:1px solid #ccc; border-radius:6px; background:#fff; color:#000;">
                        </div>
                        <div style="display:flex; gap:16px;">
                            <input type="email" name="emel" placeholder="Emel" style="flex:1; padding:12px; border:1px solid #ccc; border-radius:6px; background:#fff; color:#000;">
                            <input type="text" name="no_telefon" placeholder="No. Telefon" style="flex:1; padding:12px; border:1px solid #ccc; border-radius:6px; background:#fff; color:#000;">
                        </div>
                        <input type="text" name="alamat1" placeholder="Alamat 1" style="padding:12px; border:1px solid #ccc; border-radius:6px; background:#fff; color:#000;">
                        <input type="text" name="alamat2" placeholder="Alamat 2" style="padding:12px; border:1px solid #ccc; border-radius:6px; background:#fff; color:#000;">
                        <input type="number" name="poskod" placeholder="Poskod" style="width:300px; padding:12px; border:1px solid #ccc; border-radius:6px; background:#fff; color:#000;">
                    </div>
                <!-- </form> -->
            </div>
            <div style="display: flex; justify-content: left; margin-top: 32px;">
                <button id="simpanBtn" type="button" style="width:107px; height:35px; gap:10px; opacity:1; border-radius:4px; padding:10px 30px; background:#0B6477; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;">
                    <span style="font-family:'Poppins',sans-serif; font-weight:500; font-size:12px; line-height:15px; letter-spacing:0; color:#FFFFFF;">
                        Simpan
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Success Popup Modal -->
<div id="successModal" style="display:none; position:fixed; z-index:9999; left:0; top:0; width:100vw; height:100vh; background:rgba(0,0,0,0.12); align-items:center; justify-content:center;">
    <div style="background:#fff; border-radius:10px; width:674px; height:330px; margin:auto; padding:30px 84px; box-shadow:0 2px 16px rgba(0,0,0,0.08); position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; gap:15px; opacity:1;">
        <button id="closeModal" style="position:absolute; top:24px; right:32px; background:none; border:none; font-size:32px; color:#9AC7CE; cursor:pointer; line-height:1;">&times;</button>
        <div style="margin-bottom:15px;">
            <img src="{{ asset('images/all/Group 1000001226.svg') }}" alt="" style="width:165.78px; height:130px; transform:rotate(0deg); opacity:1;">
        </div>
        <div style="font-family:'Poppins',sans-serif; font-size:2.5rem; font-weight:700; color:#222;">Berjaya !</div>
        <div style="font-family:'Poppins',sans-serif; font-size:1.5rem; color:#222;">Profil anda telah berjaya dikemaskini.</div>
        <button id="okModal" style="background:#0BBDD6;color:#fff;border:none;border-radius:20px;padding:8px 32px;width:160px;height:40px;font-family:'Inter',sans-serif;font-weight:500;font-style:normal;font-size:17px;line-height:100%;letter-spacing:0;vertical-align:middle;cursor:pointer;transform:rotate(0deg);opacity:1;">OK</button>
    </div>
</div>

<script>
document.getElementById('simpanBtn').onclick = function() {
    document.getElementById('successModal').style.display = 'flex';
};
document.getElementById('closeModal').onclick = function() {
    document.getElementById('successModal').style.display = 'none';
};
document.getElementById('okModal').onclick = function() {
    document.getElementById('successModal').style.display = 'none';
};
</script>
@endsection