{% extends "base.html" %}
{% load static %}
{% block content %}
<div class="bg-wave container-fluid">
    <div class="row row-cols-1 row-cols-md-1 row-cols-lg-2 justify-content-center align-items-center ">
        <div class="col px-md-5">
            <div class="mx-md-5">
                <span class="fs-6 fw-bold bg-light text-custom p-3 rounded-pill z-10 d-inline-block mt-5">Let's Know
                    Islam</span>
                <h1 class="title fs-60 mt-5 arabic-font">
                    بسم الله الرحمن الرحيم
                </h1>
                <h1 class="title fs-1 my-2">
                    Allah - beginning with the name of - the Most Gracious, the Most Merciful
                </h1>
                <p class="lh-lg z-10 text-custom-2 fw-bold text-capitalize">This is a islamic educational platform- manage by ARKA islamic Technology Research Education. Lets know about islam And The Holy Qur'aan</p>
                <div class="my-5">
                    <a href="{% url 'about' %}" class="btn-custom">Discover More</a>
                </div>
            </div>
        </div>
        <div class="col position-relative text-center" style="z-index: 10;">
            <a href="/worship_category/shahada"><img src="{% static '/images/1pillar.png' %}" class="img-fluid my-3 me-5 w-75" alt=""></a>
            <a href="/worship_category/salaah"><img src="{% static '/images/2pillar.png' %}" class="img-fluid my-3 ms-5 w-75" alt=""></a>
            <a href="/worship_category/fasting"><img src="{% static '/images/3pillar.png' %}" class="img-fluid my-3 me-5 w-75" alt=""></a>
            <a href="/worship_category/zakkat"><img src="{% static '/images/4pillar.png' %}" class="img-fluid my-3 ms-5 w-75" alt=""></a>
            <a href="/worship_category/hajj"><img src="{% static '/images/5pillar.png' %}" class="img-fluid my-3 me-5 w-75" alt=""></a>
        </div>
    </div>
</div>
<div class="my-5">
    <div class="container-fluid">
        <h3 class="title fs-1 text-center">Ahle Sunnat Wal Jamaat
        </h3>
        <p class="heading-text text-center mx-3">PRESENTS</p>
        <ul class="row row-cols-2 row-cols-md-4 justify-content-center align-items-center nav book_list">
            {% for booklist in book %}
            <li class="col text-center nav-item d-none books">
                <a href="{% url 'bookdetail' booklist.slug %}" class="text-decoration-none">
                    <img src="{{booklist.book_image.url}}" class="img-fluid w-auto h-150 my-3" alt="">
                    <p class="heading-text">{{booklist.book_name}}</p>
                </a>
            </li>
            {% endfor %}
        </ul>
    </div>
    <div class="text-center">
        <button type="button" class="btn-custom" id="loadAllImages">See More Books</button>
    </div>
</div>
<div class="my-5 px-md-4 container-fluid">
    <h3 class="title text-center mb-3">Daily Update</h3>
    <div class="row row-cols-1 row-cols-md-2 my-5">
        <div class="col">
            {% for aayat_list in aayat|slice:1 %}
            <div class="card mb-3" style="max-width: auto;">
                <div class="row g-0">
                    <div class="col-md-4">
                        <img src="{{aayat_list.aayat_image.url}}" id="aayatimage" style="height: 238px;"
                            class="img-full rounded-start m-auto" alt="...">
                    </div>
                    <div class="col-md-8">
                        <div class="card-body">
                            <h5 class="card-title heading-text fs-1">Aayat Of The Day</h5>
                            <p class="card-text">
                            <div class="container-fluid">
                                <div class="row row-cols-2 justify-content-center">
                                    <div class="col-4 my-2">
                                        <p class="p-0 m-0 lh-base">Aayat No : </p>
                                    </div>
                                    <div class="col-8 my-2">
                                        <p class="p-0 m-0 lh-base">{{aayat_list.aayat_no}}</p>
                                    </div>
                                    <div class="col-4 my-2">
                                        <p class="p-0 m-0 lh-base">Aayat from : </p>
                                    </div>
                                    <div class="col-8 my-2">
                                        <p class="p-0 m-0 lh-base">{{aayat_list.aayat_detail}} </p>
                                    </div>
                                </div>
                            </div>
                            </p>
                            <div class="m-2">
                                <a class="btn btn-success" onclick="AayatWhatsapp()" id="aayatbtn"><i
                                        class="fa-brands fa-whatsapp text-white"></i>
                                    Share</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        <div class="col">
            {% for hadees_list in hadees|slice:1 %}
            <div class="card mb-3" style="max-width: auto;">
                <div class="row g-0">
                    <div class="col-md-4">
                        <img src="{{hadees_list.hadees_image.url}}" id="hadeesimage" style="height: 238px;"
                            class="img-full rounded-start m-auto" alt="...">
                    </div>
                    <div class="col-md-8">
                        <div class="card-body">
                            <h5 class="card-title heading-text fs-1">Hadees Of The Day</h5>
                            <p class="card-text">
                            <div class="container-fluid">
                                <div class="row row-cols-2 justify-content-center">
                                    <div class="col-4 my-2">
                                        <p class="p-0 m-0 lh-base">Hadees No: </p>
                                    </div>
                                    <div class="col-8 my-2">
                                        <p class="p-0 m-0 lh-base">{{hadees_list.hadees_no}}</p>
                                    </div>
                                    <div class="col-4 my-2">
                                        <p class="p-0 m-0 lh-base">Hadees By: </p>
                                    </div>
                                    <div class="col-8 my-2">
                                        <p class="p-0 m-0 lh-base">{{hadees_list.hadees_detail}}</p>
                                    </div>
                                </div>
                            </div>
                            </p>
                            <div class="m-2">
                                <a class="btn btn-success" onclick="HadeesWhatsapp()" id="hadeesButton"><i
                                        class="fa-brands fa-whatsapp text-white"></i>
                                    Share</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        <!-- <div class="col my-5 text-center col-md-12">
            <div class="input-group-item me-5">
                <a href="{% url 'dailyislamHadees' %}" class="btn-custom">Explore More</a>
            </div>
        </div> -->
    </div>
    <div class="row row-cols-1 justify-content-center my-5 align-items-center">
        {% for video in learn_quran|slice:1 %}
        <div class="col text-center">
            <iframe style="width: 100%;" height="450" src="{{video.iframe_url}}" title="YouTube video player"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
        </div>
        {% endfor %}
    </div>
</div>
<div class="container my-5">
    <h1 class="title text-center">
        Qur'aan
    </h1>
    <div class="row row-cols-1 row-cols-md-3 align-items-center justify-content-center">
        <div class="col my-4">
            <div class="card rounded-5 overflow-hidden" style="width: 18rem; margin: auto;">
                <img src="{% static 'images/aayat.png' %}" height="143" class="card-img-top w-50 m-auto my-3" alt="...">
                <div class="card-body">
                    <h3 class="heading-text fs-3 text-center">AAYAT</h3>
                    <p class="card-text text-center">Qur'aan by Aayat.</p>
                </div>
                <div class="card-footer bg-wave-card w-100 text-center">
                    <a href="{% url 'aayatdetail' %}" class="btn-custom"><i class="fa-solid fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
        <div class="col my-4">
            <div class="card rounded-5 overflow-hidden" style="width: 18rem; margin: auto;">
                <img src="{% static 'images/surah.jpg' %}" class="card-img-top w-50 m-auto my-3" alt="...">
                <div class="card-body">
                    <h3 class="heading-text fs-3 text-center">SURAH</h3>
                    <p class="card-text text-center">Qur'aan by Surah.</p>
                </div>
                <div class="card-footer bg-wave-card w-100 text-center">
                    <a href="{% url 'surah' %}" class="btn-custom"><i class="fa-solid fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
        <div class="col my-4">
            <div class="card rounded-5 overflow-hidden" style="width: 18rem; margin: auto;">
                <img src="{% static 'images/para.png' %}" class="card-img-top w-50 m-auto my-3" alt="...">
                <div class="card-body">
                    <h3 class="heading-text fs-3 text-center">Qur'aan</h3>
                    <p class="card-text text-center">Qur'aan by Volume.</p>
                </div>
                <div class="card-footer bg-wave-card w-100 text-center">
                    <a href="{% url 'quraanlist' %}" class="btn-custom"><i class="fa-solid fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container my-5">
    <div class="row row-cols-1 row-cols-md-1 row-cols-lg-2 justify-content-center align-items-center">
        <div class="col px-md-5">
            <img src="{% static 'images/about.png' %}" class="img-fluid" alt="">
        </div>
        <div class="col px-md-5 my-3">
            <p class="fs-4 fw-bold bg-light text-custom p-3 rounded-pill z-10 d-inline-block mt-5">About Us</p>
            <h1 class="title">
                Seeking of knowledge is a duty of every Muslim
            </h1>
            <p class="lh-lg">The rise of Muslims to the zenith of civilization in a period of four decades was based
                on lslam's emphasis on learning. This is obvious when one takes a look at the Qur'an and the
                traditions of Prophet Muhammad which are filled with references to learning, education, observation.
            </p>
            <div class="mt-5">
                <div class="input-group align-items-center">
                    <div class="input-group-item me-5">
                        <a href="{% url 'about' %}" class="btn-custom">Discover More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}