{"id":1501,"date":"2025-07-07T08:23:47","date_gmt":"2025-07-07T08:23:47","guid":{"rendered":"https:\/\/test-new.mispay.co\/%d8%b5%d9%81%d9%82%d8%a9\/"},"modified":"2025-08-13T11:29:45","modified_gmt":"2025-08-13T11:29:45","slug":"%d8%b5%d9%81%d9%82%d8%a9","status":"publish","type":"page","link":"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/","title":{"rendered":"\u0635\u0641\u0642\u0629"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1501\" class=\"elementor elementor-1501 elementor-572\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-411bd55 e-flex e-con-boxed e-con e-parent\" data-id=\"411bd55\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0f531a5 elementor-widget elementor-widget-html\" data-id=\"0f531a5\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div>\r\n\r\n\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"\u0627\u0644\u0639\u0631\u0636=\u0639\u0631\u0636 \u0627\u0644\u062c\u0647\u0627\u0632\u060c \u0627\u0644\u0645\u0642\u064a\u0627\u0633 \u0627\u0644\u0623\u0648\u0644\u064a=1.0\">\r\n    <title>\u0645\u0633\u062a\u0646\u062f<\/title>\r\n\r\n\r\n    <?php\r\n\/**\r\n * Template Name: Deals Page\r\n *\/\r\n\r\nget_header(); ?>\r\n\r\n<style>\r\n\/* MISPay Deals Page Styles *\/\r\n.mispay-deals-container {\r\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n    background-color: #f8f9fa;\r\n    min-height: 100vh;\r\n}\r\n\r\n\/* Navigation *\/\r\n.mispay-nav {\r\n    background: white;\r\n    padding: 1rem 0;\r\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\r\n}\r\n\r\n.nav-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding: 0 2rem;\r\n}\r\n\r\n.nav-logo img {\r\n    height: 40px;\r\n}\r\n\r\n.nav-menu {\r\n    display: flex;\r\n    gap: 2rem;\r\n}\r\n\r\n.nav-item {\r\n    text-decoration: none;\r\n    color: #333;\r\n    font-weight: 500;\r\n    transition: color 0.3s;\r\n}\r\n\r\n.nav-item:hover {\r\n    color: #6B46C1;\r\n}\r\n\r\n.nav-right {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 1rem;\r\n}\r\n\r\n.get-app-btn {\r\n    text-decoration: none;\r\n    color: #333;\r\n    padding: 0.5rem 1rem;\r\n    border: 1px solid #ddd;\r\n    border-radius: 8px;\r\n    font-size: 0.9rem;\r\n}\r\n\r\n.language-selector {\r\n    color: #666;\r\n    font-size: 0.9rem;\r\n}\r\n\r\n.login-btn {\r\n    background: #6B46C1;\r\n    color: white;\r\n    border: none;\r\n    padding: 0.75rem 1.5rem;\r\n    border-radius: 8px;\r\n    font-weight: 500;\r\n    cursor: pointer;\r\n    transition: background-color 0.3s;\r\n}\r\n\r\n.login-btn:hover {\r\n    background: #553C9A;\r\n}\r\n\r\n\/* Breadcrumb *\/\r\n.breadcrumb {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 1rem 2rem;\r\n    color: #666;\r\n}\r\n\r\n.breadcrumb .current {\r\n    color: #333;\r\n    font-weight: 500;\r\n}\r\n\r\n\/* Main Content *\/\r\n.deals-content {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 0 2rem;\r\n}\r\n\r\n.deals-content h1 {\r\n    font-size: 2.5rem;\r\n    font-weight: 700;\r\n    color: #333;\r\n    margin-bottom: 2rem;\r\n}\r\n\r\n\/* Filters *\/\r\n.deals-filters {\r\n    display: flex;\r\n    gap: 1rem;\r\n    margin-bottom: 2rem;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.search-container {\r\n    flex: 1;\r\n    min-width: 300px;\r\n}\r\n\r\n.search-input {\r\n    width: 100%;\r\n    padding: 0.75rem 1rem;\r\n    border: 1px solid #ddd;\r\n    border-radius: 8px;\r\n    font-size: 1rem;\r\n    background: white;\r\n}\r\n\r\n.search-input::placeholder {\r\n    color: #999;\r\n}\r\n\r\n.filter-dropdowns {\r\n    display: flex;\r\n    gap: 1rem;\r\n}\r\n\r\n.filter-select {\r\n    padding: 0.75rem 1rem;\r\n    border: 1px solid #ddd;\r\n    border-radius: 8px;\r\n    font-size: 1rem;\r\n    background: white;\r\n    min-width: 150px;\r\n}\r\n\r\n\/* Deals Grid *\/\r\n.deals-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n    gap: 2rem;\r\n    margin-bottom: 3rem;\r\n}\r\n\r\n.deal-card {\r\n    background: white;\r\n    border-radius: 12px;\r\n    padding: 1.5rem;\r\n    box-shadow: 0 4px 6px rgba(0,0,0,0.1);\r\n    transition: transform 0.3s, box-shadow 0.3s;\r\n}\r\n\r\n.deal-card:hover {\r\n    transform: translateY(-4px);\r\n    box-shadow: 0 8px 20px rgba(0,0,0,0.15);\r\n}\r\n\r\n.deal-header {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 1rem;\r\n    margin-bottom: 1rem;\r\n}\r\n\r\n.store-logo {\r\n    width: 48px;\r\n    height: 48px;\r\n    border-radius: 50%;\r\n    overflow: hidden;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    background: #f5f5f5;\r\n}\r\n\r\n.store-logo img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n}\r\n\r\n.store-info h3 {\r\n    margin: 0;\r\n    font-size: 1.1rem;\r\n    font-weight: 600;\r\n    color: #333;\r\n}\r\n\r\n.store-code {\r\n    margin: 0;\r\n    font-size: 0.9rem;\r\n    color: #666;\r\n}\r\n\r\n.deal-badge {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n    padding: 0.5rem 1rem;\r\n    border-radius: 6px;\r\n    font-size: 0.9rem;\r\n    font-weight: 500;\r\n    margin-bottom: 1rem;\r\n    width: fit-content;\r\n}\r\n\r\n.discount-badge {\r\n    background: #E8F5E8;\r\n    color: #2D7D32;\r\n}\r\n\r\n.cashback-badge {\r\n    background: #E3F2FD;\r\n    color: #1976D2;\r\n}\r\n\r\n.deal-discount {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    margin-bottom: 1.5rem;\r\n}\r\n\r\n.discount-value {\r\n    font-size: 2.5rem;\r\n    font-weight: 700;\r\n    color: #333;\r\n}\r\n\r\n.deal-timer {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n    background: #E8F5E8;\r\n    padding: 0.5rem 1rem;\r\n    border-radius: 6px;\r\n    font-size: 0.9rem;\r\n    color: #2D7D32;\r\n}\r\n\r\n.get-deal-btn {\r\n    width: 100%;\r\n    padding: 1rem;\r\n    background: #6B46C1;\r\n    color: white;\r\n    border: none;\r\n    border-radius: 8px;\r\n    font-size: 1rem;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    transition: background-color 0.3s;\r\n}\r\n\r\n.get-deal-btn:hover {\r\n    background: #553C9A;\r\n}\r\n\r\n\/* Load More *\/\r\n.load-more-container {\r\n    text-align: center;\r\n    margin-bottom: 3rem;\r\n}\r\n\r\n.load-more-btn {\r\n    padding: 12px 18px;\r\n    background: white;\r\n    border: 1px solid #D5D7DA;\r\n    color: #414651;\r\n    border-radius: 8px;\r\n    font-size: 16px;\r\n    line-height: 24px;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    transition: all 0.3s;\r\n}\r\n\r\n.load-more-btn:hover {\r\n    background: #6B46C1;\r\n    color: white;\r\n}\r\n\r\n\/* App Promotion Section *\/\r\n.app-promo-section {\r\n    background: linear-gradient(135deg, #6B46C1 0%, #9333EA 100%);\r\n    color: white;\r\n    padding: 4rem 0;\r\n    margin-top: 4rem;\r\n}\r\n\r\n.app-promo-content {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 4rem;\r\n    align-items: center;\r\n    padding: 0 2rem;\r\n}\r\n\r\n.app-promo-text h2 {\r\n    font-size: 2.5rem;\r\n    font-weight: 700;\r\n    margin-bottom: 1rem;\r\n}\r\n\r\n.app-promo-text p {\r\n    font-size: 1.2rem;\r\n    margin-bottom: 2rem;\r\n    opacity: 0.9;\r\n}\r\n\r\n.qr-code {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 1rem;\r\n}\r\n\r\n.qr-code img {\r\n    width: 80px;\r\n    height: 80px;\r\n    background: white;\r\n    border-radius: 8px;\r\n    padding: 0.5rem;\r\n}\r\n\r\n.qr-code p {\r\n    margin: 0;\r\n    font-size: 1rem;\r\n}\r\n\r\n.app-promo-phone img {\r\n    max-width: 100%;\r\n    height: auto;\r\n}\r\n\r\n\/* Error Message *\/\r\n.error-message {\r\n    text-align: center;\r\n    padding: 2rem;\r\n    color: #666;\r\n    font-size: 1.1rem;\r\n}\r\n\r\n\/* Responsive Design *\/\r\n@media (max-width: 768px) {\r\n    .nav-container {\r\n        flex-direction: column;\r\n        gap: 1rem;\r\n    }\r\n    \r\n    .nav-menu {\r\n        order: 3;\r\n    }\r\n    \r\n    .deals-content h1 {\r\n        font-size: 2rem;\r\n    }\r\n    \r\n    .deals-filters {\r\n        flex-direction: column;\r\n    }\r\n    \r\n    .filter-dropdowns {\r\n        flex-direction: column;\r\n    }\r\n    \r\n    .deals-grid {\r\n        grid-template-columns: 1fr;\r\n    }\r\n    \r\n    .app-promo-content {\r\n        grid-template-columns: 1fr;\r\n        text-align: center;\r\n    }\r\n    \r\n    .app-promo-text h2 {\r\n        font-size: 2rem;\r\n    }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n    .deals-content {\r\n        padding: 0 1rem;\r\n    }\r\n    \r\n    .deal-card {\r\n        padding: 1rem;\r\n    }\r\n    \r\n    .discount-value {\r\n        font-size: 2rem;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<!--<div class=\"mispay-deals-container\">-->\r\n    <!-- Header Navigation -->\r\n<!--    <nav class=\"mispay-nav\">-->\r\n<!--        <div class=\"nav-container\">-->\r\n<!--            <div class=\"nav-logo\">-->\r\n<!--                <img decoding=\"async\" src=\"<?php echo get_template_directory_uri(); ?>\/images\/mispay-logo.png\" alt=\"MISPay\">-->\r\n<!--            <\/div>-->\r\n<!--            <div class=\"nav-menu\">-->\r\n<!--                <a href=\"#\" class=\"nav-item\">Shop<\/a>-->\r\n<!--                <a href=\"#\" class=\"nav-item\">Ways to pay<\/a>-->\r\n<!--                <a href=\"#\" class=\"nav-item\">Business<\/a>-->\r\n<!--                <a href=\"#\" class=\"nav-item\">Help<\/a>-->\r\n<!--            <\/div>-->\r\n<!--            <div class=\"nav-right\">-->\r\n<!--                <a href=\"#\" class=\"get-app-btn\">\ud83d\udcf1 Get the app<\/a>-->\r\n<!--                <span class=\"language-selector\">\u0627\u0644\u0639\u0631\u0628\u064a\u0629<\/span>-->\r\n<!--                <button class=\"login-btn\">Login \/ Sign Up<\/button>-->\r\n<!--            <\/div>-->\r\n<!--        <\/div>-->\r\n<!--    <\/nav>-->\r\n\r\n    <!-- Breadcrumb -->\r\n    <div class=\"breadcrumb\">\r\n        <span>\u062a\u0633\u0648\u0642<\/span> \/ <span class=\"current\">\u0635\u0641\u0642\u0627\u062a<\/span>\r\n    <\/div>\r\n\r\n    <!-- Main Content -->\r\n    <div class=\"deals-content\">\r\n        <h1>\u0635\u0641\u0642\u0627\u062a<\/h1>\r\n        \r\n        <!-- Filters -->\r\n        <div class=\"deals-filters\">\r\n            <div class=\"search-container\">\r\n                <input type=\"text\" id=\"store-search\" placeholder=\"\u0627\u0628\u062d\u062b \u0639\u0646 \u0627\u0644\u0645\u062a\u0627\u062c\u0631\" class=\"search-input\">\r\n            <\/div>\r\n            <div class=\"filter-dropdowns\">\r\n                <select id=\"category-filter\" class=\"filter-select\">\r\n                    <option value=\"\">\u062c\u0645\u064a\u0639 \u0627\u0644\u062a\u062c\u0627\u0631<\/option>\r\n                <\/select>\r\n                <select id=\"type-filter\" class=\"filter-select\">\r\n                    <option value=\"\">\u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0646\u0648\u0627\u0639<\/option>\r\n <option value=\"discount\">\u062e\u0635\u0645<\/option>\r\n <option value=\"cashback\">\u0627\u0633\u062a\u0631\u062f\u0627\u062f \u0646\u0642\u062f\u064a<\/option>\r\n                <\/select>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Deals Grid -->\r\n        <div id=\"deals-grid\" class=\"deals-grid\">\r\n            <!-- Deals will be loaded here via JavaScript -->\r\n        <\/div>\r\n\r\n        <!-- Load More Button -->\r\n        <div class=\"load-more-container\">\r\n            <button id=\"load-more-btn\" class=\"load-more-btn\">\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0632\u064a\u062f<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- App Promotion Section -->\r\n<!--    <div class=\"app-promo-section\">-->\r\n<!--        <div class=\"app-promo-content\">-->\r\n<!--            <div class=\"app-promo-text\">-->\r\n<!--                <h2>Shop smarter with MISPay<\/h2>-->\r\n<!--                <p>Split payments, unlock deals\u2014always interest-free and Sharia-compliant.<\/p>-->\r\n<!--                <div class=\"qr-code\">-->\r\n<!--                    <img decoding=\"async\" src=\"<?php echo get_template_directory_uri(); ?>\/images\/qr-code.png\" alt=\"QR Code\">-->\r\n<!--                    <p>Scan to get MISPay app<\/p>-->\r\n<!--                <\/div>-->\r\n<!--            <\/div>-->\r\n<!--            <div class=\"app-promo-phone\">-->\r\n<!--                <img decoding=\"async\" src=\"<?php echo get_template_directory_uri(); ?>\/images\/phone-mockup.png\" alt=\"MISPay App\">-->\r\n<!--            <\/div>-->\r\n<!--        <\/div>-->\r\n<!--    <\/div>-->\r\n<!--<\/div>-->\r\n\r\n<script>\r\n\/\/ Your API endpoint\r\nconst API_ENDPOINT = 'https:\/\/mobile.mispay.dev\/api\/content-v2\/deals'; \/\/ Replace with your actual API endpoint\r\n\r\n\/\/ Global variables\r\nlet currentPage = 1;\r\nlet allDeals = [];\r\nlet filteredDeals = [];\r\nconst dealsPerPage = 9;\r\n\r\n\/\/ DOM Elements\r\nconst dealsGrid = document.getElementById('deals-grid');\r\nconst loadMoreBtn = document.getElementById('load-more-btn');\r\nconst searchInput = document.getElementById('store-search');\r\nconst categoryFilter = document.getElementById('category-filter');\r\nconst typeFilter = document.getElementById('type-filter');\r\n\r\n\/\/ Initialize the page\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    loadDeals();\r\n    setupEventListeners();\r\n});\r\n\r\n\/\/ Setup event listeners\r\nfunction setupEventListeners() {\r\n    searchInput.addEventListener('input', filterDeals);\r\n    categoryFilter.addEventListener('change', filterDeals);\r\n    typeFilter.addEventListener('change', filterDeals);\r\n    loadMoreBtn.addEventListener('click', loadMoreDeals);\r\n}\r\n\r\n\/\/ Load deals from API\r\nasync function loadDeals() {\r\n    try {\r\n        const response = await fetch(API_ENDPOINT);\r\n        const data = await response.json();\r\n        \r\n        if (data.status === 'success') {\r\n            allDeals = data.result || [];\r\n            filteredDeals = [...allDeals];\r\n            \r\n            populateFilters();\r\n            displayDeals();\r\n        } else {\r\n            throw new Error('API returned unsuccessful status');\r\n        }\r\n    } catch (error) {\r\n        console.error('Error loading deals:', error);\r\n        dealsGrid.innerHTML = '<div class=\"error-message\">Error loading deals. Please try again later.<\/div>';\r\n    }\r\n}\r\n\r\n\/\/ Populate filter dropdowns\r\nfunction populateFilters() {\r\n    \/\/ Since your API doesn't have categories, we'll create them based on merchant names or you can remove this\r\n    const merchants = [...new Set(allDeals.map(deal => deal.merchantName).filter(Boolean))];\r\n    \r\n    merchants.forEach(merchant => {\r\n        const option = document.createElement('option');\r\n        option.value = merchant;\r\n        option.textContent = merchant;\r\n        categoryFilter.appendChild(option);\r\n    });\r\n}\r\n\r\n\/\/ Filter deals based on search and filters\r\nfunction filterDeals() {\r\n    const searchTerm = searchInput.value.toLowerCase();\r\n    const selectedCategory = categoryFilter.value;\r\n    const selectedType = typeFilter.value;\r\n    \r\n    filteredDeals = allDeals.filter(deal => {\r\n        const matchesSearch = deal.merchantName.toLowerCase().includes(searchTerm);\r\n        const matchesCategory = !selectedCategory || deal.merchantName === selectedCategory;\r\n        \/\/ Since your API only has discountType, we'll filter based on that\r\n        const matchesType = !selectedType || \r\n            (selectedType === 'discount' && deal.discountType === 'percentage') ||\r\n            (selectedType === 'cashback' && deal.discountType === 'cashback');\r\n        \r\n        return matchesSearch && matchesCategory && matchesType;\r\n    });\r\n    \r\n    currentPage = 1;\r\n    displayDeals();\r\n}\r\n\r\n\/\/ Display deals\r\nfunction displayDeals() {\r\n    if (currentPage === 1) {\r\n        dealsGrid.innerHTML = '';\r\n    }\r\n    \r\n    const startIndex = (currentPage - 1) * dealsPerPage;\r\n    const endIndex = startIndex + dealsPerPage;\r\n    const dealsToShow = filteredDeals.slice(startIndex, endIndex);\r\n    \r\n    dealsToShow.forEach(deal => {\r\n        const dealCard = createDealCard(deal);\r\n        dealsGrid.appendChild(dealCard);\r\n    });\r\n    \r\n    \/\/ Show\/hide load more button\r\n    if (endIndex >= filteredDeals.length) {\r\n        loadMoreBtn.style.display = 'none';\r\n    } else {\r\n        loadMoreBtn.style.display = 'block';\r\n    }\r\n}\r\n\r\n\/\/ Create deal card HTML\r\nfunction createDealCard(deal) {\r\n    const card = document.createElement('div');\r\n    card.className = 'deal-card';\r\n    \r\n    const discountValue = deal.amount || 0;\r\n    const discountType = deal.discountType === 'percentage' ? 'Discount' : 'Cashback';\r\n    const badgeClass = deal.discountType === 'cashback' ? 'cashback-badge' : 'discount-badge';\r\n    \r\n    \/\/ Calculate time remaining\r\n    const timeRemaining = getTimeRemaining(deal.endDate);\r\n    \r\n    card.innerHTML = `\r\n        <div class=\"deal-header\">\r\n            <div class=\"store-logo\">\r\n                <img decoding=\"async\" src=\"${deal.logo}\" alt=\"${deal.merchantName}\" onerror=\"this.src='${getDefaultLogo(deal.merchantName)}'\" \/>\r\n            <\/div>\r\n            <div class=\"store-info\">\r\n                <h3>${deal.merchantName}<\/h3>\r\n                <p class=\"store-code\">${deal.couponCode}<\/p>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"deal-badge ${badgeClass}\">\r\n            <span class=\"badge-icon\">\ud83d\udcb0<\/span>\r\n            <span class=\"badge-text\">${discountType}<\/span>\r\n        <\/div>\r\n        \r\n        <div class=\"deal-discount\">\r\n            <span class=\"discount-value\">${discountValue}%<\/span>\r\n            <div class=\"deal-timer\">\r\n                <span class=\"timer-icon\">\u23f0<\/span>\r\n                <span class=\"timer-text\">${timeRemaining}<\/span>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <button class=\"get-deal-btn\" onclick=\"getDeal('${deal.id}', '${deal.link}')\">\r\n            Get Deal\r\n        <\/button>\r\n    `;\r\n    \r\n    return card;\r\n}\r\n\r\n\/\/ Get default logo based on store name\r\nfunction getDefaultLogo(storeName) {\r\n    const firstLetter = storeName.charAt(0).toUpperCase();\r\n    return `data:image\/svg+xml;base64,${btoa(`\r\n        <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n            <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#6B46C1\"\/>\r\n            <text x=\"20\" y=\"26\" text-anchor=\"middle\" fill=\"white\" font-family=\"Arial\" font-size=\"16\" font-weight=\"bold\">\r\n                ${firstLetter}\r\n            <\/text>\r\n        <\/svg>\r\n    `)}`;\r\n}\r\n\r\n\/\/ Calculate time remaining for a deal\r\nfunction getTimeRemaining(endDate) {\r\n    const now = new Date();\r\n    const end = new Date(endDate);\r\n    const diff = end - now;\r\n    \r\n    if (diff <= 0) {\r\n        return 'Expired';\r\n    }\r\n    \r\n    const days = Math.floor(diff \/ (1000 * 60 * 60 * 24));\r\n    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\r\n    const minutes = Math.floor((diff % (1000 * 60 * 60)) \/ (1000 * 60));\r\n    \r\n    if (days > 0) {\r\n        return `${days}d ${hours}h ${minutes}m`;\r\n    } else if (hours > 0) {\r\n        return `${hours}h ${minutes}m`;\r\n    } else {\r\n        return `${minutes}m`;\r\n    }\r\n}\r\n\r\n\/\/ Load more deals\r\nfunction loadMoreDeals() {\r\n    currentPage++;\r\n    displayDeals();\r\n}\r\n\r\n\/\/ Handle deal click\r\nfunction getDeal(dealId, dealLink) {\r\n    \/\/ You can track the deal click here\r\n    console.log('Getting deal:', dealId);\r\n    \r\n    \/\/ Open the deal link in a new tab\r\n    if (dealLink) {\r\n        window.open(dealLink, '_blank');\r\n    }\r\n    \r\n    \/\/ Optional: Send analytics or tracking data\r\n    \/\/ trackDealClick(dealId);\r\n}\r\n<\/script>\r\n\r\n<?php get_footer(); ?>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9b8fd42 e-flex e-con-boxed e-con e-parent\" data-id=\"9b8fd42\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-983a78a elementor-widget elementor-widget-html\" data-id=\"983a78a\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div>\r\n\r\n\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"\u0627\u0644\u0639\u0631\u0636=\u0639\u0631\u0636 \u0627\u0644\u062c\u0647\u0627\u0632\u060c \u0627\u0644\u0645\u0642\u064a\u0627\u0633 \u0627\u0644\u0623\u0648\u0644\u064a=1.0\">\r\n    <title>\u0635\u0641\u0642\u0627\u062a MisPay<\/title>\r\n    <style>\r\n        .mispay-deals-container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 20px;\r\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n        }\r\n        \r\n        .deals-header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-bottom: 30px;\r\n            flex-wrap: wrap;\r\n            gap: 15px;\r\n        }\r\n        \r\n        .deals-title {\r\n            font-size: 2.5rem;\r\n            font-weight: bold;\r\n            color: #333;\r\n            margin: 0;\r\n        }\r\n        \r\n        .deals-filters {\r\n            display: flex;\r\n            gap: 15px;\r\n            flex-wrap: wrap;\r\n            align-items: center;\r\n        }\r\n        \r\n        .filter-select {\r\n            padding: 10px 15px;\r\n            border: 2px solid #e0e0e0;\r\n            border-radius: 8px;\r\n            background: white;\r\n            color: #666;\r\n            font-size: 14px;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            min-width: 120px;\r\n        }\r\n        \r\n        .filter-select:hover {\r\n            border-color: #8b5cf6;\r\n        }\r\n        \r\n        .search-box {\r\n            padding: 12px 16px;\r\n            border: 2px solid #e0e0e0;\r\n            border-radius: 8px;\r\n            width: 300px;\r\n            max-width: 100%;\r\n            font-size: 14px;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .search-box:focus {\r\n            outline: none;\r\n            border-color: #8b5cf6;\r\n        }\r\n        \r\n        \/* Recommended Section *\/\r\n        .recommended-section {\r\n            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\r\n            border-radius: 16px;\r\n            padding: 30px;\r\n            margin-bottom: 40px;\r\n            color: white;\r\n            text-align: center;\r\n        }\r\n        \r\n        .recommended-title {\r\n            font-size: 1.8rem;\r\n            font-weight: bold;\r\n            margin-bottom: 10px;\r\n        }\r\n        \r\n        .recommended-subtitle {\r\n            font-size: 1rem;\r\n            opacity: 0.9;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .recommended-deals {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n            gap: 20px;\r\n            margin-top: 20px;\r\n        }\r\n        \r\n        .recommended-deal {\r\n            background: rgba(255, 255, 255, 0.1);\r\n            backdrop-filter: blur(10px);\r\n            border-radius: 12px;\r\n            padding: 20px;\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .recommended-deal:hover {\r\n            transform: translateY(-5px);\r\n            background: rgba(255, 255, 255, 0.15);\r\n        }\r\n        \r\n        .recommended-deal-merchant {\r\n            font-weight: 600;\r\n            margin-bottom: 8px;\r\n        }\r\n        \r\n        .recommended-deal-amount {\r\n            font-size: 1.5rem;\r\n            font-weight: bold;\r\n            margin-bottom: 10px;\r\n        }\r\n        \r\n        .recommended-deal-btn {\r\n            background: white;\r\n            color: #8b5cf6;\r\n            border: none;\r\n            padding: 8px 16px;\r\n            border-radius: 6px;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            text-decoration: none;\r\n            display: inline-block;\r\n        }\r\n        \r\n        .recommended-deal-btn:hover {\r\n            background: #f8f9fa;\r\n            transform: translateY(-2px);\r\n        }\r\n        \r\n        \/* Toggle Buttons *\/\r\n        .view-toggle {\r\n            display: flex;\r\n            background: #f8f9fa;\r\n            border-radius: 8px;\r\n            padding: 4px;\r\n            margin-bottom: 20px;\r\n            width: fit-content;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n        }\r\n        \r\n        .toggle-btn {\r\n            padding: 8px 16px;\r\n            background: transparent;\r\n            border: none;\r\n            border-radius: 6px;\r\n            font-size: 14px;\r\n            font-weight: 500;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            color: #666;\r\n        }\r\n        \r\n        .toggle-btn.active {\r\n            background: #8b5cf6;\r\n            color: white;\r\n        }\r\n        \r\n        .deals-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n            gap: 20px;\r\n            margin-bottom: 30px;\r\n        }\r\n        \r\n        .deal-card {\r\n            background: white;\r\n            border-radius: 12px;\r\n            padding: 20px;\r\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n            transition: all 0.3s ease;\r\n            border: 1px solid #f0f0f0;\r\n        }\r\n        \r\n        .deal-card:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 10px 30px rgba(0,0,0,0.15);\r\n        }\r\n        \r\n        .deal-header {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 15px;\r\n            margin-bottom: 15px;\r\n        }\r\n        \r\n        .merchant-logo {\r\n            width: 50px;\r\n            height: 50px;\r\n            border-radius: 50%;\r\n            background: #f5f5f5;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-weight: bold;\r\n            color: #666;\r\n            font-size: 18px;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .merchant-logo img {\r\n            width: 100%;\r\n            height: 100%;\r\n            border-radius: 50%;\r\n            object-fit: cover;\r\n        }\r\n        \r\n        .merchant-info h3 {\r\n            margin: 0 0 5px 0;\r\n            font-size: 16px;\r\n            color: #333;\r\n            font-weight: 600;\r\n        }\r\n        \r\n        .merchant-code {\r\n            font-size: 12px;\r\n            color: #666;\r\n            background: #f8f9fa;\r\n            padding: 2px 6px;\r\n            border-radius: 4px;\r\n        }\r\n        \r\n        .deal-badge {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 5px;\r\n            padding: 4px 8px;\r\n            border-radius: 20px;\r\n            font-size: 12px;\r\n            font-weight: 500;\r\n            margin-bottom: 10px;\r\n        }\r\n        \r\n        .badge-discount {\r\n            background: #dcfce7;\r\n            color: #166534;\r\n        }\r\n        \r\n        .badge-cashback {\r\n            background: #dbeafe;\r\n            color: #1e40af;\r\n        }\r\n        \r\n        .deal-amount {\r\n            font-size: 2rem;\r\n            font-weight: bold;\r\n            color: #8b5cf6;\r\n            margin: 10px 0;\r\n        }\r\n        \r\n        .deal-expires {\r\n            font-size: 12px;\r\n            color: #10b981;\r\n            margin-bottom: 15px;\r\n        }\r\n        \r\n        .deal-conditions {\r\n            font-size: 13px;\r\n            color: #666;\r\n            margin-bottom: 15px;\r\n            line-height: 1.4;\r\n        }\r\n        \r\n        .deal-button {\r\n            width: 100%;\r\n            padding: 12px;\r\n            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 8px;\r\n            font-size: 16px;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            text-decoration: none;\r\n            display: block;\r\n            text-align: center;\r\n        }\r\n        \r\n        .deal-button:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);\r\n        }\r\n        \r\n        .loading {\r\n            text-align: center;\r\n            padding: 40px;\r\n            color: #666;\r\n        }\r\n        \r\n        .error {\r\n            text-align: center;\r\n            padding: 40px;\r\n            color: #dc2626;\r\n            background: #fef2f2;\r\n            border-radius: 8px;\r\n            border: 1px solid #fecaca;\r\n        }\r\n        \r\n        .load-more {\r\n            text-align: center;\r\n            margin-top: 30px;\r\n        }\r\n        \r\n        .load-more-btn {\r\n            padding: 12px 30px;\r\n            background: #f8f9fa;\r\n            border: 2px solid #e5e7eb;\r\n            border-radius: 8px;\r\n            color: #374151;\r\n            font-size: 16px;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .load-more-btn:hover {\r\n            background: #e5e7eb;\r\n            border-color: #d1d5db;\r\n        }\r\n        \r\n        .coupon-code {\r\n            background: #f1f5f9;\r\n            border: 1px dashed #8b5cf6;\r\n            padding: 8px 12px;\r\n            border-radius: 6px;\r\n            font-family: 'Courier New', monospace;\r\n            font-weight: bold;\r\n            color: #8b5cf6;\r\n            text-align: center;\r\n            margin: 10px 0;\r\n            font-size: 14px;\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n            .deals-header {\r\n                flex-direction: column;\r\n                align-items: stretch;\r\n            }\r\n            \r\n            .deals-title {\r\n                font-size: 2rem;\r\n                text-align: center;\r\n            }\r\n            \r\n            .deals-filters {\r\n                justify-content: center;\r\n            }\r\n            \r\n            .deals-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .recommended-deals {\r\n                grid-template-columns: 1fr;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n\r\n    <div class=\"mispay-deals-container\">\r\n        <div class=\"deals-header\">\r\n            <h1 class=\"deals-title\">\u0635\u0641\u0642\u0627\u062a<\/h1>\r\n            <div class=\"deals-filters\">\r\n                <input type=\"text\" class=\"search-box\" placeholder=\"\u0627\u0628\u062d\u062b \u0639\u0646 \u0627\u0644\u0645\u062a\u0627\u062c\u0631\" id=\"searchInput\">\r\n                <select class=\"filter-select\" id=\"categoryFilter\">\r\n                    <option value=\"\">\u062c\u0645\u064a\u0639 \u0627\u0644\u0641\u0626\u0627\u062a<\/option>\r\n                <\/select>\r\n                <select class=\"filter-select\" id=\"statusFilter\">\r\n                    <option value=\"\">\u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0646\u0648\u0627\u0639<\/option>\r\n <option value=\"active\">\u0646\u0634\u0637<\/option>\r\n <option value=\"paused\">\u0645\u062a\u0648\u0642\u0641 \u0645\u0624\u0642\u062a\u064b\u0627<\/option>\r\n                <\/select>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <!-- Recommended Section -->\r\n        <div class=\"recommended-section\" id=\"recommendedSection\">\r\n            <div class=\"recommended-title\">\ud83c\udf1f \u0635\u0641\u0642\u0627\u062a \u0645\u0648\u0635\u0649 \u0628\u0647\u0627<\/div>\r\n            <div class=\"recommended-subtitle\">\u0635\u0641\u0642\u0627\u062a \u0645\u062e\u062a\u0627\u0631\u0629 \u062e\u0635\u064a\u0635\u064b\u0627 \u0644\u0643<\/div>\r\n            <div class=\"recommended-deals\" id=\"recommendedDeals\">\r\n                <!-- Recommended deals will be populated here -->\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <!-- View Toggle -->\r\n        <div class=\"view-toggle\">\r\n            <button class=\"toggle-btn active\" onclick=\"toggleView('grid')\" id=\"gridToggle\">\u0639\u0631\u0636 \u0627\u0644\u0634\u0628\u0643\u0629<\/button>\r\n <button class=\"toggle-btn\" onclick=\"toggleView('list')\" id=\"listToggle\">\u0639\u0631\u0636 \u0627\u0644\u0642\u0627\u0626\u0645\u0629<\/button>\r\n        <\/div>\r\n        \r\n        <div id=\"dealsContainer\">\r\n            <div class=\"loading\">\u062c\u0627\u0631\u064d \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u0642\u0627\u062a...<\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"load-more\" id=\"loadMoreContainer\" style=\"display: none;\">\r\n            <button class=\"load-more-btn\" onclick=\"loadMoreDeals()\">\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0632\u064a\u062f<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ Configuration\r\n        const API_BASE_URL = 'https:\/\/mobile.mispay.dev\/api';\r\n        let allDeals = [];\r\n        let allCategories = [];\r\n        let filteredDeals = [];\r\n        let currentPage = 1;\r\n        const dealsPerPage = 9;\r\n        let currentView = 'grid';\r\n        \r\n        \/\/ Initialize the widget\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            console.log('Initializing MisPay Deals Widget...');\r\n            loadCategories();\r\n            loadDeals();\r\n            setupEventListeners();\r\n        });\r\n        \r\n        function setupEventListeners() {\r\n            const searchInput = document.getElementById('searchInput');\r\n            const categoryFilter = document.getElementById('categoryFilter');\r\n            const statusFilter = document.getElementById('statusFilter');\r\n            \r\n            searchInput.addEventListener('input', debounce(filterDeals, 300));\r\n            categoryFilter.addEventListener('change', filterDeals);\r\n            statusFilter.addEventListener('change', filterDeals);\r\n        }\r\n        \r\n        function debounce(func, wait) {\r\n            let timeout;\r\n            return function executedFunction(...args) {\r\n                const later = () => {\r\n                    clearTimeout(timeout);\r\n                    func(...args);\r\n                };\r\n                clearTimeout(timeout);\r\n                timeout = setTimeout(later, wait);\r\n            };\r\n        }\r\n        \r\n        async function loadCategories() {\r\n            try {\r\n                console.log('Loading categories from:', `${API_BASE_URL}\/content-v2\/categories`);\r\n                const response = await fetch(`${API_BASE_URL}\/content-v2\/categories`);\r\n                \r\n                if (!response.ok) {\r\n                    throw new Error(`HTTP error! status: ${response.status}`);\r\n                }\r\n                \r\n                const data = await response.json();\r\n                console.log('Categories response:', data);\r\n                \r\n                if (data.status === 'success' && data.result) {\r\n                    allCategories = data.result;\r\n                    populateCategoryFilter();\r\n                    console.log('Categories loaded successfully:', allCategories.length);\r\n                } else {\r\n                    console.error('Categories API returned error:', data);\r\n                }\r\n            } catch (error) {\r\n                console.error('Error loading categories:', error);\r\n                \/\/ Add fallback categories for testing\r\n                allCategories = [\r\n                    { id: '1', name: 'Electronics' },\r\n                    { id: '2', name: 'Fashion' },\r\n                    { id: '3', name: 'Food & Dining' },\r\n                    { id: '4', name: 'Travel' },\r\n                    { id: '5', name: 'Health & Beauty' }\r\n                ];\r\n                populateCategoryFilter();\r\n            }\r\n        }\r\n        \r\n        function populateCategoryFilter() {\r\n            const categoryFilter = document.getElementById('categoryFilter');\r\n            categoryFilter.innerHTML = '<option value=\"\">All categories<\/option>';\r\n            \r\n            allCategories.forEach(category => {\r\n                const option = document.createElement('option');\r\n                option.value = category.id;\r\n                option.textContent = category.name;\r\n                categoryFilter.appendChild(option);\r\n            });\r\n            \r\n            console.log('Category filter populated with', allCategories.length, 'categories');\r\n        }\r\n        \r\n        async function loadDeals() {\r\n            try {\r\n                console.log('Loading deals from:', `${API_BASE_URL}\/content-v2\/deals`);\r\n                const response = await fetch(`${API_BASE_URL}\/content-v2\/deals`);\r\n                \r\n                if (!response.ok) {\r\n                    throw new Error(`HTTP error! status: ${response.status}`);\r\n                }\r\n                \r\n                const data = await response.json();\r\n                console.log('Deals response:', data);\r\n                \r\n                if (data.status === 'success' && data.result) {\r\n                    allDeals = data.result;\r\n                    filteredDeals = [...allDeals];\r\n                    displayDeals();\r\n                    displayRecommendedDeals();\r\n                    console.log('Deals loaded successfully:', allDeals.length);\r\n                } else {\r\n                    console.error('Deals API returned error:', data);\r\n                    showError('Failed to load deals from API');\r\n                }\r\n            } catch (error) {\r\n                console.error('Error loading deals:', error);\r\n                \r\n                \/\/ Add fallback demo deals for testing\r\n                allDeals = [\r\n                    {\r\n                        id: '1',\r\n                        merchantName: 'Amazon',\r\n                        amount: 35,\r\n                        discountType: 'percentage',\r\n                        couponCode: 'SAVE35',\r\n                        link: 'https:\/\/amazon.com',\r\n                        logo: '',\r\n                        briefConditions: 'Valid for new customers only',\r\n                        startDate: '2024-01-01T00:00:00Z',\r\n                        endDate: '2024-12-31T23:59:59Z'\r\n                    },\r\n                    {\r\n                        id: '2',\r\n                        merchantName: 'Nike',\r\n                        amount: 50,\r\n                        discountType: 'percentage',\r\n                        couponCode: 'NIKE50',\r\n                        link: 'https:\/\/nike.com',\r\n                        logo: '',\r\n                        briefConditions: 'Limited time offer',\r\n                        startDate: '2024-01-01T00:00:00Z',\r\n                        endDate: '2024-12-31T23:59:59Z'\r\n                    },\r\n                    {\r\n                        id: '3',\r\n                        merchantName: 'Uber Eats',\r\n                        amount: 25,\r\n                        discountType: 'percentage',\r\n                        couponCode: 'FOOD25',\r\n                        link: 'https:\/\/ubereats.com',\r\n                        logo: '',\r\n                        briefConditions: 'Minimum order $20',\r\n                        startDate: '2024-01-01T00:00:00Z',\r\n                        endDate: '2024-12-31T23:59:59Z'\r\n                    }\r\n                ];\r\n                \r\n                filteredDeals = [...allDeals];\r\n                displayDeals();\r\n                displayRecommendedDeals();\r\n                \r\n                showError('Using demo data - Check console for API connection details');\r\n            }\r\n        }\r\n        \r\n        function displayRecommendedDeals() {\r\n            const recommendedContainer = document.getElementById('recommendedDeals');\r\n            const topDeals = filteredDeals.slice(0, 3); \/\/ Show top 3 deals\r\n            \r\n            if (topDeals.length === 0) {\r\n                document.getElementById('recommendedSection').style.display = 'none';\r\n                return;\r\n            }\r\n            \r\n            recommendedContainer.innerHTML = topDeals.map(deal => `\r\n                <div class=\"recommended-deal\">\r\n                    <div class=\"recommended-deal-merchant\">${deal.merchantName}<\/div>\r\n                    <div class=\"recommended-deal-amount\">${deal.amount}${deal.discountType === 'percentage' ? '%' : ''} OFF<\/div>\r\n                    <a href=\"${deal.link}\" class=\"recommended-deal-btn\" target=\"_blank\">Get Deal<\/a>\r\n                <\/div>\r\n            `).join('');\r\n        }\r\n        \r\n        function toggleView(viewType) {\r\n            currentView = viewType;\r\n            \r\n            \/\/ Update toggle buttons\r\n            document.getElementById('gridToggle').classList.remove('active');\r\n            document.getElementById('listToggle').classList.remove('active');\r\n            \r\n            if (viewType === 'grid') {\r\n                document.getElementById('gridToggle').classList.add('active');\r\n            } else {\r\n                document.getElementById('listToggle').classList.add('active');\r\n            }\r\n            \r\n            \/\/ Re-display deals with new view\r\n            displayDeals();\r\n        }\r\n        \r\n        function filterDeals() {\r\n            const searchTerm = document.getElementById('searchInput').value.toLowerCase();\r\n            const categoryId = document.getElementById('categoryFilter').value;\r\n            const status = document.getElementById('statusFilter').value;\r\n            \r\n            filteredDeals = allDeals.filter(deal => {\r\n                const matchesSearch = deal.merchantName.toLowerCase().includes(searchTerm);\r\n                const matchesCategory = !categoryId || deal.categoryId === categoryId;\r\n                const matchesStatus = !status || deal.status === status;\r\n                \r\n                return matchesSearch && matchesCategory && matchesStatus;\r\n            });\r\n            \r\n            currentPage = 1;\r\n            displayDeals();\r\n            displayRecommendedDeals();\r\n        }\r\n        \r\n        function displayDeals() {\r\n            const container = document.getElementById('dealsContainer');\r\n            const startIndex = 0;\r\n            const endIndex = currentPage * dealsPerPage;\r\n            const dealsToShow = filteredDeals.slice(startIndex, endIndex);\r\n            \r\n            if (dealsToShow.length === 0) {\r\n                container.innerHTML = '<div class=\"error\">No deals found matching your criteria.<\/div>';\r\n                document.getElementById('loadMoreContainer').style.display = 'none';\r\n                return;\r\n            }\r\n            \r\n            const gridClass = currentView === 'grid' ? 'deals-grid' : 'deals-list';\r\n            container.innerHTML = `\r\n                <div class=\"${gridClass}\">\r\n                    ${dealsToShow.map(deal => createDealCard(deal)).join('')}\r\n                <\/div>\r\n            `;\r\n            \r\n            \/\/ Show\/hide load more button\r\n            const loadMoreContainer = document.getElementById('loadMoreContainer');\r\n            if (endIndex < filteredDeals.length) {\r\n                loadMoreContainer.style.display = 'block';\r\n            } else {\r\n                loadMoreContainer.style.display = 'none';\r\n            }\r\n        }\r\n        \r\n        function createDealCard(deal) {\r\n            const discountType = deal.discountType === 'percentage' ? '%' : '';\r\n            const badgeClass = deal.discountType === 'percentage' ? 'badge-discount' : 'badge-cashback';\r\n            const badgeText = deal.discountType === 'percentage' ? 'Discount' : 'Cashback';\r\n            \r\n            const merchantLogo = deal.logo ? \r\n                `<img decoding=\"async\" src=\"${deal.logo}\" alt=\"${deal.merchantName}\" onerror=\"this.parentElement.innerHTML='${deal.merchantName.charAt(0).toUpperCase()}'\">` : \r\n                deal.merchantName.charAt(0).toUpperCase();\r\n            \r\n            const expiryDate = new Date(deal.endDate);\r\n            const today = new Date();\r\n            const daysLeft = Math.ceil((expiryDate - today) \/ (1000 * 60 * 60 * 24));\r\n            const expiryText = daysLeft > 0 ? `${daysLeft} days left` : 'Expired';\r\n            \r\n            return `\r\n                <div class=\"deal-card\">\r\n                    <div class=\"deal-header\">\r\n                        <div class=\"merchant-logo\">\r\n                            ${merchantLogo}\r\n                        <\/div>\r\n                        <div class=\"merchant-info\">\r\n                            <h3>${deal.merchantName}<\/h3>\r\n                            ${deal.couponCode ? `<span class=\"merchant-code\">${deal.couponCode}<\/span>` : ''}\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"deal-badge ${badgeClass}\">\r\n                        <span>\u26a1<\/span> ${badgeText}\r\n                    <\/div>\r\n                    \r\n                    <div class=\"deal-amount\">\r\n                        ${deal.amount}${discountType}\r\n                    <\/div>\r\n                    \r\n                    <div class=\"deal-expires\">\r\n                        \u23f1 ${expiryText}\r\n                    <\/div>\r\n                    \r\n                    ${deal.couponCode ? `<div class=\"coupon-code\">Code: ${deal.couponCode}<\/div>` : ''}\r\n                    \r\n                    <div class=\"deal-conditions\">\r\n                        ${deal.briefConditions || 'Terms and conditions apply'}\r\n                    <\/div>\r\n                    \r\n                    <a href=\"${deal.link}\" class=\"deal-button\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                        Get Deal\r\n                    <\/a>\r\n                <\/div>\r\n            `;\r\n        }\r\n        \r\n        function loadMoreDeals() {\r\n            currentPage++;\r\n            displayDeals();\r\n        }\r\n        \r\n        function showError(message) {\r\n            const container = document.getElementById('dealsContainer');\r\n            container.innerHTML = `<div class=\"error\">${message}<\/div>`;\r\n            document.getElementById('loadMoreContainer').style.display = 'none';\r\n        }\r\n    <\/script>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0250845 e-flex e-con-boxed e-con e-parent\" data-id=\"0250845\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9b6e3b5 elementor-widget elementor-widget-html\" data-id=\"9b6e3b5\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div>\r\n\r\n\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"\u0627\u0644\u0639\u0631\u0636=\u0639\u0631\u0636 \u0627\u0644\u062c\u0647\u0627\u0632\u060c \u0627\u0644\u0645\u0642\u064a\u0627\u0633 \u0627\u0644\u0623\u0648\u0644\u064a=1.0\">\r\n    <title>\u0635\u0641\u0642\u0627\u062a MisPay<\/title>\r\n    <style>\r\n        .mispay-deals-container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 20px;\r\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n        }\r\n        \r\n        .deals-header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-bottom: 30px;\r\n            flex-wrap: wrap;\r\n            gap: 15px;\r\n        }\r\n        \r\n        .deals-title {\r\n            font-size: 2.5rem;\r\n            font-weight: bold;\r\n            color: #333;\r\n            margin: 0;\r\n        }\r\n        \r\n        .deals-filters {\r\n            display: flex;\r\n            gap: 15px;\r\n            flex-wrap: wrap;\r\n        }\r\n        \r\n        .filter-select {\r\n            padding: 10px 15px;\r\n            border: 2px solid #e0e0e0;\r\n            border-radius: 8px;\r\n            background: white;\r\n            color: #666;\r\n            font-size: 14px;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .filter-select:hover {\r\n            border-color: #8b5cf6;\r\n        }\r\n        \r\n        .search-box {\r\n            padding: 12px 16px;\r\n            border: 2px solid #e0e0e0;\r\n            border-radius: 8px;\r\n            width: 300px;\r\n            max-width: 100%;\r\n            font-size: 14px;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .search-box:focus {\r\n            outline: none;\r\n            border-color: #8b5cf6;\r\n        }\r\n        \r\n        .deals-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n            gap: 20px;\r\n            margin-bottom: 30px;\r\n        }\r\n        \r\n        .deal-card {\r\n            background: white;\r\n            border-radius: 12px;\r\n            padding: 20px;\r\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n            transition: all 0.3s ease;\r\n            border: 1px solid #f0f0f0;\r\n        }\r\n        \r\n        .deal-card:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 10px 30px rgba(0,0,0,0.15);\r\n        }\r\n        \r\n        .deal-header {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 15px;\r\n            margin-bottom: 15px;\r\n        }\r\n        \r\n        .merchant-logo {\r\n            width: 50px;\r\n            height: 50px;\r\n            border-radius: 50%;\r\n            background: #f5f5f5;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-weight: bold;\r\n            color: #666;\r\n            font-size: 18px;\r\n        }\r\n        \r\n        .merchant-logo img {\r\n            width: 100%;\r\n            height: 100%;\r\n            border-radius: 50%;\r\n            object-fit: cover;\r\n        }\r\n        \r\n        .merchant-info h3 {\r\n            margin: 0 0 5px 0;\r\n            font-size: 16px;\r\n            color: #333;\r\n            font-weight: 600;\r\n        }\r\n        \r\n        .merchant-code {\r\n            font-size: 12px;\r\n            color: #666;\r\n            background: #f8f9fa;\r\n            padding: 2px 6px;\r\n            border-radius: 4px;\r\n        }\r\n        \r\n        .deal-badge {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 5px;\r\n            padding: 4px 8px;\r\n            border-radius: 20px;\r\n            font-size: 12px;\r\n            font-weight: 500;\r\n            margin-bottom: 10px;\r\n        }\r\n        \r\n        .badge-discount {\r\n            background: #dcfce7;\r\n            color: #166534;\r\n        }\r\n        \r\n        .badge-cashback {\r\n            background: #dbeafe;\r\n            color: #1e40af;\r\n        }\r\n        \r\n        .deal-amount {\r\n            font-size: 2rem;\r\n            font-weight: bold;\r\n            color: #8b5cf6;\r\n            margin: 10px 0;\r\n        }\r\n        \r\n        .deal-expires {\r\n            font-size: 12px;\r\n            color: #10b981;\r\n            margin-bottom: 15px;\r\n        }\r\n        \r\n        .deal-conditions {\r\n            font-size: 13px;\r\n            color: #666;\r\n            margin-bottom: 15px;\r\n            line-height: 1.4;\r\n        }\r\n        \r\n        .deal-button {\r\n            width: 100%;\r\n            padding: 12px;\r\n            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 8px;\r\n            font-size: 16px;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            text-decoration: none;\r\n            display: block;\r\n            text-align: center;\r\n        }\r\n        \r\n        .deal-button:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);\r\n        }\r\n        \r\n        .loading {\r\n            text-align: center;\r\n            padding: 40px;\r\n            color: #666;\r\n        }\r\n        \r\n        .error {\r\n            text-align: center;\r\n            padding: 40px;\r\n            color: #dc2626;\r\n            background: #fef2f2;\r\n            border-radius: 8px;\r\n            border: 1px solid #fecaca;\r\n        }\r\n        \r\n        .load-more {\r\n            text-align: center;\r\n            margin-top: 30px;\r\n        }\r\n        \r\n        .load-more-btn {\r\n            padding: 12px 30px;\r\n            background: #f8f9fa;\r\n            border: 2px solid #e5e7eb;\r\n            border-radius: 8px;\r\n            color: #374151;\r\n            font-size: 16px;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .load-more-btn:hover {\r\n            background: #e5e7eb;\r\n            border-color: #d1d5db;\r\n        }\r\n        \r\n        .coupon-code {\r\n            background: #f1f5f9;\r\n            border: 1px dashed #8b5cf6;\r\n            padding: 8px 12px;\r\n            border-radius: 6px;\r\n            font-family: 'Courier New', monospace;\r\n            font-weight: bold;\r\n            color: #8b5cf6;\r\n            text-align: center;\r\n            margin: 10px 0;\r\n            font-size: 14px;\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n            .deals-header {\r\n                flex-direction: column;\r\n                align-items: stretch;\r\n            }\r\n            \r\n            .deals-title {\r\n                font-size: 2rem;\r\n                text-align: center;\r\n            }\r\n            \r\n            .deals-filters {\r\n                justify-content: center;\r\n            }\r\n            \r\n            .deals-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n\r\n    <div class=\"mispay-deals-container\">\r\n        <div class=\"deals-header\">\r\n            <h1 class=\"deals-title\">\u0635\u0641\u0642\u0627\u062a<\/h1>\r\n            <div class=\"deals-filters\">\r\n                <input type=\"text\" class=\"search-box\" placeholder=\"\u0627\u0628\u062d\u062b \u0639\u0646 \u0627\u0644\u0645\u062a\u0627\u062c\u0631\" id=\"searchInput\">\r\n                <select class=\"filter-select\" id=\"categoryFilter\">\r\n                    <option value=\"\">\u062c\u0645\u064a\u0639 \u0627\u0644\u0641\u0626\u0627\u062a<\/option>\r\n                <\/select>\r\n                <select class=\"filter-select\" id=\"statusFilter\">\r\n                    <option value=\"\">\u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0646\u0648\u0627\u0639<\/option>\r\n <option value=\"active\">\u0646\u0634\u0637<\/option>\r\n <option value=\"paused\">\u0645\u062a\u0648\u0642\u0641 \u0645\u0624\u0642\u062a\u064b\u0627<\/option>\r\n                <\/select>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div id=\"dealsContainer\">\r\n            <div class=\"loading\">\u062c\u0627\u0631\u064d \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u0642\u0627\u062a...<\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"load-more\" id=\"loadMoreContainer\" style=\"display: none;\">\r\n            <button class=\"load-more-btn\" onclick=\"loadMoreDeals()\">\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0632\u064a\u062f<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ Configuration\r\n        const API_BASE_URL = 'https:\/\/mobile.mispay.dev\/api';\r\n        let allDeals = [];\r\n        let allCategories = [];\r\n        let filteredDeals = [];\r\n        let currentPage = 1;\r\n        const dealsPerPage = 9;\r\n        \r\n        \/\/ Initialize the widget\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            loadCategories();\r\n            loadDeals();\r\n            setupEventListeners();\r\n        });\r\n        \r\n        function setupEventListeners() {\r\n            const searchInput = document.getElementById('searchInput');\r\n            const categoryFilter = document.getElementById('categoryFilter');\r\n            const statusFilter = document.getElementById('statusFilter');\r\n            \r\n            searchInput.addEventListener('input', debounce(filterDeals, 300));\r\n            categoryFilter.addEventListener('change', filterDeals);\r\n            statusFilter.addEventListener('change', filterDeals);\r\n        }\r\n        \r\n        function debounce(func, wait) {\r\n            let timeout;\r\n            return function executedFunction(...args) {\r\n                const later = () => {\r\n                    clearTimeout(timeout);\r\n                    func(...args);\r\n                };\r\n                clearTimeout(timeout);\r\n                timeout = setTimeout(later, wait);\r\n            };\r\n        }\r\n        \r\n        async function loadCategories() {\r\n            try {\r\n                const response = await fetch(`${API_BASE_URL}\/content-v2\/categories`);\r\n                const data = await response.json();\r\n                \r\n                if (data.status === 'success') {\r\n                    allCategories = data.result;\r\n                    populateCategoryFilter();\r\n                }\r\n            } catch (error) {\r\n                console.error('Error loading categories:', error);\r\n            }\r\n        }\r\n        \r\n        function populateCategoryFilter() {\r\n            const categoryFilter = document.getElementById('categoryFilter');\r\n            categoryFilter.innerHTML = '<option value=\"\">All categories<\/option>';\r\n            \r\n            allCategories.forEach(category => {\r\n                const option = document.createElement('option');\r\n                option.value = category.id;\r\n                option.textContent = category.name;\r\n                categoryFilter.appendChild(option);\r\n            });\r\n        }\r\n        \r\n        async function loadDeals() {\r\n            try {\r\n                const response = await fetch(`${API_BASE_URL}\/content-v2\/deals?status=active`);\r\n                const data = await response.json();\r\n                \r\n                if (data.status === 'success') {\r\n                    allDeals = data.result;\r\n                    filteredDeals = [...allDeals];\r\n                    displayDeals();\r\n                } else {\r\n                    showError('Failed to load deals');\r\n                }\r\n            } catch (error) {\r\n                console.error('Error loading deals:', error);\r\n                showError('Error loading deals. Please try again later.');\r\n            }\r\n        }\r\n        \r\n        function filterDeals() {\r\n            const searchTerm = document.getElementById('searchInput').value.toLowerCase();\r\n            const categoryId = document.getElementById('categoryFilter').value;\r\n            const status = document.getElementById('statusFilter').value;\r\n            \r\n            filteredDeals = allDeals.filter(deal => {\r\n                const matchesSearch = deal.merchantName.toLowerCase().includes(searchTerm);\r\n                const matchesCategory = !categoryId || deal.categoryId === categoryId;\r\n                const matchesStatus = !status || deal.status === status;\r\n                \r\n                return matchesSearch && matchesCategory && matchesStatus;\r\n            });\r\n            \r\n            currentPage = 1;\r\n            displayDeals();\r\n        }\r\n        \r\n        function displayDeals() {\r\n            const container = document.getElementById('dealsContainer');\r\n            const startIndex = 0;\r\n            const endIndex = currentPage * dealsPerPage;\r\n            const dealsToShow = filteredDeals.slice(startIndex, endIndex);\r\n            \r\n            if (dealsToShow.length === 0) {\r\n                container.innerHTML = '<div class=\"error\">No deals found matching your criteria.<\/div>';\r\n                document.getElementById('loadMoreContainer').style.display = 'none';\r\n                return;\r\n            }\r\n            \r\n            container.innerHTML = `\r\n                <div class=\"deals-grid\">\r\n                    ${dealsToShow.map(deal => createDealCard(deal)).join('')}\r\n                <\/div>\r\n            `;\r\n            \r\n            \/\/ Show\/hide load more button\r\n            const loadMoreContainer = document.getElementById('loadMoreContainer');\r\n            if (endIndex < filteredDeals.length) {\r\n                loadMoreContainer.style.display = 'block';\r\n            } else {\r\n                loadMoreContainer.style.display = 'none';\r\n            }\r\n        }\r\n        \r\n        function createDealCard(deal) {\r\n            const discountType = deal.discountType === 'percentage' ? '%' : '';\r\n            const badgeClass = deal.discountType === 'percentage' ? 'badge-discount' : 'badge-cashback';\r\n            const badgeText = deal.discountType === 'percentage' ? 'Discount' : 'Cashback';\r\n            \r\n            const merchantLogo = deal.logo ? \r\n                `<img decoding=\"async\" src=\"${deal.logo}\" alt=\"${deal.merchantName}\" onerror=\"this.style.display='none'\">` : \r\n                deal.merchantName.charAt(0).toUpperCase();\r\n            \r\n            const expiryDate = new Date(deal.endDate);\r\n            const today = new Date();\r\n            const daysLeft = Math.ceil((expiryDate - today) \/ (1000 * 60 * 60 * 24));\r\n            const expiryText = daysLeft > 0 ? `${daysLeft} days left` : 'Expired';\r\n            \r\n            return `\r\n                <div class=\"deal-card\">\r\n                    <div class=\"deal-header\">\r\n                        <div class=\"merchant-logo\">\r\n                            ${merchantLogo}\r\n                        <\/div>\r\n                        <div class=\"merchant-info\">\r\n                            <h3>${deal.merchantName}<\/h3>\r\n                            ${deal.couponCode ? `<span class=\"merchant-code\">${deal.couponCode}<\/span>` : ''}\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"deal-badge ${badgeClass}\">\r\n                        <span>\u26a1<\/span> ${badgeText}\r\n                    <\/div>\r\n                    \r\n                    <div class=\"deal-amount\">\r\n                        ${deal.amount}${discountType}\r\n                    <\/div>\r\n                    \r\n                    <div class=\"deal-expires\">\r\n                        \u23f1 ${expiryText}\r\n                    <\/div>\r\n                    \r\n                    ${deal.couponCode ? `<div class=\"coupon-code\">Code: ${deal.couponCode}<\/div>` : ''}\r\n                    \r\n                    <div class=\"deal-conditions\">\r\n                        ${deal.briefConditions || 'Terms and conditions apply'}\r\n                    <\/div>\r\n                    \r\n                    <a href=\"${deal.link}\" class=\"deal-button\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                        Get Deal\r\n                    <\/a>\r\n                <\/div>\r\n            `;\r\n        }\r\n        \r\n        function loadMoreDeals() {\r\n            currentPage++;\r\n            displayDeals();\r\n        }\r\n        \r\n        function showError(message) {\r\n            const container = document.getElementById('dealsContainer');\r\n            container.innerHTML = `<div class=\"error\">${message}<\/div>`;\r\n            document.getElementById('loadMoreContainer').style.display = 'none';\r\n        }\r\n    <\/script>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-456e81f e-flex e-con-boxed e-con e-parent\" data-id=\"456e81f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f771741 elementor-widget elementor-widget-html\" data-id=\"f771741\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div>\r\n\r\n\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"\u0627\u0644\u0639\u0631\u0636=\u0639\u0631\u0636 \u0627\u0644\u062c\u0647\u0627\u0632\u060c \u0627\u0644\u0645\u0642\u064a\u0627\u0633 \u0627\u0644\u0623\u0648\u0644\u064a=1.0\">\r\n    <title>\u0623\u062f\u0627\u0629 \u0635\u0641\u0642\u0627\u062a MisPay<\/title>\r\n    <style>\r\n        .mispay-deals-container {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 20px;\r\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n        }\r\n        \r\n        .mispay-header {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            margin-bottom: 30px;\r\n            flex-wrap: wrap;\r\n            gap: 15px;\r\n        }\r\n        \r\n        .mispay-title {\r\n            font-size: 32px;\r\n            font-weight: 700;\r\n            color: #333;\r\n            margin: 0;\r\n        }\r\n        \r\n        .mispay-filters {\r\n            display: flex;\r\n            gap: 15px;\r\n            flex-wrap: wrap;\r\n        }\r\n        \r\n        .mispay-search {\r\n            padding: 10px 15px;\r\n            border: 2px solid #e0e0e0;\r\n            border-radius: 8px;\r\n            font-size: 14px;\r\n            width: 200px;\r\n            outline: none;\r\n            transition: border-color 0.3s;\r\n        }\r\n        \r\n        .mispay-search:focus {\r\n            border-color: #6f42c1;\r\n        }\r\n        \r\n        .mispay-select {\r\n            padding: 10px 15px;\r\n            border: 2px solid #e0e0e0;\r\n            border-radius: 8px;\r\n            font-size: 14px;\r\n            background: white;\r\n            cursor: pointer;\r\n            outline: none;\r\n            transition: border-color 0.3s;\r\n        }\r\n        \r\n        .mispay-select:focus {\r\n            border-color: #6f42c1;\r\n        }\r\n        \r\n        .mispay-deals-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n            gap: 25px;\r\n            margin-bottom: 30px;\r\n        }\r\n        \r\n        .mispay-deal-card {\r\n            background: white;\r\n            border-radius: 12px;\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n            overflow: hidden;\r\n            transition: transform 0.3s, box-shadow 0.3s;\r\n            border: 1px solid #f0f0f0;\r\n        }\r\n        \r\n        .mispay-deal-card:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n        }\r\n        \r\n        .mispay-deal-header {\r\n            padding: 20px;\r\n            position: relative;\r\n        }\r\n        \r\n        .mispay-merchant-info {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            margin-bottom: 15px;\r\n        }\r\n        \r\n        .mispay-merchant-logo {\r\n            width: 40px;\r\n            height: 40px;\r\n            border-radius: 50%;\r\n            object-fit: cover;\r\n            border: 2px solid #f0f0f0;\r\n        }\r\n        \r\n        .mispay-merchant-name {\r\n            font-weight: 600;\r\n            font-size: 16px;\r\n            color: #333;\r\n        }\r\n        \r\n        .mispay-deal-type {\r\n            position: absolute;\r\n            top: 15px;\r\n            right: 15px;\r\n            padding: 4px 8px;\r\n            border-radius: 20px;\r\n            font-size: 12px;\r\n            font-weight: 500;\r\n            color: white;\r\n        }\r\n        \r\n        .mispay-deal-type.discount {\r\n            background: #28a745;\r\n        }\r\n        \r\n        .mispay-deal-type.cashback {\r\n            background: #17a2b8;\r\n        }\r\n        \r\n        .mispay-deal-amount {\r\n            font-size: 48px;\r\n            font-weight: 700;\r\n            color: #333;\r\n            margin-bottom: 8px;\r\n        }\r\n        \r\n        .mispay-deal-duration {\r\n            color: #28a745;\r\n            font-size: 14px;\r\n            font-weight: 500;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .mispay-deal-conditions {\r\n            color: #666;\r\n            font-size: 13px;\r\n            margin-bottom: 20px;\r\n            line-height: 1.4;\r\n        }\r\n        \r\n        .mispay-deal-button {\r\n            width: 100%;\r\n            padding: 15px;\r\n            background: linear-gradient(135deg, #6f42c1, #8b5cf6);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 8px;\r\n            font-size: 16px;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n            transition: all 0.3s;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.5px;\r\n        }\r\n        \r\n        .mispay-deal-button:hover {\r\n            background: linear-gradient(135deg, #5a2d91, #7c3aed);\r\n            transform: translateY(-2px);\r\n        }\r\n        \r\n        .mispay-coupon-code {\r\n            background: #f8f9fa;\r\n            border: 2px dashed #dee2e6;\r\n            border-radius: 8px;\r\n            padding: 10px;\r\n            margin-bottom: 15px;\r\n            text-align: center;\r\n            font-family: 'Courier New', monospace;\r\n            font-weight: 600;\r\n            color: #495057;\r\n            font-size: 14px;\r\n        }\r\n        \r\n        .mispay-loading {\r\n            text-align: center;\r\n            padding: 60px 20px;\r\n            color: #666;\r\n            font-size: 18px;\r\n        }\r\n        \r\n        .mispay-error {\r\n            text-align: center;\r\n            padding: 60px 20px;\r\n            color: #dc3545;\r\n            font-size: 18px;\r\n            background: #f8d7da;\r\n            border-radius: 8px;\r\n            margin: 20px 0;\r\n        }\r\n        \r\n        .mispay-load-more {\r\n            text-align: center;\r\n            margin-top: 30px;\r\n        }\r\n        \r\n        .mispay-load-more button {\r\n            padding: 12px 30px;\r\n            background: #6f42c1;\r\n            color: white;\r\n            border: none;\r\n            border-radius: 8px;\r\n            font-size: 16px;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n            transition: background 0.3s;\r\n        }\r\n        \r\n        .mispay-load-more button:hover {\r\n            background: #5a2d91;\r\n        }\r\n        \r\n        .mispay-no-results {\r\n            text-align: center;\r\n            padding: 60px 20px;\r\n            color: #666;\r\n            font-size: 18px;\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n            .mispay-deals-grid {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .mispay-header {\r\n                flex-direction: column;\r\n                align-items: stretch;\r\n            }\r\n            \r\n            .mispay-filters {\r\n                justify-content: center;\r\n            }\r\n            \r\n            .mispay-search {\r\n                width: 100%;\r\n                max-width: 300px;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n\r\n    <div class=\"mispay-deals-container\">\r\n        <div class=\"mispay-header\">\r\n            <h1 class=\"mispay-title\">\u0635\u0641\u0642\u0627\u062a<\/h1>\r\n            <div class=\"mispay-filters\">\r\n                <input type=\"text\" class=\"mispay-search\" placeholder=\"\u0627\u0628\u062d\u062b \u0639\u0646 \u0627\u0644\u0645\u062a\u0627\u062c\u0631\" id=\"searchInput\">\r\n                <select class=\"mispay-select\" id=\"categoryFilter\">\r\n                    <option value=\"\">\u062c\u0645\u064a\u0639 \u0627\u0644\u0641\u0626\u0627\u062a<\/option>\r\n                <\/select>\r\n                <select class=\"mispay-select\" id=\"statusFilter\">\r\n                    <option value=\"\">\u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0646\u0648\u0627\u0639<\/option>\r\n <option value=\"active\">\u0646\u0634\u0637<\/option>\r\n <option value=\"paused\">\u0645\u062a\u0648\u0642\u0641 \u0645\u0624\u0642\u062a\u064b\u0627<\/option>\r\n                <\/select>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div id=\"dealsContainer\">\r\n            <div class=\"mispay-loading\">\u062c\u0627\u0631\u064d \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u0642\u0627\u062a...<\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"mispay-load-more\" id=\"loadMoreContainer\" style=\"display: none;\">\r\n            <button onclick=\"loadMoreDeals()\">\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0632\u064a\u062f<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ Configuration\r\n        const API_BASE_URL = 'https:\/\/mobile.mispay.dev\/api';\r\n        let currentPage = 1;\r\n        let allDeals = [];\r\n        let filteredDeals = [];\r\n        let categories = [];\r\n        const DEALS_PER_PAGE = 9;\r\n        \r\n        \/\/ Initialize the widget\r\n        async function initMispayWidget() {\r\n            try {\r\n                await Promise.all([\r\n                    loadCategories(),\r\n                    loadDeals()\r\n                ]);\r\n            } catch (error) {\r\n                showError('Failed to load data. Please try again later.');\r\n            }\r\n        }\r\n        \r\n        \/\/ Load categories for filter\r\n        async function loadCategories() {\r\n            try {\r\n                console.log('Attempting to load categories from:', `${API_BASE_URL}\/content-v2\/categories`);\r\n                \r\n                const response = await fetch(`${API_BASE_URL}\/content-v2\/categories`, {\r\n                    method: 'GET',\r\n                    headers: {\r\n                        'Accept': 'application\/json',\r\n                        'Content-Type': 'application\/json'\r\n                    },\r\n                    mode: 'cors'\r\n                });\r\n                \r\n                console.log('Categories response status:', response.status);\r\n                console.log('Categories response headers:', response.headers);\r\n                \r\n                if (!response.ok) {\r\n                    throw new Error(`HTTP error! status: ${response.status}`);\r\n                }\r\n                \r\n                const data = await response.json();\r\n                console.log('Categories API raw response:', data);\r\n                \r\n                if (data.status === 'success' && data.result) {\r\n                    categories = data.result;\r\n                    console.log('Categories loaded successfully:', categories);\r\n                    populateCategoryFilter();\r\n                } else {\r\n                    console.warn('No categories found or API returned error:', data);\r\n                }\r\n            } catch (error) {\r\n                console.error('Error loading categories:', error);\r\n                console.error('Error details:', error.message);\r\n                \r\n                \/\/ Fallback: Add some dummy categories for testing\r\n                categories = [\r\n                    { id: '1', name: 'Electronics', featured: true },\r\n                    { id: '2', name: 'Fashion', featured: false },\r\n                    { id: '3', name: 'Food & Dining', featured: true }\r\n                ];\r\n                console.log('Using fallback categories:', categories);\r\n                populateCategoryFilter();\r\n            }\r\n        }\r\n        \r\n        \/\/ Load deals from API\r\n        async function loadDeals() {\r\n            try {\r\n                console.log('Attempting to load deals from:', `${API_BASE_URL}\/content-v2\/deals`);\r\n                \r\n                const response = await fetch(`${API_BASE_URL}\/content-v2\/deals`, {\r\n                    method: 'GET',\r\n                    headers: {\r\n                        'Accept': 'application\/json',\r\n                        'Content-Type': 'application\/json'\r\n                    },\r\n                    mode: 'cors'\r\n                });\r\n                \r\n                console.log('Deals response status:', response.status);\r\n                \r\n                if (!response.ok) {\r\n                    throw new Error(`HTTP error! status: ${response.status}`);\r\n                }\r\n                \r\n                const data = await response.json();\r\n                console.log('Deals API raw response:', data);\r\n                \r\n                if (data.status === 'success' && data.result && data.result.length > 0) {\r\n                    allDeals = data.result;\r\n                    filteredDeals = [...allDeals];\r\n                    console.log('Deals loaded successfully:', allDeals.length, 'deals');\r\n                    displayDeals();\r\n                } else {\r\n                    console.warn('No deals found in API response:', data);\r\n                    showError('No deals found in the API response.');\r\n                }\r\n            } catch (error) {\r\n                console.error('Error loading deals:', error);\r\n                console.error('Error details:', error.message);\r\n                \r\n                \/\/ Check if it's a CORS error\r\n                if (error.message.includes('CORS') || error.message.includes('fetch')) {\r\n                    showError('CORS Error: Unable to fetch data from the API. This might be due to cross-origin restrictions. Please check your API CORS settings.');\r\n                } else {\r\n                    showError('Failed to load deals. Please check your internet connection and API endpoint.');\r\n                }\r\n                \r\n                \/\/ Add some dummy data for testing\r\n                allDeals = [\r\n                    {\r\n                        id: \"1\",\r\n                        link: \"https:\/\/example.com\/deals\/electronics-sale\",\r\n                        merchantName: \"Electronics Hub\",\r\n                        amount: 30,\r\n                        image: \"https:\/\/via.placeholder.com\/300x200\",\r\n                        logo: \"https:\/\/via.placeholder.com\/40x40\",\r\n                        couponCode: \"ELEC30\",\r\n                        discountType: \"percentage\",\r\n                        startDate: \"2023-01-01T00:00:00Z\",\r\n                        endDate: \"2023-12-31T23:59:59Z\",\r\n                        briefConditions: \"Valid for new customers only\",\r\n                        detailedTerms: \"This offer cannot be combined with other promotions. Limit one per customer.\",\r\n                        status: \"active\"\r\n                    },\r\n                    {\r\n                        id: \"2\",\r\n                        link: \"https:\/\/example.com\/deals\/fashion-sale\",\r\n                        merchantName: \"Fashion Store\",\r\n                        amount: 50,\r\n                        image: \"https:\/\/via.placeholder.com\/300x200\",\r\n                        logo: \"https:\/\/via.placeholder.com\/40x40\",\r\n                        couponCode: \"FASHION50\",\r\n                        discountType: \"percentage\",\r\n                        startDate: \"2023-01-01T00:00:00Z\",\r\n                        endDate: \"2023-12-31T23:59:59Z\",\r\n                        briefConditions: \"Valid for all customers\",\r\n                        detailedTerms: \"Cannot be combined with other offers\",\r\n                        status: \"active\"\r\n                    }\r\n                ];\r\n                filteredDeals = [...allDeals];\r\n                console.log('Using fallback deals for testing');\r\n                displayDeals();\r\n            }\r\n        }\r\n        \r\n        \/\/ Populate category filter dropdown\r\n        function populateCategoryFilter() {\r\n            const categoryFilter = document.getElementById('categoryFilter');\r\n            console.log('Populating category filter with:', categories);\r\n            \r\n            \/\/ Clear existing options (except the first \"All categories\" option)\r\n            while (categoryFilter.children.length > 1) {\r\n                categoryFilter.removeChild(categoryFilter.lastChild);\r\n            }\r\n            \r\n            if (categories && categories.length > 0) {\r\n                categories.forEach(category => {\r\n                    const option = document.createElement('option');\r\n                    option.value = category.id;\r\n                    option.textContent = category.name;\r\n                    categoryFilter.appendChild(option);\r\n                    console.log('Added category option:', category.name);\r\n                });\r\n            } else {\r\n                console.warn('No categories to populate');\r\n            }\r\n        }\r\n        \r\n        \/\/ Display deals in grid\r\n        function displayDeals() {\r\n            const container = document.getElementById('dealsContainer');\r\n            const loadMoreContainer = document.getElementById('loadMoreContainer');\r\n            \r\n            if (filteredDeals.length === 0) {\r\n                container.innerHTML = '<div class=\"mispay-no-results\">No deals found matching your criteria.<\/div>';\r\n                loadMoreContainer.style.display = 'none';\r\n                return;\r\n            }\r\n            \r\n            const dealsToShow = filteredDeals.slice(0, currentPage * DEALS_PER_PAGE);\r\n            \r\n            container.innerHTML = `\r\n                <div class=\"mispay-deals-grid\">\r\n                    ${dealsToShow.map(deal => createDealCard(deal)).join('')}\r\n                <\/div>\r\n            `;\r\n            \r\n            \/\/ Show\/hide load more button\r\n            if (filteredDeals.length > currentPage * DEALS_PER_PAGE) {\r\n                loadMoreContainer.style.display = 'block';\r\n            } else {\r\n                loadMoreContainer.style.display = 'none';\r\n            }\r\n        }\r\n        \r\n        \/\/ Create individual deal card HTML\r\n        function createDealCard(deal) {\r\n            const dealType = deal.discountType === 'percentage' ? 'Discount' : 'Cashback';\r\n            const dealTypeClass = deal.discountType === 'percentage' ? 'discount' : 'cashback';\r\n            const amountSymbol = deal.discountType === 'percentage' ? '%' : '$';\r\n            \r\n            \/\/ Calculate time remaining (simplified)\r\n            const endDate = new Date(deal.endDate);\r\n            const now = new Date();\r\n            const timeDiff = endDate - now;\r\n            const daysLeft = Math.ceil(timeDiff \/ (1000 * 60 * 60 * 24));\r\n            \r\n            let timeRemaining = '';\r\n            if (daysLeft > 0) {\r\n                timeRemaining = `\u23f0 ${daysLeft}h 15m 30s`;\r\n            } else {\r\n                timeRemaining = '\u23f0 Expires soon';\r\n            }\r\n            \r\n            return `\r\n                <div class=\"mispay-deal-card\">\r\n                    <div class=\"mispay-deal-header\">\r\n                        <div class=\"mispay-deal-type ${dealTypeClass}\">${dealType}<\/div>\r\n                        <div class=\"mispay-merchant-info\">\r\n                            <img decoding=\"async\" src=\"${deal.logo || 'https:\/\/via.placeholder.com\/40x40'}\" alt=\"${deal.merchantName}\" class=\"mispay-merchant-logo\" onerror=\"this.src='https:\/\/via.placeholder.com\/40x40'\">\r\n                            <div class=\"mispay-merchant-name\">${deal.merchantName}<\/div>\r\n                        <\/div>\r\n                        <div class=\"mispay-deal-amount\">${deal.amount}${amountSymbol}<\/div>\r\n                        <div class=\"mispay-deal-duration\">${timeRemaining}<\/div>\r\n                        ${deal.couponCode ? `<div class=\"mispay-coupon-code\">Code: ${deal.couponCode}<\/div>` : ''}\r\n                        <div class=\"mispay-deal-conditions\">${deal.briefConditions || 'Terms and conditions apply'}<\/div>\r\n                        <button class=\"mispay-deal-button\" onclick=\"openDeal('${deal.link}')\">Get Deal<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            `;\r\n        }\r\n        \r\n        \/\/ Open deal in new tab\r\n        function openDeal(link) {\r\n            if (link) {\r\n                window.open(link, '_blank');\r\n            } else {\r\n                alert('Deal link not available');\r\n            }\r\n        }\r\n        \r\n        \/\/ Load more deals\r\n        function loadMoreDeals() {\r\n            currentPage++;\r\n            displayDeals();\r\n        }\r\n        \r\n        \/\/ Show error message\r\n        function showError(message) {\r\n            const container = document.getElementById('dealsContainer');\r\n            container.innerHTML = `<div class=\"mispay-error\">${message}<\/div>`;\r\n        }\r\n        \r\n        \/\/ Filter deals based on search and category\r\n        async function filterDeals() {\r\n            const searchTerm = document.getElementById('searchInput').value.toLowerCase();\r\n            const categoryId = document.getElementById('categoryFilter').value;\r\n            const status = document.getElementById('statusFilter').value;\r\n            \r\n            \/\/ If category is selected, we need to get merchants from that category first\r\n            if (categoryId) {\r\n                try {\r\n                    const response = await fetch(`${API_BASE_URL}\/content-v2\/merchants?categoryId=${categoryId}`);\r\n                    const data = await response.json();\r\n                    \r\n                    if (data.status === 'success' && data.result) {\r\n                        const merchantsInCategory = data.result.map(merchant => merchant.name);\r\n                        \r\n                        filteredDeals = allDeals.filter(deal => {\r\n                            const matchesSearch = deal.merchantName.toLowerCase().includes(searchTerm);\r\n                            const matchesCategory = merchantsInCategory.includes(deal.merchantName);\r\n                            const matchesStatus = !status || deal.status === status;\r\n                            \r\n                            return matchesSearch && matchesCategory && matchesStatus;\r\n                        });\r\n                    } else {\r\n                        filteredDeals = [];\r\n                    }\r\n                } catch (error) {\r\n                    console.error('Error filtering by category:', error);\r\n                    filteredDeals = allDeals.filter(deal => {\r\n                        const matchesSearch = deal.merchantName.toLowerCase().includes(searchTerm);\r\n                        const matchesStatus = !status || deal.status === status;\r\n                        return matchesSearch && matchesStatus;\r\n                    });\r\n                }\r\n            } else {\r\n                filteredDeals = allDeals.filter(deal => {\r\n                    const matchesSearch = deal.merchantName.toLowerCase().includes(searchTerm);\r\n                    const matchesStatus = !status || deal.status === status;\r\n                    \r\n                    return matchesSearch && matchesStatus;\r\n                });\r\n            }\r\n            \r\n            currentPage = 1;\r\n            displayDeals();\r\n        }\r\n        \r\n        \/\/ Event listeners\r\n        document.getElementById('searchInput').addEventListener('input', filterDeals);\r\n        document.getElementById('categoryFilter').addEventListener('change', filterDeals);\r\n        document.getElementById('statusFilter').addEventListener('change', filterDeals);\r\n        \r\n        \/\/ Debug function to check API responses\r\n        async function debugAPI() {\r\n            try {\r\n                console.log('Testing API endpoints...');\r\n                \r\n                \/\/ Test categories\r\n                const categoriesResponse = await fetch(`${API_BASE_URL}\/content-v2\/categories`);\r\n                const categoriesData = await categoriesResponse.json();\r\n                console.log('Categories API response:', categoriesData);\r\n                \r\n                \/\/ Test deals\r\n                const dealsResponse = await fetch(`${API_BASE_URL}\/content-v2\/deals`);\r\n                const dealsData = await dealsResponse.json();\r\n                console.log('Deals API response:', dealsData);\r\n                \r\n                \/\/ Test merchants\r\n                const merchantsResponse = await fetch(`${API_BASE_URL}\/content-v2\/merchants`);\r\n                const merchantsData = await merchantsResponse.json();\r\n                console.log('Merchants API response:', merchantsData);\r\n                \r\n            } catch (error) {\r\n                console.error('API Debug Error:', error);\r\n            }\r\n        }\r\n        \r\n        \/\/ Call debug function to help troubleshoot\r\n        debugAPI();\r\n        \r\n        \/\/ Initialize widget when page loads\r\n        document.addEventListener('DOMContentLoaded', initMispayWidget);\r\n    <\/script>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-842a46a e-flex e-con-boxed e-con e-parent\" data-id=\"842a46a\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-c31bc15 e-con-full e-flex e-con e-child\" data-id=\"c31bc15\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a79ed3c elementor-widget elementor-widget-heading\" data-id=\"a79ed3c\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u062a\u0633\u0648\u0642 \u0628\u0630\u0643\u0627\u0621<br>\u0645\u0639 MISPay<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dac0357 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"dac0357\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u0642\u0633\u0651\u0645 \u0627\u0644\u0645\u062f\u0641\u0648\u0639\u0627\u062a\u060c \u0648\u0627\u0641\u062a\u062d \u0627\u0644\u0635\u0641\u0642\u0627\u062a\u2014\u062f\u0627\u0626\u0645\u064b\u0627 \u0628\u062f\u0648\u0646 \u0641\u0648\u0627\u0626\u062f \u0648\u0645\u062a\u0648\u0627\u0641\u0642 \u0645\u0639 \u0627\u0644\u0634\u0631\u064a\u0639\u0629.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b485f59 e-con-full e-flex e-con e-child\" data-id=\"b485f59\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c0edc95 elementor-widget elementor-widget-image\" data-id=\"c0edc95\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"85\" height=\"85\" src=\"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/05\/QR-Code.png\" class=\"attachment-large size-large wp-image-4130\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5a101e5 elementor-widget elementor-widget-heading\" data-id=\"5a101e5\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u0627\u0645\u0633\u062d \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649<br>\u062a\u0637\u0628\u064a\u0642 MISPay<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6325a5f e-con-full e-flex e-con e-child\" data-id=\"6325a5f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ddce7fc elementor-widget elementor-widget-image\" data-id=\"ddce7fc\" data-element_type=\"widget\" data-settings=\"{&quot;htmega_fe&quot;:&quot;no&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"400\" height=\"517\" src=\"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/05\/iPhone-mockup.png\" class=\"attachment-large size-large wp-image-1326\" alt=\"\" srcset=\"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/05\/iPhone-mockup.png 400w, https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/05\/iPhone-mockup-232x300.png 232w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0645\u0633\u062a\u0646\u062f \u062a\u0633\u0648\u0642 \/ \u0635\u0641\u0642\u0627\u062a \u0635\u0641\u0642\u0627\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u062a\u062c\u0627\u0631 \u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0646\u0648\u0627\u0639\u062e\u0635\u0645\u0627\u0633\u062a\u0631\u062f\u0627\u062f \u0646\u0642\u062f\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0632\u064a\u062f \u0635\u0641\u0642\u0627\u062a MisPay \u0635\u0641\u0642\u0627\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u0641\u0626\u0627\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0646\u0648\u0627\u0639\u0646\u0634\u0637\u0645\u062a\u0648\u0642\u0641 \u0645\u0624\u0642\u062a\u064b\u0627 \ud83c\udf1f \u0635\u0641\u0642\u0627\u062a \u0645\u0648\u0635\u0649 \u0628\u0647\u0627 \u0635\u0641\u0642\u0627\u062a \u0645\u062e\u062a\u0627\u0631\u0629 \u062e\u0635\u064a\u0635\u064b\u0627 \u0644\u0643 \u0639\u0631\u0636 \u0627\u0644\u0634\u0628\u0643\u0629 \u0639\u0631\u0636 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u062c\u0627\u0631\u064d \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u0642\u0627\u062a&#8230; \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0632\u064a\u062f \u0635\u0641\u0642\u0627\u062a MisPay \u0635\u0641\u0642\u0627\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u0641\u0626\u0627\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0646\u0648\u0627\u0639\u0646\u0634\u0637\u0645\u062a\u0648\u0642\u0641 \u0645\u0624\u0642\u062a\u064b\u0627 \u062c\u0627\u0631\u064d \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u0642\u0627\u062a&#8230; \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0632\u064a\u062f \u0623\u062f\u0627\u0629 \u0635\u0641\u0642\u0627\u062a MisPay \u0635\u0641\u0642\u0627\u062a \u062c\u0645\u064a\u0639 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1501","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u0635\u0641\u0642\u0629 - MISPay<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/\" \/>\n<meta property=\"og:locale\" content=\"ar_AR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0635\u0641\u0642\u0629 - MISPay\" \/>\n<meta property=\"og:description\" content=\"\u0645\u0633\u062a\u0646\u062f \u062a\u0633\u0648\u0642 \/ \u0635\u0641\u0642\u0627\u062a \u0635\u0641\u0642\u0627\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u062a\u062c\u0627\u0631 \u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0646\u0648\u0627\u0639\u062e\u0635\u0645\u0627\u0633\u062a\u0631\u062f\u0627\u062f \u0646\u0642\u062f\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0632\u064a\u062f \u0635\u0641\u0642\u0627\u062a MisPay \u0635\u0641\u0642\u0627\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u0641\u0626\u0627\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0646\u0648\u0627\u0639\u0646\u0634\u0637\u0645\u062a\u0648\u0642\u0641 \u0645\u0624\u0642\u062a\u064b\u0627 \ud83c\udf1f \u0635\u0641\u0642\u0627\u062a \u0645\u0648\u0635\u0649 \u0628\u0647\u0627 \u0635\u0641\u0642\u0627\u062a \u0645\u062e\u062a\u0627\u0631\u0629 \u062e\u0635\u064a\u0635\u064b\u0627 \u0644\u0643 \u0639\u0631\u0636 \u0627\u0644\u0634\u0628\u0643\u0629 \u0639\u0631\u0636 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u062c\u0627\u0631\u064d \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u0642\u0627\u062a&#8230; \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0632\u064a\u062f \u0635\u0641\u0642\u0627\u062a MisPay \u0635\u0641\u0642\u0627\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u0641\u0626\u0627\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0646\u0648\u0627\u0639\u0646\u0634\u0637\u0645\u062a\u0648\u0642\u0641 \u0645\u0624\u0642\u062a\u064b\u0627 \u062c\u0627\u0631\u064d \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u0642\u0627\u062a&#8230; \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0632\u064a\u062f \u0623\u062f\u0627\u0629 \u0635\u0641\u0642\u0627\u062a MisPay \u0635\u0641\u0642\u0627\u062a \u062c\u0645\u064a\u0639 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/\" \/>\n<meta property=\"og:site_name\" content=\"MISPay\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-13T11:29:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/test-new.mispay.co\/wp-content\/uploads\/2025\/05\/QR-Code.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/\",\"url\":\"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/\",\"name\":\"\u0635\u0641\u0642\u0629 - MISPay\",\"isPartOf\":{\"@id\":\"https:\/\/www.mispay.co\/ar\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/test-new.mispay.co\/wp-content\/uploads\/2025\/05\/QR-Code.png\",\"datePublished\":\"2025-07-07T08:23:47+00:00\",\"dateModified\":\"2025-08-13T11:29:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/#breadcrumb\"},\"inLanguage\":\"ar\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/#primaryimage\",\"url\":\"https:\/\/test-new.mispay.co\/wp-content\/uploads\/2025\/05\/QR-Code.png\",\"contentUrl\":\"https:\/\/test-new.mispay.co\/wp-content\/uploads\/2025\/05\/QR-Code.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.mispay.co\/ar\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0635\u0641\u0642\u0629\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.mispay.co\/ar\/#website\",\"url\":\"https:\/\/www.mispay.co\/ar\/\",\"name\":\"MISPay\",\"description\":\"Split Your Payments\",\"publisher\":{\"@id\":\"https:\/\/www.mispay.co\/ar\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.mispay.co\/ar\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ar\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.mispay.co\/ar\/#organization\",\"name\":\"MISPay\",\"url\":\"https:\/\/www.mispay.co\/ar\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ar\",\"@id\":\"https:\/\/www.mispay.co\/ar\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/05\/logo-243x75-1.png\",\"contentUrl\":\"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/05\/logo-243x75-1.png\",\"width\":243,\"height\":75,\"caption\":\"MISPay\"},\"image\":{\"@id\":\"https:\/\/www.mispay.co\/ar\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u0635\u0641\u0642\u0629 - MISPay","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/","og_locale":"ar_AR","og_type":"article","og_title":"\u0635\u0641\u0642\u0629 - MISPay","og_description":"\u0645\u0633\u062a\u0646\u062f \u062a\u0633\u0648\u0642 \/ \u0635\u0641\u0642\u0627\u062a \u0635\u0641\u0642\u0627\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u062a\u062c\u0627\u0631 \u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0646\u0648\u0627\u0639\u062e\u0635\u0645\u0627\u0633\u062a\u0631\u062f\u0627\u062f \u0646\u0642\u062f\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0632\u064a\u062f \u0635\u0641\u0642\u0627\u062a MisPay \u0635\u0641\u0642\u0627\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u0641\u0626\u0627\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0646\u0648\u0627\u0639\u0646\u0634\u0637\u0645\u062a\u0648\u0642\u0641 \u0645\u0624\u0642\u062a\u064b\u0627 \ud83c\udf1f \u0635\u0641\u0642\u0627\u062a \u0645\u0648\u0635\u0649 \u0628\u0647\u0627 \u0635\u0641\u0642\u0627\u062a \u0645\u062e\u062a\u0627\u0631\u0629 \u062e\u0635\u064a\u0635\u064b\u0627 \u0644\u0643 \u0639\u0631\u0636 \u0627\u0644\u0634\u0628\u0643\u0629 \u0639\u0631\u0636 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u062c\u0627\u0631\u064d \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u0642\u0627\u062a&#8230; \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0632\u064a\u062f \u0635\u0641\u0642\u0627\u062a MisPay \u0635\u0641\u0642\u0627\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u0641\u0626\u0627\u062a \u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0646\u0648\u0627\u0639\u0646\u0634\u0637\u0645\u062a\u0648\u0642\u0641 \u0645\u0624\u0642\u062a\u064b\u0627 \u062c\u0627\u0631\u064d \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u0642\u0627\u062a&#8230; \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0645\u0632\u064a\u062f \u0623\u062f\u0627\u0629 \u0635\u0641\u0642\u0627\u062a MisPay \u0635\u0641\u0642\u0627\u062a \u062c\u0645\u064a\u0639 [&hellip;]","og_url":"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/","og_site_name":"MISPay","article_modified_time":"2025-08-13T11:29:45+00:00","og_image":[{"url":"https:\/\/test-new.mispay.co\/wp-content\/uploads\/2025\/05\/QR-Code.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/","url":"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/","name":"\u0635\u0641\u0642\u0629 - MISPay","isPartOf":{"@id":"https:\/\/www.mispay.co\/ar\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/#primaryimage"},"image":{"@id":"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/#primaryimage"},"thumbnailUrl":"https:\/\/test-new.mispay.co\/wp-content\/uploads\/2025\/05\/QR-Code.png","datePublished":"2025-07-07T08:23:47+00:00","dateModified":"2025-08-13T11:29:45+00:00","breadcrumb":{"@id":"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/#breadcrumb"},"inLanguage":"ar","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/"]}]},{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/#primaryimage","url":"https:\/\/test-new.mispay.co\/wp-content\/uploads\/2025\/05\/QR-Code.png","contentUrl":"https:\/\/test-new.mispay.co\/wp-content\/uploads\/2025\/05\/QR-Code.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.mispay.co\/ar\/%d8%b5%d9%81%d9%82%d8%a9\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.mispay.co\/ar\/"},{"@type":"ListItem","position":2,"name":"\u0635\u0641\u0642\u0629"}]},{"@type":"WebSite","@id":"https:\/\/www.mispay.co\/ar\/#website","url":"https:\/\/www.mispay.co\/ar\/","name":"MISPay","description":"Split Your Payments","publisher":{"@id":"https:\/\/www.mispay.co\/ar\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mispay.co\/ar\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ar"},{"@type":"Organization","@id":"https:\/\/www.mispay.co\/ar\/#organization","name":"MISPay","url":"https:\/\/www.mispay.co\/ar\/","logo":{"@type":"ImageObject","inLanguage":"ar","@id":"https:\/\/www.mispay.co\/ar\/#\/schema\/logo\/image\/","url":"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/05\/logo-243x75-1.png","contentUrl":"https:\/\/www.mispay.co\/wp-content\/uploads\/2025\/05\/logo-243x75-1.png","width":243,"height":75,"caption":"MISPay"},"image":{"@id":"https:\/\/www.mispay.co\/ar\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/www.mispay.co\/ar\/wp-json\/wp\/v2\/pages\/1501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mispay.co\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mispay.co\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mispay.co\/ar\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mispay.co\/ar\/wp-json\/wp\/v2\/comments?post=1501"}],"version-history":[{"count":1,"href":"https:\/\/www.mispay.co\/ar\/wp-json\/wp\/v2\/pages\/1501\/revisions"}],"predecessor-version":[{"id":1502,"href":"https:\/\/www.mispay.co\/ar\/wp-json\/wp\/v2\/pages\/1501\/revisions\/1502"}],"wp:attachment":[{"href":"https:\/\/www.mispay.co\/ar\/wp-json\/wp\/v2\/media?parent=1501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}