@extends('front.layouts.app')
@section('content')
    <!-- Inner Page Banner Area Start Here -->
    <div class="inner-page-banner-area">
        <div class="container">
            <div class="pagination-area">

            </div>
        </div>
    </div>
    <!-- Inner Page Banner Area End Here -->

    <div class="container my-5">
        <div class="row align-items-center">

            <!-- Left Image -->
            <div class="col-md-4 text-center">
                <img src="{{ asset($selectedFaculty['image']) }}" class="profile-img">
            </div>

            <!-- Right Content -->
            <div class="col-md-8">
                <h2 class="fw-bold text-danger mb-2">
                    {{ $selectedFaculty['name'] }}
                </h2>

                <h5 class="text-secondary mb-3">
                    {{ $selectedFaculty['designation'] }}
                </h5>

                <p class="mb-2">
                    <strong>Specialization:</strong>
                    {{ $selectedFaculty['specialization'] ?? 'N/A' }}
                </p>

                <p>
                    <strong>Email:</strong>
                    <a href="mailto:{{ $selectedFaculty['email'] }}">
                        {{ $selectedFaculty['email'] }}
                    </a>
                </p>
            </div>

        </div>
    </div>
    <style>
        .profile-img {
            width: 220px;
            height: 220px;
            object-fit: cover;
            border-radius: 50%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
    </style>
@endsection