@extends('layout.app')

@section('title', 'Profil Saya - Sistem Manajemen ISP')

@section('content')
<!-- Header -->
<div class="header bg-gradient-primary pb-8 pt-5 pt-md-8">
    <div class="container-fluid">
        <div class="header-body">
            <div class="row align-items-center py-4">
                <div class="col-lg-6 col-7">
                    <h6 class="h2 text-white d-inline-block mb-0">Profil Saya</h6>
                    <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                        <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i class="fas fa-home"></i></a></li>
                            <li class="breadcrumb-item active" aria-current="page">Profil</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Page content -->
<div class="container-fluid mt--7">
<div class="row">
    <div class="col-lg-4">
        <!-- Profile Card -->
        <div class="card shadow mb-4">
            <div class="card-body text-center">
                <div class="mb-3">
                    @php
                        $userAvatar = Auth::user()->avatar;
                        $avatarUrl = null;
                        
                        if ($userAvatar) {
                            // Check if it's a storage path or direct path
                            if (strpos($userAvatar, 'avatars/') === 0 || strpos($userAvatar, 'public/') === 0) {
                                $avatarUrl = Storage::url($userAvatar);
                            } elseif (strpos($userAvatar, 'storage/') === 0) {
                                $avatarUrl = asset($userAvatar);
                            } elseif (strpos($userAvatar, 'uploads/') === 0) {
                                $avatarUrl = asset($userAvatar);
                            } else {
                                // Assume it's already a full URL or try Storage
                                $avatarUrl = Storage::url($userAvatar);
                            }
                        }
                    @endphp
                    @if($avatarUrl)
                    <img src="{{ $avatarUrl }}" 
                         alt="Avatar" 
                         class="rounded-circle" 
                         style="width: 150px; height: 150px; object-fit: cover;"
                         onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="rounded-circle bg-primary text-white d-inline-flex align-items-center justify-content-center" 
                         style="width: 150px; height: 150px; font-size: 60px; display: none;">
                        {{ strtoupper(substr(Auth::user()->nama_lengkap ?? Auth::user()->username, 0, 1)) }}
                    </div>
                    @else
                    <div class="rounded-circle bg-primary text-white d-inline-flex align-items-center justify-content-center" 
                         style="width: 150px; height: 150px; font-size: 60px;">
                        {{ strtoupper(substr(Auth::user()->nama_lengkap ?? Auth::user()->username, 0, 1)) }}
                    </div>
                    @endif
                </div>
                <h5 class="mb-1">{{ Auth::user()->nama_lengkap ?? Auth::user()->username }}</h5>
                <p class="text-muted mb-2">{{ '@' . Auth::user()->username }}</p>
                <span class="badge bg-{{ Auth::user()->role_badge_class }} mb-3">
                    {{ ucfirst(Auth::user()->role) }}
                </span>
                <br>
                <span class="badge bg-{{ Auth::user()->status_badge_class }}">
                    {{ Auth::user()->status }}
                </span>
            </div>
        </div>
        
        <!-- Account Info -->
        <div class="card shadow">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Informasi Akun</h6>
            </div>
            <div class="card-body">
                <div class="mb-2">
                    <strong>Username:</strong>
                    <div class="text-muted">{{ Auth::user()->username }}</div>
                </div>
                <div class="mb-2">
                    <strong>Email:</strong>
                    <div class="text-muted">{{ Auth::user()->email ?? '-' }}</div>
                </div>
                <div class="mb-2">
                    <strong>Bergabung:</strong>
                    <div class="text-muted">{{ Auth::user()->created_at->format('d F Y') }}</div>
                </div>
                <div class="mb-2">
                    <strong>Terakhir Update:</strong>
                    <div class="text-muted">{{ Auth::user()->updated_at->format('d F Y H:i') }}</div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-8">
        <!-- Edit Profile Form -->
        <div class="card shadow mb-4">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Edit Profil</h6>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data">
                    @csrf
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="username" class="form-label">Username <span class="text-danger">*</span></label>
                                <input type="text" 
                                       class="form-control @error('username') is-invalid @enderror" 
                                       id="username" 
                                       name="username" 
                                       value="{{ old('username', Auth::user()->username) }}" 
                                       required>
                                @error('username')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="nama_lengkap" class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                                <input type="text" 
                                       class="form-control @error('nama_lengkap') is-invalid @enderror" 
                                       id="nama_lengkap" 
                                       name="nama_lengkap" 
                                       value="{{ old('nama_lengkap', Auth::user()->nama_lengkap) }}" 
                                       required>
                                @error('nama_lengkap')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" 
                               class="form-control @error('email') is-invalid @enderror" 
                               id="email" 
                               name="email" 
                               value="{{ old('email', Auth::user()->email) }}">
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="form-group mb-3">
                        <label for="avatar" class="form-label">Avatar</label>
                        @php
                            $userAvatar = Auth::user()->avatar;
                            $avatarUrl = null;
                            
                            if ($userAvatar) {
                                if (strpos($userAvatar, 'avatars/') === 0 || strpos($userAvatar, 'public/') === 0) {
                                    $avatarUrl = Storage::url($userAvatar);
                                } elseif (strpos($userAvatar, 'storage/') === 0) {
                                    $avatarUrl = asset($userAvatar);
                                } elseif (strpos($userAvatar, 'uploads/') === 0) {
                                    $avatarUrl = asset($userAvatar);
                                } else {
                                    $avatarUrl = Storage::url($userAvatar);
                                }
                            }
                        @endphp
                        @if($avatarUrl)
                        <div class="mb-2">
                            <img src="{{ $avatarUrl }}" 
                                 alt="Current Avatar" 
                                 class="img-thumbnail" 
                                 style="max-width: 100px;">
                        </div>
                        @endif
                        <input type="file" 
                               class="form-control @error('avatar') is-invalid @enderror" 
                               id="avatar" 
                               name="avatar"
                               accept="image/*">
                        <small class="text-muted">Format: JPG, PNG. Maksimal 2MB. Kosongkan jika tidak ingin mengubah.</small>
                        @error('avatar')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>Simpan Perubahan
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Change Password Form -->
        <div class="card shadow">
            <div class="card-header">
                <h6 class="m-0 font-weight-bold text-primary">Ubah Password</h6>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('profile.password') }}">
                    @csrf
                    
                    <div class="form-group mb-3">
                        <label for="current_password" class="form-label">Password Saat Ini <span class="text-danger">*</span></label>
                        <input type="password" 
                               class="form-control @error('current_password') is-invalid @enderror" 
                               id="current_password" 
                               name="current_password" 
                               required>
                        @error('current_password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="new_password" class="form-label">Password Baru <span class="text-danger">*</span></label>
                                <input type="password" 
                                       class="form-control @error('new_password') is-invalid @enderror" 
                                       id="new_password" 
                                       name="new_password" 
                                       required>
                                <small class="text-muted">Minimal 8 karakter</small>
                                @error('new_password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="new_password_confirmation" class="form-label">Konfirmasi Password Baru <span class="text-danger">*</span></label>
                                <input type="password" 
                                       class="form-control" 
                                       id="new_password_confirmation" 
                                       name="new_password_confirmation" 
                                       required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn btn-warning">
                            <i class="fas fa-key me-2"></i>Ubah Password
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div>
@endsection