@extends('layouts.admin')

@section('title', 'My Profile — DaisyRisk')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/user-dashboard.css') }}">
<style>
/* ── Profile Page — DaisyRisk Theme ──────────────────────────────── */
.profile-page {
    max-width: 820px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.profile-avatar-ring {
    width: 96px; height: 96px;
    border-radius: 50%;
    border: 3px solid #F59E0B;
    padding: 3px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(245,158,11,0.2);
    flex-shrink: 0;
}
.profile-avatar-ring img,
.profile-avatar-ring .avatar-initials {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.avatar-initials {
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

/* Card */
.pr-card {
    background: #fff;
    border: 1px solid #EDE5C8;
    border-radius: 18px;
    box-shadow: 0 2px 16px rgba(212,160,23,0.07);
    overflow: hidden;
    margin-bottom: 20px;
}
.pr-card-header {
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(254,243,199,0.6), #fff);
    border-bottom: 1px solid #F3E8C8;
    display: flex; align-items: center; gap: 10px;
}
.pr-card-title { font-size: 15px; font-weight: 700; color: #1A1A2E; }
.pr-card-body  { padding: 22px 24px; }

/* Form elements */
.pr-label {
    display: block; font-size: 12px; font-weight: 600;
    color: #4B5563; margin-bottom: 6px; letter-spacing: 0.02em;
}
.pr-input {
    width: 100%; background: #FAFAFA;
    border: 1.5px solid #E5DCC8;
    border-radius: 10px; padding: 10px 14px;
    font-size: 14px; color: #1E293B;
    transition: all 0.2s; outline: none;
    font-family: inherit;
}
.pr-input:focus {
    border-color: #F59E0B;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.12);
}
.pr-input.is-error { border-color: #FCA5A5; background: #FEF2F2; }

.pr-error-msg {
    font-size: 11px; color: #DC2626; margin-top: 4px;
}

/* Password eye toggle */
.pr-pw-wrap { position: relative; }
.pr-pw-wrap .pr-input { padding-right: 42px; }
.pr-pw-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: #9CA3AF; font-size: 16px; padding: 0;
    transition: color 0.15s;
}
.pr-pw-toggle:hover { color: #F59E0B; }

/* Buttons */
.pr-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 22px; border-radius: 11px;
    font-size: 13.5px; font-weight: 600; cursor: pointer;
    border: 1.5px solid transparent;
    transition: all 0.2s; text-decoration: none;
}
.pr-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.1); }

.pr-btn-primary {
    background: #F59E0B; border-color: #D97706; color: #fff;
}
.pr-btn-primary:hover { background: #D97706; }

.pr-btn-outline {
    background: #fff; border-color: #E5DCC8; color: #4B5563;
}
.pr-btn-outline:hover { background: #FFF9EC; border-color: #F59E0B; color: #B45309; }

/* Alert banners */
.pr-alert {
    padding: 12px 16px; border-radius: 10px;
    font-size: 13px; font-weight: 500; border: 1px solid;
    margin-bottom: 18px; display: flex; align-items: center; gap: 10px;
}
.pr-alert-success { background: #F0FDF4; color: #166534; border-color: #86EFAC; }
.pr-alert-error   { background: #FEF2F2; color: #991B1B; border-color: #FCA5A5; }
.pr-alert-info    { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }

/* Avatar upload area */
.avatar-upload-area {
    display: flex; align-items: center; gap: 20px;
    flex-wrap: wrap;
}
.avatar-upload-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 9px;
    font-size: 12px; font-weight: 600;
    background: #FEF3C7; border: 1.5px solid #F59E0B;
    color: #B45309; cursor: pointer;
    transition: all 0.2s;
}
.avatar-upload-btn:hover {
    background: #FDE68A; transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(245,158,11,0.2);
}
.avatar-upload-hint {
    font-size: 11px; color: #9CA3AF; margin-top: 4px;
}
</style>
@endpush

@section('content')
@php
    // Always fetch the freshest data from DB (avoids cached Eloquent model issues)
    $user = auth()->user()->fresh();

    // Build avatar URL: stored as "profile-photos/id_time.ext" → served via storage symlink
    $avatarSrc = null;
    if ($user->profile_photo) {
        $avatarSrc = str_starts_with($user->profile_photo, 'http')
            ? $user->profile_photo
            : asset('storage/' . $user->profile_photo);
    }
    $initials = strtoupper(substr($user->name, 0, 1));
@endphp

<div class="profile-page">

    {{-- ── Page Header ────────────────────────────────────────────── --}}
    <div class="mb-6">
        <h1 class="text-3xl font-extrabold text-slate-800 tracking-tight">My <span class="text-amber-500">Profile</span></h1>
        <p class="mt-1 text-sm text-slate-500">Kelola informasi akun dan preferensi Anda.</p>
    </div>

    {{-- ── Flash Messages ──────────────────────────────────────────── --}}
    @if(session('success'))
        <div class="pr-alert pr-alert-success">✅ {{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="pr-alert pr-alert-error">❌ {{ session('error') }}</div>
    @endif
    @if(session('info'))
        <div class="pr-alert pr-alert-info">ℹ️ {{ session('info') }}</div>
    @endif

    {{-- ── Form: Profile Info ──────────────────────────────────────── --}}
    <form id="profile-form" method="POST" action="{{ route('admin.profile.update') }}" enctype="multipart/form-data">
        @csrf

        {{-- Avatar Card --}}
        <div class="pr-card">
            <div class="pr-card-header">
                <span class="text-xl">🌼</span>
                <span class="pr-card-title">Photo & Identity</span>
            </div>
            <div class="pr-card-body">
                <div class="avatar-upload-area">
                    {{-- Avatar preview --}}
                    <div class="profile-avatar-ring" id="avatar-ring">
                        @if($avatarSrc)
                            <img id="avatar-preview" src="{{ $avatarSrc }}" alt="Avatar">
                        @else
                            <div class="avatar-initials" id="avatar-preview-initials">{{ $initials }}</div>
                        @endif
                    </div>

                    {{-- Name & Company info --}}
                    <div class="flex-1 min-w-0">
                        <p class="text-xl font-extrabold text-slate-800 leading-tight">{{ $user->name }}</p>
                        <p class="text-sm text-slate-500 mt-0.5">{{ $user->company_name ?: 'Belum ada nama perusahaan' }}</p>
                        <p class="text-xs text-slate-400 mt-1">{{ $user->email }}</p>
                    </div>

                    {{-- Upload button --}}
                    <div>
                        <label for="avatar" class="avatar-upload-btn">
                            📷 Change Photo
                        </label>
                        <p class="avatar-upload-hint">JPG, PNG, WEBP. Maks 2MB</p>
                        <input type="file" id="avatar" name="avatar" class="hidden" accept="image/jpeg,image/png,image/webp">
                        @error('avatar')
                            <p class="pr-error-msg mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        {{-- Personal Info Card --}}
        <div class="pr-card">
            <div class="pr-card-header">
                <span class="text-xl">👤</span>
                <span class="pr-card-title">Personal Information</span>
            </div>
            <div class="pr-card-body">
                <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">

                    {{-- Full Name --}}
                    <div class="sm:col-span-2">
                        <label for="name" class="pr-label">Full Name <span class="text-red-500">*</span></label>
                        <input type="text" id="name" name="name"
                               class="pr-input @error('name') is-error @enderror"
                               value="{{ old('name', $user->name) }}"
                               placeholder="Nama Lengkap"
                               required>
                        @error('name')
                            <p class="pr-error-msg">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Company Name --}}
                    <div>
                        <label for="company_name" class="pr-label">Company Name / Nama Perusahaan</label>
                        <input type="text" id="company_name" name="company_name"
                               class="pr-input @error('company_name') is-error @enderror"
                               value="{{ old('company_name', $user->company_name) }}"
                               placeholder="Nama perusahaan (opsional)">
                        @error('company_name')
                            <p class="pr-error-msg">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Position / Jabatan --}}
                    <div>
                        <label for="position" class="pr-label">Position / Jabatan</label>
                        <input type="text" id="position" name="position"
                               class="pr-input @error('position') is-error @enderror"
                               value="{{ old('position', $user->position) }}"
                               placeholder="Jabatan (opsional)">
                        @error('position')
                            <p class="pr-error-msg">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Phone Number --}}
                    <div>
                        <label for="phone" class="pr-label">Phone Number / Nomor Telepon</label>
                        <input type="text" id="phone" name="phone"
                               class="pr-input @error('phone') is-error @enderror"
                               value="{{ old('phone', $user->phone) }}"
                               placeholder="+62...">
                        @error('phone')
                            <p class="pr-error-msg">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Country --}}
                    <div>
                        <label for="country_id" class="pr-label">Country / Negara</label>
                        <select id="country_id" name="country_id" class="pr-input @error('country_id') is-error @enderror">
                            <option value="">-- Pilih Negara --</option>
                            @foreach($countries as $country)
                                <option value="{{ $country->id }}" {{ old('country_id', $user->country_id) == $country->id ? 'selected' : '' }}>
                                    {{ $country->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('country_id')
                            <p class="pr-error-msg">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Email --}}
                    <div class="sm:col-span-2">
                        <label for="email" class="pr-label">Email Address <span class="text-red-500">*</span></label>
                        <input type="email" id="email" name="email"
                               class="pr-input @error('email') is-error @enderror"
                               value="{{ old('email', $user->email) }}"
                               placeholder="email@contoh.com"
                               required>
                        @error('email')
                            <p class="pr-error-msg">{{ $message }}</p>
                        @enderror
                    </div>

                </div>

                <div class="mt-6 flex items-center justify-between flex-wrap gap-3">
                    <p class="text-xs text-slate-400">
                        Akun dibuat: <span class="font-medium text-slate-600">{{ $user->created_at->format('d M Y') }}</span>
                        · Status: <span class="font-medium text-emerald-600">{{ ucfirst($user->status) }}</span>
                    </p>
                    <button type="submit" class="pr-btn pr-btn-primary" id="save-btn">
                        💾 Save Changes
                    </button>
                </div>
            </div>
        </div>

    </form>

    {{-- ── Form: Change Password ───────────────────────────────────── --}}
    <form id="pw-form" method="POST" action="{{ route('admin.profile.password') }}">
        @csrf
        <div class="pr-card">
            <div class="pr-card-header">
                <span class="text-xl">🔐</span>
                <span class="pr-card-title">Change Password</span>
                <span class="ml-auto text-xs text-slate-400 font-normal">Kosongkan jika tidak ingin mengubah password</span>
            </div>
            <div class="pr-card-body">
                <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">

                    {{-- Current Password --}}
                    <div class="sm:col-span-2">
                        <label for="current_password" class="pr-label">Current Password</label>
                        <div class="pr-pw-wrap">
                            <input type="password" id="current_password" name="current_password"
                                   class="pr-input @error('current_password') is-error @enderror"
                                   placeholder="Masukkan password lama">
                            <button type="button" class="pr-pw-toggle" onclick="togglePw('current_password', this)">👁</button>
                        </div>
                        @error('current_password')
                            <p class="pr-error-msg">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- New Password --}}
                    <div>
                        <label for="new_password" class="pr-label">New Password</label>
                        <div class="pr-pw-wrap">
                            <input type="password" id="new_password" name="new_password"
                                   class="pr-input @error('new_password') is-error @enderror"
                                   placeholder="Min. 8 karakter">
                            <button type="button" class="pr-pw-toggle" onclick="togglePw('new_password', this)">👁</button>
                        </div>
                        @error('new_password')
                            <p class="pr-error-msg">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Confirm Password --}}
                    <div>
                        <label for="new_password_confirmation" class="pr-label">Confirm New Password</label>
                        <div class="pr-pw-wrap">
                            <input type="password" id="new_password_confirmation" name="new_password_confirmation"
                                   class="pr-input"
                                   placeholder="Ulangi password baru">
                            <button type="button" class="pr-pw-toggle" onclick="togglePw('new_password_confirmation', this)">👁</button>
                        </div>
                    </div>

                </div>

                {{-- Password strength hint --}}
                <div id="pw-strength" class="mt-3 hidden">
                    <div class="flex gap-1 mb-1">
                        <div id="ps-1" class="h-1.5 flex-1 rounded-full bg-slate-200 transition-colors"></div>
                        <div id="ps-2" class="h-1.5 flex-1 rounded-full bg-slate-200 transition-colors"></div>
                        <div id="ps-3" class="h-1.5 flex-1 rounded-full bg-slate-200 transition-colors"></div>
                        <div id="ps-4" class="h-1.5 flex-1 rounded-full bg-slate-200 transition-colors"></div>
                    </div>
                    <p id="pw-strength-label" class="text-xs text-slate-400"></p>
                </div>

                <div class="mt-6 flex justify-end">
                    <button type="submit" class="pr-btn pr-btn-primary">
                        🔒 Update Password
                    </button>
                </div>
            </div>
        </div>
    </form>

</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    // ── Avatar preview on file select ───────────────────────────────
    const avatarInput = document.getElementById('avatar');
    const avatarRing  = document.getElementById('avatar-ring');

    if (avatarInput) {
        avatarInput.addEventListener('change', function () {
            const file = this.files[0];
            if (!file) return;
            if (file.size > 2 * 1024 * 1024) {
                alert('Ukuran foto melebihi 2MB. Silakan pilih foto yang lebih kecil.');
                this.value = '';
                return;
            }
            const reader = new FileReader();
            reader.onload = function (e) {
                avatarRing.innerHTML = `<img src="${e.target.result}" alt="Preview"
                    style="width:100%;height:100%;border-radius:50%;object-fit:cover;">`;
                // Also update navbar avatar immediately (client-side optimistic)
                updateNavbarAvatar(e.target.result, null);
            };
            reader.readAsDataURL(file);
        });
    }

    // ── Update navbar name live when name input changes ──────────────
    const nameInput = document.getElementById('name');
    if (nameInput) {
        nameInput.addEventListener('input', function () {
            updateNavbarAvatar(null, this.value.trim());
        });
    }

    // ── Password strength meter ──────────────────────────────────────
    const pwInput     = document.getElementById('new_password');
    const pwStrength  = document.getElementById('pw-strength');
    const psLabel     = document.getElementById('pw-strength-label');
    const psBars      = [1,2,3,4].map(i => document.getElementById(`ps-${i}`));

    if (pwInput) {
        pwInput.addEventListener('input', function () {
            const val = this.value;
            if (!val) { pwStrength.classList.add('hidden'); return; }
            pwStrength.classList.remove('hidden');

            let score = 0;
            if (val.length >= 8)  score++;
            if (/[A-Z]/.test(val)) score++;
            if (/[0-9]/.test(val)) score++;
            if (/[^A-Za-z0-9]/.test(val)) score++;

            const colors = ['bg-red-400','bg-orange-400','bg-yellow-400','bg-emerald-400'];
            const labels = ['Sangat Lemah','Lemah','Sedang','Kuat'];
            const labelColors = ['text-red-500','text-orange-500','text-yellow-600','text-emerald-600'];

            psBars.forEach((bar, idx) => {
                bar.className = `h-1.5 flex-1 rounded-full transition-colors ${idx < score ? colors[score-1] : 'bg-slate-200'}`;
            });
            psLabel.textContent  = labels[score - 1] || '';
            psLabel.className    = `text-xs font-medium ${labelColors[score - 1] || ''}`;
        });
    }
});

// ── Toggle password visibility ───────────────────────────────────────
function togglePw(id, btn) {
    const input = document.getElementById(id);
    if (!input) return;
    if (input.type === 'password') {
        input.type = 'text';
        btn.textContent = '🙈';
    } else {
        input.type = 'password';
        btn.textContent = '👁';
    }
}

// ── Sync navbar avatar & name (optimistic UI update) ─────────────────
function updateNavbarAvatar(imgSrc, name) {
    // User navbar: avatar circle with initials
    const navAvatarEl = document.querySelector('.user-nav-avatar');
    const navNameEl   = document.querySelector('.user-nav-name');

    if (name !== null) {
        const initials = name.charAt(0).toUpperCase();
        if (navAvatarEl && !navAvatarEl.querySelector('img')) {
            navAvatarEl.textContent = initials;
        }
        if (navNameEl) navNameEl.textContent = name;
    }

    if (imgSrc !== null && navAvatarEl) {
        navAvatarEl.innerHTML = `<img src="${imgSrc}" alt="Avatar" class="w-full h-full object-cover rounded-full">`;
    }
}
</script>
@endpush