magico.prototype/prototype/superpilot-web/sos-modal.php

<!-- Modal Pilnego Zastępstwa SOS -->
<div class="modal fade" id="sosModal" tabindex="-1" aria-labelledby="sosModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow-lg" style="border-radius: var(--sp-radius-md); overflow: hidden;">
            
            <div class="modal-header text-white" style="background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);">
                <div class="d-flex align-items-center gap-2">
                    <div class="rounded-circle bg-white text-danger d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; font-size: 1.4rem;">
                        <i class='bx bxs-alarm-exclamation'></i>
                    </div>
                    <div>
                        <h5 class="modal-title fw-bold text-white mb-0" id="sosModalLabel">🚨 Tryb Awaryjny: Pilne Zastępstwo SOS</h5>
                        <small class="text-white-50" style="font-size: 0.76rem;">Pilot zrezygnował w ostatniej chwili? Znajdź natychmiastowe zastępstwo w 15 minut</small>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
            </div>

            <div class="modal-body p-4">
                
                <!-- Kryteria nagłego wyjazdu -->
                <form id="sosRequestForm">
                    <div class="row g-3 mb-4">
                        <div class="col-md-5">
                            <label class="form-label fw-bold small text-muted">Kierunek wycieczki</label>
                            <select class="form-select fw-semibold" id="sosCountrySelect">
                                <option value="Włochy" selected>🇮🇹 Włochy (Objazdówka / Rzym)</option>
                                <option value="Grecja">🇬🇷 Grecja (Cyklady / Peloponez)</option>
                                <option value="Hiszpania">🇪🇸 Hiszpania (Andaluzja / Barcelona)</option>
                                <option value="Chorwacja">🇭🇷 Chorwacja (Istria / Dalmacja)</option>
                                <option value="Norwegia">🇳🇴 Norwegia (Fiordy)</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-bold small text-muted">Kiedy rusza autokar / lot?</label>
                            <select class="form-select fw-semibold" id="sosTimeUrgency">
                                <option value="24h" selected>⚡ W ciągu 24h (Dziś w nocy / Jutro rano)</option>
                                <option value="48h">⏱️ W ciągu 48h</option>
                                <option value="72h">📅 W ciągu 3 dni</option>
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label class="form-label fw-bold small text-muted">Miejsce zbiórki</label>
                            <input type="text" class="form-control fw-semibold" value="Warszawa / Katowice">
                        </div>
                    </div>

                    <!-- Lista pilotów w trybie gotowości od zaraz (Standby Ready) -->
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="fw-bold mb-0 text-navy" style="font-size: 0.9rem;">Piloci dyżurujący z natychmiastową dyspozycyjnością (4 dostępnych):</h6>
                            <span class="badge bg-success-subtle text-success" style="font-size: 0.72rem;">🟢 Gotowi do spakowania w 2h</span>
                        </div>

                        <!-- Pilot 1: Oskar Kaczmarek (Spójny) -->
                        <div class="card border mb-2 p-3 shadow-none hover-border-primary" style="background: #ffffff; border-radius: 10px;">
                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="rounded-3 d-flex align-items-center justify-content-center text-white fw-bold" style="width: 44px; height: 44px; background: linear-gradient(135deg, #4f46e5, #7c3aed); font-size: 1.1rem;">
                                        OK
                                    </div>
                                    <div>
                                        <div class="d-flex align-items-center gap-2">
                                            <h6 class="fw-bold mb-0 text-navy" style="font-size: 0.9rem;">Oskar Kaczmarek</h6>
                                            <span class="badge bg-success" style="font-size: 0.65rem;">Superpilot Verified</span>
                                            <span class="text-warning small fw-bold"><i class='bx bxs-star'></i> 4.9 (18 opinii)</span>
                                        </div>
                                        <small class="text-muted" style="font-size: 0.75rem;">Specjalizacja: Włochy (Ekspert) • Języki: Włoski (B2), Angielski (C1) • Paszport i uprawnienia aktualne</small>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center gap-2">
                                    <a href="tel:+48600123456" class="btn btn-sm btn-outline-success fw-bold d-flex align-items-center gap-1" style="font-size: 0.78rem;">
                                        <i class='bx bx-phone-call'></i> Zadzwoń: 600 123 456
                                    </a>
                                    <button type="button" class="btn btn-sm btn-danger fw-bold" onclick="openBookingModal('1', 'Oskar Kaczmarek', 'Pilne zastępstwo SOS: Jutro rano')">
                                        <i class='bx bx-zap'></i> Wyślij SOS
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Pilot 2: Katarzyna Zielińska -->
                        <div class="card border mb-2 p-3 shadow-none" style="background: #ffffff; border-radius: 10px;">
                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="rounded-3 d-flex align-items-center justify-content-center text-white fw-bold" style="width: 44px; height: 44px; background: linear-gradient(135deg, #0ea5e9, #0284c7); font-size: 1.1rem;">
                                        KZ
                                    </div>
                                    <div>
                                        <div class="d-flex align-items-center gap-2">
                                            <h6 class="fw-bold mb-0 text-navy" style="font-size: 0.9rem;">Katarzyna Zielińska</h6>
                                            <span class="badge bg-info-subtle text-info" style="font-size: 0.65rem;">Kwalifikowana Pierwsza Pomoc</span>
                                            <span class="text-warning small fw-bold"><i class='bx bxs-star'></i> 4.8 (15 opinii)</span>
                                        </div>
                                        <small class="text-muted" style="font-size: 0.75rem;">Specjalizacja: Bałkany, Włochy Północne • Języki: Angielski (C1), Włoski (B1) • Dyspozycyjna od zaraz</small>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center gap-2">
                                    <a href="tel:+48601987654" class="btn btn-sm btn-outline-success fw-bold d-flex align-items-center gap-1" style="font-size: 0.78rem;">
                                        <i class='bx bx-phone-call'></i> Zadzwoń: 601 987 654
                                    </a>
                                    <button type="button" class="btn btn-sm btn-danger fw-bold" onclick="openBookingModal('4', 'Katarzyna Zielińska', 'Pilne zastępstwo SOS: Jutro rano')">
                                        <i class='bx bx-zap'></i> Wyślij SOS
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- Masowy broadcast SOS -->
                    <div class="p-3 rounded-3 mt-3 text-white" style="background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);">
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                            <div>
                                <div class="fw-bold" style="font-size: 0.9rem;">
                                    <i class='bx bx-broadcast text-warning me-1'></i> Masowy Broadcast SOS do wszystkich wolnych pilotów na kierunek Włochy
                                </div>
                                <small class="text-white-50" style="font-size: 0.74rem;">Wyśle równoległy alert Push & SMS do 12 pilotów spełniających wymagania. Pierwszy, który zaakceptuje, przejmuje zlecenie.</small>
                            </div>
                            <button type="submit" class="btn btn-warning fw-bold px-4 py-2" style="font-size: 0.85rem;">
                                <i class='bx bx-send'></i> Roześlij masowy alert SOS
                            </button>
                        </div>
                    </div>

                </form>

            </div>

            <div class="modal-footer bg-light px-4 py-2 border-top">
                <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Zamknij</button>
            </div>

        </div>
    </div>
</div>