<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profil Pengguna</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

    <style>
        body {
            background: rgb(120, 150, 193);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .profile-card {
            max-width: 600px;
            margin: 80px auto;
            background: #fff;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
            text-align: center;
        }
        .profile-title {
            font-size: 24px;
            font-weight: 600;
        }
        .profile-info {
            text-align: left;
            margin-top: 20px;
        }
        .profile-info p {
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
<!-- Tombol kembali di pojok kiri atas -->
<a href="{{ route('admin.home') }}" class="btn btn-light shadow-sm d-inline-flex align-items-center"
   style="position: absolute; top: 20px; left: 20px; z-index: 1000; gap: 6px;">
    <i class="bi bi-house-fill" style="font-size: 20px;"></i>
    Beranda
</a>


    <!-- Alert session -->
    @if (session('success'))
        <div class="alert alert-success container mt-4">
            {{ session('success') }}
        </div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger container mt-4">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="profile-card">
        <!-- Tombol kembali -->
        

        <!-- Foto & upload -->
        <form action="{{ route('profile.updatePhoto') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="avatar-container text-center" style="position: relative; display: inline-block;">
                <label for="photo" style="cursor: pointer;">
                    @if ($user->photo)
                        <img src="{{ asset( $user->photo) }}" alt="Foto Profil"
                             style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover;">
                    @else
                        <div style="
                            width: 120px;
                            height: 120px;
                            background-color: #007bff;
                            border-radius: 50%;
                            color: white;
                            font-size: 36px;
                            display: flex;
                            align-items: center;
                            justify-content: center;">
                            {{ strtoupper(substr($user->name, 0, 2)) }}
                        </div>
                    @endif

                    <!-- Ikon Edit -->
                    <div style="
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        background-color: #fff;
                        border-radius: 50%;
                        padding: 6px;
                        box-shadow: 0 0 5px rgba(0,0,0,0.3);">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                             fill="currentColor" viewBox="0 0 16 16">
                            <path d="M15.502 1.94a.5.5 0 0 1 0 .706l-1.293 1.293-2.121-2.121 
                            1.293-1.293a.5.5 0 0 1 .707 0l1.414 1.415zm-2.561 
                            2.561L5 12.44V14h1.561l7.941-7.941-2.561-2.561z"/>
                        </svg>
                    </div>
                </label>
                <input type="file" id="photo" name="photo" accept="image/*" style="display: none;" onchange="this.form.submit()">
            </div>
        </form>

        <div class="profile-title mt-3">{{ $user->name }}</div>

        <!-- Info Profil -->
        <div class="profile-info mt-4">
    <div class="row mb-2">
        <div class="col-sm-4 font-weight-bold">Email</div>
        <div class="col-sm-8">{{ $user->email }}</div>
    </div>
    <div class="row mb-2">
        <div class="col-sm-4 font-weight-bold">No Telepon</div>
        <div class="col-sm-8">{{ $user->telepon }}</div>
    </div>
    <div class="row mb-2">
        <div class="col-sm-4 font-weight-bold">Alamat</div>
        <div class="col-sm-8">{{ $user->alamat }}</div>
    </div>
    <div class="row">
        <div class="col-sm-4 font-weight-bold">Role</div>
        <div class="col-sm-8">{{ ucfirst($user->role ?? 'User') }}</div>
    </div>
</div>



        <!-- Ubah Password -->
        @if ($user->role != 'admin')
        <hr>
        <form action="{{ route('profile.updatePassword') }}" method="POST">
            @csrf
            @method('PUT')
            <h5>Ubah Password</h5>
            
            <div class="mb-2">
                <label for="current_password">Password Lama</label>
                <input type="password" name="current_password" id="current_password" class="form-control" required>
            </div>
            
            <div class="mb-2">
                <label for="new_password">Password Baru</label>
                <input type="password" name="new_password" id="new_password" class="form-control" required>
            </div>
            
            <div class="mb-3">
                <label for="new_password_confirmation">Konfirmasi Password Baru</label>
                <input type="password" name="new_password_confirmation" id="new_password_confirmation" class="form-control" required>
            </div>
            
            <button type="submit" class="btn btn-primary w-100">Simpan Password Baru</button>
        </form>
        @endif
    </div>

    <!-- Optional: Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
