@extends('layout.appdas')

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

@section('content')

<div class="card table-card mb-0 shadow-sm border-0 rounded-0 overflow-hidden">

    {{-- Page Header --}}
    <div class="card-header bg-white border-bottom py-3 px-4">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div>
                <h5 class="mb-1 fw-bold text-dark d-flex align-items-center">
                    <i class="bi bi-person-bounding-box text-primary me-2"></i>Profil Saya
                </h5>
                <p class="text-muted mb-0 small">
                    Kelola data diri, foto profil, dan keamanan password akun Anda.
                </p>
            </div>
            <div>
                <span class="badge bg-primary-subtle text-primary border border-primary-subtle rounded-pill px-3 py-2">
                    <i class="bi bi-shield-check me-1"></i> {{ $user->role?->nama_role ?? 'Pengguna' }}
                </span>
            </div>
        </div>
    </div>

    <div class="card-body p-3">

        <!-- Main Content Grid -->
        <div class="row g-3">

            <!-- Left Column: Summary Card -->
            <div class="col-lg-4">
                <div class="card border rounded-3 shadow-xs overflow-hidden h-100">
                    <!-- Cover Banner -->
                    <div class="profile-banner position-relative" style="height: 100px; background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);"></div>

                    <!-- Avatar & Details -->
                    <div class="card-body text-center pt-0 px-3 pb-3">
                        <div class="position-relative d-inline-block" style="margin-top: -50px;">
                            <img id="previewFoto" src="{{ $user->foto_url }}" class="rounded-circle border border-3 border-white shadow-sm" style="width: 100px; height: 100px; object-fit: cover; background: #fff;">
                        </div>

                        <h5 class="fw-bold text-dark mt-2 mb-1">{{ $user->name }}</h5>
                        <p class="text-muted small mb-2"><i class="bi bi-envelope me-1"></i>{{ $user->email }}</p>

                        <div class="d-flex justify-content-center gap-1.5 mb-3 flex-wrap">
                            <span class="badge bg-info-subtle text-info-emphasis border border-info-subtle rounded-pill px-2.5 py-1 small">
                                <i class="bi bi-building me-1"></i>{{ $user->divisi?->nama_divisi ?? 'Tanpa Divisi' }}
                            </span>
                            <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-2.5 py-1 small">
                                <i class="bi bi-person-badge me-1"></i>{{ $user->role?->nama_role ?? 'Tanpa Role' }}
                            </span>
                        </div>

                        <div class="row g-2 text-start">
                            <div class="col-12 col-sm-6">
                                <div class="p-3 bg-light rounded-3 border h-100 d-flex flex-column justify-content-center">
                                    <small class="text-muted fw-semibold d-block mb-1" style="font-size: 0.75rem;">NIP / Identitas</small>
                                    <span class="fw-bold text-dark font-monospace text-truncate" title="{{ $user->nip ?? '-' }}">{{ $user->nip ?? '-' }}</span>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6">
                                <div class="p-3 bg-light rounded-3 border h-100 d-flex flex-column justify-content-center">
                                    <small class="text-muted fw-semibold d-block mb-1" style="font-size: 0.75rem;">Status Akun</small>
                                    <div>
                                        <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-2.5 py-1">
                                            <i class="bi bi-check-circle me-1"></i>{{ ucfirst($user->status ?? 'Aktif') }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Edit Profile & Password Form Cards -->
            <div class="col-lg-8">

                <!-- Card 1: Data Profil -->
                <div class="card border rounded-3 shadow-xs mb-3">
                    <div class="card-header bg-white border-bottom py-2.5 px-3">
                        <h6 class="card-title mb-0 fw-bold text-dark">
                            <i class="bi bi-person-gear text-primary me-2"></i>
                            Perbarui Informasi Profil
                        </h6>
                    </div>
                    <div class="card-body p-3">

                        @if(session('success'))
                            <div class="alert alert-success alert-dismissible fade show rounded-3 shadow-sm" id="successAlert">
                                <i class="bi bi-check-circle-fill me-2"></i>
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        @endif

                        <form action="{{ route('profil.update') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')

                            <div class="row g-2 mb-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold text-secondary small mb-1">
                                        <i class="bi bi-person me-1"></i>Nama Lengkap
                                    </label>
                                    <input type="text" name="name" value="{{ old('name', $user->name) }}" class="form-control form-control-sm @error('name') is-invalid @enderror" placeholder="Masukkan nama lengkap">
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-semibold text-secondary small mb-1">
                                        <i class="bi bi-envelope me-1"></i>Email
                                    </label>
                                    <input type="email" name="email" value="{{ old('email', $user->email) }}" class="form-control form-control-sm @error('email') is-invalid @enderror" placeholder="Masukkan alamat email">
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-semibold text-secondary small mb-1">
                                    <i class="bi bi-camera me-1"></i>Foto Profil
                                </label>
                                <div class="p-3 border rounded-3 bg-light text-center">
                                    <img src="{{ $user->foto_url }}" id="previewUpload" class="rounded-circle border shadow-sm mb-2" style="width: 80px; height: 80px; object-fit: cover; background: #fff;">
                                    <div>
                                        <input type="file" name="foto" id="foto" class="form-control form-control-sm mx-auto @error('foto') is-invalid @enderror" style="max-width: 320px;">
                                    </div>
                                    <small class="text-muted d-block mt-1" style="font-size: 0.75rem;">Format: JPG, JPEG, atau PNG (Maksimal 2MB)</small>
                                </div>
                                @error('foto')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="text-end">
                                <button type="submit" class="btn btn-sm btn-primary px-3 fw-semibold rounded-2">
                                    <i class="bi bi-floppy-fill me-1"></i> Simpan Perubahan Profil
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Card 2: Keamanan Password -->
                <div class="card border rounded-3 shadow-xs" id="password">
                    <div class="card-header bg-white border-bottom py-2.5 px-3">
                        <h6 class="card-title mb-0 fw-bold text-dark">
                            <i class="bi bi-shield-lock-fill text-success me-2"></i>
                            Keamanan & Sandi Akun
                        </h6>
                    </div>
                    <div class="card-body p-3">

                        @if(session('success_password'))
                            <div class="alert alert-success alert-dismissible fade show rounded-3 shadow-sm" id="successPasswordAlert">
                                <i class="bi bi-check-circle-fill me-2"></i>
                                {{ session('success_password') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        @endif

                        <form action="{{ route('profil.password') }}" method="POST">
                            @csrf
                            @method('PUT')

                            <div class="row g-2 mb-3">
                                <div class="col-md-4">
                                    <label class="form-label fw-semibold text-secondary small mb-1">Password Lama</label>
                                    <input type="password" name="password_lama" class="form-control form-control-sm @error('password_lama') is-invalid @enderror" placeholder="••••••••">
                                    @error('password_lama')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label fw-semibold text-secondary small mb-1">Password Baru</label>
                                    <input type="password" name="password_baru" class="form-control form-control-sm @error('password_baru') is-invalid @enderror" placeholder="••••••••">
                                    @error('password_baru')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label fw-semibold text-secondary small mb-1">Konfirmasi Password</label>
                                    <input type="password" name="password_baru_confirmation" class="form-control form-control-sm" placeholder="••••••••">
                                </div>
                            </div>

                            <div class="text-end">
                                <button type="submit" class="btn btn-sm btn-success px-3 fw-semibold text-white rounded-2">
                                    <i class="bi bi-key-fill me-1"></i> Ubah Password Baru
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>

    </div>

</div>

@push('scripts')
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const fotoInput = document.getElementById('foto');
        if (fotoInput) {
            fotoInput.addEventListener('change', function (e) {
                const file = e.target.files[0];
                if (file) {
                    const url = URL.createObjectURL(file);
                    const previewFoto = document.getElementById('previewFoto');
                    const previewUpload = document.getElementById('previewUpload');
                    if (previewFoto) previewFoto.src = url;
                    if (previewUpload) previewUpload.src = url;
                }
            });
        }

        const successAlert = document.getElementById('successAlert');
        if (successAlert) {
            setTimeout(() => {
                const bsAlert = bootstrap.Alert.getOrCreateInstance(successAlert);
                bsAlert.close();
            }, 3500);
        }

        const successPasswordAlert = document.getElementById('successPasswordAlert');
        if (successPasswordAlert) {
            setTimeout(() => {
                const bsAlert = bootstrap.Alert.getOrCreateInstance(successPasswordAlert);
                bsAlert.close();
            }, 3500);
        }
    });
</script>
@endpush

@endsection