948 lines
61 KiB
PHP
948 lines
61 KiB
PHP
<?php
|
|
$enablePrototypeComments = true;
|
|
include '../../header-sneat.php';
|
|
?>
|
|
|
|
<style>
|
|
.bg-light {
|
|
background: #fcfdfd !important;
|
|
}
|
|
</style>
|
|
|
|
<div class="text-center">
|
|
<h3 class="mb-4">Symulator Dialogu</h3>
|
|
<button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#tripModal">
|
|
<i class="bi bi-window-desktop me-2"></i> Otwórz szczegóły wycieczki
|
|
</button>
|
|
</div>
|
|
|
|
<div class="modal fade" id="tripModal" tabindex="-1" aria-hidden="true">
|
|
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<button type="button" class="btn-close position-absolute end-0 mt-2 me-2" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
|
|
<div style="min-height: 50vh;">
|
|
<div class="px-4 py-2 border-bottom d-flex justify-content-between align-items-center bg-light">
|
|
<small class="text-muted fw-bold">#140</small>
|
|
</div>
|
|
|
|
<div class="p-4 pt-3 row">
|
|
<div class="col-lg-8 border-end">
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div class="w-100">
|
|
<h3 class="editable-hover mb-0">Tatry - Weekend Majowy <i
|
|
class="bi bi-pencil fs-6 text-muted ms-2 opacity-50"></i></h3>
|
|
</div>
|
|
<button class="btn btn-label-secondary btn-icon" title="Udostępnij">
|
|
<i class="bi bi-share"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="d-flex gap-2 mb-4 overflow-auto pb-2" id="inquiryTabs" role="tablist">
|
|
<button class="btn btn-primary btn-sm d-flex align-items-center text-nowrap active"
|
|
id="tab-general-btn" data-bs-toggle="tab" data-bs-target="#tab-general" type="button"
|
|
role="tab" aria-selected="true">
|
|
<i class="bi bi-info-circle me-2"></i> Ogólne
|
|
</button>
|
|
<button class="btn btn-outline-secondary btn-sm d-flex align-items-center text-nowrap"
|
|
id="tab-comments-btn" data-bs-toggle="tab" data-bs-target="#tab-comments" type="button"
|
|
role="tab" aria-selected="false">
|
|
<i class="bi bi-chat-left-text me-2"></i> Komentarze
|
|
</button>
|
|
<button class="btn btn-outline-secondary btn-sm d-flex align-items-center text-nowrap"
|
|
id="tab-tasks-btn" data-bs-toggle="tab" data-bs-target="#tab-tasks" type="button"
|
|
role="tab" aria-selected="false">
|
|
<i class="bi bi-check2-circle me-2"></i> Zadania
|
|
</button>
|
|
<button class="btn btn-outline-secondary btn-sm d-flex align-items-center text-nowrap"
|
|
id="tab-other-btn" data-bs-toggle="tab" data-bs-target="#tab-other" type="button"
|
|
role="tab" aria-selected="false">
|
|
<i class="bi bi-briefcase me-2"></i> Inne zapytania
|
|
</button>
|
|
</div>
|
|
|
|
<div class="tab-content p-0">
|
|
<!-- Tap Pane: Ogólne -->
|
|
<div class="tab-pane fade show active" id="tab-general" role="tabpanel">
|
|
|
|
<div class="mb-4">
|
|
<h5 class="d-flex align-items-center gap-1 text-primary mb-3"
|
|
style="cursor: pointer;" data-bs-toggle="collapse"
|
|
data-bs-target="#descCollapse" aria-expanded="true">
|
|
<i class="bi bi-chevron-down fs-5"></i> Opis oferty
|
|
</h5>
|
|
<div class="collapse show" id="descCollapse">
|
|
<div class="w-100 p-3 bg-light rounded border">
|
|
<p class="mb-0">Przykładowy opis wycieczki w Tatry. Nocleg w Zakopanem,
|
|
wyjście na
|
|
Giewont...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
<div>
|
|
<h5 class="d-flex align-items-center gap-1 text-primary mb-4"
|
|
style="cursor: pointer;" data-bs-toggle="collapse"
|
|
data-bs-target="#timelineCollapse" aria-expanded="true">
|
|
<i class="bi bi-chevron-down fs-5"></i> Historia operacji
|
|
</h5>
|
|
|
|
<div class="collapse show" id="timelineCollapse">
|
|
<ul class="timeline timeline-outline mb-0 pb-0">
|
|
|
|
<!-- Item 1: Komentarz -->
|
|
<li class="timeline-item timeline-item-transparent pb-3 border-left-dashed">
|
|
<span class="timeline-point timeline-point-warning"></span>
|
|
<div class="timeline-event">
|
|
<div class="timeline-header mb-1">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class="avatar avatar-xs">
|
|
<span
|
|
class="avatar-initial rounded-circle bg-label-primary">MT</span>
|
|
</div>
|
|
<h6 class="mb-0">Mateusz Travel dodał komentarz</h6>
|
|
</div>
|
|
<small class="text-muted">15 min temu</small>
|
|
</div>
|
|
<div class="bg-lighter p-2 rounded ms-1">
|
|
<p class="mb-0 small fst-italic">"Klient prosi o zmianę
|
|
terminu na
|
|
czerwiec. Do weryfikacji dostępność hoteli."</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- Item 2: Błąd SMS -->
|
|
<li class="timeline-item timeline-item-transparent pb-3 border-left-dashed">
|
|
<span class="timeline-point timeline-point-danger"></span>
|
|
<div class="timeline-event">
|
|
<div class="timeline-header mb-1">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class="avatar avatar-xs">
|
|
<span
|
|
class="avatar-initial rounded-circle bg-label-secondary">SY</span>
|
|
</div>
|
|
<h6 class="mb-0 text-danger">Błąd wysyłki SMS (System)
|
|
</h6>
|
|
</div>
|
|
<small class="text-muted">Dziś, 12:21</small>
|
|
</div>
|
|
<p class="mb-0 text-danger small ms-1">Limit środków wyczerpany.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- Item 3: Email -->
|
|
<li class="timeline-item timeline-item-transparent pb-3 border-left-dashed">
|
|
<span class="timeline-point timeline-point-secondary"></span>
|
|
<div class="timeline-event">
|
|
<div
|
|
class="timeline-header mb-1 d-flex justify-content-between align-items-center">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class="avatar avatar-xs">
|
|
<img src="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/img/avatars/1.png"
|
|
alt="Avatar" class="rounded-circle" />
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-0">Wysłano e-mail (Automat)</h6>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<small class="text-muted">Dziś, 12:20</small>
|
|
<button class="btn btn-xs btn-label-secondary p-1 px-2"
|
|
type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#emailContent1" aria-expanded="false">
|
|
<i class="bi bi-eye"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ms-1">
|
|
<p class="mb-1 small">Temat: <strong>Propozycja wycieczki w
|
|
Tatry</strong> <span class="text-muted mx-1">|</span>
|
|
do:
|
|
jan@jan.pl</p>
|
|
|
|
<div class="collapse mt-1" id="emailContent1">
|
|
<div class="bg-lighter p-2 rounded border small text-muted">
|
|
<p class="mb-1">Dzień dobry,</p>
|
|
<p class="mb-1">W załączeniu przesyłam wstępną
|
|
ofertę
|
|
wyjazdu w
|
|
Tatry dla grupy szkolnej. Proszę o zapoznanie
|
|
się z
|
|
programem.</p>
|
|
<p class="mb-0">Pozdrawiam, Zespół Mateusz Travel
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- Item 4: Załączniki -->
|
|
<li class="timeline-item timeline-item-transparent pb-3 border-left-dashed">
|
|
<span class="timeline-point timeline-point-dark"></span>
|
|
<div class="timeline-event">
|
|
<div class="timeline-header mb-1">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class="avatar avatar-xs">
|
|
<span
|
|
class="avatar-initial rounded-circle bg-label-primary">MT</span>
|
|
</div>
|
|
<h6 class="mb-0">Mateusz Travel wgrał załączniki</h6>
|
|
</div>
|
|
<small class="text-muted">Dziś, 12:15</small>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2 ms-1">
|
|
<i class="bi bi-file-earmark-pdf text-danger"></i>
|
|
<span class="small">Oferta_Wstepna_v1.pdf</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- Item 5: Zadanie -->
|
|
<li class="timeline-item timeline-item-transparent pb-3 border-left-dashed">
|
|
<span class="timeline-point timeline-point-warning"></span>
|
|
<div class="timeline-event">
|
|
<div class="timeline-header mb-1">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class="avatar avatar-xs">
|
|
<span
|
|
class="avatar-initial rounded-circle bg-label-primary">MT</span>
|
|
</div>
|
|
<h6 class="mb-0">Utworzono zadanie</h6>
|
|
</div>
|
|
<div
|
|
class="bg-label-warning rounded p-1 px-2 d-inline-block ms-1">
|
|
<i class="bi bi-check2-circle me-1"></i> <span
|
|
class="fw-semibold small">Przygotować wstępną
|
|
kalkulację</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Load More Action -->
|
|
<div id="load-more-container" class="text-center py-2 border-left-dashed"
|
|
style="margin-left: 14px; border-left: 1px dashed #d9dee3;">
|
|
<button id="btn-load-more"
|
|
class="btn btn-xs btn-outline-primary rounded-pill">
|
|
<span class="spinner-border spinner-border-sm me-1 d-none" role="status"
|
|
aria-hidden="true"></span>
|
|
<i class="bi bi-arrow-down-circle me-1"></i> Wczytaj wcześniejsze
|
|
(2)
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Extra items (initially hidden) -->
|
|
<div id="timeline-extra" class="d-none">
|
|
<ul class="timeline timeline-outline mb-0 pb-0 pt-0">
|
|
|
|
<!-- Item 6: Zmiana danych -->
|
|
<li
|
|
class="timeline-item timeline-item-transparent pb-3 border-left-dashed">
|
|
<span class="timeline-point timeline-point-info"></span>
|
|
<div class="timeline-event">
|
|
<div class="timeline-header mb-1">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class="avatar avatar-xs">
|
|
<span
|
|
class="avatar-initial rounded-circle bg-label-secondary">AD</span>
|
|
</div>
|
|
<h6 class="mb-0">Zmiana danych klienta (Admin)</h6>
|
|
</div>
|
|
<small class="text-muted">Dziś, 10:30</small>
|
|
</div>
|
|
<p class="mb-0 small ms-1">Organizacja: <span
|
|
class="text-decoration-line-through text-muted">Brak</span>
|
|
<i class="bi bi-arrow-right mx-1 small"></i> <span
|
|
class="fw-bold">Firma XYZ</span>
|
|
</p>
|
|
</div>
|
|
</li>
|
|
|
|
<!-- Item 7: Utworzono zapytanie -->
|
|
<li class="timeline-item timeline-item-transparent border-transparent">
|
|
<span class="timeline-point timeline-point-primary"></span>
|
|
<div class="timeline-event">
|
|
<div class="timeline-header mb-1">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class="avatar avatar-xs">
|
|
<span
|
|
class="avatar-initial rounded-circle bg-label-primary">MT</span>
|
|
</div>
|
|
<h6 class="mb-0 fw-bold">Utworzono zapytanie</h6>
|
|
</div>
|
|
<small class="text-muted">Dziś, 09:14</small>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tap Pane: Komentarze -->
|
|
<div class="tab-pane fade" id="tab-comments" role="tabpanel">
|
|
<div class="text-center py-5 text-muted">
|
|
<i class="bi bi-chat-left-text fs-1 d-block mb-3"></i>
|
|
<h5 class="mb-1">Brak komentarzy</h5>
|
|
<p class="mb-0 small">Komentarze pojawią się w tym miejscu.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tap Pane: Zadania -->
|
|
<div class="tab-pane fade" id="tab-tasks" role="tabpanel">
|
|
<div class="text-center py-5 text-muted">
|
|
<i class="bi bi-check2-circle fs-1 d-block mb-3"></i>
|
|
<h5 class="mb-1">Brak zadań</h5>
|
|
<p class="mb-0 small">Zadania przypisane do tego zapytania pojawią się tutaj.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tap Pane: Inne zapytania -->
|
|
<div class="tab-pane fade" id="tab-other" role="tabpanel">
|
|
<div class="text-center py-5 text-muted">
|
|
<i class="bi bi-briefcase fs-1 d-block mb-3"></i>
|
|
<h5 class="mb-1">Brak powiązanych zapytań</h5>
|
|
<p class="mb-0 small">Inne zapytania tej Organizacji pojawią się tutaj.</p>
|
|
</div>
|
|
|
|
<hr>
|
|
lub
|
|
<hr>
|
|
|
|
<div class="p-3">
|
|
<div class="alert alert-primary d-flex align-items-center p-3 mb-4" role="alert">
|
|
<i class="bi bi-info-circle-fill me-2 fs-5"></i>
|
|
<div class="small">
|
|
Poniżej znajdują się inne zapytania powiązane z tym klientem (Jan Jan) lub
|
|
organizacją.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-responsive text-nowrap border rounded mb-3">
|
|
<table class="table table-sm table-hover mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th style="width: 40px;" class="text-center">
|
|
<input class="form-check-input" type="checkbox" id="chkAll">
|
|
</th>
|
|
<th>Zapytanie / Data</th>
|
|
<th>Opiekun</th>
|
|
<th class="text-center">Status</th>
|
|
<th style="width: 50px;"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="table-border-bottom-0">
|
|
|
|
<tr>
|
|
<td class="text-center align-middle">
|
|
<input class="form-check-input inquiry-chk" type="checkbox">
|
|
</td>
|
|
<td class="align-middle">
|
|
<div class="d-flex flex-column" style="max-width: 280px;">
|
|
<a href="#" class="fw-semibold text-truncate text-body"
|
|
title="#135 - Wycieczka Bieszczady">#135 - Wycieczka
|
|
Bieszczady</a>
|
|
<small class="text-muted"
|
|
style="font-size: 0.75rem;">12.02.2026</small>
|
|
</div>
|
|
</td>
|
|
<td class="align-middle">
|
|
<div class="d-flex align-items-center" data-bs-toggle="tooltip"
|
|
title="Mateusz Travel">
|
|
<div class="avatar avatar-xs me-2">
|
|
<span
|
|
class="avatar-initial rounded-circle bg-label-primary"
|
|
style="font-size: 0.65rem;">MT</span>
|
|
</div>
|
|
<small class="text-muted">M. Travel</small>
|
|
</div>
|
|
</td>
|
|
<td class="text-center align-middle">
|
|
<span class="badge bg-label-info"
|
|
style="font-size: 0.7rem; padding: 4px 8px;">Nowa</span>
|
|
</td>
|
|
<td class="align-middle text-center">
|
|
<a href="#"
|
|
class="btn btn-sm btn-icon btn-label-secondary rounded-circle"
|
|
data-bs-toggle="tooltip" title="Przejdź do zapytania">
|
|
<i class="bi bi-arrow-right-short fs-4"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="text-center align-middle">
|
|
<input class="form-check-input inquiry-chk" type="checkbox">
|
|
</td>
|
|
<td class="align-middle">
|
|
<div class="d-flex flex-column" style="max-width: 280px;">
|
|
<a href="#" class="fw-semibold text-truncate text-body">#120
|
|
- Zapytanie ogólne</a>
|
|
<small class="text-muted"
|
|
style="font-size: 0.75rem;">28.01.2026</small>
|
|
</div>
|
|
</td>
|
|
<td class="align-middle">
|
|
<div class="d-flex align-items-center" data-bs-toggle="tooltip"
|
|
title="Adam Admin">
|
|
<div class="avatar avatar-xs me-2">
|
|
<span
|
|
class="avatar-initial rounded-circle bg-label-secondary"
|
|
style="font-size: 0.65rem;">AD</span>
|
|
</div>
|
|
<small class="text-muted">A. Admin</small>
|
|
</div>
|
|
</td>
|
|
<td class="text-center align-middle">
|
|
<span class="badge bg-label-secondary"
|
|
style="font-size: 0.7rem; padding: 4px 8px;">Nie
|
|
zainter.</span>
|
|
</td>
|
|
<td class="align-middle text-center">
|
|
<a href="#"
|
|
class="btn btn-sm btn-icon btn-label-secondary rounded-circle"
|
|
data-bs-toggle="tooltip" title="Przejdź do zapytania">
|
|
<i class="bi bi-arrow-right-short fs-4"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="text-center align-middle">
|
|
<input class="form-check-input inquiry-chk" type="checkbox">
|
|
</td>
|
|
<td class="align-middle">
|
|
<div class="d-flex flex-column" style="max-width: 280px;">
|
|
<a href="#" class="fw-semibold text-truncate text-body">#115
|
|
- Kolonie Lato 2026</a>
|
|
<small class="text-muted"
|
|
style="font-size: 0.75rem;">15.01.2026</small>
|
|
</div>
|
|
</td>
|
|
<td class="align-middle">
|
|
<div class="d-flex align-items-center" data-bs-toggle="tooltip"
|
|
title="Kasia Kowalska">
|
|
<div class="avatar avatar-xs me-2">
|
|
<img src="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/assets/img/avatars/5.png"
|
|
alt="Avatar" class="rounded-circle">
|
|
</div>
|
|
<small class="text-muted">K. Kowalska</small>
|
|
</div>
|
|
</td>
|
|
<td class="text-center align-middle">
|
|
<span class="badge bg-label-success"
|
|
style="font-size: 0.7rem; padding: 4px 8px;">Wysłana</span>
|
|
</td>
|
|
<td class="align-middle text-center">
|
|
<a href="#"
|
|
class="btn btn-sm btn-icon btn-label-secondary rounded-circle"
|
|
data-bs-toggle="tooltip" title="Przejdź do zapytania">
|
|
<i class="bi bi-arrow-right-short fs-4"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<small class="text-muted">Wybrano: <strong id="merge-count">0</strong></small>
|
|
<button class="btn btn-sm btn-primary disabled" id="btn-merge-selection">
|
|
<i class="bi bi-intersect me-1"></i> Scal zaznaczone
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-lg-4 text-lg-start bg-light bg-opacity-10 d-flex flex-column h-100">
|
|
|
|
<div class="dropdown mb-4 d-grid">
|
|
<button class="btn btn-label-success dropdown-toggle fw-bold py-2" type="button"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
Wysłana
|
|
</button>
|
|
<ul class="dropdown-menu w-100">
|
|
<li><a class="dropdown-item" href="#"><span
|
|
class="badge bg-label-primary w-100">Nowa</span></a></li>
|
|
<li><a class="dropdown-item" href="#"><span class="badge bg-label-warning w-100">W
|
|
przygotowaniu</span></a></li>
|
|
<li><a class="dropdown-item active" href="#"><span
|
|
class="badge bg-label-success w-100">Wysłana</span></a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card shadow-none border mb-3">
|
|
<div class="card-header p-3 bg-transparent d-flex justify-content-between align-items-center"
|
|
style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#detailsCollapse"
|
|
aria-expanded="true">
|
|
<h6 class="mb-0 fw-bold"><i class="bi bi-person-lines-fill me-2"></i>Szczegóły</h6>
|
|
<i class="bi bi-chevron-down"></i>
|
|
</div>
|
|
|
|
<div class="collapse show" id="detailsCollapse">
|
|
<div class="card-body px-3 pb-3 pt-0">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<small class="text-muted">Opiekun:</small>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class="avatar avatar-xs">
|
|
<span class="avatar-initial rounded-circle bg-label-primary">MT</span>
|
|
</div>
|
|
<small class="fw-semibold">Mateusz Travel</small>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<small class="text-muted">Klient:</small>
|
|
<div class="text-end">
|
|
<div class="fw-semibold small">Jan Jan</div>
|
|
<small class="d-block text-muted">tel: 123 123 123</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card shadow-none border mb-4">
|
|
<div class="card-header p-3 bg-transparent d-flex justify-content-between align-items-center"
|
|
style="cursor: pointer;" data-bs-toggle="collapse"
|
|
data-bs-target="#attachmentsCollapse2" aria-expanded="true">
|
|
<h6 class="mb-0 fw-bold"><i class="bi bi-paperclip me-2"></i>Załączniki (3)</h6>
|
|
<i class="bi bi-chevron-down text-muted"></i>
|
|
</div>
|
|
|
|
<div class="collapse show" id="attachmentsCollapse2">
|
|
<div class="card-body px-3 pb-3 pt-0">
|
|
|
|
<div
|
|
class="border border-dashed rounded p-4 text-center mb-3 bg-light cursor-pointer hover-bg-gray-200 transition-base">
|
|
<i class="bi bi-cloud-arrow-up fs-3 text-primary mb-2 d-block"></i>
|
|
<small class="text-muted fw-semibold">Kliknij lub upuść pliki tutaj</small>
|
|
<div class="small text-muted opacity-75" style="font-size: 0.7rem;">(Max. 10MB)
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list-group list-group-flush">
|
|
|
|
<div
|
|
class="list-group-item px-0 d-flex align-items-center justify-content-between border-bottom py-3">
|
|
<div class="d-flex align-items-center gap-2 overflow-hidden me-3"
|
|
style="min-width: 0;">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi bi-file-earmark-image text-danger fs-4"></i>
|
|
</div>
|
|
<div class="text-truncate">
|
|
<span class="d-block fw-semibold text-truncate small"
|
|
title="Widok_z_Giewontu_2026.jpg">Widok_z_Giewontu_2026.jpg</span>
|
|
<small class="text-muted d-block" style="font-size: 0.75rem;">2.4 MB
|
|
• 10 min temu</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center gap-1 flex-shrink-0">
|
|
<button type="button"
|
|
class="btn btn-sm btn-icon btn-label-secondary rounded-circle"
|
|
data-bs-toggle="tooltip" title="Podgląd">
|
|
<i class="bi bi-eye"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-sm btn-icon btn-label-secondary rounded-circle"
|
|
data-bs-toggle="tooltip" title="Pobierz">
|
|
<i class="bi bi-download"></i>
|
|
</button>
|
|
|
|
<div class="dropdown">
|
|
<button type="button"
|
|
class="btn btn-sm btn-icon btn-label-secondary rounded-circle hide-arrow"
|
|
data-bs-toggle="dropdown">
|
|
<i class="bi bi-three-dots-vertical"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li><a class="dropdown-item" href="#"><i
|
|
class="bi bi-pencil me-2"></i>Zmień nazwę</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item text-danger" href="#"><i
|
|
class="bi bi-trash me-2"></i>Usuń</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="list-group-item px-0 d-flex align-items-center justify-content-between border-bottom py-3">
|
|
<div class="d-flex align-items-center gap-2 overflow-hidden me-3"
|
|
style="min-width: 0;">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi bi-file-earmark-pdf text-primary fs-4"></i>
|
|
</div>
|
|
<div class="text-truncate">
|
|
<span class="d-block fw-semibold text-truncate small"
|
|
title="Oferta_Wstepna_v2.pdf">Oferta_Wstepna_v2.pdf</span>
|
|
<small class="text-muted d-block" style="font-size: 0.75rem;">850 KB
|
|
• Wczoraj</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex align-items-center gap-1 flex-shrink-0">
|
|
<button type="button"
|
|
class="btn btn-sm btn-icon btn-label-secondary rounded-circle"
|
|
data-bs-toggle="tooltip" title="Podgląd">
|
|
<i class="bi bi-eye"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-sm btn-icon btn-label-secondary rounded-circle"
|
|
data-bs-toggle="tooltip" title="Pobierz">
|
|
<i class="bi bi-download"></i>
|
|
</button>
|
|
<div class="dropdown">
|
|
<button type="button"
|
|
class="btn btn-sm btn-icon btn-label-secondary rounded-circle hide-arrow"
|
|
data-bs-toggle="dropdown">
|
|
<i class="bi bi-three-dots-vertical"></i>
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li><a class="dropdown-item" href="#"><i
|
|
class="bi bi-pencil me-2"></i>Zmień nazwę</a></li>
|
|
<li>
|
|
<hr class="dropdown-divider">
|
|
</li>
|
|
<li><a class="dropdown-item text-danger" href="#"><i
|
|
class="bi bi-trash me-2"></i>Usuń</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list-group-item px-0 border-0 py-3">
|
|
<div class="p-2 bg-label-secondary rounded">
|
|
<label class="form-label d-block mb-1 small text-muted fw-bold ms-1">
|
|
Zmień nazwę pliku
|
|
</label>
|
|
<div class="d-flex align-items-center gap-2 w-100">
|
|
<i class="bi bi-file-earmark-spreadsheet text-success fs-4"></i>
|
|
<div
|
|
class="input-group input-group-sm input-group-merge bg-white rounded">
|
|
<input type="text" class="form-control shadow-none"
|
|
value="Kalkulacja_Kosztow" autofocus>
|
|
<span
|
|
class="input-group-text text-muted small bg-white">.xlsx</span>
|
|
<button class="btn btn-success p-1 px-2"
|
|
data-bs-toggle="tooltip" title="Zapisz">
|
|
<i class="bi bi-check"></i>
|
|
</button>
|
|
<button
|
|
class="btn btn-outline-secondary p-1 px-2 border-start-0"
|
|
data-bs-toggle="tooltip" title="Anuluj">
|
|
<i class="bi bi-x"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex flex-column gap-2 mt-auto">
|
|
<div class="row g-2">
|
|
<div class="col-6">
|
|
<button
|
|
class="btn btn-label-primary w-100 d-flex align-items-center justify-content-center gap-2">
|
|
<i class="bi bi-envelope-at-fill"></i> E-mail
|
|
</button>
|
|
</div>
|
|
<div class="col-6">
|
|
<button
|
|
class="btn btn-label-info w-100 d-flex align-items-center justify-content-center gap-2">
|
|
<i class="bi bi-chat-dots-fill"></i> SMS
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn-secondary w-100 py-2 shadow-sm">
|
|
<i class="bi bi-printer-fill me-2"></i> Utwórz wycieczkę
|
|
</button>
|
|
|
|
<div class="text-center mt-3 pt-3 border-top">
|
|
<button type="button" class="btn btn-outline-primary w-100 mb-3"
|
|
id="btn-open-link-modal">
|
|
<i class="bi bi-link-45deg me-2"></i> Powiąż zapytania
|
|
</button>
|
|
|
|
<small class="d-block text-muted mb-1" style="font-size: 0.7rem;">
|
|
Utworzono: 19.01.2026 09:14 <span class="fw-semibold">(Mateusz Travel)</span>
|
|
</small>
|
|
<small class="d-block text-muted mb-2" style="font-size: 0.7rem;">
|
|
Zaktualizowano: 04.02.2026 14:24 <span class="fw-semibold">(Magico Dev)</span>
|
|
</small>
|
|
<a href="#" class="text-danger small text-decoration-none fw-bold"
|
|
style="font-size: 0.75rem;">
|
|
<i class="bi bi-trash me-1"></i> Usuń zapytanie
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="modal fade" id="linkInquiriesModal" tabindex="-1" aria-hidden="true" style="z-index: 1090;">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content shadow-lg">
|
|
<div class="modal-header border-bottom">
|
|
<h5 class="modal-title"><i class="bi bi-link-45deg me-2"></i>Powiąż zapytania</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<div class="modal-body p-4">
|
|
<div class="alert alert-warning d-flex align-items-start gap-3" role="alert">
|
|
<i class="bi bi-exclamation-triangle-fill fs-4 mt-1"></i>
|
|
<div>
|
|
<div class="fw-bold">Scalanie zapytań</div>
|
|
<div class="small">Bieżące zapytanie (#140) stanie się głównym.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label fw-bold">Znajdź zapytanie</label>
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-text bg-light border-end-0"><i class="bi bi-search"></i></span>
|
|
<input type="text" class="form-control border-start-0 ps-0 bg-light" id="searchInquiryInput"
|
|
placeholder="Szukaj po ID, nazwie...">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h6 class="text-muted small text-uppercase fw-bold mb-3">Sugerowane / Ostatnie</h6>
|
|
|
|
<div id="search-spinner" class="text-center py-4 d-none">
|
|
<div class="spinner-border text-primary spinner-border-sm" role="status"></div>
|
|
</div>
|
|
|
|
<div id="search-results-list" class="list-group">
|
|
<label
|
|
class="list-group-item d-flex gap-3 align-items-center cursor-pointer list-group-item-action border-0 mb-1 rounded bg-lighter">
|
|
<input class="form-check-input flex-shrink-0" type="checkbox"
|
|
style="width: 1.2em; height: 1.2em;">
|
|
<div class="d-flex flex-column w-100">
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<span class="fw-semibold text-dark">#135 - Wycieczka Bieszczady</span>
|
|
<span class="badge bg-label-info">Nowa</span>
|
|
</div>
|
|
<small class="text-muted">Jan Jan</small>
|
|
</div>
|
|
</label>
|
|
<label
|
|
class="list-group-item d-flex gap-3 align-items-center cursor-pointer list-group-item-action border-0 mb-1 rounded bg-lighter">
|
|
<input class="form-check-input flex-shrink-0" type="checkbox"
|
|
style="width: 1.2em; height: 1.2em;">
|
|
<div class="d-flex flex-column w-100">
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<span class="fw-semibold text-dark">#120 - Zapytanie ogólne</span>
|
|
<span class="badge bg-label-secondary">Nie zainteresowany</span>
|
|
</div>
|
|
<small class="text-muted">Firma XYZ</small>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer border-top-0 pt-0">
|
|
<button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Anuluj</button>
|
|
<button type="button" class="btn btn-primary" id="btn-confirm-link" disabled>Wybierz zapytania</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php include '../../footer-sneat.php'; ?>
|
|
|
|
<script>
|
|
// ==========================================
|
|
// 1. INICJALIZACJA TOOLTIPÓW (Globalna)
|
|
// ==========================================
|
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
return new bootstrap.Tooltip(tooltipTriggerEl);
|
|
});
|
|
|
|
// ==========================================
|
|
// 2. TIMELINE: PRZYCISK "WCZYTAJ WIĘCEJ"
|
|
// ==========================================
|
|
const loadMoreBtn = document.getElementById('btn-load-more');
|
|
if (loadMoreBtn) {
|
|
loadMoreBtn.addEventListener('click', function () {
|
|
var btn = this;
|
|
var spinner = btn.querySelector('.spinner-border');
|
|
var icon = btn.querySelector('.bi-arrow-down-circle');
|
|
|
|
// Stan ładowania
|
|
btn.classList.add('disabled');
|
|
spinner.classList.remove('d-none');
|
|
icon.classList.add('d-none');
|
|
btn.childNodes[2].textContent = " Wczytywanie...";
|
|
|
|
// Symulacja opóźnienia 2 sekundy
|
|
setTimeout(function () {
|
|
var extraItems = document.getElementById('timeline-extra');
|
|
extraItems.classList.remove('d-none');
|
|
|
|
// Animacja wejścia
|
|
extraItems.style.opacity = 0;
|
|
extraItems.style.transition = 'opacity 0.5s ease-in';
|
|
requestAnimationFrame(() => extraItems.style.opacity = 1);
|
|
|
|
document.getElementById('load-more-container').classList.add('d-none');
|
|
}, 2000);
|
|
});
|
|
}
|
|
|
|
// ==========================================
|
|
// 3. MODALE: OTWIERANIE "NAD" MODALEM
|
|
// ==========================================
|
|
const openLinkBtn = document.getElementById('btn-open-link-modal');
|
|
if (openLinkBtn) {
|
|
openLinkBtn.addEventListener('click', function () {
|
|
// Ręczne tworzenie i otwieranie drugiego modala
|
|
var linkModalEl = document.getElementById('linkInquiriesModal');
|
|
var linkModal = new bootstrap.Modal(linkModalEl);
|
|
linkModal.show();
|
|
});
|
|
}
|
|
|
|
// ==========================================
|
|
// 4. MODAL POWIĄZANIA: LOGIKA SZUKANIA
|
|
// ==========================================
|
|
const searchInput = document.getElementById('searchInquiryInput');
|
|
const spinner = document.getElementById('search-spinner');
|
|
const resultsList = document.getElementById('search-results-list');
|
|
const linkBtn = document.getElementById('btn-confirm-link');
|
|
const checkboxes = document.querySelectorAll('#search-results-list input[type="checkbox"]:not(:disabled)');
|
|
|
|
// Symulacja szukania (Enter)
|
|
if (searchInput) {
|
|
searchInput.addEventListener('keyup', (e) => {
|
|
if (e.key === 'Enter') {
|
|
resultsList.classList.add('d-none');
|
|
spinner.classList.remove('d-none');
|
|
|
|
setTimeout(() => {
|
|
spinner.classList.add('d-none');
|
|
resultsList.classList.remove('d-none');
|
|
}, 1000);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Licznik zaznaczonych
|
|
checkboxes.forEach(chk => {
|
|
chk.addEventListener('change', () => {
|
|
const checkedCount = Array.from(checkboxes).filter(c => c.checked).length;
|
|
|
|
if (checkedCount > 0) {
|
|
linkBtn.removeAttribute('disabled');
|
|
linkBtn.textContent = `Powiąż (${checkedCount})`;
|
|
} else {
|
|
linkBtn.setAttribute('disabled', 'true');
|
|
linkBtn.textContent = 'Wybierz zapytania';
|
|
}
|
|
});
|
|
});
|
|
|
|
// ==========================================
|
|
// 5. FIX: NAPRAWA Z-INDEX DLA TŁA (BACKDROP)
|
|
// ==========================================
|
|
const linkModalElement = document.getElementById('linkInquiriesModal');
|
|
|
|
if (linkModalElement) {
|
|
linkModalElement.addEventListener('show.bs.modal', () => {
|
|
// Czekamy chwilę aż Bootstrap doda backdrop do DOM
|
|
setTimeout(() => {
|
|
// Pobieramy wszystkie aktywne tła (backdrops)
|
|
const backdrops = document.querySelectorAll('.modal-backdrop');
|
|
|
|
// Jeśli mamy więcej niż jedno tło (czyli modal nad modalem)
|
|
if (backdrops.length > 1) {
|
|
// Ostatnie tło na liście to to od naszego drugiego modala
|
|
const secondBackdrop = backdrops[backdrops.length - 1];
|
|
|
|
// Ustawiamy mu z-index na 1080
|
|
// (Pierwszy modal ma ~1055, nasz drugi modal ma ustawione 1090 w HTML)
|
|
secondBackdrop.style.zIndex = '1080';
|
|
}
|
|
}, 0);
|
|
});
|
|
}
|
|
|
|
// ==========================================
|
|
// 6. TABS: AKTUALIZACJA STYLI PRZYCISKÓW
|
|
// ==========================================
|
|
const tabButtons = document.querySelectorAll('#inquiryTabs button[data-bs-toggle="tab"]');
|
|
|
|
tabButtons.forEach(btn => {
|
|
btn.addEventListener('shown.bs.tab', function (event) {
|
|
// Reset styli dla wszystkich przycisków w tej grupie
|
|
tabButtons.forEach(b => {
|
|
b.classList.remove('btn-primary');
|
|
b.classList.add('btn-outline-secondary');
|
|
});
|
|
|
|
// Aktywacja klikniętego przycisku
|
|
event.target.classList.remove('btn-outline-secondary');
|
|
event.target.classList.add('btn-primary');
|
|
});
|
|
});
|
|
|
|
(function () {
|
|
const checkboxes = document.querySelectorAll('.inquiry-checkbox');
|
|
const btnMerge = document.getElementById('btnMergeInquiries');
|
|
const countSpan = document.getElementById('selectedCount');
|
|
const selectAll = document.getElementById('selectAllInquiries');
|
|
|
|
function updateState() {
|
|
const count = Array.from(checkboxes).filter(c => c.checked).length;
|
|
countSpan.textContent = count;
|
|
if (count > 0) {
|
|
btnMerge.removeAttribute('disabled');
|
|
} else {
|
|
btnMerge.setAttribute('disabled', 'true');
|
|
}
|
|
}
|
|
|
|
checkboxes.forEach(cb => cb.addEventListener('change', updateState));
|
|
|
|
if (selectAll) {
|
|
selectAll.addEventListener('change', function () {
|
|
checkboxes.forEach(cb => cb.checked = this.checked);
|
|
updateState();
|
|
});
|
|
}
|
|
})();
|
|
</script>
|