@page
@model JobsMedical.Web.Pages.DownloadModel
@{
    ViewData["Title"] = "دریافت اپلیکیشن همکادر";
    ViewData["Description"] = "نصب اپلیکیشن همکادر روی موبایل و دسکتاپ — اندروید، iOS، ویندوز و وب. دریافت اعلان فرصت‌های شغلی کادر درمان.";
}

<div class="page-head">
    <div class="container">
        <h1>دریافت اپلیکیشن همکادر</h1>
        <p class="muted">همکادر یک «اپ تحت وب» (PWA) است؛ بدون فروشگاه هم نصب می‌شود و مثل یک اپ واقعی روی صفحه‌ی اصلی می‌نشیند و اعلان می‌فرستد.</p>
    </div>
</div>

<div class="container section">
    <div class="rec-banner">
        <div>
            <h2 style="margin:0 0 4px;">نصب سریع روی این دستگاه</h2>
            <span style="opacity:.9; font-size:14px;">با یک دکمه، همکادر را به صفحه‌ی اصلی اضافه کن</span>
        </div>
        <div style="display:flex; gap:8px; flex-wrap:wrap;">
            <button id="installBtn" class="btn btn-outline" style="display:none;">⬇️ نصب اپلیکیشن</button>
            <button id="notifyBtn" class="btn btn-outline">🔔 فعال‌سازی اعلان‌ها</button>
        </div>
    </div>
    <p id="pwaMsg" class="muted" style="font-size:13px; margin-top:-6px;"></p>

    <div class="grid grid-4" style="margin-top:8px;">
        <div class="card card-pad">
            <h3 style="margin-top:0;">🌐 وب</h3>
            <p class="muted" style="font-size:13.5px;">همین حالا در مرورگر باز است. برای نصب، دکمه‌ی «نصب اپلیکیشن» بالا را بزن (کروم/اج).</p>
        </div>
        <div class="card card-pad">
            <h3 style="margin-top:0;">🪟 ویندوز</h3>
            <p class="muted" style="font-size:13.5px;">در Chrome/Edge، آیکن نصب (⊕) در نوار آدرس را بزن یا منو ← «Install همکادر». روی دسکتاپ مثل یک برنامه باز می‌شود.</p>
        </div>
        <div class="card card-pad">
            <h3 style="margin-top:0;">🤖 اندروید</h3>
            <p class="muted" style="font-size:13.5px;">در Chrome دکمه‌ی «نصب اپلیکیشن» یا منو ← «Add to Home screen». به‌زودی از <strong>کافه‌بازار</strong> هم قابل نصب خواهد بود.</p>
        </div>
        <div class="card card-pad">
            <h3 style="margin-top:0;"> iOS</h3>
            <p class="muted" style="font-size:13.5px;">در Safari، دکمه‌ی Share (□↑) ← «Add to Home Screen» ← Add. آیکن همکادر روی صفحه‌ی اصلی می‌آید.</p>
        </div>
    </div>

    <div class="card card-pad" style="margin-top:20px;">
        <h2 style="margin-top:0; font-size:20px;">راهنمای استفاده</h2>
        <ol style="margin:0; padding-inline-start:20px; line-height:2;">
            <li><strong>نصب کن</strong> — طبق راهنمای دستگاهت بالا، همکادر را به صفحه‌ی اصلی اضافه کن.</li>
            <li><strong>وارد شو</strong> — با شماره‌ موبایل و کد پیامکی؛ هنگام ثبت‌نام نوع حساب (کادر درمان یا کارفرما) را انتخاب کن.</li>
            <li><strong>کادر درمان:</strong> در «علاقه‌مندی‌ها» نقش/شهر/نوع شیفت را تعیین کن تا پیشنهادهای متناسب بگیری؛ با «نزدیک من» نزدیک‌ترین فرصت‌ها را ببین؛ روی شیفت/استخدام «اعلام تمایل» بزن.</li>
            <li><strong>کارفرما:</strong> مرکزت را ثبت کن (موقعیت را روی نقشه بگذار)، سپس شیفت/استخدام منتشر کن و متقاضیان را در پنل ببین.</li>
            <li><strong>اعلان‌ها</strong> — دکمه‌ی «فعال‌سازی اعلان‌ها» را بزن تا از فرصت‌های جدید باخبر شوی.</li>
        </ol>
    </div>
</div>

@section Scripts {
    <script>
        var VAPID = '@Model.VapidPublicKey';
        var msg = document.getElementById('pwaMsg');

        // --- Install (Add to Home Screen) ---
        var deferred = null, installBtn = document.getElementById('installBtn');
        window.addEventListener('beforeinstallprompt', function (e) { e.preventDefault(); deferred = e; installBtn.style.display = 'inline-flex'; });
        installBtn.addEventListener('click', async function () {
            if (!deferred) { msg.textContent = 'برای نصب از منوی مرورگر «Add to Home screen / Install» استفاده کن.'; return; }
            deferred.prompt(); await deferred.userChoice; deferred = null; installBtn.style.display = 'none';
        });
        if (window.matchMedia('(display-mode: standalone)').matches) { msg.textContent = '✓ اپلیکیشن نصب شده و در حالت مستقل اجرا می‌شود.'; }

        // --- Notifications ---
        function b64ToUint8(b64) {
            var pad = '='.repeat((4 - b64.length % 4) % 4);
            var s = (b64 + pad).replace(/-/g, '+').replace(/_/g, '/');
            var raw = atob(s); var arr = new Uint8Array(raw.length);
            for (var i = 0; i < raw.length; i++) arr[i] = raw.charCodeAt(i);
            return arr;
        }
        document.getElementById('notifyBtn').addEventListener('click', async function () {
            if (!('Notification' in window) || !('serviceWorker' in navigator)) { msg.textContent = 'مرورگر شما از اعلان‌ها پشتیبانی نمی‌کند.'; return; }
            var perm = await Notification.requestPermission();
            if (perm !== 'granted') { msg.textContent = 'اجازه‌ی اعلان داده نشد.'; return; }
            var reg = await navigator.serviceWorker.ready;
            if (VAPID) {
                try {
                    var sub = await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: b64ToUint8(VAPID) });
                    await fetch('/push/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(sub) });
                } catch (e) { /* push service may be unreachable; local notifications still work */ }
            }
            reg.showNotification('همکادر', { body: 'اعلان‌ها فعال شد ✓ از فرصت‌های جدید باخبر می‌شوی.', icon: '/icons/icon-192.png', dir: 'rtl', lang: 'fa' });
            msg.textContent = '✓ اعلان‌ها فعال شد.';
        });
    </script>
}