@extends('layouts.app')

@section('title', 'Profil Saya')

@section('breadcrumb')
    <span>Profil Saya</span>
@endsection

@section('content')

<div class="pf-page-header">
    <div>
        <h1 class="pf-page-title"><i class="bi bi-person-circle me-2 text-primary-pf"></i>Profil Saya</h1>
        <p class="pf-page-subtitle">Kelola informasi akun dan keamanan Anda</p>
    </div>
</div>

<div class="row g-4">

    {{-- ===== SIDEBAR PROFILE ===== --}}
    <div class="col-12 col-xl-3">
        <div class="pf-card text-center p-4 mb-3">
            <div class="position-relative d-inline-block mb-3">
                <div style="width:88px;height:88px;border-radius:20px;background:linear-gradient(135deg,#1B4FD8,#6366F1);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:600;color:#fff;margin:0 auto">
                    @if($user->photo)
                        <img src="{{ asset('storage/'.$user->photo) }}" style="width:100%;height:100%;object-fit:cover;border-radius:20px">
                    @else
                        {{ strtoupper(substr($user->name, 0, 2)) }}
                    @endif
                </div>
                <label style="position:absolute;bottom:-4px;right:-4px;width:28px;height:28px;background:var(--pf-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:12px;border:2px solid #fff" title="Ganti Foto">
                    <i class="bi bi-camera-fill"></i>
                    <input type="file" style="display:none" id="photoInput" accept="image/*" onchange="previewFoto(this)">
                </label>
            </div>
            <h5 style="font-weight:600;margin-bottom:4px">{{ $user->name }}</h5>
            <div style="font-size:13px;color:var(--pf-text-muted)">{{ $user->email }}</div>
            <div class="mt-2">
                @foreach($user->getRoleNames() as $role)
                    <span style="background:var(--pf-primary-light);color:var(--pf-primary);font-size:11.5px;padding:3px 10px;border-radius:20px;font-weight:600">
                        {{ $role }}
                    </span>
                @endforeach
            </div>
            <div class="pf-divider"></div>
            <div style="font-size:12px;color:var(--pf-text-muted);text-align:left">
                <div class="d-flex justify-content-between mb-1">
                    <span>Login terakhir</span>
                    <span>{{ $user->last_login_at?->diffForHumans() ?? '-' }}</span>
                </div>
                <div class="d-flex justify-content-between mb-1">
                    <span>IP terakhir</span>
                    <span class="font-mono">{{ $user->last_login_ip ?? '-' }}</span>
                </div>
                <div class="d-flex justify-content-between">
                    <span>Bergabung</span>
                    <span>{{ $user->created_at->format('d/m/Y') }}</span>
                </div>
            </div>
        </div>

        {{-- Permissions --}}
        <div class="pf-card">
            <div class="pf-card-header">
                <h6 class="pf-card-title" style="font-size:13px"><i class="bi bi-shield-check-fill"></i> Hak Akses Anda</h6>
            </div>
            <div class="pf-card-body" style="padding:12px 16px;max-height:300px;overflow-y:auto">
                @foreach($user->getAllPermissions()->pluck('name') as $perm)
                    <div style="font-size:11px;font-family:var(--pf-font-mono);color:var(--pf-text-muted);padding:2px 0;border-bottom:1px solid var(--pf-border)">
                        {{ $perm }}
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- ===== FORM AREA ===== --}}
    <div class="col-12 col-xl-9">

        {{-- Info Dasar --}}
        <div class="pf-card mb-4">
            <div class="pf-card-header">
                <h6 class="pf-card-title"><i class="bi bi-person-fill"></i> Informasi Dasar</h6>
            </div>
            <div class="pf-card-body">
                <form action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data" id="formProfile">
                    @csrf @method('PATCH')
                    <input type="file" name="photo" id="photoFile" style="display:none">
                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <label class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="name" value="{{ old('name', $user->name) }}" required>
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label">Username</label>
                            <input type="text" class="form-control font-mono" name="username" value="{{ $user->username ?? '' }}" placeholder="username_anda">
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label">Email <span class="text-danger">*</span></label>
                            <input type="email" class="form-control" name="email" value="{{ old('email', $user->email) }}" required>
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label">No. WhatsApp</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-whatsapp text-success"></i></span>
                                <input type="text" class="form-control" name="whatsapp" value="{{ $user->whatsapp ?? '' }}" placeholder="628123456789">
                            </div>
                            <div style="font-size:11px;color:var(--pf-text-muted);margin-top:3px">Format internasional: 628xxx</div>
                        </div>
                        <div class="col-12 d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save2-fill"></i> Simpan Perubahan
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {{-- Ganti Password --}}
        <div class="pf-card mb-4">
            <div class="pf-card-header">
                <h6 class="pf-card-title"><i class="bi bi-lock-fill"></i> Ganti Password</h6>
            </div>
            <div class="pf-card-body">
                <form action="{{ route('profile.password') }}" method="POST" id="formPassword">
                    @csrf @method('PUT')
                    <div class="row g-3">
                        <div class="col-12 col-md-4">
                            <label class="form-label">Password Saat Ini <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="password" class="form-control" name="current_password" id="curPw" required>
                                <button type="button" class="btn btn-outline-secondary" onclick="togglePw('curPw')"><i class="bi bi-eye"></i></button>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <label class="form-label">Password Baru <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="password" class="form-control" name="password" id="newPw" required oninput="checkStrength(this.value)">
                                <button type="button" class="btn btn-outline-secondary" onclick="togglePw('newPw')"><i class="bi bi-eye"></i></button>
                            </div>
                            <div id="pwStrength" style="height:3px;border-radius:2px;margin-top:6px;transition:all .3s;background:#E5E7EB"></div>
                            <div id="pwStrengthLabel" style="font-size:11px;margin-top:3px;color:var(--pf-text-muted)"></div>
                        </div>
                        <div class="col-12 col-md-4">
                            <label class="form-label">Konfirmasi Password <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="password" class="form-control" name="password_confirmation" id="confPw" required>
                                <button type="button" class="btn btn-outline-secondary" onclick="togglePw('confPw')"><i class="bi bi-eye"></i></button>
                            </div>
                        </div>

                        {{-- Password Rules --}}
                        <div class="col-12">
                            <div style="background:var(--pf-bg);border-radius:8px;padding:12px 14px;font-size:12px">
                                <div style="font-weight:500;margin-bottom:6px;color:var(--pf-text-muted)">Persyaratan password:</div>
                                <div class="d-flex flex-wrap gap-3">
                                    <span id="rule-len"  class="pw-rule"><i class="bi bi-x-circle me-1"></i>Min. 8 karakter</span>
                                    <span id="rule-num"  class="pw-rule"><i class="bi bi-x-circle me-1"></i>Mengandung angka</span>
                                    <span id="rule-upper"class="pw-rule"><i class="bi bi-x-circle me-1"></i>Huruf besar</span>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 d-flex justify-content-end">
                            <button type="submit" class="btn btn-warning">
                                <i class="bi bi-lock-fill"></i> Ganti Password
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {{-- Riwayat Login --}}
        <div class="pf-card">
            <div class="pf-card-header">
                <h6 class="pf-card-title"><i class="bi bi-shield-lock-fill"></i> Riwayat Login</h6>
            </div>
            <div class="pf-card-body p-0">
                <table class="table table-sm mb-0">
                    <thead><tr><th>Waktu</th><th>IP Address</th><th>Browser / Device</th><th>Status</th></tr></thead>
                    <tbody>
                        @foreach($loginLogs ?? [] as $log)
                        <tr>
                            <td style="font-size:12.5px">{{ $log->created_at->format('d/m/Y H:i:s') }}</td>
                            <td class="font-mono" style="font-size:12.5px">{{ $log->ip_address }}</td>
                            <td style="font-size:12px;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis" title="{{ $log->user_agent }}">
                                {{ $log->user_agent }}
                            </td>
                            <td>
                                <span class="pf-status {{ $log->type === 'login_success' ? 'pf-status-selesai' : 'pf-status-batal' }}">
                                    {{ $log->type === 'login_success' ? 'Berhasil' : 'Gagal' }}
                                </span>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>

@endsection

@push('styles')
<style>
.pw-rule { color: var(--pf-text-muted); }
.pw-rule.valid { color: #059669; }
.pw-rule.valid i::before { content: '\f26b'; } /* bi-check-circle */
</style>
@endpush

@push('scripts')
<script>
function togglePw(id) {
    const inp = document.getElementById(id);
    inp.type = inp.type === 'password' ? 'text' : 'password';
}

function checkStrength(pw) {
    const bar   = document.getElementById('pwStrength');
    const label = document.getElementById('pwStrengthLabel');
    const len   = pw.length >= 8;
    const num   = /\d/.test(pw);
    const upper = /[A-Z]/.test(pw);

    // Update rules
    document.getElementById('rule-len').className   = 'pw-rule' + (len   ? ' valid' : '');
    document.getElementById('rule-num').className   = 'pw-rule' + (num   ? ' valid' : '');
    document.getElementById('rule-upper').className = 'pw-rule' + (upper ? ' valid' : '');

    const score = [len, num, upper].filter(Boolean).length;
    const configs = {
        0: { w:'10%',  c:'#DC2626', t:'' },
        1: { w:'33%',  c:'#DC2626', t:'Lemah' },
        2: { w:'66%',  c:'#D97706', t:'Sedang' },
        3: { w:'100%', c:'#059669', t:'Kuat' },
    };
    const cfg = configs[score];
    bar.style.width      = cfg.w;
    bar.style.background = cfg.c;
    label.textContent    = cfg.t;
    label.style.color    = cfg.c;
}

function previewFoto(input) {
    if (!input.files[0]) return;
    const reader = new FileReader();
    reader.onload = e => {
        // Update avatar preview
        const avatarDiv = document.querySelector('.position-relative > div');
        avatarDiv.innerHTML = `<img src="${e.target.result}" style="width:100%;height:100%;object-fit:cover;border-radius:20px">`;
    };
    reader.readAsDataURL(input.files[0]);
    // Copy file to form
    const dt = new DataTransfer();
    dt.items.add(input.files[0]);
    document.getElementById('photoFile').files = dt.files;
}
</script>
@endpush