<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">

<?php
require_once dirname(__DIR__, 1) . '/inc/site.php';

$stateSlug = isset($_GET['state']) ? $_GET['state'] : '';
$dataFile = SITE_ROOT . "/panels/data/{$stateSlug}.php";

if (!file_exists($dataFile)) {
  echo "State not found.";
  exit;
}

include $dataFile;

$bannerMap = [
    'johor' => 'johor_banner.jpg',
    'kedah' => 'kedah_banner.jpg',
    'kelantan' => 'kelantan_banner.jpg',
    'kuala-lumpur' => 'kl_banner.jpg',
    'melaka' => 'melaka_banner.jpg',
    'negeri-sembilan' => 'n9_banner.jpg',
    'pahang' => 'pahang_banner.jpg',
    'penang' => 'penang_banner.jpg',
    'perak' => 'perak_banner.jpg',
    'perlis' => 'perlis_banner.jpg',
    'sabah' => 'sabah_banner.jpg',
    'sarawak' => 'sarawak_banner.jpg',
    'selangor' => 'selangor_banner.jpg',
    'terengganu' => 'terengganu_banner.jpg',
];

$bannerFile = 'assets/images/banners/panel/' . ($bannerMap[$stateSlug] ?? '');
$flagFile = 'assets/images/states/' . $stateSlug . '.jpg';

$translation_script = 'assets/translation/about_translation.js';
$ws_head_preloads = [$flagFile];

ws_include('inc/head.php');

function normalizeWorkshopImageName($value) {
    $value = html_entity_decode(strip_tags((string) $value), ENT_QUOTES, 'UTF-8');
    $value = preg_replace('/^#+/', '', trim($value));
    $value = preg_replace('/\.(jpg|jpeg|png|webp)$/i', '', $value);
    $value = strtoupper($value);
    $value = preg_replace('/[^A-Z0-9]+/', ' ', $value);
    return trim(preg_replace('/\s+/', ' ', $value));
}

function resolveWorkshopImagePath($stateName, $loc) {
    $dir = SITE_ROOT . '/assets/images/workshops/' . strtolower($stateName) . '/';
    $defaultImage = 'assets/images/workshops/default.jpg';

    if (!is_dir($dir)) {
        return $defaultImage;
    }

    $extensions = ['jpg', 'jpeg', 'png', 'webp'];
    $candidateNames = [];

    if (!empty($loc['img'])) {
        $candidateNames[] = $loc['img'];
    }

    if (!empty($loc['title'])) {
        foreach ($extensions as $extension) {
            $candidateNames[] = strip_tags($loc['title']) . '.' . $extension;
        }
    }

    foreach ($candidateNames as $candidateName) {
        $imagePath = $dir . $candidateName;

        if (file_exists($imagePath)) {
            return 'assets/images/workshops/' . strtolower($stateName) . '/' . $candidateName;
        }
    }

    $normalizedCandidates = array_filter(array_map('normalizeWorkshopImageName', $candidateNames));
    $files = glob($dir . '*.{jpg,jpeg,png,webp,JPG,JPEG,PNG,WEBP}', GLOB_BRACE);

    foreach ($files as $file) {
        $normalizedFile = normalizeWorkshopImageName(pathinfo($file, PATHINFO_FILENAME));

        if (in_array($normalizedFile, $normalizedCandidates, true)) {
            $rel = str_replace('\\', '/', $file);
            $root = str_replace('\\', '/', SITE_ROOT);
            if (strpos($rel, $root . '/') === 0) {
                return substr($rel, strlen($root) + 1);
            }
            return $file;
        }
    }

    return $defaultImage;
}

function renderWorkshopCard($loc, $stateName, $stateSlug, array &$usedSlugs) {
    $imagePath = resolveWorkshopImagePath($stateName, $loc);
    $stateLabel = ucwords(str_replace('-', ' ', $stateSlug));
    $cardTitle = strip_tags($loc['title']);
    $workshopSlug = ws_workshop_slug($cardTitle, $usedSlugs);
    $navUrls = ws_workshop_nav_urls($cardTitle, $loc['address'] ?? '', $loc);

    $tagList = [];
    $tagPriority = ['coverage', 'specialty', 'certification'];
    if (!empty($loc['tags']) && is_array($loc['tags'])) {
        foreach ($tagPriority as $priorityType) {
            if (empty($loc['tags'][$priorityType]) || !is_array($loc['tags'][$priorityType])) {
                continue;
            }
            foreach ($loc['tags'][$priorityType] as $tag) {
                $tagList[] = ['text' => $tag, 'type' => $priorityType];
                if (count($tagList) >= 3) {
                    break 2;
                }
            }
        }
    }
    $contactRaw = trim((string) ($loc['pic'] ?? ''));
    $searchText = ws_panel_card_search_text($loc);
    ?>
    <li
        id="<?php echo htmlspecialchars($workshopSlug, ENT_QUOTES, 'UTF-8'); ?>"
        class="ws-panels__card wk-card"
        data-wk-search="<?php echo htmlspecialchars($searchText, ENT_QUOTES, 'UTF-8'); ?>">
        <div class="ws-panels__media">
            <img
                class="ws-panels__img"
                src="<?php echo htmlspecialchars($imagePath, ENT_QUOTES, 'UTF-8'); ?>"
                alt="<?php echo htmlspecialchars(strip_tags($loc['title']), ENT_QUOTES, 'UTF-8'); ?>"
                loading="lazy"
                decoding="async">
            <div class="ws-panels__media-foot">
                <span class="ws-panels__region"><?php echo htmlspecialchars($stateLabel, ENT_QUOTES, 'UTF-8'); ?></span>
            </div>
        </div>
        <div class="ws-panels__body">
            <div class="ws-panels__head">
                <h3 class="ws-panels__name"><?php echo strip_tags($loc['title']); ?></h3>
            </div>
            <dl class="ws-panels__details">
                <div class="ws-panels__detail">
                    <dt>Location</dt>
                    <dd><?php echo htmlspecialchars($loc['address'] ?? '', ENT_QUOTES, 'UTF-8'); ?></dd>
                </div>
                <div class="ws-panels__detail">
                    <dt>Contact</dt>
                    <dd data-no-phone-link><?php echo $contactRaw !== '' ? htmlspecialchars($contactRaw, ENT_QUOTES, 'UTF-8') : '—'; ?></dd>
                </div>
            </dl>
            <?php if ($tagList) : ?>
                <ul class="ws-panels__tags">
                    <?php foreach ($tagList as $tag) : ?>
                        <?php
                        $tagType = $tag['type'] ?? 'coverage';
                        if (!in_array($tagType, ['coverage', 'specialty', 'certification'], true)) {
                            $tagType = 'coverage';
                        }
                        ?>
                        <li class="ws-panels__tag ws-panels__tag--<?php echo $tagType; ?>">
                            <span class="ws-panels__tag-inner"><?php echo htmlspecialchars($tag['text'], ENT_QUOTES, 'UTF-8'); ?></span>
                        </li>
                    <?php endforeach; ?>
                </ul>
            <?php endif; ?>
            <div class="ws-panels__card-foot">
                <div class="ws-panels__card-foot-start">
                    <?php ws_render_workshop_nav_icons($navUrls, $cardTitle); ?>
                </div>
                <?php ws_render_panel_share_button($loc, $stateSlug, $workshopSlug); ?>
            </div>
        </div>
    </li>
    <?php
}

$allWorkshops = ws_workshop_list_ordered($locations);
$workshopUsedSlugs = [];
?>

<body id="workshops_page" class="page-template page-template-templates page-template-template-full-notitle page-template-templatestemplate-full-notitle-php page page-id-740 responsive layout-full no-js has-menu-search page-layout-default not-default-page mobilenav">

	<?php ws_include('inc/header.php');?>
	
	<!-- Hero Banner -->
    <div class="wk-hero">
        <div class="wk-hero__left">
            <h1 class="wk-hero__title">Panel Workshops – <em><?php echo htmlspecialchars($stateName, ENT_QUOTES, 'UTF-8'); ?></em> <img class="wk-hero__flag" src="<?php echo htmlspecialchars($flagFile, ENT_QUOTES, 'UTF-8'); ?>" alt="<?php echo htmlspecialchars($stateName, ENT_QUOTES, 'UTF-8'); ?> flag" width="54" height="54" decoding="sync" fetchpriority="high"></h1>
        </div>
        <div class="wk-hero__right">
            <div class="wk-hero__gradient"></div>
            <img class="wk-hero__img" src="<?php echo htmlspecialchars($bannerFile, ENT_QUOTES, 'UTF-8'); ?>" alt="<?php echo htmlspecialchars($stateName, ENT_QUOTES, 'UTF-8'); ?>">
        </div>
    </div>

    <!-- All Panels -->
    <div class="container">
        <div class="content-padding">
            <div class="wk-search">
                <label class="wk-search__label" for="wk-search-input">Search panel workshops</label>
                <div class="wk-search__field">
                    <input
                        type="search"
                        id="wk-search-input"
                        class="wk-search__input"
                        placeholder="Search by workshop name, location, or contact…"
                        autocomplete="off"
                        enterkeyhint="search">
                </div>
                <p class="wk-search__status" id="wk-search-status" aria-live="polite"></p>
            </div>
            <p class="wk-search__empty" id="wk-search-empty" hidden>No workshops match your search. Try another name or area.</p>
            <ul class="ws-panels__grid wk-grid" id="wk-panel-grid">
                <?php foreach ($allWorkshops as $loc): ?>
                    <?php renderWorkshopCard($loc, $stateName, $stateSlug, $workshopUsedSlugs); ?>
                <?php endforeach; ?>
            </ul>
        </div>
    </div>
    
    <?php ws_include('inc/footer.php');?>

    <?php ws_include('inc/scroll-to-top.php');?>

<?php
$panelShareJs = SITE_ROOT . '/assets/js/panel-share.js';
if (is_file($panelShareJs)) :
    $wsBase = ws_base_href();
    ?>
<script src="<?php echo htmlspecialchars($wsBase, ENT_QUOTES, 'UTF-8'); ?>assets/js/panel-share.js?v=<?php echo (int) @filemtime($panelShareJs); ?>" defer></script>
<?php endif; ?>

<style>
/* REMOVE YELLOW TOP BORDER */
.wk-card {
    border-top: none !important;
}

/* SEARCH */
.wk-search {
    max-width: 520px;
    margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
}

.wk-search__label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #045393;
}

.wk-search__field {
    position: relative;
}

.wk-search__input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    line-height: 1.4;
    color: #002245;
    background: #fff;
    border: 2px solid rgba(4, 83, 147, 0.2);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 34, 69, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wk-search__input::-webkit-search-cancel-button {
    display: none;
}

.wk-search__input:focus {
    outline: none;
    border-color: #045393;
    box-shadow: 0 0 0 3px rgba(4, 83, 147, 0.15);
}

.wk-search__status {
    margin: 0.5rem 0 0;
    min-height: 1.25rem;
    font-size: 0.88rem;
    color: #5a6b7a;
}

.wk-search__empty {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    text-align: center;
    font-size: 0.95rem;
    color: #5a3d00;
    background: #fff8e6;
    border: 1px solid rgba(252, 201, 10, 0.5);
    border-radius: 12px;
}

.wk-card[hidden] {
    display: none !important;
}

/* GRID */
.wk-grid {
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 768px) {
    .wk-grid {
        grid-template-columns: 1fr !important;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    .wk-hero__left h1 {
        font-size: 1.3rem;
    }

    .wk-hero__left p {
        font-size: 0.85rem;
    }

    .wk-card__title {
        font-size: 0.95rem;
    }

    .wk-card__flag {
        font-size: 1.1rem;
    }
}
</style>

<script>
(function () {
    var input = document.getElementById('wk-search-input');
    var status = document.getElementById('wk-search-status');
    var emptyMsg = document.getElementById('wk-search-empty');
    var cards = document.querySelectorAll('.wk-card[data-wk-search]');
    if (!input || !cards.length) {
        return;
    }

    var total = cards.length;

    function filterPanels() {
        var q = input.value.trim().toLowerCase();
        var visible = 0;

        cards.forEach(function (card) {
            var haystack = card.getAttribute('data-wk-search') || '';
            var show = !q || haystack.indexOf(q) !== -1;
            card.hidden = !show;
            if (show) {
                visible += 1;
            }
        });

        if (status) {
            status.textContent = q ? (visible + ' of ' + total + ' workshops shown') : '';
        }

        if (emptyMsg) {
            emptyMsg.hidden = !q || visible > 0;
        }
    }

    input.addEventListener('input', filterPanels);
    input.addEventListener('search', filterPanels);
})();
</script>

</body>
</html>
