{% extends 'main/base.html' %}
{% load static %}

{% block title %}Monaco Institute of Business and Computer Science - Home{% endblock %}

{% block content %}

<!-- Hero Slider -->
<section class="hero-section">
    <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="20000">
        <div class="carousel-indicators">
            {% for slider in sliders %}
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="{{ forloop.counter0 }}" {% if forloop.first %}class="active"{% endif %}></button>
            {% empty %}
            <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active"></button>
            {% endfor %}
        </div>
        <div class="carousel-inner">
            {% for slider in sliders %}
            <div class="carousel-item {% if forloop.first %}active{% endif %}">
                <div class="hero-slide" style="background-image: url('{{ slider.image.url }}')">
                    <div class="hero-overlay"></div>
                    <div class="hero-content">
                        <h2 data-aos="fade-up">{{ slider.title }}</h2>
                        {% if slider.subtitle %}<p data-aos="fade-up" data-aos-delay="200">{{ slider.subtitle }}</p>{% endif %}
                        {% if slider.link %}
                        <a href="{{ slider.link }}" class="btn btn-hero" data-aos="fade-up" data-aos-delay="400">Read More</a>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="carousel-item active">
                <div class="hero-slide hero-default">
                    <div class="hero-overlay"></div>
                    <div class="hero-content">
                        <h2 data-aos="fade-up">Welcome to Monaco Institute</h2>
                        <p data-aos="fade-up" data-aos-delay="200">Excellence in Business and Computer Science Education</p>
                        <a href="{% url 'admissions' %}" class="btn btn-hero" data-aos="fade-up" data-aos-delay="400">Apply Now</a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>
</section>

<!-- Welcome + Course Types -->
<section class="welcome-section py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div class="welcome-text" data-aos="fade-right">
                    <h2 class="section-title">Welcome to Monaco Institute</h2>
                    <div class="title-bar"></div>
                    <p class="mt-3">{{ settings.about_text|default:"Monaco Institute of Business and Computer Science is a premier institution dedicated to providing world-class education in business administration, information technology, and computer science. We are committed to nurturing talent, fostering innovation, and building the business and technology leaders of tomorrow." }}</p>
                    <a href="{% url 'admissions' %}" class="btn btn-primary-custom mt-3">Apply to Study at Monaco</a>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="course-type-cards" data-aos="fade-left">
                    <a href="{% url 'courses_by_type' 'degree' %}" class="course-type-card degree">
                        <i class="fas fa-university"></i>
                        <span>Children ICT Skills Training</span>
                    </a>
                    <a href="{% url 'courses_by_type' 'diploma' %}" class="course-type-card diploma">
                        <i class="fas fa-scroll"></i>
                        <span>Diploma Courses</span>
                    </a>
                    <a href="{% url 'courses_by_type' 'certificate' %}" class="course-type-card certificate">
                        <i class="fas fa-certificate"></i>
                        <span>Certificate Courses</span>
                    </a>
                    <a href="{% url 'courses_by_type' 'short' %}" class="course-type-card short">
                        <i class="fas fa-clock"></i>
                        <span>Short Courses</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Featured Courses -->
{% if diploma_courses %}
<section class="courses-section py-5 bg-light">
    <div class="container">
        <h2 class="section-title text-center" data-aos="fade-up">Diploma Courses</h2>
        <div class="title-bar mx-auto mb-4"></div>
        <div class="row">
            {% for course in diploma_courses %}
            <div class="col-lg-3 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="{{ forloop.counter0|add:1 }}00">
                <div class="course-card">
                    <div class="course-card-icon">
                        <i class="fas fa-book-open"></i>
                    </div>
                    <h5>{{ course.title }}</h5>
                    <p>{{ course.description|truncatewords:20 }}</p>
                    <div class="course-meta">
                        <span><i class="fas fa-clock me-1"></i>{{ course.duration }}</span>
                    </div>
                    <a href="{% url 'course_detail' course.pk %}" class="btn btn-outline-primary btn-sm mt-2">Learn More</a>
                </div>
            </div>
            {% endfor %}
        </div>
        <div class="text-center mt-3">
            <a href="{% url 'courses_by_type' 'diploma' %}" class="btn btn-primary-custom">View All Diploma Courses</a>
        </div>
    </div>
</section>
{% endif %}

<!-- Stats Section -->
<section class="stats-section py-5">
    <div class="container">
        <div class="row text-center">
            <div class="col-md-3 col-6 mb-4" data-aos="fade-up">
                <div class="stat-item">
                    <div class="stat-number">50+</div>
                    <div class="stat-label">Courses Offered</div>
                </div>
            </div>
            <div class="col-md-3 col-6 mb-4" data-aos="fade-up" data-aos-delay="100">
                <div class="stat-item">
                    <div class="stat-number">5000+</div>
                    <div class="stat-label">Students Enrolled</div>
                </div>
            </div>
            <div class="col-md-3 col-6 mb-4" data-aos="fade-up" data-aos-delay="200">
                <div class="stat-item">
                    <div class="stat-number">100+</div>
                    <div class="stat-label">Faculty Members</div>
                </div>
            </div>
            <div class="col-md-3 col-6 mb-4" data-aos="fade-up" data-aos-delay="300">
                <div class="stat-item">
                    <div class="stat-number">25+</div>
                    <div class="stat-label">Years of Excellence</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- News Section -->
{% if news %}
<section class="news-section py-5 bg-light">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <h2 class="section-title" data-aos="fade-up">News Highlights</h2>
                <div class="title-bar mb-4"></div>
                <div class="row">
                    {% for item in news %}
                    <div class="col-md-6 mb-4" data-aos="fade-up" data-aos-delay="{{ forloop.counter0|add:1 }}00">
                        <div class="news-card">
                            {% if item.image %}
                            <div class="news-card-img">
                                <img src="{{ item.image.url }}" alt="{{ item.title }}" class="img-fluid">
                            </div>
                            {% endif %}
                            <div class="news-card-body">
                                <div class="news-date"><i class="fas fa-calendar me-1"></i>{{ item.published_date|date:"d M Y" }}</div>
                                <h5><a href="{% url 'news_detail' item.pk %}">{{ item.title|truncatewords:10 }}</a></h5>
                                <p>{{ item.excerpt|default:item.content|truncatewords:25 }}</p>
                                <a href="{% url 'news_detail' item.pk %}" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="col-lg-4">
                <!-- Notice Board -->
                {% if notices %}
                <div class="sidebar-widget" data-aos="fade-left">
                    <h5 class="widget-title">Notice Board</h5>
                    <ul class="notice-list">
                        {% for notice in notices %}
                        <li>
                            <i class="fas fa-bullhorn me-2 text-warning"></i>
                            <a href="{% url 'news_detail' notice.pk %}">{{ notice.title }}</a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}

                <!-- Downloads -->
                {% if downloads %}
                <div class="sidebar-widget mt-4" data-aos="fade-left" data-aos-delay="200">
                    <h5 class="widget-title">Important Downloads</h5>
                    <ul class="download-list">
                        {% for download in downloads %}
                        <li>
                            <a href="{{ download.file.url }}" target="_blank">
                                <i class="fas fa-file-pdf text-danger me-2"></i>
                                {{ download.title }}
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</section>
{% endif %}

<!-- Director's Message -->
{% if settings.director_message %}
<section class="director-section py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-4 text-center" data-aos="fade-right">
                {% if settings.director_photo %}
                <img src="{{ settings.director_photo.url }}" alt="{{ settings.director_name }}" class="director-photo">
                {% else %}
                <div class="director-photo-placeholder">
                    <i class="fas fa-user-tie"></i>
                </div>
                {% endif %}
                <h4 class="mt-3">{{ settings.director_name }}</h4>
                <p class="text-muted">Director</p>
            </div>
            <div class="col-lg-8" data-aos="fade-left">
                <h2 class="section-title">Message from the Director</h2>
                <div class="title-bar mb-3"></div>
                <div class="director-message">
                    <i class="fas fa-quote-left quote-icon"></i>
                    <p>{{ settings.director_message }}</p>
                </div>
            </div>
        </div>
    </div>
</section>
{% endif %}

<!-- CTA Section -->
<section class="cta-section">
    <div class="container text-center">
        <h2 data-aos="fade-up">Building Your Career Starts Here</h2>
        <p data-aos="fade-up" data-aos-delay="100">Enroll for a career-boosting course at Monaco Institute</p>
        <div class="mt-4" data-aos="fade-up" data-aos-delay="200">
            <a href="{% url 'admissions' %}" class="btn btn-cta me-3">Enroll Now</a>
            <a href="{% url 'courses' %}" class="btn btn-cta-outline">View All Courses</a>
        </div>
    </div>
</section>

{% endblock %}