@extends('layouts.layoutdepartment')

@section('title')
Mechanical Engineering
@endsection

@section('about_left_col_class', 'position-relative')
@section('about_nav_class', 'about-sticky-nav')

@section('aboutheading')
<h2 style="padding-top: 230px; color:white; font-family: 'Poppins', sans-serif;"
    class="fw-bold text-uppercase headingm1 headerinner text-center">
    Mechanical Engineering
</h2>
<p class="text-center mt-2 text-light fw-bold text-uppercase">
    <a href="{{ asset('/') }}" style="color: #fff; text-decoration: none; font-family: 'Lexend', sans-serif;">
        HOME
    </a>
    &nbsp;/&nbsp;
    <span style="color: #fff; font-family: 'Poppins', sans-serif;">Mechanical Engineering</span>
</p>
@endsection

@section('Aboutsection')
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
    integrity="sha512-utbXrjRAKsmEM7xxpYQ5r0qtzB5tUI3iIrNfU+Vam8EeTZwnMyUP3tCDg3xq6i0TZgxHk3C5zbi7XbncP9GldA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
    @media(max-width:576px) {
        .txt {
            font-size: 17px !important;
        }

        .department-content-text,
        .department-content-list li,
        .course-table th,
        .course-table td {
            font-size: 15px !important;
            line-height: 28px !important;
        }
    }

    .department-detail-card {
        background: #fff;
        border-radius: 10px;
        padding: 20px 22px;
        margin-bottom: 20px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    }

    .department-title {
        color: #ff6600;
        border-left: 5px solid #ff6600;
        padding-left: 10px;
        font-family: 'Lexend', serif;
        font-weight: 700;
        font-size: 24px;
        margin-bottom: 10px;
    }

    .department-content-text {
        line-height: 35px;
        font-size: 17px;
        text-align: justify;
        font-family: 'Poppins', sans-serif;
        color: #444;
        margin-top: 15px;
        margin-bottom: 0;
    }

    .department-content-list {
        padding-left: 20px;
        margin-top: 15px;
        margin-bottom: 0;
    }

    .department-content-list li {
        line-height: 35px;
        font-size: 17px;
        text-align: justify;
        font-family: 'Poppins', sans-serif;
        color: #444;
        margin-bottom: 8px;
    }

    .faculty-section-title {
        color: #ff6600;
        border-left: 5px solid #ff6600;
        padding-left: 10px;
        font-family: 'Lexend', serif;
        font-weight: 700;
        font-size: 24px;
        margin-bottom: 20px;
    }

    .faculty-profile-box {
        max-width: 320px;
        margin: 15px auto;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
        overflow: hidden;
        text-align: center;
        font-family: 'Segoe UI', sans-serif;
        min-height: 360px;
    }

    .faculty-header-area {
        background: linear-gradient(135deg, #543322, #7b4b2f);
        height: 100px;
        position: relative;
    }

    .faculty-photo {
        width: 120px !important;
        height: 120px !important;
        object-fit: cover;
        border-radius: 50%;
        border: 4px solid #fff;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
    }

    .faculty-name-text {
        margin-top: 70px;
        font-size: 20px;
        font-weight: 700;
        color: #222;
        padding: 0 10px;
        line-height: 1.4;
        min-height: 56px;
    }

    .faculty-job-title {
        font-size: 15px;
        color: #777;
        margin-bottom: 12px;
        padding: 0 10px;
        min-height: 22px;
    }

    .faculty-contact-icons a {
        margin: 0 8px;
        font-size: 18px;
        color: #333;
        transition: 0.3s;
        text-decoration: none;
    }

    .faculty-contact-icons a:hover {
        color: #ff6600;
    }

    .faculty-message-button {
        background-color: #ff6600;
        color: #fff;
        border: none;
        padding: 9px 22px;
        border-radius: 25px;
        margin: 15px 0 20px;
        font-size: 14px;
        text-decoration: none;
        display: inline-block;
        transition: 0.3s;
        font-family: 'Poppins', sans-serif;
    }

    .faculty-message-button:hover {
        background-color: #e65c00;
        color: #fff;
    }

    .ppt-btn {
        background: #0d6efd;
        color: #fff;
        border-radius: 30px;
        padding: 10px 24px;
        text-decoration: none;
        font-weight: 600;
        display: inline-block;
        transition: 0.3s;
        font-family: 'Poppins', sans-serif;
    }

    .ppt-btn:hover {
        background: #0b5ed7;
        color: #fff;
    }

    .owl-nav button.owl-prev,
    .owl-nav button.owl-next {
        background: #ff6600 !important;
        color: #fff !important;
        border-radius: 50% !important;
        width: 35px;
        height: 35px;
        margin: 5px;
    }

    .owl-dots .owl-dot span {
        background: #ccc !important;
    }

    .owl-dots .owl-dot.active span {
        background: #ff6600 !important;
    }
</style>

<div class="container py-5 mx-auto p-4">
    <div class="row">
        <div class="col-sm-12">

            <div class="department-detail-card">
                <h4 class="fw-bold txt department-title">Vision of the Department</h4>
                <p class="department-content-text">
                    Striving to produce mechanical engineers and researchers with a commitment to ethical principles,
                    environmental consciousness, and technological progress, fostering their development as responsible
                    individuals and entrepreneurs under visionary leadership.
                </p>
            </div>

            <div class="department-detail-card">
                <h4 class="fw-bold txt department-title">Mission of the Department</h4>
                <ul class="department-content-list">
                    <li>
                        To establish an academic environment conducive to fostering creativity and innovation, with a
                        focus on bridging the gap between industry and academia.
                    </li>
                    <li>
                        To enhance ethical, entrepreneurial, and leadership skills for meaningful contributions towards
                        socio-economic development.
                    </li>
                    <li>
                        To promote the use of modern tools in the field of mechanical engineering to enhance proficiency
                        and innovation.
                    </li>
                </ul>
            </div>

            <div class="department-detail-card text-center">
                <h4 class="fw-bold txt department-title d-inline-block text-start">Department Presentation</h4>
                <div class="mt-3">
                    <a href="{{ asset('img/PPT/ME Presentation.pdf') }}" target="_blank"
                        class="faculty-message-button">
                        View Department Presentation
                    </a>
                </div>
            </div>

            <h4 class="faculty-section-title">Faculty Members</h4>

            <div class="container mb-5 mt-2">
                <div class="owl-carousel owl-theme">

                    @if (isset($dept) && count($dept) > 0)
                    @foreach ($dept as $item)
                    @php
                    $updatedName = trim($item->name ?? '');
                    $updatedDesignation = trim($item->designation ?? '');

                    if (strtolower($updatedName) == strtolower('Sanjeev Mishra')) {
                    $updatedName = 'Er. Sanjeev Mishra';
                    $updatedDesignation = 'Assistant Professor';
                    } elseif (strtolower($updatedName) == strtolower('Chetan Kumar Pal')) {
                    $updatedName = 'Mr. Chetan Kumar Pal';
                    $updatedDesignation = 'Workshop Superintendent';
                    } elseif (strtolower($updatedName) == strtolower('Arun Kumar Singh')) {
                    $updatedName = 'Mr. Arun Kumar Singh';
                    $updatedDesignation = 'Lab Instructor';
                    }
                    @endphp

                    <div class="faculty-profile-box">
                        <div class="faculty-header-area">
                            <img class="faculty-photo"
                                src="{{ asset($item->image) }}"
                                alt="{{ $updatedName }}"
                                onerror="this.src='{{ asset('img/faculty/default-user.png') }}'">
                        </div>

                        <div class="faculty-name-text">
                            {{ $updatedName }}
                        </div>

                        <div class="faculty-job-title">
                            {{ $updatedDesignation }}
                        </div>

                        <div class="faculty-contact-icons">
                            <a href="#"><i class="fab fa-linkedin"></i></a>
                            <a href="#"><i class="fab fa-github"></i></a>
                            @if (!empty($item->email))
                            <a href="mailto:{{ $item->email }}"><i class="fas fa-envelope"></i></a>
                            @endif
                        </div>

                        
                    </div>
                    @endforeach
                    @else

                    {{-- Existing Fallback Faculty --}}
                    <div class="faculty-profile-box">
                        <div class="faculty-header-area">
                            <img class="faculty-photo"
                                src="{{ asset('img/faculty/default-user.png') }}"
                                alt="Er. Rajesh Kumar"
                                onerror="this.src='{{ asset('img/faculty/default-user.png') }}'">
                        </div>
                        <div class="faculty-name-text">Er. Rajesh Kumar</div>
                        <div class="faculty-job-title">Lecturer</div>
                        <span class="faculty-message-button">Faculty Profile</span>
                    </div>

                    <div class="faculty-profile-box">
                        <div class="faculty-header-area">
                            <img class="faculty-photo"
                                src="{{ asset('img/faculty/default-user.png') }}"
                                alt="Dr. Ashray Jaiswal"
                                onerror="this.src='{{ asset('img/faculty/default-user.png') }}'">
                        </div>
                        <div class="faculty-name-text">Dr. Ashray Jaiswal</div>
                        <div class="faculty-job-title">Associate Professor</div>
                        <span class="faculty-message-button">Faculty Profile</span>
                    </div>

                    <div class="faculty-profile-box">
                        <div class="faculty-header-area">
                            <img class="faculty-photo"
                                src="{{ asset('img/faculty/default-user.png') }}"
                                alt="Dr. B.N. Pathak"
                                onerror="this.src='{{ asset('img/faculty/default-user.png') }}'">
                        </div>
                        <div class="faculty-name-text">Dr. B.N. Pathak</div>
                        <div class="faculty-job-title">Associate Professor</div>
                        <span class="faculty-message-button">Faculty Profile</span>
                    </div>

                    {{-- Updated Existing Members --}}
                    <div class="faculty-profile-box">
                        <div class="faculty-header-area">
                            <img class="faculty-photo"
                                src="{{ asset('img/faculty/sanjeev-mishra.png') }}"
                                alt="Er. Sanjeev Mishra"
                                onerror="this.src='{{ asset('img/faculty/default-user.png') }}'">
                        </div>
                        <div class="faculty-name-text">Er. Sanjeev Mishra</div>
                        <div class="faculty-job-title">Assistant Professor</div>
                        <span class="faculty-message-button">Faculty Profile</span>
                    </div>

                    <div class="faculty-profile-box">
                        <div class="faculty-header-area">
                            <img class="faculty-photo"
                                src="{{ asset('img/faculty/chetan-kumar-pal.png') }}"
                                alt="Mr. Chetan Kumar Pal"
                                onerror="this.src='{{ asset('img/faculty/default-user.png') }}'">
                        </div>
                        <div class="faculty-name-text">Mr. Chetan Kumar Pal</div>
                        <div class="faculty-job-title">Workshop Superintendent</div>
                        <span class="faculty-message-button">Faculty Profile</span>
                    </div>

                    <div class="faculty-profile-box">
                        <div class="faculty-header-area">
                            <img class="faculty-photo"
                                src="{{ asset('img/faculty/arun-kumar-singh.png') }}"
                                alt="Mr. Arun Kumar Singh"
                                onerror="this.src='{{ asset('img/faculty/default-user.png') }}'">
                        </div>
                        <div class="faculty-name-text">Mr. Arun Kumar Singh</div>
                        <div class="faculty-job-title">Lab Instructor</div>
                        <span class="faculty-message-button">Faculty Profile</span>
                    </div>

                    {{-- New Members --}}
                    <div class="faculty-profile-box">
                        <div class="faculty-header-area">
                            <img class="faculty-photo"
                                src="{{ asset('img/faculty/amit-kumar-yadav.png') }}"
                                alt="Er. Amit Kumar Yadav"
                                onerror="this.src='{{ asset('img/faculty/default-user.png') }}'">
                        </div>
                        <div class="faculty-name-text">Er. Amit Kumar Yadav</div>
                        <div class="faculty-job-title">HOD</div>
                        <span class="faculty-message-button">Faculty Profile</span>
                    </div>

                    <div class="faculty-profile-box">
                        <div class="faculty-header-area">
                            <img class="faculty-photo"
                                src="{{ asset('img/faculty/dolly-singh.png') }}"
                                alt="Er. Dolly Singh"
                                onerror="this.src='{{ asset('img/faculty/default-user.png') }}'">
                        </div>
                        <div class="faculty-name-text">Er. Dolly Singh</div>
                        <div class="faculty-job-title">Assistant Professor</div>
                        <span class="faculty-message-button">Faculty Profile</span>
                    </div>
                    @endif

                </div>
            </div>

        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script>
    $(document).ready(function() {
        $('.owl-carousel').owlCarousel({
            loop: true,
            margin: 20,
            nav: true,
            dots: true,
            autoplay: true,
            autoplayTimeout: 4000,
            smartSpeed: 800,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 2
                },
                1000: {
                    items: 3
                }
            }
        });
    });
</script>
@endsection