@extends("layouts.admin.app")

@section("page-title") {{__("Profile")}} @endSection

@section("page-nav-title")
<div class="app-title">
    <div>
        <h1>{{__("Profile")}}</h1>
        <p>{{__("profile-dashboard")}}</p>
    </div>
    <ul class="app-breadcrumb breadcrumb">
        <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
        <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
        <li class="breadcrumb-item"><a href="#">{{__("Profile")}}</a></li>
    </ul>
</div>
@endsection

@section("content")
<style>
    .main {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url(images/back.jpg);
        background-position: center;
        background-size: cover;
    }

    .profile-card-container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 50%;
    }

    .profile-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 600px;
        width: 100%;
        border-radius: 15px; /* Reduced border-radius for a cleaner look */
        padding: 30px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* Lightened box-shadow */
        background-color: #fff; /* Added a white background */
    }

    .image {
        position: relative;
        height: 150px;
        width: 150px;
        border-radius: 50%;
        overflow: hidden;
    }

    .image .profile-pic {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    .data {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 15px;
    }

    .data h2 {
        font-size: 24px; /* Reduced font size for a cleaner look */
        font-weight: 600;
        margin-bottom: 5px; /* Added margin-bottom for spacing */
    }

    .data span {
        font-size: 16px; /* Reduced font size for a cleaner look */
        color: #888; /* Dimmed color for secondary text */
    }

    .row {
        display: flex;
        align-items: center;
        margin-top: 20px; /* Reduced margin-top for spacing */
        width: 80%;
    }

    .row .info {
        flex: 1;
        text-align: center;
        padding: 0 10px;
    }

    .buttons {
        display: flex;
        align-items: center;
        margin-top: 20px;
    }

    .buttons .btn {
        color: #fff;
        text-decoration: none;
        margin: 0 10px;
        padding: 8px 20px;
        border-radius: 15px;
        font-size: 16px;
        white-space: nowrap;
    }

    .buttons .btn:hover {
        box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.1); /* Lightened box-shadow on hover */
    }
</style>
<div class="main">
    <div class="profile-card-container">
        <div class="profile-card">
            <div class="image">
                <img src="{{ $adminProfile->getFirstMediaFile("Admin")->url ?? asset("assets/user_avatar.jpg") }}" alt="" class="profile-pic">
            </div>
            <div class="data">
                <h2>{{$adminProfile->full_name}}</h2>
                <span>{{__("heads-of-departments")}}</span>
            </div>
            <div class="row">
                <div class="info">
                    <h3>{{__("email")}}</h3>
                    <span>{{$adminProfile->email}}</span>
                </div>
                <div class="info">
                    <h3>{{__("Phone")}}</h3>
                    <span>{{$adminProfile->phone}}</span>
                </div>
                <div class="info">
                    <h3>{{__("code")}}</h3>
                    @if (auth()->user()->is_super_admin)
                        <span>-----------</span>
                    @else
                        <span>{{$adminProfile->code}}</span>
                    @endif
                </div>
            </div>
            <div class="buttons">
                <a href="{{route('admin.profile.edit',$adminProfile->id) }}" style="float: right;" class="btn btn-rounded btn-success mb-5">{{__("Edit profile")}}</a>
            </div>
        </div>
    </div>
</div>
@endsection