{% extends 'website/base/base.html' %}
{% block title %} Courses {% endblock %}
{% block meta_description %}Learn the Digital Marketing and SEO skills with our Digital Marketing and SEO course in Rawalpindi. Click to read more.{% endblock %}

{% block stylesheets %}



<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<!-- Stylesheets -->
<link href="../static/website/assets/css/font-awesome-all.css" rel="stylesheet">
<link href="../static/website/assets/css/flaticon.css" rel="stylesheet">
<link href="../static/website/assets/css/owl.css" rel="stylesheet">
<link href="../static/website/assets/css/bootstrap.css" rel="stylesheet">
<link href="../static/website/assets/css/jquery.fancybox.min.css" rel="stylesheet">
<link href="../static/website/assets/css/animate.css" rel="stylesheet">
<link href="../static/website/assets/css/aos.css" rel="stylesheet">
<link href="../static/website/assets/css/nice-select.css" rel="stylesheet">
<link href="../static/website/assets/css/jquery-ui.css" rel="stylesheet">
<link href="../static/website/assets/css/elpath.css" rel="stylesheet">
<link href="../static/website/assets/css/color.css" id="jssDefault" rel="stylesheet">
<link href="../static/website/assets/css/rtl.css" rel="stylesheet">
<link href="../static/website/assets/css/style.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/page-title.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/contact.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/cta.css" rel="stylesheet">
<link href="../static/website/assets/css/responsive.css" rel="stylesheet">

<style>
    body{
            background-image: url('../static/website/assets/images/entire-body.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
</style>

{% endblock stylesheets %}

{% block content %}




        <!-- page-title -->
        <!-- <section class="page-title centred">
            <div class="auto-container">
                <div class="content-box">
                    <h1>Contact Us</h1>
                    <ul class="bread-crumb clearfix">
                        <li><a href="index.html">Home</a></li>
                        <li>Contact Us</li>
                    </ul>
                </div>
            </div>
        </section> -->
        <!-- page-title end -->


        <!-- contact-info-section -->
        <section class="contact-info-section centred pt_150 pb_120">
            <div class="auto-container">
                <div class="sec-title mb_60">
                    <h2 style="color: white;">Courses we provide for you</h2>
                    <p style="padding-top: 20px;">
                        At Digi Inn, our strategies are designed to maximize the engaging experiences of your customers and to improve customer retention through brand loyalty for your business.
                    </p>
                </div>
                <!-- Button and Info Block -->
                <div class="row clearfix">
                    {% for course in courses %}
                    <div class="col-lg-4 col-md-6 col-sm-12 info-block">
                        <div class="info-block-one" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="700">
                            <div class="inner-box" style="background: url('../static/website/assets/images/card-bg.png') no-repeat center center; background-size: cover; border-radius: 10px; padding: 20px;">
                                <!-- Image Section -->
                                <div class="image-box" style="text-align: center; margin-bottom: 15px;">
                                    <img src="{{ course.picture.url }}" alt="Location" style="width: 100%; height: 100%;">
                                </div>
                                <!-- Heading -->
                                <h3 style="color: white; margin-bottom: 10px;">{{ course.title }}</h3>
                                <!-- Button Section -->
                                <div class="button-box" style="text-align: center;">
                                    <!-- Button to trigger modal -->
                                    <button type="button" class="btn-two theme-btn btn-sm" data-bs-toggle="modal" data-bs-target="#applyNowModal" 
                                    data-id="{{ course.id }}" style="background-color: #ffffff; font-size: 13px; color: #ffffff; padding-left: 13px; padding-right: 13px; padding-top: 8px; padding-bottom: 8px;" >
                                        Apply Now
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>

                <!-- Bootstrap Modal -->
                <div class="modal fade" id="applyNowModal" tabindex="-1" aria-labelledby="applyNowModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content" 
                             style="background: url('../static/website/assets/images/card-bg.png') no-repeat center center; 
                                    background-size: cover; 
                                    border-radius: 10px; 
                                    padding: 20px;">
                            <!-- Modal Header -->
                            <div class="modal-header">
                                <h5 class="modal-title" id="applyNowModalLabel" style="color: white;">Apply Now</h5>
                                <button style="color: white !important;" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <!-- Modal Body -->
                            <div class="modal-body">
                                <!-- Bootstrap Form -->
                                <form method="post" action="/courses" id="course-form">
                                    {% csrf_token %}
                                    <input type="hidden" id="course-id" name="id">
                                    <div class="mb-2">
                                        <label for="name" class="form-label" style="color: white; text-align: left;"></label>
                                        <input type="text" class="form-control" id="name" name="name" placeholder="Enter your name" required>
                                    </div>
                                    <div class="mb-2">
                                        <label for="email" class="form-label" style="color: white;"></label>
                                        <input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" required>
                                    </div>
                                    <div class="mb-2">
                                        <label for="phone" class="form-label" style="color: white;"></label>
                                        <input type="phone" class="form-control" id="phone" name="phone" placeholder="Enter your Phone" required>
                                    </div>
                                    <div class="mb-3">
                                        <label for="degree" class="form-label" style="color: white;"></label>
                                        <input type="degree" class="form-control" id="degree" name="degree" placeholder="Enter your Degree" required>
                                    </div>
                                    
                                    <div class="text-end">
                                        <button type="submit" class="btn btn-primary btn-two theme-btn" style="border: none !important;">Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- contact-info-section end -->


    


       


        {% block javascripts %}

    <script>
            document.addEventListener("DOMContentLoaded", function () {
                let applyButtons = document.querySelectorAll("[data-bs-toggle='modal']");
        
                applyButtons.forEach(button => {
                    button.addEventListener("click", function () {
                        let courseId = this.getAttribute("data-id");  // Get course ID
                        document.getElementById("course-id").value = courseId;  // Set hidden input field
                    });
                });
            });
    </script>
        
    <!-- jequery plugins -->
    <script src="../static/website/assets/js/jquery.js"></script>
    <script src="../static/website/assets/js/bootstrap.min.js"></script>
    <script src="../static/website/assets/js/owl.js"></script>
    <script src="../static/website/assets/js/wow.js"></script>
    <script src="../static/website/assets/js/jquery.fancybox.js"></script>
    <script src="../static/website/assets/js/appear.js"></script>
    <script src="../static/website/assets/js/isotope.js"></script>
    <script src="../static/website/assets/js/jquery.nice-select.min.js"></script>
    <script src="../static/website/assets/js/aos.js"></script>
    <script src="../static/website/assets/js/validation.js"></script>

    <!-- main-js -->
    <script src="../static/website/assets/js/script.js"></script>

    {% endblock javascripts %}
    {% endblock content %}