<!DOCTYPE html>
<html>
<head>
    <title>مباريات اليوم</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.33/moment-timezone-with-data.min.js" integrity="sha512-rjmacQUxc9cmwJpFYyP8u6vpytS86vjG23aMHX6y8+Mau56fF2k05fKvM7WMMT/rpL26gM8ohwXb55H4uKxUg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
        /* تنسيقات CSS إضافية خاصة بك */
        #btolat-matches-table {
            width: 100%;
            border-collapse: collapse;
        }
        #btolat-matches-table th, #btolat-matches-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        #btolat-matches-table th {
            background-color: #f0f0f0;
        }
        .btolat-match-details__score {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .btolat-match-details__score > div {
            display: flex;
            align-items: center;
            margin: 0 10px;
        }

        /* تنسيقات أحداث المباراة */
        .btolat-timeline {
            width: 100%;
            margin: 30px auto;
            position: relative;
        }

        .btolat-timeline ul {
            padding: 0;
            margin: 0;
        }

        .btolat-timeline ul li {
            list-style-type: none;
            position: relative;
            width: 6px;
            margin: 0 auto;
            padding-top: 50px;
            background: #ddd;
        }

        .btolat-timeline ul li::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: inherit;
            z-index: 1;
        }

        .btolat-timeline ul li div {
            position: relative;
            bottom: 0;
            width: 400px;
            padding: 15px;
            background: #3a89eb;
            color: #fff;
        }

        .btolat-timeline ul li div::before {
            content: '';
            position: absolute;
            bottom: 7px;
            width: 0;
            height: 0;
            border-style: solid;
        }

        /* Odd item positioning */
        .btolat-timeline ul li:nth-child(odd) div {
            left: 45px;
        }

        /* Odd triangle indicator styling */
        .btolat-timeline ul li:nth-child(odd) div::before {
            left: -15px;
            border-width: 8px 16px 8px 0;
            border-color: transparent #3a89eb transparent transparent;
        }

        /* Even item positioning */
        .btolat-timeline ul li:nth-child(even) div {
            left: -439px;
        }

        /* Even triangle indicator styling */
        .btolat-timeline ul li:nth-child(even) div::before {
            right: -15px;
            border-width: 8px 0 8px 16px;
            border-color: transparent transparent transparent #3a89eb;
        }

        .btolat-timeline ul li time {
            display: block;
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .btolat-timeline ul li.btolat-event-title::after {
            background: #3a89eb;
        }

        .btolat-timeline ul li.btolat-event-title div {
            background: #3a89eb;
            color: white;
        }

        .btolat-timeline ul li.btolat-event-title div::before {
            border-color: transparent #3a89eb transparent transparent;
        }

        .btolat-timeline ul li:nth-child(even).btolat-event-title div::before {
            border-color: transparent transparent transparent #3a89eb;
        }

    .btolat-match-details__lineup-hometeam,
    .btolat-match-details__lineup-awayteam {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* توسيط اللاعبين أفقيًا */
    margin-bottom: 20px; /* مسافة بين التشكيلتين */
    }

    .btolat-match-details__lineup-hometeam .player,
    .btolat-match-details__lineup-awayteam .player {
    width: auto; /* السماح بعرض اللاعبين حسب الحاجة */
    margin: 5px; /* هوامش صغيرة بين اللاعبين */
    text-align: center; /* توسيط محتوى اللاعب */
    }

    /* إضافة تنسيق للبدلاء */
    .btolat-match-details__lineup-hometeam .substitute-lineup,
    .btolat-match-details__lineup-awayteam .substitute-lineup {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        margin-top: 20px; /* مسافة أعلى البدلاء */
        border-top: 1px solid #ddd; /* خط فاصل بين الأساسيين والبدلاء */
        padding-top: 10px; /* مسافة أعلى محتوى البدلاء */
    }

    </style>

</head>
<body>
    <h1>مباريات اليوم</h1>
    <table id="btolat-matches-table">
        <thead>
            <tr>
                <th>الدوري</th>
                <th>التاريخ</th>
                <th>الوقت</th>
                <th>الفريق الأول</th>
                <th>الفريق الثاني</th>
                <th>النتيجة</th>
                <th>الزمن</th>
                <th></th>
                <th>القنوات الناقلة</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <div id="btolat-match-details" style="display: none;">
        <h2 id="match-details-title">تفاصيل المباراة</h2>
        <div class="btolat-match-details__uppergraph">

        </div>

    <div class="btolat-match-details__field-container">
            <div class="btolat-match-details__lineup-hometeam">
                <div class="starting-lineup"></div>
                <div class="substitute-lineup"></div>
            </div>
            <div class="btolat-match-details__lineup-awayteam">
                <div class="starting-lineup"></div>
                <div class="substitute-lineup"></div>
            </div>
        </div>
        
        <div id="btolat-match-stats" style="padding: 20px; border-top: 1px solid #eee; margin-top: 20px;">
            </div>

        <div class="btolat-card">
           <section class="btolat-timeline">
            <ul id="btolat-events-list">

            </ul>
           </section>
        </div>
    </div>

    <script src="script.js"></script>
    
    <script>
    fetch("https://sitegeeky.com/ws-connector.php")
        .then(response => response.text())
        .then(data => console.log("📩 استجابة WebSocket:", data))
        .catch(error => console.error("❌ خطأ في الاتصال:", error));
</script>

    
</body>
</html>