@extends('layouts.layoutdepartment')

@section('title')
Agricultural 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">
    Agricultural 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;">Agricultural 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;
    }

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

    .course-table-wrapper {
        overflow-x: auto;
        margin-top: 18px;
    }

    .course-table {
        width: 100%;
        border-collapse: collapse;
        font-family: 'Poppins', sans-serif;
        min-width: 600px;
    }

    .course-table th {
        background: #ff6600;
        color: #fff;
        font-size: 15px;
        padding: 12px 10px;
        border: 1px solid #e3e3e3;
        text-align: center;
    }

    .course-table td {
        padding: 12px 10px;
        border: 1px solid #e3e3e3;
        font-size: 16px;
        color: #333;
        text-align: center;
        background: #fff;
    }

    .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 Agricultural Engineering is committed to preparing students with strong technical knowledge, practical exposure, and ethical values required for modern agriculture and allied industries. The department promotes the application of engineering principles for improving farm productivity, irrigation systems, soil and water conservation, processing, and sustainable agricultural development.
                </p>
                <p class="department-content-text">
                    Agricultural Engineering combines engineering science with agricultural practices to solve real-world challenges related to mechanization, natural resource management, and agro-based production systems. The department focuses on academic excellence, skill development, research awareness, and industry relevance.
                </p>

                <div class="course-table-wrapper">
                    <table class="course-table">
                        <thead>
                            <tr>
                                <th>S. No.</th>
                                <th>Duration</th>
                                <th>Course</th>
                                <th>Seats</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>4 Years</td>
                                <td>B.Tech (Agricultural Engineering)</td>
                                <td>60</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div> -->

            <div class="department-detail-card">
                <h4 class="fw-bold txt department-title">Vision of the Department</h4>
                <p class="department-content-text">
                    Cultivate ethical agricultural engineering professionals, disseminate knowledge, and apply engineering principles for societal and national benefit in areas such as farm mechanization, irrigation, and conservation.
                </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 provide students education in Agriculture, Processing, Farm power, machines, soil, water, and natural resources.
                    </li>
                    <li>
                        To promote research for sustainable productivity, cost reduction, farm mechanization, and improved production.
                    </li>
                    <li>
                        To produce skilled engineers with contemporary knowledge and research expertise for agro-based industries globally.
                    </li>
                    <li>
                        To educate agricultural engineers to ethically adapt to technological changes, contributing to consistent eco-friendly societal development throughout their careers.
                    </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/AG 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)
                    <div class="faculty-profile-box">
                        <div class="faculty-header-area">
                            <img class="faculty-photo"
                                src="{{ asset($item->image) }}"
                                alt="{{ $item->name }}"
                                onerror="this.src='{{ asset('img/faculty/default-user.png') }}'">
                        </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="{{ asset('img/faculty/default-user.png') }}"
                                alt="Er. Amit Kumar Yadav">
                        </div>
                        <div class="faculty-name-text">Er. Amit Kumar Yadav</div>
                        <div class="faculty-job-title">Mentor</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="{{ asset('img/faculty/default-user.png') }}"
                                alt="Er. Prateek Sachan">
                        </div>
                        <div class="faculty-name-text">Er. Prateek Sachan</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="{{ asset('img/faculty/pankaj-kumar.png') }}"
                                alt="Er. Pankaj Kumar">
                        </div>
                        <div class="faculty-name-text">Er. Pankaj Kumar</div>
                        <div class="faculty-job-title">HOD</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="{{ asset('img/faculty/vivek-verma.png') }}"
                                alt="Er. Vivek Verma">
                        </div>
                        <div class="faculty-name-text">Er. Vivek Verma</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="{{ asset('img/faculty/shringar-mishra.png') }}"
                                alt="Er. Shringar Mishra">
                        </div>
                        <div class="faculty-name-text">Er. Shringar Mishra</div>
                        <div class="faculty-job-title">Assistant 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