<div class="container-fluid" style="background-color: #ffffff;">
    <div class="row">
        <div class="col-lg-12">
            <!-- حقل البحث عن الخدمة مع زر -->
            <div class="input-group" style="margin: 20px auto; max-width: 800px;">
                <input type="text" class="form-control" placeholder="ابحث عن خدمة بالاسم أو رقم الخدمة / Search by name or service ID" id="serviceSearch" onkeyup="filterServices()">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" onclick="filterServices()">
                        <i class="fa fa-search" aria-hidden="true"></i> بحث
                    </button>
                </span>
            </div>
            <!-- خيار الفلترة -->
            <div class="dropdown" style="margin-bottom: 20px;">
                <button class="btn btn-primary dropdown-toggle" type="button" id="filterDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    {{ site['rtl'] ? 'الفئات' : 'Categories' }}
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="filterDropdown">
                    <li><a class="dropdown-item" href="#" onclick="filterByCategory('all')">{{ lang('services.all') }}</a></li>
                    {% for category in serviceCategoryList %}
                        {% if category.name %}
                            <li><a class="dropdown-item" href="#" onclick="filterByCategory('{{ category.id }}')">{{ category.name }}</a></li>
                        {% endif %}
                    {% endfor %}
                </ul>
            </div><div class="well well-float">
            <div class="row">
                {% for category in serviceCategoryList %}
                    {% if category.name %}
                    <!-- عنوان الفئة -->
                    <div class="col-lg-12 category-wrapper" data-category-id="{{ category.id }}">
                        <h2 class="category-title">{{ category.name }}</h2>
                    </div>
                    {% endif %}
                    {% for service in category['services'] %}
                    <div class="col-lg-4 col-md-6 col-sm-12 service-card-container" 
                         data-category-id="{{ category.id }}" 
                         data-service-id="{{ service['id'] }}">
                        <div class="service-card">
                            <div class="service-card-body {% if site['rtl'] %}rtl{% else %}ltr{% endif %}">
                                <div class="service-details">
                                    <div class="service-name">{{ service['name'] }}</div>
                                    <div class="service-id">رقم الخدمة: {{ service['id'] }}</div>
                                    <div class="service-rate">💲 السعر لكل 1000: {{ service['rate'] }}</div>
                                    {% if site['average_time'] %}
                                    <div class="service-average-time">
                                        <strong>السرعة:</strong> {{ service['average_time'] }}
                                    </div>
                                    {% endif %}
                                    <div class="service-min">الحد الأدنى: {{ service['min'] }}</div>
                                    <div class="service-max">الحد الأقصى: {{ service['max'] }}</div>
                                </div>
                                <div class="text-right" style="margin-top: 10px;">
                                    <a href="https://kd1s.com/?service={{ service['id'] }}" class="btn btn-success">طلب</a>
                                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#descModal{{ service['id'] }}">
                                        وصف الخدمة
                                    </button>
                                </div>

                                <!-- Modal -->
                                <div class="modal fade" id="descModal{{ service['id'] }}" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="true">
                                  <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content" style="position: relative; padding-top: 20px;">
                                      <div style="position: absolute; top: 10px; left: 10px; z-index: 999;">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                                          style="width: 40px; height: 40px; border-radius: 50%; background-color: #ffc107; color: white; font-size: 1.5rem; border: none;">
                                          &times;
                                        </button>
                                      </div>
                                      <div class="modal-body">
                                        {{ service['description'] }}
                                      </div>
                                    </div>
                                  </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    {% endfor %}
                {% endfor %}
            </div>
        </div>
    </div>
</div>

</div>{% if servicesText %}

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="well {% if site['rtl'] %} rtl-content {% endif %}">
                {{ servicesText }}
            </div>
        </div>
    </div>
</div>
{% endif %}<script>
// فلترة الخدمات حسب البحث (اسم الخدمة أو رقم الخدمة)
let searchTimeout;
function filterServices() {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => {
        var input = document.getElementById("serviceSearch");
        var filter = input.value.toLowerCase();
        var cards = document.querySelectorAll(".service-card-container");
        var categories = document.querySelectorAll(".category-wrapper");

        cards.forEach(function(card) {
            let serviceId = card.getAttribute("data-service-id") || "";
            let serviceNameEl = card.querySelector(".service-name");
            let serviceName = "";
            if (serviceNameEl) {
                serviceName = serviceNameEl.innerHTML
                    .replace(/<[^>]*>/g, '')
                    .replace('اسم الخدمة:', '')
                    .trim()
                    .toLowerCase();
            }

            if (filter === "") {
                card.style.display = "";
            } else if (serviceId.toLowerCase().includes(filter) || serviceName.includes(filter)) {
                card.style.display = "";
            } else {
                card.style.display = "none";
            }
        });

        categories.forEach(function(category) {
            if (filter !== "") {
                category.style.display = "none";
            } else {
                category.style.display = "block";
            }
        });
    }, 300);
}

function filterByCategory(categoryId) {
    let cards = document.getElementsByClassName("service-card-container");
    let categories = document.querySelectorAll(".category-wrapper");
    for (let i = 0; i < cards.length; i++) {
        if (categoryId === 'all') {
            cards[i].style.display = '';
        } else {
            if (cards[i].getAttribute("data-category-id") === categoryId) {
                cards[i].style.display = '';
            } else {
                cards[i].style.display = 'none';
            }
        }
    }
    categories.forEach(function(category) {
        if (categoryId === 'all') {
            category.style.display = 'block';
        } else {
            if (category.getAttribute("data-category-id") === categoryId) {
                category.style.display = 'block';
            } else {
                category.style.display = 'none';
            }
        }
    });
}
</script><style>
    .category-title {
        background-color: #ffa500;
        color: white;
        padding: 10px;
        margin: 30px 0 20px 0;
        text-align: center;
        border-radius: 5px;
        font-size: 1.5rem;
    }

    .service-card {
        background: #fff;
        border: 2px solid #ffa500;
        border-radius: 8px;
        padding: 15px;
        height: 100%;
        transition: box-shadow 0.3s ease;
        margin-bottom: 20px;
    }

    .service-card:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .service-card-body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 1rem;
    }

    .service-card-body.rtl {
        direction: rtl;
        text-align: right;
    }

    .service-card-body.ltr {
        direction: ltr;
        text-align: left;
    }

    .service-details {
        margin-bottom: 10px;
    }

    .service-average-time {
        font-weight: bold;
    }

    @media (max-width: 768px) {
        .category-title {
            font-size: 1.25rem;
        }
        .service-card-body {
            font-size: 0.875rem;
        }
    }
</style>