magico.prototype/prototype/travelleader-mobile/courses.php

<?php
$enablePrototypeComments = true;
$pageTitle = 'TravelLeader - Szkolenia i Certyfikaty';
include 'header.php';
?>

<div class="app-content">

    <!-- Nagłówek szkoleń (Czysty, minimalistyczny, bez zbędnych odznak) -->
    <div class="mb-3">
        <h5 class="fw-bold mb-0" style="color: var(--dark-navy);">Szkolenia & Certyfikaty</h5>
        <small class="text-muted" style="font-size: 0.76rem;">Kursy podnoszące rangę profilu w bazie biur podróży</small>
    </div>

    <!-- Przełącznik zakładek (Segmented control) -->
    <div class="d-flex p-1 rounded-3 mb-3" style="background: #eef1f8;">
        <button type="button" id="tabCoursesBtn" class="btn btn-sm flex-fill fw-bold rounded-2 py-1" style="font-size: 0.78rem; background: white; color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,0.06);" onclick="switchCourseTab('courses');">
            Dostępne kursy (3)
        </button>
        <button type="button" id="tabCertsBtn" class="btn btn-sm flex-fill fw-bold rounded-2 py-1 text-muted" style="font-size: 0.78rem;" onclick="switchCourseTab('certs');">
            Moje certyfikaty (2)
        </button>
    </div>

    <!-- SEKCJA 1: Dostępne kursy (Czyste karty, bez wielopoziomowych pięter) -->
    <div id="sectionCourses">
        
        <!-- Kurs 1 -->
        <div class="section-card mb-2 p-3">
            <div class="d-flex justify-content-between align-items-center mb-1">
                <span class="badge" style="background: #eff0fe; color: var(--primary); font-size: 0.68rem; font-weight: 700;">
                    WŁOCHY
                </span>
                <span class="fw-bold text-dark" style="font-size: 0.82rem;">199 PLN</span>
            </div>

            <h6 class="fw-bold mb-1" style="font-size: 0.9rem; color: var(--dark-navy);">
                Włochy Północne & Dolomity 2027
            </h6>
            <p class="text-muted mb-2" style="font-size: 0.75rem; line-height: 1.35;">
                Prowadzący: Janek. Warsztaty z logistyki autokarowej, stref ZTL i nowych szlaków.
            </p>

            <div class="d-flex justify-content-between align-items-center pt-2 border-top">
                <small class="text-muted" style="font-size: 0.72rem;">
                    <i class='bx bx-calendar'></i> 24.10 • 4h online
                </small>
                <button class="btn btn-sm btn-primary-custom py-1 px-3" style="width: auto; font-size: 0.74rem;" onclick="alert('Zapis na szkolenie przez TravelPay.');">
                    Zapisz się &gt;
                </button>
            </div>
        </div>

        <!-- Kurs 2 -->
        <div class="section-card mb-2 p-3">
            <div class="d-flex justify-content-between align-items-center mb-1">
                <span class="badge bg-warning-subtle text-warning-emphasis" style="font-size: 0.68rem; font-weight: 700;">
                    RAINBOW TOURS
                </span>
                <span class="badge bg-success-subtle text-success fw-bold" style="font-size: 0.68rem;">BEZPŁATNE</span>
            </div>

            <h6 class="fw-bold mb-1" style="font-size: 0.9rem; color: var(--dark-navy);">
                Standardy obsługi imprez objazdowych
            </h6>
            <p class="text-muted mb-2" style="font-size: 0.75rem; line-height: 1.35;">
                Szkolenie produktowe biura podróży dla pilotów szukających kontraktów na sezon.
            </p>

            <div class="d-flex justify-content-between align-items-center pt-2 border-top">
                <small class="text-muted" style="font-size: 0.72rem;">
                    <i class='bx bx-video'></i> VOD • 2h
                </small>
                <button class="btn btn-sm btn-secondary-custom py-1 px-3" style="width: auto; font-size: 0.74rem;" onclick="alert('Dostęp do materiałów VOD został odblokowany.');">
                    Dołącz &gt;
                </button>
            </div>
        </div>

        <!-- Kurs 3 -->
        <div class="section-card mb-3 p-3">
            <div class="d-flex justify-content-between align-items-center mb-1">
                <span class="badge bg-light text-muted" style="font-size: 0.68rem; font-weight: 700;">
                    PRAWO & PROCEDURY
                </span>
                <span class="fw-bold text-dark" style="font-size: 0.82rem;">149 PLN</span>
            </div>

            <h6 class="fw-bold mb-1" style="font-size: 0.9rem; color: var(--dark-navy);">
                Prawo w turystyce & reklamacje
            </h6>
            <p class="text-muted mb-2" style="font-size: 0.75rem; line-height: 1.35;">
                Procedury awaryjne, ubezpieczenia i rozwiązywanie trudnych sytuacji z turystami.
            </p>

            <div class="d-flex justify-content-between align-items-center pt-2 border-top">
                <small class="text-muted" style="font-size: 0.72rem;">
                    <i class='bx bx-calendar'></i> 12.11 • Webinar
                </small>
                <button class="btn btn-sm btn-primary-custom py-1 px-3" style="width: auto; font-size: 0.74rem;" onclick="alert('Zapis na webinar.');">
                    Zapisz się &gt;
                </button>
            </div>
        </div>

    </div>

    <!-- SEKCJA 2: Moje certyfikaty (Ukryta domyślnie, przełączana zakładką) -->
    <div id="sectionCerts" class="d-none">

        <div class="section-card mb-2 p-3">
            <div class="d-flex align-items-center gap-3">
                <div class="d-flex align-items-center justify-content-center rounded-circle bg-success-subtle text-success" style="width: 38px; height: 38px; flex-shrink: 0;">
                    <i class='bx bx-badge-check fs-4'></i>
                </div>
                <div class="flex-grow-1">
                    <h6 class="fw-bold mb-0" style="font-size: 0.86rem; color: var(--dark-navy);">Superpilot: Europa Południowa</h6>
                    <small class="text-muted" style="font-size: 0.72rem;">Weryfikacja TravelLeader • Dodano do profilu</small>
                </div>
            </div>
        </div>

        <div class="section-card mb-3 p-3">
            <div class="d-flex align-items-center gap-3">
                <div class="d-flex align-items-center justify-content-center rounded-circle bg-primary-subtle text-primary" style="width: 38px; height: 38px; flex-shrink: 0;">
                    <i class='bx bx-plus-medical fs-5'></i>
                </div>
                <div class="flex-grow-1">
                    <h6 class="fw-bold mb-0" style="font-size: 0.86rem; color: var(--dark-navy);">Pierwsza Pomoc (KPP)</h6>
                    <small class="text-muted" style="font-size: 0.72rem;">Certyfikat ważny do: Kwiecień 2028</small>
                </div>
            </div>
        </div>

        <div class="p-3 rounded-3 text-center" style="background: #f8f9fd;">
            <small class="text-muted" style="font-size: 0.74rem;">
                Wszystkie zdobyte certyfikaty są automatycznie widoczne dla biur podróży w Twojej wizytówce.
            </small>
        </div>

    </div>

</div><!-- /.app-content -->

<script>
function switchCourseTab(tab) {
    const coursesSection = document.getElementById('sectionCourses');
    const certsSection = document.getElementById('sectionCerts');
    const coursesBtn = document.getElementById('tabCoursesBtn');
    const certsBtn = document.getElementById('tabCertsBtn');

    if (tab === 'courses') {
        coursesSection.classList.remove('d-none');
        certsSection.classList.add('d-none');
        coursesBtn.style.background = 'white';
        coursesBtn.style.color = 'var(--primary)';
        coursesBtn.style.boxShadow = '0 1px 4px rgba(0,0,0,0.06)';
        certsBtn.style.background = 'transparent';
        certsBtn.style.color = 'var(--text-muted)';
        certsBtn.style.boxShadow = 'none';
    } else {
        coursesSection.classList.add('d-none');
        certsSection.classList.remove('d-none');
        certsBtn.style.background = 'white';
        certsBtn.style.color = 'var(--primary)';
        certsBtn.style.boxShadow = '0 1px 4px rgba(0,0,0,0.06)';
        coursesBtn.style.background = 'transparent';
        coursesBtn.style.color = 'var(--text-muted)';
        coursesBtn.style.boxShadow = 'none';
    }
}
</script>

<?php include 'footer.php'; ?>