| Server IP : 103.233.193.20 / Your IP : 216.73.216.169 Web Server : Apache/2 System : Linux host1.itclever.com 4.18.0-553.16.1.el8_10.x86_64 #1 SMP Thu Aug 8 17:47:08 UTC 2024 x86_64 User : oriscomadm ( 1120) PHP Version : 5.6.40 Disable Function : exec,system,passthru,shell_exec,escapeshellarg,escapeshellcmd,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/oriscomadm/domains/oriscom.com/private_html/taxi_estimate/ |
Upload File : |
<?php
include("db_connect.php");
?>
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title id="pageTitle">ผู้โดยสาร - เลือกเส้นทาง</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="https://api.longdo.com/map/?key=4fc6a833488e90b3df56acc1388c198b"></script>
<style>
/* ========== BASE STYLES ========== */
body {
font-family: 'Sarabun', sans-serif;
background: #a3c1ad;
font-size: 16px;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
/*padding-top: 16px;*/
/*padding-bottom: 16px;*/
padding-left: 0;
padding-right: 0;
}
/* ========== LANGUAGE SWITCHER ========== */
/*.language-switcher {
position: absolute;
top: 16px;
right: 16px;
font-size: 13px;
color: #6c757d;
font-weight: 400;
z-index: 10;
}*/
.language-switcher {
display: flex;
justify-content: flex-end;
/* ⭐ ตัวสำคัญ */
align-items: center;
width: 100%;
/* ⭐ สำคัญมาก */
font-size: 13px;
color: #6c757d;
font-weight: 400;
}
.language-switcher .lang-option {
color: #6c757d;
text-decoration: none;
cursor: pointer;
transition: color 0.2s;
padding: 6px 8px;
border-radius: 50%;
}
.language-switcher .lang-option:hover {
color: #198754;
}
.language-switcher .lang-option.active {
color: #198754;
font-weight: 600;
background: #d1e7dd;
}
.language-switcher .separator {
margin: 0 6px;
color: #dee2e6;
}
/* ========== CARD STYLES ========== */
.card {
border: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
background: #ffffff;
border-radius: 10px;
position: relative;
}
.card-header-title {
font-size: 20px;
font-weight: bold;
color: #191970;
}
.card-subtitle {
font-size: 14px;
color: #6c757d;
}
/* ========== FORM INPUT STYLES ========== */
.form-label {
font-size: 15px;
margin-bottom: 6px;
font-weight: 600;
color: #2b2b2b;
}
.input-with-icons {
position: relative;
display: flex;
align-items: center;
gap: 0;
}
.input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.input-icon i {
font-size: 20px;
}
.input-with-icons .form-control-lg {
height: 50px;
font-size: 16px;
padding: 10px 50px 10px 46px;
border: 1.5px solid #B0C4DE;
background: #F8F8FF;
box-shadow: none;
outline: none;
border-radius: 8px;
flex: 1;
transition: all 0.3s;
}
.input-with-icons .form-control-lg:focus {
border-color: #1E90FF;
background: #ffffff;
}
#origin {
border-left: 4px solid #198754;
}
#destination {
border-left: 4px solid #dc3545;
}
/* ========== CLEAR BUTTON ========== */
.clear-btn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: #dc3545;
color: white;
border: none;
border-radius: 50%;
width: 26px;
height: 26px;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0;
z-index: 10;
transition: all 0.2s;
}
.clear-btn:hover {
background: #bb2d3b;
transform: translateY(-50%) scale(1.1);
}
.clear-btn.show {
display: flex;
}
/* ========== SUGGESTIONS DROPDOWN ========== */
.suggestions {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #ffffff;
border: 1px solid #dee2e6;
margin-top: 4px;
overflow: hidden;
z-index: 99;
display: none;
border-radius: 8px;
max-height: 300px;
overflow-y: auto;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.suggestion-item {
padding: 12px 14px;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
transition: background 0.2s;
}
.suggestion-item:hover {
background: #f1f3f5;
}
.suggestion-item i {
flex-shrink: 0;
margin-right: 8px;
}
.current-location-item {
background: #F0FFF0 !important;
border-bottom: 2px solid #198754;
font-weight: 600;
color: #198754;
}
.current-location-item:hover {
background: #d1e7dd !important;
}
.suggestion-separator {
padding: 8px 14px;
background: #f8f9fa;
font-size: 12px;
font-weight: 600;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.5px;
border-top: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6;
}
/* ========== BUTTONS ========== */
.btn-success {
font-size: 16px;
font-weight: bold;
padding: 12px 0;
border-radius: 10px;
border: none;
background: #008000;
box-shadow: none;
transition: background 0.3s;
}
.btn-success:hover {
background: #006400;
}
.btn-confirm {
width: 100%;
padding: 12px 0;
font-size: 18px;
font-weight: 600;
background: #198754;
border: none;
border-radius: 10px;
color: white;
display: none;
transition: background 0.3s;
}
.btn-confirm:hover {
background: #157347;
color: chartreuse;
}
.btn-confirm:disabled {
background: #6c757d;
cursor: not-allowed;
}
.btn-toggle-qr {
width: 100%;
margin-top: 12px;
font-size: 14px;
padding: 10px;
border-radius: 8px;
}
/* ========== MAP STYLES ========== */
#mapContainer {
display: flex;
align-items: center;
justify-content: center;
}
#map {
width: 100%;
height: 250px;
border-radius: 12px;
border: 2px solid #dee2e6;
cursor: crosshair;
display: flex;
align-items: center;
justify-content: center;
}
/* ========== ROUTE CARDS ========== */
.routes-section {
display: none;
margin-top: 20px;
}
.route-card {
background: #f8f9fa;
border: 2px solid #dee2e6;
border-radius: 12px;
padding: 16px;
margin-bottom: 12px;
cursor: pointer;
transition: all 0.3s;
}
.route-card:hover {
border-color: #0d1b3a;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.route-card.selected {
border-color: #198754;
background: #d1e7dd;
}
.route-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.route-title {
font-size: 16px;
font-weight: 600;
color: #0d1b3a;
}
.route-badge {
background: #0d1b3a;
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
}
.route-card.selected .route-badge {
background: #198754;
}
.route-info {
display: flex;
gap: 16px;
font-size: 14px;
flex-wrap: wrap;
}
.route-info-item {
display: flex;
align-items: center;
gap: 6px;
}
.route-info-item i {
color: #6c757d;
}
.cost-highlight {
color: #dc3545;
font-weight: 600;
font-size: 16px;
}
/* ========== DEBUG SECTION ========== */
.debug-section {
display: none;
margin-top: 12px;
}
.debug-section.show {
display: block;
}
.alert {
margin-bottom: 8px;
padding: 10px 12px;
font-size: 13px;
}
.alert strong {
font-weight: 600;
}
/* ========== QR CODE SECTION ========== */
#qrcode-box {
padding: 16px;
border-radius: 10px;
border: 1px solid #dee2e6;
background: #f8f9fa;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 220px;
text-align: center;
margin-top: 20px;
}
#qrcode {
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 180px;
}
/* ========== LOADING & SUCCESS MESSAGES ========== */
.loading-spinner {
display: none;
text-align: center;
padding: 20px;
color: #0d1b3a;
}
.loading-spinner.active {
display: block;
}
.success-message {
display: none;
background: #d1e7dd;
color: #0f5132;
padding: 16px;
border-radius: 10px;
margin-top: 20px;
text-align: center;
}
.success-message.active {
display: block;
}
.success-message i {
font-size: 48px;
margin-bottom: 10px;
}
/* ========== RESPONSIVE ========== */
@media (max-width: 576px) {
.language-switcher {
top: 12px;
right: 12px;
font-size: 12px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="card p-2">
<!-- ========== LANGUAGE SWITCHER ========== -->
<div class="language-switcher">
<span class="lang-option active" id="langTH" onclick="setLanguage('th')">TH</span>
<span class="separator">|</span>
<span class="lang-option" id="langEN" onclick="setLanguage('en')">EN</span>
</div>
<!-- Header -->
<div class="text-center mb-3">
<div class="card-header-title" data-i18n="title">ระบบประมาณการค่าโดยสาร</div>
</div>
<!-- Origin Input -->
<div class="position-relative mb-3">
<div class="input-with-icons">
<div class="input-icon">
<i class="bi bi-record-circle text-success"></i>
</div>
<input
type="text"
id="origin"
class="form-control form-control-lg"
data-i18n-placeholder="origin_placeholder"
placeholder="ตำแหน่งปัจจุบัน/ค้นหาจุดเริ่มต้น..."
autocomplete="off"
onclick="setMapMode('origin')">
<button class="clear-btn" id="clearOrigin" onclick="clearInput('origin')" type="button">
<i class="bi bi-x"></i>
</button>
</div>
<div id="originSuggestions" class="suggestions"></div>
</div>
<!-- Destination Input -->
<div class="position-relative mb-3">
<div class="input-with-icons">
<div class="input-icon">
<i class="bi bi-geo-alt-fill text-danger"></i>
</div>
<input
type="text"
id="destination"
class="form-control form-control-lg"
data-i18n-placeholder="destination_placeholder"
placeholder="ค้นหาจุดหมาย..."
autocomplete="off"
onclick="setMapMode('destination')">
<button class="clear-btn" id="clearDestination" onclick="clearInput('destination')" type="button">
<i class="bi bi-x"></i>
</button>
</div>
<div id="destinationSuggestions" class="suggestions"></div>
</div>
<!-- Search Button -->
<button class="btn btn-success w-100" onclick="searchRoute()">
<i class="bi bi-search"></i> <span data-i18n="search_btn">ค้นหาเส้นทาง/ประมาณราคา</span>
</button>
<!-- Loading Spinner -->
<div class="loading-spinner" id="loadingSpinner">
<div class="spinner-border text-success" role="status"></div>
<p class="mt-2" data-i18n="searching">กำลังค้นหาเส้นทาง...</p>
</div>
<!-- Routes Section -->
<div class="routes-section mb-2" id="routesSection">
<div class="d-flex justify-content-between align-items-center mb-4">
<h6 class="m-0">
<i class="bi bi-signpost-2"></i>
<span data-i18n="select_route">เลือกเส้นทาง</span>
</h6>
<!-- <button class="btn btn-outline-secondary btn-sm" onclick="toggleDebug()">
เปิด/ปิด Debug
</button> -->
</div>
<!-- Route 1: Main Route -->
<div class="route-card mt-2" id="route1" onclick="selectRoute('main')">
<div class="route-card-header">
<div class="route-title" data-i18n="route1_title">เส้นทางหลัก วิ่งทางด่วน</div>
<div class="route-badge" data-i18n="recommended">แนะนำ</div>
</div>
<div class="route-info">
<div class="route-info-item"><i class="bi bi-geo-alt-fill"></i> <span id="dist1">-</span></div>
<div class="route-info-item"><i class="bi bi-clock-fill"></i> <span id="time1">-</span></div>
<div class="route-info-item"><i class="bi bi-cash"></i> <span class="cost-highlight" id="cost1">-</span></div>
</div>
</div>
<!-- Debug Section for Route 1 -->
<div class="debug-section" id="debug1">
<div class="alert alert-info" role="alert">
<strong data-i18n="debug_no_traffic">🚗 ไม่มีรถติด</strong><br>
<span data-i18n="debug_distance">ระยะทาง</span>: <span id="debug1_dist_traffic">-</span> |
<span data-i18n="debug_time">เวลา</span>: <span id="debug1_time_traffic">-</span>
| <span data-i18n="debug_fare">ค่าโดยสาร</span>: <span id="debug1_fare_traffic">-</span>
</div>
<div class="alert alert-warning" role="alert">
<strong data-i18n="debug_with_traffic">🚦 มีรถติด</strong><br>
<span data-i18n="debug_time">เวลา</span>: <span id="debug1_time_notraffic">-</span>
</div>
<div class="alert alert-danger" role="alert">
<strong data-i18n="debug_traffic_impact">⏱️ ผลกระทบจากรถติด</strong><br>
<span data-i18n="debug_extra_time">เวลาเพิ่ม</span>: <span id="debug1_extra_time">-</span>
</div>
</div>
<!-- Route 2: Fastest Route -->
<div class="route-card" id="route2" onclick="selectRoute('fastest')">
<div class="route-card-header">
<div class="route-title" data-i18n="route2_title">เส้นทางที่ 2 ไม่วิ่งทางด่วน</div>
<div class="route-badge" data-i18n="economical">ประหยัด</div>
</div>
<div class="route-info">
<div class="route-info-item"><i class="bi bi-geo-alt-fill"></i> <span id="dist2">-</span></div>
<div class="route-info-item"><i class="bi bi-clock-fill"></i> <span id="time2">-</span></div>
<div class="route-info-item"><i class="bi bi-cash"></i> <span class="cost-highlight" id="cost2">-</span></div>
</div>
</div>
<!-- Debug Section for Route 2 -->
<div class="debug-section" id="debug2">
<div class="alert alert-info" role="alert">
<strong data-i18n="debug_no_traffic">🚗 ไม่มีรถติด</strong><br>
<span data-i18n="debug_distance">ระยะทาง</span>: <span id="debug2_dist_traffic">-</span> |
<span data-i18n="debug_time">เวลา</span>: <span id="debug2_time_traffic">-</span>
| <span data-i18n="debug_fare">ค่าโดยสาร</span>: <span id="debug2_fare_traffic">-</span>
</div>
<div class="alert alert-warning" role="alert">
<strong data-i18n="debug_with_traffic">🚦 มีรถติด</strong><br>
<span data-i18n="debug_time">เวลา</span>: <span id="debug2_time_notraffic">-</span>
</div>
<div class="alert alert-danger" role="alert">
<strong data-i18n="debug_traffic_impact">⏱️ ผลกระทบจากรถติด</strong><br>
<span data-i18n="debug_extra_time">เวลาเพิ่ม</span>: <span id="debug2_extra_time">-</span>
</div>
</div>
</div>
<!-- Map -->
<div id="mapContainer">
<div class="map mt-3 mb-2" id="map"></div>
</div>
<!-- Confirm Button -->
<button
class="btn btn-confirm mt-2 mb-2"
id="confirmBtn"
onclick="confirmRoute()"
style="display: none;">
<i class="bi bi-check-circle"></i>
<span data-i18n="confirm_btn">ยืนยันเส้นทางนี้</span>
</button>
<!-- Success Message -->
<div class="success-message" id="successMessage">
<i class="bi bi-check-circle-fill"></i>
<h5 data-i18n="success_msg">บันทึกเส้นทางสำเร็จ!</h5>
</div>
<!-- QR Code Toggle & Box
<div class="text-center mt-0 mb-2">
<button class="btn btn-outline-secondary btn-toggle-qr" onclick="toggleQR()">
<i class="bi bi-qr-code"></i> <span data-i18n="toggle_qr">ซ่อน/แสดง QR Code</span>
</button>
</div> -->
<div class="qrcode-box mb-2" id="qrcode-box">
<div class="text-center card-subtitle mt-2 mb-2" data-i18n="qr_for_passenger">QR Code สำหรับผู้โดยสาร</div>
<div id="qrcode"></div>
<p class="text-secondary small mt-2 mb-2" data-i18n="scan_qr">ให้ผู้โดยสารสแกน QR เพื่อกรอกข้อมูล</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="passengerqp.js"></script>
<script src="translation.js"></script>
<script>
// ==================== DEBUG TOGGLE ====================
const DEBUG_MODE = false; // true = แสดง debug, false = ซ่อน debug
document.addEventListener('DOMContentLoaded', () => {
const debugSections = document.querySelectorAll('.debug-section');
debugSections.forEach(sec => {
sec.style.display = DEBUG_MODE ? 'block' : 'none';
});
});
</script>
</body>
</html>