@extends('admin.layouts.app')

@section('content')

<style>
    .page-container { padding: 28px 32px; background: #f1f5f9; min-height: 100vh; font-family: 'Figtree', 'Segoe UI', sans-serif; }
    .header-flex { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
    .main-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: flex-start; }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
    .form-actions { border-top: 1px solid #f1f5f9; padding-top: 20px; display: flex; gap: 10px; justify-content: flex-end; }
    
    @media (max-width: 768px) {
        .page-container { padding: 16px 12px !important; }
        .header-flex { flex-direction: column !important; gap: 16px !important; }
        .main-grid { grid-template-columns: 1fr !important; }
        .form-grid { grid-template-columns: 1fr !important; gap: 15px !important; }
        .form-actions { flex-direction: column !important; }
        .form-actions a, .form-actions button { width: 100% !important; justify-content: center; }
    }
</style>

<div class="page-container">

    {{-- HEADER --}}
    <div class="header-flex">
        <div>
            <a href="{{ route('admin.superadmin.user.index') }}"
               style="font-size:12px; color:#64748b; text-decoration:none; display:inline-flex; align-items:center; gap:5px; margin-bottom:10px; font-weight:600;"
               onmouseover="this.style.color='#0D215C'" onmouseout="this.style.color='#64748b'">
                <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                    <path d="M19 12H5M12 5l-7 7 7 7"/>
                </svg>
                Kembali ke Manajemen Pengguna
            </a>
            <p style="font-size:11px; font-weight:700; color:#94a3b8; letter-spacing:1.8px; margin:0 0 6px; text-transform:uppercase;">Panel Kendali Sistem</p>
            <h1 style="font-size:28px; font-weight:800; color:#0f172a; margin:0 0 4px;">Tambah Pengguna</h1>
            <p style="margin:0; color:#94a3b8; font-size:13px;">Buat akun baru untuk pegawai atau administrator sistem</p>
        </div>
        <div style="background:#eef2ff; color:#4338ca; padding:9px 14px; border-radius:10px; font-size:12px; font-weight:700; display:flex; align-items:center; gap:6px;">
            <div style="width:8px; height:8px; background:#4338ca; border-radius:50%;"></div>
            {{ strtoupper(session('user')['role'] ?? 'ADMINISTRATOR') }}
        </div>
    </div>

    @if(session('error'))
        <div style="margin-bottom:20px; padding:14px 18px; background:#fff1f2; border:1px solid #fecdd3; border-radius:12px; color:#be123c; font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px;">
            <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
            {{ session('error') }}
        </div>
    @endif

    <div class="main-grid">

        {{-- FORM CARD --}}
        <div style="background:#fff; border-radius:16px; border:1px solid #e2e8f0; overflow:hidden;">
            <div style="padding:20px 24px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; gap:10px;">
                <div style="width:32px; height:32px; background:#eff6ff; border-radius:8px; display:flex; align-items:center; justify-content:center;">
                    <svg width="16" height="16" fill="none" stroke="#2563eb" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
                        <circle cx="9" cy="7" r="4"/>
                        <line x1="19" y1="8" x2="19" y2="14"/>
                        <line x1="22" y1="11" x2="16" y2="11"/>
                    </svg>
                </div>
                <h3 style="margin:0; font-size:16px; font-weight:700; color:#0f172a;">Data Pengguna Baru</h3>
            </div>

            <form action="{{ route('admin.superadmin.user.store') }}" method="POST" style="padding:28px 24px;">
                @csrf

                @if ($errors->any())
                    <div style="margin-bottom:20px; padding:14px 18px; background:#fff1f2; border:1px solid #fecdd3; border-radius:12px;">
                        <p style="font-weight:700; color:#be123c; margin:0 0 8px; font-size:13px;">Terdapat kesalahan input:</p>
                        <ul style="margin:0; padding-left:18px; color:#be123c; font-size:13px;">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="form-grid">
                    {{-- NAMA --}}
                    <div>
                        <label style="display:block; font-size:13px; font-weight:700; color:#374151; margin-bottom:8px;">
                            Nama Lengkap <span style="color:#ef4444;">*</span>
                        </label>
                        <input type="text" name="name" value="{{ old('name') }}"
                               style="width:100%; padding:11px 14px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:14px; color:#0f172a; outline:none; box-sizing:border-box;"
                               onfocus="this.style.borderColor='#2563eb'" onblur="this.style.borderColor='#e2e8f0'"
                               placeholder="Nama lengkap pegawai" required>
                    </div>

                    {{-- USERNAME --}}
                    <div>
                        <label style="display:block; font-size:13px; font-weight:700; color:#374151; margin-bottom:8px;">
                            Username <span style="color:#ef4444;">*</span>
                        </label>
                        <input type="text" name="username" value="{{ old('username') }}"
                               style="width:100%; padding:11px 14px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:14px; color:#0f172a; outline:none; box-sizing:border-box;"
                               onfocus="this.style.borderColor='#2563eb'" onblur="this.style.borderColor='#e2e8f0'"
                               placeholder="Username untuk login" required>
                    </div>
                </div>


                <div class="form-grid">
                    {{-- PASSWORD --}}
                    <div>
                        <label style="display:block; font-size:13px; font-weight:700; color:#374151; margin-bottom:8px;">
                            Kata Sandi <span style="color:#ef4444;">*</span>
                        </label>
                        <div style="position:relative;">
                            <input type="password" name="password" id="password_field"
                                   style="width:100%; padding:11px 40px 11px 14px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:14px; color:#0f172a; outline:none; box-sizing:border-box;"
                                   onfocus="this.style.borderColor='#2563eb'" onblur="this.style.borderColor='#e2e8f0'"
                                   placeholder="Minimal 6 karakter" required>
                            <button type="button" onclick="togglePassword('password_field', this)"
                                    style="position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:#94a3b8; padding:0; display:flex; align-items:center; justify-content:center;">
                                <svg class="eye-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                                    <circle cx="12" cy="12" r="3"/>
                                </svg>
                                <svg class="eye-off-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="display:none;">
                                    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
                                    <line x1="1" y1="1" x2="23" y2="23"/>
                                </svg>
                            </button>
                        </div>
                    </div>

                    {{-- ROLE --}}
                    <div>
                        <label style="display:block; font-size:13px; font-weight:700; color:#374151; margin-bottom:8px;">
                            Hak Akses (Role) <span style="color:#ef4444;">*</span>
                        </label>
                        <select name="role"
                                style="width:100%; padding:11px 14px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:14px; color:#0f172a; outline:none; box-sizing:border-box; background:#fff;"
                                onfocus="this.style.borderColor='#2563eb'" onblur="this.style.borderColor='#e2e8f0'">
                            <option value="user" {{ old('role') == 'user' ? 'selected' : '' }}>Petugas (User)</option>
                            <option value="admin" {{ old('role') == 'admin' ? 'selected' : '' }}>Admin (KASI)</option>
                            <option value="superadmin" {{ old('role') == 'superadmin' ? 'selected' : '' }}>Super Admin</option>
                        </select>
                    </div>
                </div>

                <div class="form-actions">
                    <a href="{{ route('admin.superadmin.user.index') }}"
                       style="padding:10px 20px; border:1.5px solid #e2e8f0; border-radius:10px; font-size:13px; font-weight:700; color:#64748b; text-decoration:none; background:#f8fafc;"
                       onmouseover="this.style.background='#e2e8f0'" onmouseout="this.style.background='#f8fafc'">
                        Batal
                    </a>
                    <button type="submit"
                            style="padding:10px 24px; background:#0D215C; color:#fff; border:none; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:7px;"
                            onmouseover="this.style.opacity='.85'" onmouseout="this.style.opacity='1'">
                        <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
                            <circle cx="9" cy="7" r="4"/>
                            <line x1="19" y1="8" x2="19" y2="14"/>
                            <line x1="22" y1="11" x2="16" y2="11"/>
                        </svg>
                        Tambah Pengguna
                    </button>
                </div>
            </form>
        </div>

        {{-- TIPS CARD --}}
        <div>
            <div style="background:#fff; border-radius:16px; border:1px solid #e2e8f0; padding:20px; margin-bottom:16px;">
                <div style="display:flex; align-items:center; gap:8px; margin-bottom:12px;">
                    <div style="width:28px; height:28px; background:#f0fdf4; border-radius:8px; display:flex; align-items:center; justify-content:center;">
                        <svg width="14" height="14" fill="none" stroke="#10b981" stroke-width="2" viewBox="0 0 24 24">
                            <polyline points="20 6 9 17 4 12"/>
                        </svg>
                    </div>
                    <span style="font-size:14px; font-weight:700; color:#0f172a;">Panduan Pengisian</span>
                </div>
                <ul style="margin:0; padding-left:16px; font-size:12px; color:#64748b; line-height:1.9;">
                    <li>Nama sesuai dengan dokumen resmi</li>
                    <li>Username digunakan untuk login</li>

                    <li>Kata sandi minimal 6 karakter</li>
                </ul>
            </div>

            <div style="background:#eff6ff; border-radius:16px; border:1px solid #bfdbfe; padding:18px 20px;">
                <div style="display:flex; align-items:center; gap:8px; margin-bottom:10px;">
                    <svg width="16" height="16" fill="#2563eb" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                    <span style="font-size:13px; font-weight:700; color:#1d4ed8;">Panduan Role</span>
                </div>
                <ul style="margin:0; padding-left:16px; font-size:12px; color:#3b82f6; line-height:1.8;">
                    <li><strong>Petugas</strong>: Input kegiatan harian</li>
                    <li><strong>Admin</strong>: Monitor kegiatan & user</li>
                    <li><strong>Super Admin</strong>: Akses penuh sistem</li>
                </ul>
            </div>
        </div>
    </div>
</div>

@endsection

<script>
    function togglePassword(inputId, buttonElement) {
        const input = document.getElementById(inputId);
        const eyeIcon = buttonElement.querySelector('.eye-icon');
        const eyeOffIcon = buttonElement.querySelector('.eye-off-icon');
        
        if (input.type === 'password') {
            input.type = 'text';
            eyeIcon.style.display = 'none';
            eyeOffIcon.style.display = 'block';
            buttonElement.style.color = '#2563eb';
        } else {
            input.type = 'password';
            eyeIcon.style.display = 'block';
            eyeOffIcon.style.display = 'none';
            buttonElement.style.color = '#94a3b8';
        }
    }
</script>