@extends('layout.master')

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

@push('css')
<style>
    .profile-card {
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        border: none;
    }
    .profile-avatar-circle {
        width: 120px;
        height: 120px;
        background: linear-gradient(135deg, #0d6efd 0%, #00d4ff 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48px;
        font-weight: bold;
        border-radius: 50%;
        margin: 0 auto 20px;
        box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
    }
    .profile-info-label {
        font-weight: 700;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
    }
    .profile-info-label i {
        margin-right: 10px;
        font-size: 1.1rem;
        width: 20px;
        text-align: center;
    }
    .profile-info-value {
        color: #444;
        font-size: 0.95rem;
        padding-left: 30px;
        margin-bottom: 20px;
    }
    .section-header {
        border-bottom: 2px solid #f6f9ff;
        padding-bottom: 10px;
        margin-bottom: 25px;
        font-weight: 700;
        color: #012970;
    }
</style>
@endpush

@section('content')

<div class="page-header">
    <h5 class="page-title">Profil Pengguna</h5>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('laman_utama') }}">Laman Utama</a></li>
            <li class="breadcrumb-item active">Profil Pengguna</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="row">
        <!-- Sidebar - Profile Summary -->
        <div class="col-md-4">
            <div class="card profile-card text-center p-4">
                <div class="card-body">
                    @php
                        $initials = '';
                        $names = explode(' ', $user->name);
                        foreach($names as $n) {
                            if(count($names) > 1 && strlen($initials) < 2) {
                                $initials .= strtoupper($n[0]);
                            } elseif (count($names) == 1) {
                                $initials = strtoupper(substr($n, 0, 2));
                            }
                        }
                    @endphp
                    <div class="profile-avatar-circle">
                        {{ $initials }}
                    </div>
                    <h4 class="fw-bold mb-1">{{ $user->name }}</h4>
                    <p class="mb-4"><span class="badge bg-light text-primary border border-primary">{{ $user->roles->name ?? 'Pengguna' }}</span></p>
                    
                    <div class="d-grid gap-2">
                        <a href="{{ route('profil_pengguna_edit') }}" class="btn btn-primary">
                            <i class="fas fa-edit me-1"></i> Kemaskini Profil
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content - Profile Details -->
        <div class="col-md-8">
            <div class="card profile-card p-4">
                <div class="card-body">
                    <h5 class="section-header">Maklumat Peribadi</h5>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="profile-info-label">
                                <i class="fas fa-user"></i> Nama Penuh
                            </div>
                            <div class="profile-info-value">{{ $user->name }}</div>
                        </div>
                        <div class="col-md-6">
                            <div class="profile-info-label">
                                <i class="fas fa-id-card"></i> ID Pengguna
                            </div>
                            <div class="profile-info-value">{{ $user->ic }}</div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="profile-info-label">
                                <i class="fas fa-envelope"></i> E-mel
                            </div>
                            <div class="profile-info-value">{{ $user->email }}</div>
                        </div>
                        <div class="col-md-6">
                            <div class="profile-info-label">
                                <i class="fas fa-phone"></i> No. Telefon
                            </div>
                            <div class="profile-info-value">{{ $user->no_tel }}</div>
                        </div>
                    </div>

                    <h5 class="section-header mt-3">Butiran Perkhidmatan</h5>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="profile-info-label">
                                <i class="fas fa-building"></i> Tempat Bertugas
                            </div>
                            <div class="profile-info-value">
                                @if($user->user_category == 1)
                                    IPJPSM (Ibu Pejabat)
                                @elseif($user->user_category == 2)
                                    JPN (Jabatan Perhutanan Negeri)
                                @else
                                    -
                                @endif
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="profile-info-label">
                                <i class="fas fa-briefcase"></i> Jawatan
                            </div>
                            <div class="profile-info-value">{{ $user->jawatans->name ?? '-' }}</div>
                        </div>
                    </div>

                    @if($user->user_category == 2)
                    <div class="row">
                        <div class="col-md-6">
                            <div class="profile-info-label">
                                <i class="fas fa-map-marker-alt"></i> Negeri
                            </div>
                            <div class="profile-info-value">{{ $user->negeris->name ?? '-' }}</div>
                        </div>
                        <div class="col-md-6">
                            <div class="profile-info-label">
                                <i class="fas fa-city"></i> Daerah / Jajahan Hutan
                            </div>
                            <div class="profile-info-value">{{ $user->daerahs->name ?? '-' }}</div>
                        </div>
                    </div>
                    @endif

                    <div class="row">
                        <div class="col-md-6">
                            <div class="profile-info-label">
                                <i class="fas fa-network-wired"></i> Bahagian
                            </div>
                            <div class="profile-info-value">{{ $user->bahagians->name ?? '-' }}</div>
                        </div>
                        <div class="col-md-6">
                            <div class="profile-info-label">
                                <i class="fas fa-users-cog"></i> Seksyen / Unit
                            </div>
                            <div class="profile-info-value">{{ $user->units->name ?? '-' }}</div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="profile-info-label">
                                <i class="fas fa-shield-alt"></i> Peranan Sistem
                            </div>
                            <div class="profile-info-value">
                                    {{ $user->roles->name ?? 'Pengguna' }}
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>

@endsection