@extends('layouts.master')

@section('title')
    Profile Admin
@endsection

@section('content')
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="text-center mb-4">
                                <img src="{{ asset('assets/images/profile1.jpg') }}" class="rounded-circle img-thumbnail" width="150" alt="profile-image">
                                <h4 class="mt-3 mb-0">{{ Auth::guard('admin')->user()->name }}</h4>
                                <p class="text-muted">Administrator</p>
                            </div>

                            <div class="row">
                                <div class="col-12">
                                    <div class="p-2">
                                        <h5 class="mb-3">Informasi Akun Admin</h5>
                                        <div class="border rounded p-3">
                                            <div class="row mb-3">
                                                <div class="col-md-4">
                                                    <strong>Nama Admin</strong>
                                                </div>
                                                <div class="col-md-8">
                                                    {{ Auth::guard('admin')->user()->name }}
                                                </div>
                                            </div>
                                            <div class="row mb-3">
                                                <div class="col-md-4">
                                                    <strong>Email</strong>
                                                </div>
                                                <div class="col-md-8">
                                                    {{ Auth::guard('admin')->user()->email }}
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <strong>Role</strong>
                                                </div>
                                                <div class="col-md-8">
                                                    Administrator
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .card {
            border: none;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        .card-body {
            padding: 2rem;
        }
        .img-thumbnail {
            padding: 0.25rem;
            background-color: #fff;
            border: 2px solid #dee2e6;
            max-width: 150px;
            height: auto;
        }
        .border {
            border-color: #eee !important;
        }
        .row strong {
            color: #333;
        }
        .text-muted {
            color: #6c757d !important;
        }
    </style>
@endsection