@extends('app')

@section('content')
    <div class="page-heading">
        <div>
            <h1 class="page-title">{{ $title }}</h1>
            <p class="page-subtitle">Kelola informasi akun dan keamanan Anda</p>
        </div>
    </div>

    {{-- Flash Messages --}}
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row g-4">

        {{-- Kolom Kiri: Info Profil --}}
        <div class="col-lg-4">
            <div class="app-card">
                <div class="app-card-body text-center py-4">
                    <div class="profile-avatar-ring mx-auto mb-3">
                        {{ strtoupper(substr($data->name, 0, 1)) }}
                    </div>
                    <strong class="d-block"
                        style="font-size:16px; font-weight:800; color:var(--text-base);">{{ $data->name }}</strong>
                    <span class="d-block" style="font-size:13px; color:var(--text-muted);">{{ $data->email }}</span>
                    <span class="role-pill mt-2">
                        <i class="fas fa-user-tag"></i>{{ ucfirst($data->role) }}
                    </span>
                </div>
                <div class="app-card-body border-top pt-3 pb-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span style="font-size:12px; color:var(--text-muted); font-weight:600;">
                            <i class="fas fa-calendar-alt me-2" style="color:var(--green-400)"></i>Bergabung
                        </span>
                        <span style="font-size:12.5px; font-weight:600;">{{ $data->created_at->format('d M Y') }}</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <span style="font-size:12px; color:var(--text-muted); font-weight:600;">
                            <i class="fas fa-clock me-2" style="color:var(--green-400)"></i>Diperbarui
                        </span>
                        <span style="font-size:12.5px; font-weight:600;">{{ $data->updated_at->format('d M Y') }}</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Kolom Kanan: Dua Form --}}
        <div class="col-lg-8 d-flex flex-column gap-4">

            {{-- Form 1: Update Profil --}}
            <div class="app-card">
                <div class="app-card-header">
                    <div class="app-card-title"><i class="fas fa-user-edit me-2"></i>Informasi Profil</div>
                </div>
                <div class="app-card-body">
                    <form action="{{ route('profil.update') }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="app-label" for="name">Nama Lengkap</label>
                                <div class="input-icon-wrap">
                                    <i class="fas fa-user input-icon"></i>
                                    <input type="text" name="name" id="name"
                                        class="app-input @error('name') is-invalid @enderror"
                                        value="{{ old('name', $data->name) }}" placeholder="Nama lengkap Anda" />
                                </div>
                                @error('name')
                                    <div class="invalid-feedback d-block">
                                        <i class="fas fa-exclamation-circle me-1"></i>{{ $message }}
                                    </div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="app-label" for="email">Email</label>
                                <div class="input-icon-wrap">
                                    <i class="fas fa-envelope input-icon"></i>
                                    <input type="email" name="email" id="email"
                                        class="app-input @error('email') is-invalid @enderror"
                                        value="{{ old('email', $data->email) }}" placeholder="email@rsudundata.go.id" />
                                </div>
                                @error('email')
                                    <div class="invalid-feedback d-block">
                                        <i class="fas fa-exclamation-circle me-1"></i>{{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div>
                        <div class="d-flex justify-content-end mt-4">
                            <button type="submit" class="btn-app-primary">
                                <i class="fas fa-save me-2"></i>Simpan Perubahan
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- Form 2: Update Password --}}
            <div class="app-card">
                <div class="app-card-header">
                    <div class="app-card-title"><i class="fas fa-lock me-2"></i>Ubah Password</div>
                </div>
                <div class="app-card-body">
                    <form action="{{ route('profil.updatePassword') }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="d-flex flex-column gap-3">
                            <div>
                                <label class="app-label" for="current_password">Password Saat Ini</label>
                                <div class="input-icon-wrap">
                                    <i class="fas fa-lock input-icon"></i>
                                    <input type="password" name="current_password" id="current_password"
                                        class="app-input has-eye @error('current_password') is-invalid @enderror"
                                        placeholder="Masukkan password saat ini" />
                                    <button type="button" class="eye-btn" data-target="current_password">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                @error('current_password')
                                    <div class="invalid-feedback d-block">
                                        <i class="fas fa-exclamation-circle me-1"></i>{{ $message }}
                                    </div>
                                @enderror
                            </div>
                            <div>
                                <label class="app-label" for="password">Password Baru</label>
                                <div class="input-icon-wrap">
                                    <i class="fas fa-key input-icon"></i>
                                    <input type="password" name="password" id="password"
                                        class="app-input has-eye @error('password') is-invalid @enderror"
                                        placeholder="Minimal 6 karakter" />
                                    <button type="button" class="eye-btn" data-target="password">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                @error('password')
                                    <div class="invalid-feedback d-block">
                                        <i class="fas fa-exclamation-circle me-1"></i>{{ $message }}
                                    </div>
                                @enderror
                            </div>
                            <div>
                                <label class="app-label" for="password_confirmation">Konfirmasi Password Baru</label>
                                <div class="input-icon-wrap">
                                    <i class="fas fa-key input-icon"></i>
                                    <input type="password" name="password_confirmation" id="password_confirmation"
                                        class="app-input has-eye" placeholder="Ulangi password baru" />
                                    <button type="button" class="eye-btn" data-target="password_confirmation">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end mt-4">
                            <button type="submit" class="btn-app-primary">
                                <i class="fas fa-shield-alt me-2"></i>Perbarui Password
                            </button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
@endsection

@push('styles')
    <style>
        .profile-avatar-ring {
            width: 72px;
            height: 72px;
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, var(--green-500), var(--green-700));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            font-weight: 800;
            color: #fff;
            box-shadow: 0 6px 20px rgba(44, 122, 82, .35);
        }

        .role-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 11.5px;
            font-weight: 700;
            background: var(--green-50);
            color: var(--green-700);
            border: 1px solid var(--green-100);
            padding: 3px 10px;
            border-radius: var(--radius-full);
        }

        .input-icon-wrap {
            position: relative;
        }

        .input-icon-wrap .input-icon {
            position: absolute;
            left: 13px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-faint);
            font-size: 13px;
            pointer-events: none;
        }

        .input-icon-wrap .app-input {
            padding-left: 38px;
        }

        .input-icon-wrap .app-input.has-eye {
            padding-right: 38px;
        }

        .eye-btn {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: var(--text-faint);
            cursor: pointer;
            font-size: 13px;
            padding: 4px;
            border-radius: 4px;
            transition: color var(--dur);
        }

        .eye-btn:hover {
            color: var(--green-600);
        }

        .invalid-feedback {
            font-size: 12px;
            color: var(--color-rejected);
            margin-top: 4px;
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.querySelectorAll('.eye-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var input = document.getElementById(this.getAttribute('data-target'));
                var icon = this.querySelector('i');
                var isPass = input.type === 'password';
                input.type = isPass ? 'text' : 'password';
                icon.classList.toggle('fa-eye', !isPass);
                icon.classList.toggle('fa-eye-slash', isPass);
            });
        });
    </script>
@endpush