@extends('layouts.sentara')

@section('content')

<div class="min-h-screen bg-[#f5f7fb] px-6 py-8">

    <!-- HEADER -->
    <div class="flex items-center gap-4 mb-6">
        

        <div>
            <h1 class="text-3xl font-bold text-gray-800">Profile Saya</h1>
            <p class="text-gray-500 text-sm">
                Informasi akun pengguna <span class="text-blue-600 font-medium">SENTARA</span>
            </p>
        </div>
    </div>

    <!-- PROFILE CARD -->
    <div class="bg-white rounded-2xl shadow-md p-6 flex items-center gap-6 mb-8 relative overflow-hidden">

        <div class="absolute right-0 bottom-0 w-64 h-64 bg-blue-100 opacity-30 rounded-full"></div>

        <div class="w-24 h-24 rounded-full bg-gradient-to-r from-blue-500 to-blue-700
                    flex items-center justify-center text-white text-3xl font-bold shadow-md">
            {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
        </div>

        <div>
            <h2 class="text-2xl font-semibold text-gray-800">
                {{ Auth::user()->name }}
            </h2>

            <p class="text-gray-500 mt-1">
                Staff - Dinas Pariwisata Jember
            </p>

            <span class="inline-block mt-3 text-xs bg-blue-100 text-blue-600 px-3 py-1 rounded-full font-medium">
                STAFF
            </span>
        </div>

    </div>

    <!-- INFORMASI AKUN -->
    <div class="mb-4 flex items-center gap-2 text-blue-600 font-semibold">
        <span class="text-xl">📋</span> Informasi Akun
    </div>

    <!-- GRID -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">

        <!-- NAMA -->
        <div class="bg-white rounded-xl shadow-sm p-5 text-center hover:shadow-md transition">
            <div class="w-12 h-12 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                👤
            </div>
            <p class="text-gray-400 text-sm">Nama Lengkap</p>
            <p class="font-semibold text-gray-800 mt-1">
                {{ Auth::user()->name }}
            </p>
        </div>

        <!-- EMAIL -->
        <div class="bg-white rounded-xl shadow-sm p-5 text-center hover:shadow-md transition">
            <div class="w-12 h-12 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                ✉️
            </div>
            <p class="text-gray-400 text-sm">Email</p>
            <p class="font-semibold text-gray-800 mt-1">
                {{ Auth::user()->email }}
            </p>
        </div>

        <!-- ROLE (FIX ICON) -->
        <div class="bg-white rounded-xl shadow-sm p-5 text-center hover:shadow-md transition">
            <div class="w-12 h-12 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
                <!-- ICON GROUP -->
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M17 20h5v-1a4 4 0 00-3-3.87M9 20H4v-1a4 4 0 013-3.87m10-2.13a4 4 0 10-8 0m8 0a4 4 0 01-8 0"/>
                </svg>
            </div>
            <p class="text-gray-400 text-sm">Role</p>
            <p class="font-semibold text-gray-800 mt-1">Staff</p>
        </div>

        <!-- STATUS -->
        <div class="bg-white rounded-xl shadow-sm p-5 text-center hover:shadow-md transition">
            <div class="w-12 h-12 mx-auto mb-3 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                ✔
            </div>
            <p class="text-gray-400 text-sm">Status Akun</p>
            <span class="inline-block mt-1 text-sm bg-green-100 text-green-600 px-3 py-1 rounded-full">
                Aktif
            </span>
        </div>

    </div>

    <!-- INFO SISTEM -->
    <div class="bg-white rounded-xl shadow-sm p-6 flex items-center justify-between">

        <div>
            <div class="flex items-center gap-2 text-blue-600 font-semibold mb-2">
                <span class="text-xl">ℹ</span> Informasi Sistem
            </div>

            <p class="text-gray-500 text-sm max-w-xl">
                Akun ini digunakan untuk mengakses sistem SENTARA
                (Sistem Analisis Sentimen Ulasan Dinas Pariwisata Jember).
            </p>
        </div>

    </div>

    <!-- FOOTER -->
    <div class="flex justify-between text-sm text-gray-400 mt-6">
        <span>© 2025 SENTARA. All rights reserved.</span>
        <span>Dinas Pariwisata Jember</span>
    </div>

</div>

@endsection