@extends('layouts.layoutdepartment')

@section('title')
Applied Sciences and Humanities
@endsection

@section('aboutheading')
<h2 style="padding-top: 230px; color:white; font-family: 'Poppins', sans-serif;"
    class="fw-bold text-uppercase headingm1 headerinner text-center">
    Applied Sciences and Humanities
</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;">Applied Sciences and Humanities</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 {
            font-size: 17px !important;
            line-height: 30px !important;
        }
    }

    .department-detail-card {
        background: #fff;
        border-radius: 10px;
        padding: 20px 22px;
        margin-bottom: 20px;
    }

    .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;
    }

    .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">About the Department</h4>
                <p class="department-content-text">
                    The Department of Applied Sciences and Humanities plays a vital role in building the academic
                    foundation of engineering students. The department strengthens the basic concepts of Physics,
                    Chemistry, Mathematics, English, and Humanities, which are essential for the overall professional
                    growth of students.
                </p>
                <p class="department-content-text">
                    The department is committed to creating an academic environment that promotes analytical thinking,
                    communication skills, ethical values, and personality development. It serves as a bridge between
                    fundamental sciences and professional engineering education.
                </p>
            </div> -->

            <div class="department-detail-card">
                <h4 class="fw-bold txt department-title">Vision of the Department</h4>
                <p class="department-content-text">
                    To inspire and encourage students to understand and apply the core principles of applied sciences
                    in engineering and technology, while developing their analytical abilities through a strong
                    foundation in humanities and management sciences.
                </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 play a key role in establishing a strong foundation for engineering education by enhancing
                        students’ professional competencies in basic sciences and core engineering disciplines.
                    </li>
                    <li>
                        To create an enriching learning environment that prepares students to meet global technical
                        standards while fostering confidence, character, and strong human values.
                    </li>
                    <li>
                        To elevate the quality of technical education and develop dynamic engineers and entrepreneurs
                        who contribute effectively to national growth.
                    </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('PPT/Babu Sunder Singh Institute of Technology and Management.pdf_20260506_113759_0000.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)
                    <div class="faculty-profile-box">
                        <div class="faculty-header-area">
                            <img class="faculty-photo"
                                src="{{ asset($item->image) }}"
                                alt="{{ $item->name }}">
                        </div>

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

                        <div class="faculty-job-title">
                            {{ $item->designation }}
                        </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
                    <div class="faculty-profile-box">
                        <div class="faculty-header-area">
                            <img class="faculty-photo"
                                src="https://www.pngitem.com/pimgs/m/272-2720656_user-profile-dummy-hd-png-download.png"
                                alt="Mr. Tripesh Tiwari">
                        </div>
                        <div class="faculty-name-text">Mr. Tripesh Tiwari</div>
                        <div class="faculty-job-title">Assistant Professor</div>
                        <a href="#" class="faculty-message-button">Faculty Profile</a>
                    </div>

                    <div class="faculty-profile-box">
                        <div class="faculty-header-area">
                            <img class="faculty-photo"
                                src="https://www.pngitem.com/pimgs/m/272-2720656_user-profile-dummy-hd-png-download.png"
                                alt="Mr. Shyam Rang">
                        </div>
                        <div class="faculty-name-text">Mr. Shyam Rang</div>
                        <div class="faculty-job-title">Assistant Professor</div>
                        <a href="#" class="faculty-message-button">Faculty Profile</a>
                    </div>

                    <div class="faculty-profile-box">
                        <div class="faculty-header-area">
                            <img class="faculty-photo"
                                src="https://www.pngitem.com/pimgs/m/272-2720656_user-profile-dummy-hd-png-download.png"
                                alt="Ms. Mamta Singh">
                        </div>
                        <div class="faculty-name-text">Ms. Mamta Singh</div>
                        <div class="faculty-job-title">Assistant Professor</div>
                        <a href="#" class="faculty-message-button">Faculty Profile</a>
                    </div>

                    <div class="faculty-profile-box">
                        <div class="faculty-header-area">
                            <img class="faculty-photo"
                                src="https://www.pngitem.com/pimgs/m/272-2720656_user-profile-dummy-hd-png-download.png"
                                alt="Dr. Ashray Jaiswal">
                        </div>
                        <div class="faculty-name-text">Dr. Ashray Jaiswal</div>
                        <div class="faculty-job-title">Assistant Professor</div>
                        <a href="#" class="faculty-message-button">Faculty Profile</a>
                    </div>

                    <div class="faculty-profile-box">
                        <div class="faculty-header-area">
                            <img class="faculty-photo"
                                src="https://www.pngitem.com/pimgs/m/272-2720656_user-profile-dummy-hd-png-download.png"
                                alt="Ms. Barkha Thapa">
                        </div>
                        <div class="faculty-name-text">Ms. Barkha Thapa</div>
                        <div class="faculty-job-title">Assistant Professor</div>
                        <a href="#" class="faculty-message-button">Faculty Profile</a>
                    </div>

                    <div class="faculty-profile-box">
                        <div class="faculty-header-area">
                            <img class="faculty-photo"
                                src="https://www.pngitem.com/pimgs/m/272-2720656_user-profile-dummy-hd-png-download.png"
                                alt="Mr. Aditya Mishra">
                        </div>
                        <div class="faculty-name-text">Mr. Aditya Mishra</div>
                        <div class="faculty-job-title">Assistant Professor</div>
                        <a href="#" class="faculty-message-button">Faculty Profile</a>
                    </div>

                    <div class="faculty-profile-box">
                        <div class="faculty-header-area">
                            <img class="faculty-photo"
                                src="https://www.pngitem.com/pimgs/m/272-2720656_user-profile-dummy-hd-png-download.png"
                                alt="Dr. Anand Singh">
                        </div>
                        <div class="faculty-name-text">Dr. Anand Singh</div>
                        <div class="faculty-job-title">Associate Professor</div>
                        <a href="#" class="faculty-message-button">Faculty Profile</a>
                    </div>

                    <div class="faculty-profile-box">
                        <div class="faculty-header-area">
                            <img class="faculty-photo"
                                src="https://www.pngitem.com/pimgs/m/272-2720656_user-profile-dummy-hd-png-download.png"
                                alt="Dr. Arun Kumar">
                        </div>
                        <div class="faculty-name-text">Dr. Arun Kumar</div>
                        <div class="faculty-job-title">Associate Professor</div>
                        <a href="#" class="faculty-message-button">Faculty Profile</a>
                    </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