magico.prototype/prototype/travelleader-mobile/profile-edit.php

<?php
$enablePrototypeComments = true;
$pageTitle = 'TravelLeader - Edycja Profilu';
include 'header.php';
?>

<div class="app-content">

    <!-- Pasek powrotu -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <a href="profile.php" class="text-decoration-none d-flex align-items-center gap-1 text-muted" style="font-size: 0.85rem; font-weight: 600;">
            <i class='bx bx-arrow-back fs-5'></i> Powrót do profilu
        </a>
        <button type="button" class="btn btn-sm btn-primary-custom py-1 px-3" style="width: auto; font-size: 0.8rem;" onclick="saveProfile();">
            <i class='bx bx-check'></i> Zapisz
        </button>
    </div>

    <h5 class="fw-bold mb-3" style="color: var(--dark-navy);">Edycja Profilu</h5>

    <!-- Toast powiadomienie o zapisie -->
    <div id="saveToast" class="alert alert-success d-none rounded-3 shadow-sm py-2 px-3 mb-3 d-flex align-items-center justify-content-between" style="font-size: 0.82rem;">
        <span><i class='bx bx-check-circle me-1'></i> Profil zaktualizowany! Zmiany widoczne dla biur.</span>
        <a href="profile.php" class="fw-bold text-success text-decoration-underline ms-2">Zobacz</a>
    </div>

    <!-- 0. Nowoczesny, kompaktowy przełącznik widoczności (Pill card) -->
    <div class="visibility-status-pill-card mb-3">
        <div class="d-flex align-items-center gap-2">
            <span class="status-indicator-dot active" id="visibilityDot"></span>
            <div>
                <span class="fw-bold" style="font-size: 0.84rem; color: var(--dark-navy);" id="visibilityTitle">
                    Widoczny w bazie biur podróży
                </span>
            </div>
        </div>
        <div class="form-check form-switch m-0">
            <input class="form-check-input" type="checkbox" id="visibilitySwitch" checked style="cursor: pointer; transform: scale(1.15);" onchange="toggleVisibility(this);">
        </div>
    </div>

    <!-- 1. Zdjęcie profilowe & Wideo-Wizytówka -->
    <div class="section-card mb-3">
        <div class="section-title">
            <span><i class='bx bx-image text-primary me-1'></i> Zdjęcie i Wideo</span>
        </div>

        <div class="d-flex align-items-center gap-3 mb-3">
            <div class="profile-avatar-img d-flex align-items-center justify-content-center" style="width: 60px; height: 60px; background: linear-gradient(135deg, #4f46e5, #7c3aed); color: white; font-size: 1.4rem; font-weight: 800; flex-shrink: 0;">
                OK
            </div>
            <div>
                <button type="button" class="btn btn-sm btn-outline-primary rounded-pill py-1 px-3" style="font-size: 0.76rem;" onclick="alert('Wybierz zdjęcie z telefonu.');">
                    <i class='bx bx-camera'></i> Zmień zdjęcie profilowe
                </button>
            </div>
        </div>

        <div class="mb-3">
            <label class="form-label-custom">Link do wideo-autoprezentacji</label>
            <div class="input-group">
                <span class="input-group-text bg-light border-end-0 py-1"><i class='bx bxl-youtube text-danger'></i></span>
                <input type="text" class="form-control form-control-custom" value="https://youtu.be/oskar-pilot-intro" placeholder="YouTube, Vimeo...">
            </div>
        </div>

        <div>
            <label class="form-label-custom">Zdjęcia ze szlaków i wypraw</label>
            <div class="d-flex gap-2">
                <div class="media-thumbnail d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: #eff0fe; color: var(--primary); cursor: pointer;" onclick="alert('Wybierz kolejne zdjęcia');">
                    <i class='bx bx-plus fs-4'></i>
                </div>
                <div class="media-thumbnail d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: #60a5fa; color: white;">
                    <i class='bx bx-landscape fs-4'></i>
                </div>
                <div class="media-thumbnail d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; background: #f59e0b; color: white;">
                    <i class='bx bx-camera fs-4'></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 2. Dane podstawowe & Autoprezentacja -->
    <div class="section-card mb-3" id="bio">
        <div class="section-title">
            <span><i class='bx bx-user text-primary me-1'></i> Dane podstawowe & O mnie</span>
        </div>

        <div class="mb-2">
            <label class="form-label-custom">Imię i Nazwisko</label>
            <input type="text" class="form-control-custom" value="Oskar Kaczmarek">
        </div>

        <div class="mb-2">
            <label class="form-label-custom">Tytuł zawodowy / Slogan</label>
            <input type="text" class="form-control-custom" value="Licencjonowany Pilot Wycieczek & Przewodnik">
        </div>

        <div class="row g-2 mb-2">
            <div class="col-6">
                <label class="form-label-custom">Rok rozpoczęcia</label>
                <input type="number" id="startYearInput" class="form-control-custom" value="2019" min="1970" max="2026" oninput="updateExpYears();">
                <small class="text-primary fw-bold d-block mt-1" id="expCalculatedHint" style="font-size: 0.72rem;">
                    <i class='bx bx-check'></i> Staż: 7 lat
                </small>
            </div>
            <div class="col-6">
                <label class="form-label-custom">Miasto bazowe</label>
                <input type="text" class="form-control-custom" value="Warszawa / Rzym">
            </div>
        </div>

        <div class="mb-1">
            <label class="form-label-custom">Opis autoprezentacji dla biur</label>
            <textarea class="form-control-custom" rows="3">Pasjonat kultury śródziemnomorskiej z wykształceniem historycznym. Od 2019 roku z sukcesami pilotuję wycieczki objazdowe po Włoszech, Hiszpanii i Bałkanach. Wyróżnia mnie opanowanie w sytuacjach kryzysowych, doskonały kontakt z grupą oraz płynna znajomość języka włoskiego i angielskiego.</textarea>
        </div>
    </div>

    <!-- 3. Destynacje i Obsługiwane Kraje -->
    <div class="section-card mb-3" id="destynacje">
        <div class="section-title">
            <span><i class='bx bx-map-pin text-primary me-1'></i> Obsługiwane kraje</span>
        </div>

        <div class="d-flex flex-wrap gap-1 mb-2" id="countryChips">
            <span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇮🇹 Włochy</span>
            <span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇬🇷 Grecja</span>
            <span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇪🇸 Hiszpania</span>
            <span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇭🇷 Chorwacja</span>
            <span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇳🇴 Norwegia</span>
            <span class="chip-tag primary" onclick="this.classList.toggle('primary')">🇦🇹 Austria</span>
            <span class="chip-tag" onclick="this.classList.toggle('primary')">🇵🇹 Portugalia</span>
            <span class="chip-tag" onclick="this.classList.toggle('primary')">🇹🇷 Turcja</span>
            <span class="chip-tag" onclick="this.classList.toggle('primary')">🇫🇷 Francja</span>
        </div>

        <div class="input-group">
            <input type="text" id="newCountryInput" class="form-control form-control-custom py-1" placeholder="Wpisz inny kraj...">
            <button class="btn btn-outline-primary py-1 px-3" type="button" onclick="addNewCountry();" style="border-radius: var(--radius-sm); margin-left: 6px; font-size: 0.78rem;">
                + Dodaj
            </button>
        </div>
    </div>

    <!-- 4. Języki Obce -->
    <div class="section-card mb-3" id="jezyki">
        <div class="section-title">
            <span><i class='bx bx-chat text-primary me-1'></i> Języki</span>
        </div>

        <div class="d-flex flex-column gap-2 mb-2">
            <div class="row g-2 align-items-center">
                <div class="col-7">
                    <input type="text" class="form-control-custom" value="Polski" readonly>
                </div>
                <div class="col-5">
                    <select class="form-select form-control-custom py-1">
                        <option selected>Ojczysty</option>
                    </select>
                </div>
            </div>

            <div class="row g-2 align-items-center">
                <div class="col-7">
                    <input type="text" class="form-control-custom" value="Angielski">
                </div>
                <div class="col-5">
                    <select class="form-select form-control-custom py-1">
                        <option>B1 (Średni)</option>
                        <option>B2 (Płynny)</option>
                        <option selected>C1 (Biegły)</option>
                    </select>
                </div>
            </div>

            <div class="row g-2 align-items-center">
                <div class="col-7">
                    <input type="text" class="form-control-custom" value="Włoski">
                </div>
                <div class="col-5">
                    <select class="form-select form-control-custom py-1">
                        <option>B1 (Średni)</option>
                        <option selected>B2 (Płynny)</option>
                        <option>C1 (Biegły)</option>
                    </select>
                </div>
            </div>
        </div>

        <button type="button" class="btn btn-sm btn-light w-100 rounded-3 py-1 text-muted" style="font-size: 0.76rem;" onclick="alert('Dodaj kolejny język');">
            + Dodaj język
        </button>
    </div>

    <!-- 5. Tagi & Specjalizacje -->
    <div class="section-card mb-4" id="tagi">
        <div class="section-title">
            <span><i class='bx bx-purchase-tag text-primary me-1'></i> Tagi & Specjalizacje</span>
        </div>

        <div class="d-flex flex-wrap gap-1">
            <span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Objazdówki</span>
            <span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Trekking & góry</span>
            <span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Przewodnik miejski</span>
            <span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Grupy szkolne</span>
            <span class="chip-tag primary" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> VIP / Incentive</span>
            <span class="chip-tag" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Narty</span>
            <span class="chip-tag" onclick="this.classList.toggle('primary')"><i class='bx bx-check'></i> Rejsy</span>
        </div>
    </div>

    <!-- Zapisz -->
    <div class="mb-4">
        <button type="button" class="btn-primary-custom" onclick="saveProfile();">
            <i class='bx bx-save'></i> Zapisz profil publiczny
        </button>
    </div>

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

<script>
function updateExpYears() {
    const startYear = parseInt(document.getElementById('startYearInput').value, 10);
    const currentYear = new Date().getFullYear();
    const hint = document.getElementById('expCalculatedHint');
    if (!isNaN(startYear) && startYear > 1950 && startYear <= currentYear) {
        const years = currentYear - startYear;
        hint.innerHTML = `<i class='bx bx-check'></i> Staż: ${years} ${years === 1 ? 'rok' : (years < 5 ? 'lata' : 'lat')}`;
        hint.className = 'text-primary fw-bold d-block mt-1';
    } else {
        hint.innerHTML = `<i class='bx bx-info-circle'></i> Podaj prawidłowy rok`;
        hint.className = 'text-danger fw-bold d-block mt-1';
    }
}

function toggleVisibility(checkbox) {
    const dot = document.getElementById('visibilityDot');
    const title = document.getElementById('visibilityTitle');
    if (checkbox.checked) {
        dot.className = 'status-indicator-dot active';
        title.innerHTML = 'Widoczny w bazie biur podróży';
    } else {
        dot.className = 'status-indicator-dot';
        title.innerHTML = 'Profil ukryty w bazie biur';
    }
}

function saveProfile() {
    const toast = document.getElementById('saveToast');
    toast.classList.remove('d-none');
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

function addNewCountry() {
    const input = document.getElementById('newCountryInput');
    const val = input.value.trim();
    if (val) {
        const container = document.getElementById('countryChips');
        const span = document.createElement('span');
        span.className = 'chip-tag primary';
        span.innerHTML = '🌍 ' + val;
        span.onclick = function() { this.classList.toggle('primary'); };
        container.appendChild(span);
        input.value = '';
    }
}
</script>

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