// 'id' => "tableLastFixtureCompare",
// 'label' => 'เปรียบเทียบผลบอล',
// 'homeTeam' => $homeTeam,
// 'awayTeam' => $awayTeam,
// 'homeFixtures' => $fixture->fixture_analysis_homes,
// 'awayFixtures' => $fixture->fixture_analysis_aways,
// 'headerClass' => 'bg-primary'

const hcMatchCount = {};
const hcSelectedCount = {};
const hcHalf = {};
const hcLeague = {};
const hcHome = {};
const hcAway = {};
const hcHomeFixture = {};
const hcAwayFixture = {};

function renderHistoryCompare(divId, label, homeTeam, awayTeam, headerClass, data) {

    if (!data?.home?.length || !data?.away?.length) {
        return;
    }

    const maxLength = Math.min(20, data.home.length, data.away.length);
    const selectedCount = Math.min(10, maxLength);

    hcMatchCount[divId] = Math.min(10, maxLength);
    hcSelectedCount[divId] = selectedCount;
    hcHome[divId] = homeTeam;
    hcAway[divId] = awayTeam;
    hcHomeFixture[divId] = data.home;
    hcAwayFixture[divId] = data.away;

    let html = `<div class="col-12 pt-4">`;
    html += `<div class="position-relative">`;
    html += `<h2 class="text-center">${label}</h2>`;
    html += `<div class="position-absolute end-0 top-0 pt-1">`;
    html += `<select id="${divId}SelectMatch" class="form-select form-select-sm form-select-ssm" aria-label="จำนวนนัด" onchange="hcMatchCountChange(event, '${divId}')">`;
    for (i = 1; i <= maxLength; i++) {
        html += `<option value="${i}" ${i == selectedCount ? 'selected' : ''}>${i} นัดล่าสุด</option>`;
    }
    html += `</select>`;
    html += `</div>`;
    html += `</div>`;
    html += `<table class="table-fixture" width="100%" cellspacing="0" cellpadding="0">`;
    html += `<thead>`;
    html += `<tr class="th2">`;
    html += `<th>ทีม</th>`;
    html += `<th>ได้</th>`;
    html += `<th>เสีย</th>`;
    html += `<th>ผลต่างประตู</th>`;
    html += `<th>เฉลี่ยได้ประตู</th>`;
    html += `<th>ชนะ%</th>`;
    html += `<th>เสมอ%</th>`;
    html += `<th>แพ้%</th>`;
    html += `<th>เหย้า/เยือน</th>`;
    html += `<th>ได้</th>`;
    html += `<th>เสีย</th>`;
    html += `<th>ผลต่างประตู</th>`;
    html += `<th>เฉลี่ยได้ประตู </th>`;
    html += `<th>ชนะ%</th>`;
    html += `<th>เสมอ%</th>`;
    html += `<th>แพ้%</th>`;
    html += `</tr>`;
    html += `</thead>`;
    html += `<tbody id="${divId}Tbody">`;
    html += `</tbody>`;
    html += `</table>`;
    html += `</div>`;

    $('#historyCompareSection').html(html);

    renderHistoryCompareContent(divId);
}

function renderHistoryCompareContent(divId) {

    let len = Math.min(hcMatchCount[divId], hcHomeFixture[divId].length, hcAwayFixture[divId].length);
    const hs = {
        'a': { 'ga': 0, 'gl': 0, 'w': 0, 'd': 0, 'l': 0, 'c': 0 },
        't': { 'ga': 0, 'gl': 0, 'w': 0, 'd': 0, 'l': 0, 'c': 0 },
    };
    for (let i = 0; i < len; i++) {
        const f = hcHomeFixture[divId][i];
        const g = f['score'].split('-');
        const gh = parseInt(g[0]);
        const ga = parseInt(g[1]);
        if (hcHome[divId] == f['team_home']) {
            hs['t']['ga'] += gh;
            hs['t']['gl'] += ga;
            hs['a']['ga'] += gh;
            hs['a']['gl'] += ga;
            if (gh == ga) {
                hs['t']['d']++;
                hs['a']['d']++;
            } else if (gh > ga) {
                hs['t']['w']++;
                hs['a']['w']++;
            } else {
                hs['t']['l']++;
                hs['a']['l']++;
            }
            hs['t']['c']++;
            hs['a']['c']++;
        } else {
            hs['a']['ga'] += ga;
            hs['a']['gl'] += gh;
            if (gh == ga) {
                hs['a']['d']++;
            } else if (gh > ga) {
                hs['a']['l']++;
            } else {
                hs['a']['w']++;
            }
            hs['a']['c']++;
        }
    }
    hs['t']['c'] = Math.max(1, hs['t']['c']);
    hs['a']['c'] = Math.max(1, hs['a']['c']);

    const as = {
        'a': { 'ga': 0, 'gl': 0, 'w': 0, 'd': 0, 'l': 0, 'c': 0 },
        't': { 'ga': 0, 'gl': 0, 'w': 0, 'd': 0, 'l': 0, 'c': 0 },
    };
    for (let i = 0; i < len; i++) {
        const f = hcAwayFixture[divId][i];
        const g = f['score'].split('-');
        const gh = parseInt(g[0]);
        const ga = parseInt(g[1]);
        if (hcAway[divId] == f['team_away']) {
            as['t']['ga'] += ga;
            as['t']['gl'] += gh;
            as['a']['ga'] += ga;
            as['a']['gl'] += gh;
            if (gh == ga) {
                as['t']['d']++;
                as['a']['d']++;
            } else if (gh < ga) {
                as['t']['w']++;
                as['a']['w']++;
            } else {
                as['t']['l']++;
                as['a']['l']++;
            }
            as['t']['c']++;
            as['a']['c']++;
        } else {
            as['a']['ga'] += gh;
            as['a']['gl'] += ga;
            if (gh == ga) {
                as['a']['d']++;
            } else if (gh < ga) {
                as['a']['l']++;
            } else {
                as['a']['w']++;
            }
            as['a']['c']++;
        }
    }
    as['t']['c'] = Math.max(1, as['t']['c']);
    as['a']['c'] = Math.max(1, as['a']['c']);

    const thn = hcHome[divId];
    const tan = hcAway[divId];
    let html = ``;
    html += `<tr class="in">`
    html += `<td class="bg-team-home text-white fw-500 fs-7 th">${thn}</td>`
    html += `<td>${hs['a']['ga']}</td>`;
    html += `<td>${hs['a']['gl']}</td>`;
    html += `<td>${hs['a']['ga'] - hs['a']['gl']}</td>`;
    html += `<td>${(hs['a']['ga'] / hs['a']['c']).toFixed(1)}</td>`;
    html += `<td class="text-success">${(hs['a']['w'] / hs['a']['c'] * 100).toFixed(0)}%</td>`;
    html += `<td class="text-info">${(hs['a']['d'] / hs['a']['c'] * 100).toFixed(0)}%</td>`;
    html += `<td class="text-danger">${(hs['a']['l'] / hs['a']['c'] * 100).toFixed(0)}%</td>`;
    html += `<td>ทีมเหย้า</td>`;
    html += `<td>${hs['t']['ga']}</td>`;
    html += `<td>${hs['t']['gl']}</td>`;
    html += `<td>${hs['t']['ga'] - hs['t']['gl']}</td>`;
    html += `<td>${(hs['t']['ga'] / hs['t']['c']).toFixed(1)}</td>`;
    html += `<td class="text-success">${(hs['t']['w'] / hs['t']['c'] * 100).toFixed(0)}%</td>`;
    html += `<td class="text-info">${(hs['t']['d'] / hs['t']['c'] * 100).toFixed(0)}%</td>`;
    html += `<td class="text-danger">${(hs['t']['l'] / hs['t']['c'] * 100).toFixed(0)}%</td>`;
    html += `</tr>`;
    html += `<tr class="in">`
    html += `<td class="bg-team-away text-white fw-500 fs-7 th">${tan}</td>`
    html += `<td>${as['a']['ga']}</td>`;
    html += `<td>${as['a']['gl']}</td>`;
    html += `<td>${as['a']['ga'] - as['a']['gl']}</td>`;
    html += `<td>${(as['a']['ga'] / as['a']['c']).toFixed(1)}</td>`;
    html += `<td class="text-success">${(as['a']['w'] / as['a']['c'] * 100).toFixed(0)}%</td>`;
    html += `<td class="text-info">${(as['a']['d'] / as['a']['c'] * 100).toFixed(0)}%</td>`;
    html += `<td class="text-danger">${(as['a']['l'] / as['a']['c'] * 100).toFixed(0)}%</td>`;
    html += `<td>ทีมเหย้า</td>`;
    html += `<td>${as['t']['ga']}</td>`;
    html += `<td>${as['t']['gl']}</td>`;
    html += `<td>${as['t']['ga'] - as['t']['gl']}</td>`;
    html += `<td>${(as['t']['ga'] / as['t']['c']).toFixed(1)}</td>`;
    html += `<td class="text-success">${(as['t']['w'] / as['t']['c'] * 100).toFixed(0)}%</td>`;
    html += `<td class="text-info">${(as['t']['d'] / as['t']['c'] * 100).toFixed(0)}%</td>`;
    html += `<td class="text-danger">${(as['t']['l'] / as['t']['c'] * 100).toFixed(0)}%</td>`;
    html += `</tr>`;
    $('#'+divId+'Tbody').html(html);
}

function hcMatchCountChange(event, divId) {
    hcMatchCount[divId] = event.target.value;
    renderHistoryCompareContent(divId);
}