{% extends 'welcome_base.html' %}
{% load custom_filters %}
{% load i18n static %}
{% block extraCSS %}
    <style>
    .btn-check:checked + .btn .card {
      border-color: #0d6efd;
      box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
    </style>
{% endblock extraCSS %}
{% block content %}
    <div class="row">
        <div class="booking-hero-header d-flex align-items-center">
            <div class="bg-holder overlay bg-opacity-75"
                 style="background-image:url({% static 'video/image-haikal-02.png' %})">
                <video class="bg-video"
                       autoplay="autoplay"
                       loop="loop"
                       muted="muted"
                       playsinline="playsinline"
                       style="height: 100%;
                              width: 100%;
                              offset: right">
                    <source src="{% static 'video/haikal-video-02.mp4' %}" type="video/mp4" />
                </video>
            </div>
            <div class="container-small position-relative z-1 mb-2 p-5">
                <h2 class="text-secondary-lighter fs-7 fs-md-3 fw-bolder mb-3 text-uppercase">{{ _("Why us") }}?</h2>
                <h6 class="fs-6 fs-md-2 text-white fw-bolder mb-6 overflow-hidden">
                    {{ _("HAIKAL") }}
                    <span class="typed-text text-primary p-2"
                          data-typed-text="[&quot;<span class=text-primary p-2>{% trans 'Inventory'|upper %}</span>&quot;,&quot;<span class=text-warning p-2>{% trans 'CRM'|upper %}</span>&quot;, &quot;<span class=text-info p-2>{% trans 'Accounting'|upper %}</span>&quot;, &quot;<span class=text-success p-2>{% trans 'Reporting'|upper %}</span>&quot;]"><span class="text-warning p-2"></span></span>
                    <span class="typed-cursor p-2" aria-hidden="true"></span>
                </h6>
            </div>
        </div>
        <section class="pt-6 pt-md-10 pb-10" id="feature">
            <div class="container-medium">
                <div class="bg-holder d-none d-xl-block"
                     style="background-image:url({% static 'images/bg/bg-left-27.png' %});
                            background-size:auto;
                            background-position:left"></div>
                <div class="bg-holder d-none d-xl-block"
                     style="background-image:url({% static 'images/bg/bg-right-27.png' %});
                            background-size:auto;
                            background-position:right"></div>
                <div class="row g-3 position-relative">
                    <div class="col-lg-6">
                        <div class="row g-3">
                            <div class="col-md-7">
                                <h4 class="fw-semibold mb-3">{{ _("Because Inventory Needs Order") }}</h4>
                                <p class="mb-3 mb-md-0 text-body-tertiary">
                                    {% blocktrans %}Haikal empowers car dealers with a seamless, structured system to manage their inventory effortlessly, ensuring every vehicle is tracked, accounted for, and ready for sale with precision and efficiency.{% endblocktrans %}
                                </p>
                            </div>
                            <div class="col-6 col-md-5">
                                <div class="img-zoom-hover position-relative h-100 rounded-3 overflow-hidden">
                                    <a href="#">
                                        <img class="w-100 h-100 object-fit-cover bg-opacity-75"
                                             src="{% static 'images/bg/haikal-01.png' %}"
                                             alt="" />
                                    </a>
                                    <div class="backdrop-faded">
                                        <a class="fw-bold fs-7 text-white stretched-link" href="#">{% trans 'Inventory Management' %}</a>
                                        <p class="mb-0 text-white fs-9">
                                            {% trans 'Effortlessly manage your car inventory with real-time updates and intuitive tools.' %}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 col-md-5">
                                <div class="img-zoom-hover position-relative h-100 rounded-3 overflow-hidden">
                                    <a href="#">
                                        <img class="w-100 h-100 object-fit-cover bg-opacity-75"
                                             src="{% static 'images/bg/haikal-10.png' %}"
                                             alt="" />
                                    </a>
                                    <div class="backdrop-faded">
                                        <a class="fw-bold fs-7 text-white" href="#!">{% trans 'Seamless Accounting' %}</a>
                                        <p class="mb-0 text-white fs-9">{% trans 'Integrated double-entry accounting tailored for car dealers.' %}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-7">
                                <div class="img-zoom-hover position-relative h-100 rounded-3 overflow-hidden">
                                    <a href="#">
                                        <img class="w-100 h-md-100 object-fit-cover bg-opacity-75"
                                             src="{% static 'images/bg/haikal-11.png' %}"
                                             alt=""
                                             height="220" />
                                    </a>
                                    <div class="backdrop-faded">
                                        <a class="fw-bold fs-7 text-white" href="#">{% trans 'Advanced Analytics' %}</a>
                                        <p class="mb-0 text-white fs-9">{% trans 'Gain insights and make data-driven decisions for your business.' %}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="d-flex flex-column gap-3 h-100">
                            <div class="img-zoom-hover position-relative h-100 rounded-3 overflow-hidden">
                                <a href="#">
                                    <img class="w-100 h-lg-100 object-fit-cover bg-opacity-75"
                                         src="{% static 'images/bg/haikal-09.png' %}"
                                         alt=""
                                         height="220" />
                                </a>
                                <div class="backdrop-faded">
                                    <a class="fw-bold fs-7 text-white" href="#!">{% trans 'CRM' %}</a>
                                    <p class="mb-0 text-white fs-9">
                                        {% trans 'Specialized customer relationship management system designed for car dealers, offering streamlined sales.' %}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="bg-body-emphasis pt-lg-0 pt-xl-8" id="pricing">
            <div class="bg-holder d-none d-xl-block"
                 style="background-image:url({% static 'images/bg/bg-left-29.png' %});
                        background-size:auto;
                        background-position:-15%"></div>
            <div class="container-medium position-relative">
                <h2 class="mb-7">{{ _("Pricing") }}</h2>
                <div class="row g-3 mb-7 mb-lg-11">
                    {% for plan in plan_list %}
                        <div class="col-lg-3">
                            <input type="radio"
                                   class="btn-check"
                                   name="selected_plan"
                                   id="plan_{{ forloop.counter }}"
                                   value="{{ plan.id }}"
                                   autocomplete="off">
                            <label class="btn w-100 h-100 p-0" for="plan_{{ forloop.counter }}">
                                <div class="card h-100 border border-2 rounded-4
                                            {% if forloop.first %}
                                                border-primary
                                            {% else %}
                                                border-secondary
                                            {% endif %}">
                                    <div class="card-body p-4">
                                        <h2 class="mb-4 h5">{{ plan.name }}</h2>
                                        <h3 class="h6 mb-3">
                                            {{ plan.planpricing_set.first.price }}
                                            <span class="icon-saudi_riyal"></span>
                                            <span class="fs-8 fw-normal">/ {{ _("Per month") }}</span>
                                        </h3>
                                        <h5 class="mb-3 h6">{{ _("Included") }}</h5>
                                        <ul class="fa-ul ps-3 m-0">
                                            {% for line in plan.description|splitlines %}
                                                <li class="d-flex align-items-start mb-2">
                                                    <span class="fa-li"><i class="fas fa-check text-primary"></i></span>
                                                    <span class="text-muted fw-semibold">{{ line }}</span>
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            </label>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </section>
        <section class="overflow-x-hidden mb-9 pt-lg-0 pt-xl-8">
            <div class="bg-holder d-none d-xl-block"
                 style="background-image:url({% static 'images/bg/bg-left-31.png' %});
                        background-size:22%;
                        background-position:left;
                        z-index:1"></div>
            <div class="bg-holder d-none d-xl-block"
                 style="background-image:url({% static 'images/bg/bg-right-31.png' %});
                        background-size:15%;
                        background-position:right bottom;
                        z-index:1"></div>
            <div class="bg-latest-posts"></div>
            <div class="container-medium text-center position-relative z-2">
                <h3 class="mb-2 text-body-emphasis">{{ _("Other features") }}</h3>
                <p class="mb-0 text-body-tertiary mb-13">{{ _("Find out other features included in Haikal") }}</p>
            </div>
            <div class="swiper-theme-container swiper-zooming-slider">
                <div class="swiper-container theme-slider"
                     data-swiper='{"loop":true,"slidesPerView":1.3,"spaceBetween":32,"speed":2000,"autoplay":true,"centeredSlides":true,"simulateTouch":false,"breakpoints":{"540":{"slidesPerView":1.5},"768":{"slidesPerView":1.8},"1200":{"slidesPerView":2},"1530":{"slidesPerView":2.8}}}'>
                    <div class="swiper-wrapper">
                        <div class="swiper-slide rounded-3 overflow-hidden">
                            <div class="position-relative w-100 h-100">
                                <img class="w-100 h-100 object-fit-cover"
                                     src="{% static 'images/bg/haikal-02.png' %}"
                                     alt="" />
                                <div class="backdrop-faded p-4 p-md-6">
                                    <a class="text-white fw-bold fs-7" href="#">{{ _("Manage Everything from one place") }}</a>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide rounded-3 overflow-hidden">
                            <div class="position-relative w-100 h-100">
                                <img class="w-100 h-100 object-fit-cover"
                                     src="{% static 'images/bg/haikal-08.png' %}"
                                     alt="" />
                                <div class="backdrop-faded p-4 p-md-6">
                                    <a class="text-white fw-bold fs-7" href="#">{{ _("The Car is in the center of your business") }}</a>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide rounded-3 overflow-hidden">
                            <div class="position-relative w-100 h-100">
                                <img class="w-100 h-100 object-fit-cover"
                                     src="{% static 'images/bg/haikal-03.png' %}"
                                     alt="" />
                                <div class="backdrop-faded p-4 p-md-6">
                                    <a class="text-white fw-bold fs-7" href="#">{{ _("Fully Integrated System") }}</a>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide rounded-3 overflow-hidden">
                            <div class="position-relative w-100 h-100">
                                <img class="w-100 h-100 object-fit-cover"
                                     src="{% static 'images/bg/haikal-04.png' %}"
                                     alt="" />
                                <div class="backdrop-faded p-4 p-md-6">
                                    <a class="text-white fw-bold fs-7" href="#!">{{ _("Advanced Dashboards for better decisions") }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-nav">
                    <div class="swiper-button-next">
                        <span class="fas fa-chevron-right text-primary"
                              data-fa-transform="shrink-3"></span>
                    </div>
                    <div class="swiper-button-prev">
                        <span class="fas fa-chevron-left text-primary" data-fa-transform="shrink-3"></span>
                    </div>
                </div>
            </div>
        </section>
        <section class="pt-lg-0 pt-xl-8">
            {% include 'footer.html' %}
        </section>
    </div>
{% endblock %}