@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 -->

    {{-- facult profile cards appear here --}}
    <div class="container my-5">
        <h2 class="text-center fw-bold mb-4 text-danger">PHD Faculty</h2>

        <div class="row justify-content-center">

            <!-- Card 1 -->
            <div class="col-md-4 mb-4">
                <a href="{{ route('faculty.profile', 'salman-chugtai') }}" class="text-decoration-none text-dark">
                    <div class="faculty-card text-center p-4">
                        <img src="{{ asset('frontend/academics') }}/img/faculty/2026/SalmanChughtai.jpg" class="faculty-img mb-3">
                        <h5 class="fw-bold">Dr Muhammad Salman Chughtai</h5>
                        <p class="text-muted mb-1">Assistant  Professor</p>
                        <span class="faculty-badge">PhD Management Science</span>
                    </div>
                </a>
            </div>

            <!-- Card 2 -->
            <div class="col-md-4 mb-4">
                <a href="{{ route('faculty.profile', 'saeed-ahmad') }}" class="text-decoration-none text-dark">
                    <div class="faculty-card text-center p-4">
                        <img src="{{ asset('frontend/academics') }}/img/faculty/2026/SaeedAhmad.jfif" class="faculty-img mb-3">
                        <h5 class="fw-bold">Dr Muhammad  Saeed  Ahmad</h5>
                        <p class="text-muted mb-1">Assistant  Professor</p>
                        <span class="faculty-badge">PhD Business  & Management</span>
                    </div>
                </a>
            </div>

            <!-- Card 3 -->
            <div class="col-md-4 mb-4">
                <a href="{{ route('faculty.profile', 'rubab-tahir') }}" class="text-decoration-none text-dark">
                    <div class="faculty-card text-center p-4">
                        <img src="{{ asset('frontend/academics') }}/img/faculty/2026/RubabTahir.jpeg" class="faculty-img mb-3">
                        <h5 class="fw-bold">Dr Rubab Tahir</h5>
                        <p class="text-muted mb-1">Assistant  Professor</p>
                        <span class="faculty-badge">PhD Management Science</span>
                    </div>
                </a>
            </div>

        </div>
    </div>
    <style>
        .faculty-card {
            background: #f8f9fa;
            border-radius: 15px;
            transition: 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        }

        .faculty-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .faculty-img {
            width: 120px;
            height: 120px;
            object-fit: cover;
            border-radius: 50%;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .faculty-badge {
            display: inline-block;
            padding: 5px 12px;
            font-size: 13px;
            border-radius: 20px;
            background: #e9ecef;
            color: #333;
        }
    </style>
@endsection