@extends('layouts.app')

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

@section('content_body')
    <!-- Global Hero Section -->
    <x-hero-section title="Profil Saya" subtitle="Kelola informasi akun, kata sandi, dan keamanan admin Anda." />

    <div class="px-3" style="margin-top: -65px; position: relative; z-index: 10;">
        <!-- Breadcrumb -->
        <div class="card border-0 mb-4 shadow-sm p-3" style="border-radius: 10px;">
            <ol class="breadcrumb bg-transparent p-0 mb-0" style="font-size: 0.9rem;">
                <li class="breadcrumb-item">
                    <a href="{{ route('dashboard') }}" style="color: var(--primary-color); font-weight: 500;">
                        <i class="fas fa-home mr-1"></i> Dashboard
                    </a>
                </li>
                <li class="breadcrumb-item text-secondary" style="font-weight: 500;">PENGATURAN ADMIN</li>
                <li class="breadcrumb-item active text-secondary font-weight-bold">Profil Saya</li>
            </ol>
        </div>

        <div class="row">
            <!-- Left Column: Informasi & Riwayat -->
            <div class="col-lg-4 col-md-5 col-12 mb-4">
                
                <!-- CARD 1: INFORMASI AKUN -->
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 12px; overflow: hidden;">
                    <div class="card-header bg-white py-3 border-bottom-0">
                        <h5 class="card-title font-weight-bold mb-0 text-dark">
                            <i class="fas fa-user-circle mr-2" style="color: var(--primary-color);"></i>Informasi Akun
                        </h5>
                    </div>
                    <div class="card-body bg-white text-center pt-2">
                        <div class="position-relative d-inline-block mb-3">
                            @if (auth()->user()->foto_profil)
                                <img src="{{ asset('storage/' . auth()->user()->foto_profil) }}" 
                                     alt="Avatar" 
                                     class="rounded-circle border shadow-sm" 
                                     style="width: 110px; height: 110px; object-fit: cover;">
                            @else
                                <img src="https://ui-avatars.com/api/?name={{ urlencode(auth()->user()->name) }}&background=0F766E&color=fff&size=120" 
                                     alt="Avatar" 
                                     class="rounded-circle border shadow-sm" 
                                     style="width: 110px; height: 110px; object-fit: cover;">
                            @endif
                        </div>
                        <h4 class="font-weight-bold text-dark mb-1">{{ auth()->user()->name }}</h4>
                        <p class="text-muted small mb-3">@username: <code>{{ auth()->user()->username }}</code></p>
                        
                        <div class="text-left border-top pt-3">
                            <div class="mb-2">
                                <label class="text-secondary small mb-0 d-block">Email</label>
                                <span class="text-dark font-weight-bold">{{ auth()->user()->email ?? '-' }}</span>
                            </div>
                            <div class="mb-2">
                                <label class="text-secondary small mb-0 d-block">Nomor WhatsApp</label>
                                <span class="text-dark font-weight-bold">{{ auth()->user()->nomor_whatsapp ?? '-' }}</span>
                            </div>
                            <div class="mb-2">
                                <label class="text-secondary small mb-0 d-block">Role</label>
                                <span class="badge badge-primary px-3 py-1 font-weight-bold" style="border-radius: 6px; background-color: var(--primary-color);">
                                    {{ ucfirst(auth()->user()->role) }}
                                </span>
                            </div>
                            <div class="mb-2">
                                <label class="text-secondary small mb-0 d-block">Status Akun</label>
                                <span class="badge badge-success px-3 py-1 font-weight-bold" style="border-radius: 6px;">
                                    Aktif
                                </span>
                            </div>
                            <div class="mb-0">
                                <label class="text-secondary small mb-0 d-block">Login Terakhir</label>
                                <span class="text-dark small font-weight-bold">
                                    <i class="far fa-clock mr-1 text-muted"></i>{{ now()->translatedFormat('d M Y - H:i') }} (Sesi Aktif)
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- CARD 4: RIWAYAT AKTIVITAS -->
                <div class="card border-0 shadow-sm" style="border-radius: 12px; overflow: hidden;">
                    <div class="card-header bg-white py-3 border-bottom-0">
                        <h5 class="card-title font-weight-bold mb-0 text-dark">
                            <i class="fas fa-history mr-2" style="color: var(--primary-color);"></i>Riwayat Aktivitas
                        </h5>
                    </div>
                    <div class="card-body bg-white pt-2">
                        <div class="alert alert-light border text-center py-4 mb-0" style="border-radius: 8px; background-color: #f8fafc;">
                            <i class="fas fa-info-circle text-muted mb-2 d-block" style="font-size: 1.5rem;"></i>
                            <span class="text-secondary small font-weight-bold">Riwayat aktivitas belum tersedia.</span>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Right Column: Edit Profil & Keamanan -->
            <div class="col-lg-8 col-md-7 col-12 mb-4">
                
                <!-- CARD 2: EDIT PROFIL -->
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 12px; overflow: hidden;">
                    <div class="card-header bg-white py-3 border-bottom-0">
                        <h5 class="card-title font-weight-bold mb-0 text-dark">
                            <i class="fas fa-edit mr-2" style="color: var(--primary-color);"></i>Edit Profil
                        </h5>
                    </div>
                    <div class="card-body bg-white pt-2">
                        <form action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data" novalidate>
                            @csrf
                            @method('patch')

                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="form-group mb-3">
                                        <label for="name" class="font-weight-bold text-dark small">Nama Lengkap <span class="text-danger">*</span></label>
                                        <input type="text" 
                                               name="name" 
                                               id="name" 
                                               class="form-control @error('name') is-invalid @enderror" 
                                               value="{{ old('name', auth()->user()->name) }}" 
                                               required
                                               style="border-radius: 8px;">
                                        @error('name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="form-group mb-3">
                                        <label for="username" class="font-weight-bold text-dark small">Username (Read-Only)</label>
                                        <input type="text" 
                                               id="username" 
                                               class="form-control bg-light" 
                                               value="{{ auth()->user()->username }}" 
                                               disabled
                                               style="border-radius: 8px;">
                                        <small class="form-text text-muted">Username bersifat permanen dan tidak dapat diubah.</small>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="form-group mb-3">
                                        <label for="email" class="font-weight-bold text-dark small">Email</label>
                                        <input type="email" 
                                               name="email" 
                                               id="email" 
                                               class="form-control @error('email') is-invalid @enderror" 
                                               value="{{ old('email', auth()->user()->email) }}" 
                                               style="border-radius: 8px;">
                                        @error('email')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="form-group mb-3">
                                        <label for="nomor_whatsapp" class="font-weight-bold text-dark small">Nomor WhatsApp <span class="text-danger">*</span></label>
                                        <input type="text" 
                                               name="nomor_whatsapp" 
                                               id="nomor_whatsapp" 
                                               class="form-control @error('nomor_whatsapp') is-invalid @enderror" 
                                               value="{{ old('nomor_whatsapp', auth()->user()->nomor_whatsapp) }}" 
                                               required
                                               placeholder="Contoh: 081234567890"
                                               style="border-radius: 8px;">
                                        <small class="form-text text-muted">Gunakan nomor WhatsApp aktif yang diawali 08.</small>
                                        @error('nomor_whatsapp')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="form-group mb-3">
                                <label for="foto_profil" class="font-weight-bold text-dark small">Foto Profil (Opsional)</label>
                                <div class="custom-file">
                                    <input type="file" 
                                           name="foto_profil" 
                                           id="foto_profil" 
                                           class="custom-file-input @error('foto_profil') is-invalid @enderror">
                                    <label class="custom-file-label" for="foto_profil" style="border-radius: 8px;">Pilih file gambar...</label>
                                </div>
                                <small class="form-text text-muted">Format gambar valid (PNG, JPG, JPEG) dengan ukuran maksimal 2MB.</small>
                                @error('foto_profil')
                                    <span class="text-danger small d-block mt-1">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="text-right border-top pt-3">
                                <button type="submit" class="btn btn-success font-weight-bold px-4" style="border-radius: 8px; background-color: var(--primary-color); border-color: var(--primary-color);">
                                    <i class="fas fa-save mr-1"></i> Simpan Perubahan
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- CARD 3: KEAMANAN AKUN -->
                <div class="card border-0 shadow-sm" style="border-radius: 12px; overflow: hidden;">
                    <div class="card-header bg-white py-3 border-bottom-0">
                        <h5 class="card-title font-weight-bold mb-0 text-dark">
                            <i class="fas fa-lock mr-2" style="color: var(--primary-color);"></i>Keamanan Akun
                        </h5>
                    </div>
                    <div class="card-body bg-white pt-2">
                        <form action="{{ route('password.update') }}" method="POST" novalidate>
                            @csrf
                            @method('put')

                            <div class="form-group mb-3">
                                <label for="update_password_current_password" class="font-weight-bold text-dark small">Password Saat Ini <span class="text-danger">*</span></label>
                                <input type="password" 
                                       name="current_password" 
                                       id="update_password_current_password" 
                                       class="form-control @error('current_password') is-invalid @enderror" 
                                       required
                                       style="border-radius: 8px;">
                                @error('current_password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <div class="form-group mb-3">
                                        <label for="update_password_password" class="font-weight-bold text-dark small">Password Baru <span class="text-danger">*</span></label>
                                        <input type="password" 
                                               name="password" 
                                               id="update_password_password" 
                                               class="form-control @error('password') is-invalid @enderror" 
                                               required
                                               style="border-radius: 8px;">
                                        @error('password')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="form-group mb-3">
                                        <label for="update_password_password_confirmation" class="font-weight-bold text-dark small">Konfirmasi Password Baru <span class="text-danger">*</span></label>
                                        <input type="password" 
                                               name="password_confirmation" 
                                               id="update_password_password_confirmation" 
                                               class="form-control @error('password_confirmation') is-invalid @enderror" 
                                               required
                                               style="border-radius: 8px;">
                                        @error('password_confirmation')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="text-right border-top pt-3">
                                <button type="submit" class="btn btn-success font-weight-bold px-4" style="border-radius: 8px; background-color: var(--primary-color); border-color: var(--primary-color);">
                                    <i class="fas fa-key mr-1"></i> Ubah Password
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
$(document).ready(function() {
    // Show selected file name in custom input
    $('.custom-file-input').on('change', function() {
        let fileName = $(this).val().split('\\').pop();
        $(this).next('.custom-file-label').addClass("selected").html(fileName);
    });
});
</script>

@if (session('success'))
    <script>
        $(document).ready(function() {
            Swal.fire({
                title: 'Berhasil!',
                text: "{{ session('success') }}",
                icon: 'success',
                confirmButtonColor: '#0F766E'
            });
        });
    </script>
@endif
@endpush