@include('frontend.header')

    <style>
/* Hero Section */
.hero-banner {
    background: url("assets/img/department/tamil-banner.jpg") center/cover no-repeat;
    color: #fff;
    padding: 100px 0;
    text-align: center;
    position: relative;
}

.hero-banner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.hero-banner h1,
.hero-banner p {
    position: relative;
    z-index: 1;
}

.hero-banner h1 {
    font-size: 42px;
    font-weight: 700;
}

.hero-banner p.lead {
    font-size: 18px;
    font-weight: 400;
}

/* Typography */
h2 {
    font-weight: 700;
    margin-bottom: 20px;
    color: #003366;
}

p {
    line-height: 1.7;
    font-size: 16px;
    color: #333;
    text-align: justify;
}

@media (max-width: 576px) {
    .hero-banner h1 {
        font-size: 28px;
    }

    p {
        font-size: 15px;
        line-height: 1.6;
    }
}

/* Timeline */
.timeline {
    position: relative;
    margin: 40px 0;
    padding-left: 40px;
    border-left: 3px solid #007bff;
}

.timeline-item {
    position: relative;
    margin-bottom: 30px;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: -27px;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #007bff;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #007bff;
}

.timeline-item h5 {
    font-weight: 600;
    margin-bottom: 5px;
    color: #003366;
}

.timeline-item p {
    margin: 0;
    color: #555;
}

/* Faculty */
.faculty-card {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    background: #f9f9f9;
    transition: 0.3s;
}

.faculty-card:hover {
    background: #e6f0ff;
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.faculty-card h5 {
    font-weight: 600;
    margin-bottom: 5px;
    color: #003366;
}

.faculty-img {
    width: 90px !important;
    /* smaller size */
    height: 90px;
    /* keep it equal for perfect circle */
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #007bff;
    /* optional border color */
    display: block;
    margin: 0 auto 10px auto;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.faculty-card p {
    margin: 0;
    font-size: 15px;
    color: #666;
    text-align: center;
}

.view-profile-btn {
    margin-top: 12px;
    padding: 6px 14px;
    font-size: 14px;
    border-radius: 20px;
    background: #007bff;
    color: #fff;
    border: none;
    transition: 0.3s;
    text-decoration: none;
}

.view-profile-btn:hover {
    background: #0056b3;
    color: #fff;
}

/* Downloads */
.download-links a {
    display: block;
    padding: 12px 15px;
    margin: 8px 0;
    border-radius: 8px;
    background: #f5f5f5;
    text-decoration: none;
    color: #333;
    transition: 0.3s;
}

.download-links a:hover {
    background: #007bff;
    color: #fff;
}

/* Footer */
.footer-area {
    background: #003366;
}

.site-breadcrumb {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
    </style>




    <main class="main">
        <!-- breadcrumb -->

        <div class="site-breadcrumb">
            <div class="container">
                <h2 class="breadcrumb-title">About the Department</h2>
                <ul class="breadcrumb-menu">
                    <li><a href="{{ url('/') }}">Home</a></li>
                    <li class="active">{{ $department->department }} Department</li>
                </ul>
            </div>
        </div>

        <!-- breadcrumb end -->

        <main class="py-5">
            <div class="container">
                <div class="mb-5">
                    <h2>About the Department</h2>
                    @foreach($department->about as $about)
                    @for($i = 1; $i <= 6; $i++) @php $para="para$i" ; @endphp @if(!empty($about->$para))
                        <p>
                            <i class="fas fa-caret-right me-2"></i>
                            {{ $about->$para }}
                        </p>
                        @endif
                        @endfor
                        @endforeach

                </div>

                <section class="container py-5">
                    <h2 class="mb-4 text-center">Vision</h2>

                    <div class="faculty-card" style="text-align:justify;">

                        @foreach($department->vision_mission as $vision_mission)
                        <span>{{ $vision_mission->vision }}</span>

                        @endforeach
                    </div>

                </section>

                <section class="container py-5">
                    <h2 class="mb-4 text-center">Mission</h2>

                    <div class="faculty-card" style="text-align:justify;">

                        @foreach($department->vision_mission as $vision_mission)
                        <span>{{ $vision_mission->mission }}</span>
                        @endforeach

                    </div>

                </section>

                <!-- Timeline -->
                <div class="mb-5">
                    <h2 class="mb-4">Department Milestones</h2>
                    <div class="timeline">
                        @foreach($department->milestone as $milestone)
                        <div class="timeline-item">
                            <h5>{{ $milestone->year }}</h5>
                            <p>{{ $milestone->para }}</p>
                        </div>
                        @endforeach
                    </div>

                </div>
                <!-- Faculty Carousel -->
                @php
                $hod = $department->faculties->where('designation', 'HOD')->first();
                @endphp

                <section class="container py-5" style="
    display: flex;
    flex-direction: column;
    justify-content: center;
">
                    <h2 class="mb-4 text-center">Our HOD</h2>

                    @if($hod)
                    <div class="faculty-card">
                        <img src="{{ asset($hod->image ?? 'assets/img/avator.jpg') }}" alt="{{ $hod->name }}"
                            class="faculty-img">

                        <h5>{{ $hod->name }}</h5>
                        <p>{{ $hod->qualification }}</p>
                        <p>{{ $hod->designation }}</p>

                        <a href="{{ route('faculty.profile', $hod->id) }}" class="view-profile-btn">
                            View Profile
                        </a>
                    </div>
                    @else
                    <p class="text-center text-muted">No HOD added yet for this department.</p>
                    @endif
                </section>


             <!-- Faculty Carousel -->
<section class="container py-5">
    <h2 class="mb-4 text-center">Our Faculty</h2>

    @php
        // Filter out HOD
        $otherFaculties = $department->faculties->where('designation', '!=', 'HOD');
        $facultyCount = $otherFaculties->count();
    @endphp

    @if($facultyCount > 0)
        <div class="{{ $facultyCount > 6 ? 'owl-carousel faculty-carousel' : 'd-flex justify-content-center gap-4 flex-wrap' }}">

            @foreach($otherFaculties as $f)
                <div class="faculty-card text-center">
                    <img src="{{ asset($f->image ?? 'assets/img/avator.jpg') }}"
                         alt="{{ $f->name }}"
                         class="faculty-img">

                    <h5>{{ $f->name }}</h5>
                    <p>{{ $f->qualification ?? '' }}</p>
                    <p>{{ $f->designation }}</p>

                    <a href="{{ route('faculty.profile', $f->id) }}" class="view-profile-btn">
                        View Profile
                    </a>
                </div>
            @endforeach

        </div>
    @else
        <p class="text-center text-muted">No faculty added yet.</p>
    @endif
</section>


                <!-- Downloads -->
                <h2 class="mb-4">Syllabus & Resources</h2>
                <div class="download-links">
                    @foreach($department->syllabus as $s)
                    <a href="{{ asset($s->file) }}" target="_blank">
                        <i class="far fa-file-pdf"></i> {{ $s->title }}
                    </a>
                    @endforeach

                    @if($department->syllabus->isEmpty())
                    <p class="text-muted">No syllabus files available.</p>
                    @endif
                </div>

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

    @include('frontend.footer')
    <script>
document.getElementById("date").innerText = new Date().getFullYear();

$(document).ready(function() {
    $(".faculty-carousel").owlCarousel({
        loop: true,
        margin: 20,
        nav: false,
        dots: true,
        autoplay: true,
        autoplayTimeout: 3500,
        autoplayHoverPause: true,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 2
            },
            1000: {
                items: 3
            },
        },
    });
});
    </script>
    <script>
let bgImages = @json($department->banners->pluck('image')->map(fn($i) => asset($i)));

let i = 0;
let breadcrumb = document.querySelector('.site-breadcrumb');

// ✅ Show first image immediately
if (bgImages.length > 0) {
    breadcrumb.style.backgroundImage = `url('${bgImages[0]}')`;
}

// ✅ Auto slide every 4000ms
setInterval(() => {
    i = (i + 1) % bgImages.length;
    breadcrumb.style.backgroundImage = `url('${bgImages[i]}')`;
}, 4000);
    </script>