forked from UKSOURCE/cms.hailearning.edu.vn
1231 lines
55 KiB
Plaintext
1231 lines
55 KiB
Plaintext
<style>
|
||
:root {
|
||
--primary-dark: #08182f;
|
||
--primary-light: #0f2847;
|
||
--secondary: #ba3226;
|
||
--text-dark: #2c3e50;
|
||
--border-light: #e8ecef;
|
||
--bg-light: #f8f9fa;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
background: linear-gradient(135deg, #f5f7fa 0%, #e8ecef 100%);
|
||
font-family: "Inter", "Segoe UI", sans-serif;
|
||
color: var(--text-dark);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.navbar-modern {
|
||
background: var(--primary-dark);
|
||
padding: 1.2rem 0;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.navbar-brand-modern {
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.navbar-brand-modern:hover {
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
.navbar-brand-modern i {
|
||
color: var(--secondary);
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.main-container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 2.5rem 1.5rem;
|
||
}
|
||
|
||
.card-modern {
|
||
background: white;
|
||
border-radius: 16px;
|
||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
|
||
overflow: hidden;
|
||
border: none;
|
||
}
|
||
|
||
.card-header-modern {
|
||
background: linear-gradient(135deg,
|
||
var(--primary-dark) 0%,
|
||
var(--primary-light) 100%);
|
||
padding: 1.75rem 2rem;
|
||
border: none;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.card-title-modern {
|
||
color: white;
|
||
font-size: 1.4rem;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
margin: 0;
|
||
}
|
||
|
||
.card-title-modern i {
|
||
color: var(--secondary);
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.btn-add-modern {
|
||
background: var(--secondary);
|
||
color: white;
|
||
border: none;
|
||
padding: 0.7rem 1.5rem;
|
||
border-radius: 8px;
|
||
font-weight: 600;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 4px 12px rgba(186, 50, 38, 0.3);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-add-modern:hover {
|
||
background: #a32a20;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(186, 50, 38, 0.4);
|
||
color: white;
|
||
}
|
||
|
||
.table-container {
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.table-modern {
|
||
margin: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.table-modern thead {
|
||
background: #f8f9fa;
|
||
border-bottom: 2px solid var(--border-light);
|
||
}
|
||
|
||
.table-modern thead th {
|
||
padding: 1.25rem 1.5rem;
|
||
font-weight: 700;
|
||
font-size: 0.85rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
color: var(--primary-dark);
|
||
border: none;
|
||
}
|
||
|
||
.table-modern tbody tr {
|
||
border-bottom: 1px solid var(--border-light);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.table-modern tbody tr:hover {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.table-modern tbody td {
|
||
padding: 1.25rem 1.5rem;
|
||
vertical-align: middle;
|
||
border: none;
|
||
}
|
||
|
||
.id-badge {
|
||
display: inline-block;
|
||
background: linear-gradient(135deg,
|
||
var(--primary-dark),
|
||
var(--primary-light));
|
||
color: white;
|
||
padding: 0.4rem 0.8rem;
|
||
border-radius: 6px;
|
||
font-weight: 700;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.icon-container {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 10px;
|
||
background: var(--bg-light);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto;
|
||
transition: all 0.3s ease;
|
||
border: 2px solid var(--border-light);
|
||
}
|
||
|
||
.icon-container:hover {
|
||
transform: scale(1.1);
|
||
border-color: var(--secondary);
|
||
}
|
||
|
||
.icon-container img {
|
||
max-width: 35px;
|
||
max-height: 35px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.country-name {
|
||
font-size: 1.1rem;
|
||
font-weight: 700;
|
||
color: var(--primary-dark);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.service-tag {
|
||
display: inline-block;
|
||
background: linear-gradient(135deg,
|
||
rgba(186, 50, 38, 0.1),
|
||
rgba(186, 50, 38, 0.05));
|
||
color: var(--secondary);
|
||
padding: 0.4rem 0.9rem;
|
||
border-radius: 20px;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
margin: 0.2rem;
|
||
border: 1px solid rgba(186, 50, 38, 0.2);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.service-tag:hover {
|
||
background: var(--secondary);
|
||
color: white;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.action-btn-group {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
justify-content: center;
|
||
}
|
||
|
||
.action-btn {
|
||
width: 38px;
|
||
height: 38px;
|
||
border-radius: 8px;
|
||
border: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.btn-view-modern {
|
||
background: linear-gradient(135deg,
|
||
rgba(59, 130, 246, 0.1),
|
||
rgba(59, 130, 246, 0.05));
|
||
color: #3b82f6;
|
||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||
}
|
||
|
||
.btn-view-modern:hover {
|
||
background: #3b82f6;
|
||
color: white;
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
|
||
}
|
||
|
||
.btn-edit-modern {
|
||
background: linear-gradient(135deg,
|
||
rgba(34, 197, 94, 0.1),
|
||
rgba(34, 197, 94, 0.05));
|
||
color: #22c55e;
|
||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||
}
|
||
|
||
.btn-edit-modern:hover {
|
||
background: #22c55e;
|
||
color: white;
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
|
||
}
|
||
|
||
.btn-delete-modern {
|
||
background: linear-gradient(135deg,
|
||
rgba(239, 68, 68, 0.1),
|
||
rgba(239, 68, 68, 0.05));
|
||
color: #ef4444;
|
||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||
}
|
||
|
||
.btn-delete-modern:hover {
|
||
background: #ef4444;
|
||
color: white;
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
|
||
}
|
||
|
||
.nav-tabs-modern {
|
||
background: #f8f9fa;
|
||
border: none;
|
||
padding: 0;
|
||
border-bottom: 2px solid var(--border-light);
|
||
}
|
||
|
||
.nav-tabs-modern .nav-item {
|
||
flex: 1;
|
||
}
|
||
|
||
.nav-tabs-modern .nav-link {
|
||
border: none;
|
||
color: var(--text-dark);
|
||
font-weight: 600;
|
||
padding: 1.25rem 1rem;
|
||
transition: all 0.3s ease;
|
||
border-bottom: 3px solid transparent;
|
||
background: transparent;
|
||
text-align: center;
|
||
}
|
||
|
||
.nav-tabs-modern .nav-link:hover {
|
||
background: rgba(186, 50, 38, 0.05);
|
||
color: var(--secondary);
|
||
}
|
||
|
||
.nav-tabs-modern .nav-link.active {
|
||
background: white;
|
||
color: var(--secondary);
|
||
border-bottom: 3px solid var(--secondary);
|
||
}
|
||
|
||
.nav-tabs-modern .nav-link i {
|
||
margin-right: 0.5rem;
|
||
}
|
||
|
||
.form-label-modern {
|
||
font-weight: 700;
|
||
color: var(--primary-dark);
|
||
margin-bottom: 0.5rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.form-control-modern {
|
||
border: 2px solid var(--border-light);
|
||
border-radius: 8px;
|
||
padding: 0.7rem 1rem;
|
||
transition: all 0.3s ease;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.form-control-modern:focus {
|
||
border-color: var(--secondary);
|
||
box-shadow: 0 0 0 3px rgba(186, 50, 38, 0.1);
|
||
outline: none;
|
||
}
|
||
|
||
.form-footer {
|
||
background: #f8f9fa;
|
||
border-top: 1px solid var(--border-light);
|
||
padding: 1.5rem 2rem;
|
||
display: flex;
|
||
gap: 1rem;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.btn-cancel-modern {
|
||
background: white;
|
||
color: var(--text-dark);
|
||
border: 2px solid var(--border-light);
|
||
padding: 0.7rem 1.5rem;
|
||
border-radius: 8px;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-cancel-modern:hover {
|
||
background: var(--border-light);
|
||
border-color: var(--text-dark);
|
||
}
|
||
|
||
.btn-save-modern {
|
||
background: var(--secondary);
|
||
color: white;
|
||
border: none;
|
||
padding: 0.7rem 1.5rem;
|
||
border-radius: 8px;
|
||
font-weight: 600;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 4px 12px rgba(186, 50, 38, 0.3);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-save-modern:hover {
|
||
background: #a32a20;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 20px rgba(186, 50, 38, 0.4);
|
||
}
|
||
|
||
.info-group {
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.info-label {
|
||
font-weight: 700;
|
||
color: var(--primary-dark);
|
||
font-size: 0.85rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.info-value {
|
||
color: var(--text-dark);
|
||
font-size: 1rem;
|
||
padding: 0.75rem;
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
border-left: 4px solid var(--secondary);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.card-header-modern {
|
||
flex-direction: column;
|
||
gap: 1rem;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.table-modern thead th,
|
||
.table-modern tbody td {
|
||
padding: 1rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.form-footer {
|
||
flex-direction: column-reverse;
|
||
}
|
||
|
||
.btn-save-modern,
|
||
.btn-cancel-modern {
|
||
width: 100%;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.card-modern {
|
||
animation: fadeInUp 0.6s ease;
|
||
}
|
||
</style>
|
||
|
||
<div class="main-container">
|
||
<div class="card-modern">
|
||
<div class="card-header-modern" id="cardHeader">
|
||
<h5 class="card-title-modern" id="cardTitle">
|
||
<i class="fas fa-globe-americas"></i>
|
||
Visa Management
|
||
</h5>
|
||
<button type="button" class="btn-add-modern" id="btnAddCountry">
|
||
<i class="fas fa-plus-circle"></i>
|
||
Add Country
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Table View -->
|
||
<div class="table-container" id="tableContainer">
|
||
<table class="table-modern">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 8%" class="text-center">ID</th>
|
||
<th style="width: 10%" class="text-center">Flag</th>
|
||
<th style="width: 22%">Country Name</th>
|
||
<th style="width: 40%">Services</th>
|
||
<th style="width: 20%" class="text-center">Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="countryTableBody">
|
||
<% if (data && data.hero && data.hero.summaryList) { %>
|
||
<% data.hero.summaryList.forEach(function(country) { %>
|
||
<tr>
|
||
<td class="text-center">
|
||
<span class="id-badge">#<%= String(country.id).padStart(3, "0" ) %></span>
|
||
</td>
|
||
<td class="text-center">
|
||
<div class="icon-container">
|
||
<img src="<%= country.icon %>" alt="<%= country.name %>">
|
||
</div>
|
||
</td>
|
||
<td><span class="country-name">
|
||
<%= country.name %>
|
||
</span></td>
|
||
<td>
|
||
<div class="d-flex flex-wrap gap-1">
|
||
<% country.services.forEach(function(service) { %>
|
||
<span class="service-tag">
|
||
<%= service %>
|
||
</span>
|
||
<% }); %>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div class="action-btn-group">
|
||
<button class="action-btn btn-view-modern" data-id="<%= country.id %>"
|
||
title="View">
|
||
<i class="fas fa-eye"></i>
|
||
</button>
|
||
<button class="action-btn btn-edit-modern" data-id="<%= country.id %>"
|
||
title="Edit">
|
||
<i class="fas fa-edit"></i>
|
||
</button>
|
||
<button class="action-btn btn-delete-modern" data-id="<%= country.id %>"
|
||
title="Delete">
|
||
<i class="fas fa-trash-alt"></i>
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<% }); %>
|
||
<% } %>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Form View -->
|
||
<div id="formContainer" style="display: none">
|
||
<ul class="nav nav-tabs nav-tabs-modern" id="countryTab" role="tablist">
|
||
<li class="nav-item">
|
||
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-summary">
|
||
<i class="fas fa-map-marker-alt"></i>Country Summary
|
||
</button>
|
||
</li>
|
||
<li class="nav-item">
|
||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-detail">
|
||
<i class="fas fa-file-alt"></i>Detailed View
|
||
</button>
|
||
</li>
|
||
<li class="nav-item">
|
||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-contact">
|
||
<i class="fas fa-phone-alt"></i>Contact Info
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
|
||
<form id="formCountry" style="background: white">
|
||
<input type="hidden" name="country_id" id="country_id" />
|
||
<div class="tab-content p-4">
|
||
<!-- Tab 1 -->
|
||
<div class="tab-pane fade show active" id="tab-summary" role="tabpanel">
|
||
<!-- <div class="col-md-12 mt-4">
|
||
<label class="form-label-modern fw-bold text-dark mb-3">
|
||
Page Meta Configuration (SEO)
|
||
</label>
|
||
|
||
<div class="row g-3 p-3 border rounded shadow-sm bg-white border-start">
|
||
<div class="col-md-4">
|
||
<label class="small text-muted">Charset</label>
|
||
<input type="text" name="meta_charset" class="form-control-modern w-100"
|
||
value="UTF-8" placeholder="e.g. UTF-8">
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<label class="small text-muted">Author</label>
|
||
<input type="text" name="meta_author" class="form-control-modern w-100"
|
||
placeholder="e.g. Gramentheme">
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<label class="small text-muted">Viewport</label>
|
||
<input type="text" name="meta_viewport" class="form-control-modern w-100"
|
||
value="width=device-width, initial-scale=1"
|
||
placeholder="e.g. width=device-width, initial-scale=1">
|
||
</div>
|
||
|
||
<div class="col-md-12">
|
||
<label class="small text-muted">Meta Description (SEO)</label>
|
||
<textarea name="meta_description" class="form-control-modern w-100" rows="3"
|
||
placeholder="Visaway – Immigration & Visa Consulting HTML Template"></textarea>
|
||
<div class="form-text mt-1" style="font-size: 0.75rem;">
|
||
It's best to keep your text under 160 characters for optimal display on Google.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label class="form-label-modern">Country Name</label>
|
||
<input type="text" name="name" class="form-control-modern w-100"
|
||
placeholder="e.g. France" required />
|
||
</div>
|
||
<div class="col-md-12">
|
||
<label class="form-label-modern fw-bold">Img Flag (Country Icon)</label>
|
||
<div class="input-group">
|
||
<input type="text" class="form-control-modern flex-grow-1" name="icon"
|
||
id="img_flag_path" placeholder="/img/home-2/visa/03.png">
|
||
|
||
<button type="button" class="btn btn-outline-secondary"
|
||
onclick="document.getElementById('fileFlagInput').click()">
|
||
<i class="fas fa-upload me-1"></i>Upload
|
||
</button>
|
||
</div>
|
||
|
||
<!-- <div id="container_preview_flag" class="mt-2 border rounded p-2 bg-light d-inline-block" style="display: none;">
|
||
</div> -->
|
||
|
||
<input type="file" id="fileFlagInput" style="display:none" accept="image/*"
|
||
onchange="handleFileSelect(this, 'img_flag_path', 'preview_flag', 'container_preview_flag')">
|
||
</div>
|
||
<div class="col-md-12">
|
||
<label class="form-label-modern fw-bold">Visa Services (5 services)</label>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<input type="text" name="services[]" class="form-control-modern w-100"
|
||
placeholder="Service 1" />
|
||
</div>
|
||
<div class="col-md-4">
|
||
<input type="text" name="services[]" class="form-control-modern w-100"
|
||
placeholder="Service 2" />
|
||
</div>
|
||
<div class="col-md-4">
|
||
<input type="text" name="services[]" class="form-control-modern w-100"
|
||
placeholder="Service 3" />
|
||
</div>
|
||
<div class="col-md-4">
|
||
<input type="text" name="services[]" class="form-control-modern w-100"
|
||
placeholder="Service 4" />
|
||
</div>
|
||
<div class="col-md-4">
|
||
<input type="text" name="services[]" class="form-control-modern w-100"
|
||
placeholder="Service 5" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab 2 -->
|
||
<div class="tab-pane fade" id="tab-detail" role="tabpanel">
|
||
<div class="row g-3">
|
||
<div class="col-md-12">
|
||
<label class="form-label-modern">Banner Title</label>
|
||
<input type="text" name="detail_title" class="form-control-modern w-100"
|
||
placeholder="COUNTRY USA" />
|
||
</div>
|
||
<div class="col-md-12">
|
||
<label class="form-label-modern">Main Image</label>
|
||
<input type="text" name="mainImage" class="form-control-modern w-100"
|
||
placeholder="/img/.../details-1.jpg" />
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-modern">Main Description</label>
|
||
<textarea name="description" class="form-control-modern w-100" rows="5"></textarea>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-modern">Additional Info</label>
|
||
<textarea name="additionalInfo" class="form-control-modern w-100" rows="5"></textarea>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<label class="form-label-modern">Tagline</label>
|
||
<input type="text" name="tagline" class="form-control-modern w-100" />
|
||
</div>
|
||
<div class="col-md-12">
|
||
<label class="form-label-modern">Visa Types</label>
|
||
|
||
<div class="row g-4">
|
||
|
||
<div class="col-md-6">
|
||
<div class="visa-item-group p-3 border rounded shadow-sm">
|
||
<label class="small text-muted mb-1">Type 1</label>
|
||
<input type="text" name="visa_title[]"
|
||
class="form-control-modern w-100 mb-2"
|
||
placeholder="Visa Title (e.g. Tourist Visa)" />
|
||
<textarea name="visa_description[]" class="form-control-modern w-100"
|
||
rows="4" placeholder="Visa Description"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="visa-item-group p-3 border rounded shadow-sm">
|
||
<label class="small text-muted mb-1">Type 2</label>
|
||
<input type="text" name="visa_title[]"
|
||
class="form-control-modern w-100 mb-2"
|
||
placeholder="Visa Title (e.g. Work Permit)" />
|
||
<textarea name="visa_description[]" class="form-control-modern w-100"
|
||
rows="4" placeholder="Visa Description"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="row g-3 mb-4 p-3 border rounded shadow-sm bg-white">
|
||
<div class="col-md-12">
|
||
<label class="form-label-modern fw-bold">Process Main Title</label>
|
||
<input type="text" name="process_main_title" class="form-control-modern w-100"
|
||
placeholder="e.g. USA Visa Process" />
|
||
</div>
|
||
<div class="row g-3">
|
||
<% for(let i=1; i<=5; i++) { %>
|
||
<div class="col-md-12">
|
||
<div class="p-3 border rounded shadow-sm bg-light">
|
||
<div class="d-flex align-items-center mb-2">
|
||
<span class="badge bg-secondary me-2">
|
||
<%= i.toString().padStart(2, '0' ) %>
|
||
</span>
|
||
<input type="text" name="step_title[]"
|
||
class="form-control-modern flex-grow-1"
|
||
placeholder="Step <%= i %> Title" />
|
||
</div>
|
||
<textarea name="step_description[]" class="form-control-modern w-100"
|
||
rows="2" placeholder="Step <%= i %> Description"></textarea>
|
||
</div>
|
||
</div>
|
||
<% } %>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-modern small">Process Image 1</label>
|
||
<div class="input-group">
|
||
<input type="text" class="form-control-modern flex-grow-1"
|
||
name="process_image_1" id="process_image_1"
|
||
placeholder="/img/process-1.jpg">
|
||
<button type="button" class="btn btn-outline-secondary"
|
||
onclick="document.getElementById('fileInput1').click()">
|
||
<i class="fas fa-upload me-1"></i>Upload
|
||
</button>
|
||
</div>
|
||
<div class="mt-2">
|
||
<img id="preview_process_1" src=""
|
||
style="max-width: 100px; display: none; border-radius: 4px; border: 1px solid #ddd;">
|
||
</div>
|
||
<input type="file" id="fileInput1" style="display:none"
|
||
onchange="handleFileSelect(this, 'process_image_1', 'preview_process_1')">
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<label class="form-label-modern small">Process Image 2</label>
|
||
<div class="input-group">
|
||
<input type="text" class="form-control-modern flex-grow-1"
|
||
name="process_image_2" id="process_image_2"
|
||
placeholder="/img/process-2.jpg">
|
||
<button type="button" class="btn btn-outline-secondary"
|
||
onclick="document.getElementById('fileInput2').click()">
|
||
<i class="fas fa-upload me-1"></i>Upload
|
||
</button>
|
||
</div>
|
||
<div class="mt-2">
|
||
<img id="preview_process_2" src=""
|
||
style="max-width: 100px; display: none; border-radius: 4px; border: 1px solid #ddd;">
|
||
</div>
|
||
<input type="file" id="fileInput2" style="display:none"
|
||
onchange="handleFileSelect(this, 'process_image_2', 'preview_process_2')">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12 mt-4">
|
||
<label class="form-label-modern fw-bold mb-3">
|
||
Visa Categories (Grouped)
|
||
</label>
|
||
|
||
<div class="row mb-3 p-3 border rounded shadow-sm bg-white">
|
||
<div class="col-md-12">
|
||
<label class="small text-muted">Categories Main Title</label>
|
||
<input type="text" name="visa_categories_title"
|
||
class="form-control-modern w-100" placeholder="e.g. Types of USA Visas" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<div class="col-md-6">
|
||
<div class="p-3 border rounded bg-light shadow-sm">
|
||
<label class="small fw-bold mb-2 d-block">Group 1 (3 Items)</label>
|
||
<div class="d-flex flex-column gap-2">
|
||
<input type="text" name="category_group1[]" class="form-control-modern"
|
||
placeholder="e.g. Student Visa (F1, M1, J1)">
|
||
<input type="text" name="category_group1[]" class="form-control-modern"
|
||
placeholder="e.g. Work Visa (H1B, L1)">
|
||
<input type="text" name="category_group1[]" class="form-control-modern"
|
||
placeholder="e.g. Tourist Visa (B1/B2)">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="p-3 border rounded bg-light shadow-sm">
|
||
<label class="small fw-bold mb-2 d-block">Group 2 (2 Items)</label>
|
||
<div class="d-flex flex-column gap-2">
|
||
<input type="text" name="category_group2[]" class="form-control-modern"
|
||
placeholder="e.g. Family/Spouse Visa (K1)">
|
||
<input type="text" name="category_group2[]" class="form-control-modern"
|
||
placeholder="e.g. Green Card">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12 mt-4">
|
||
<label class="form-label-modern fw-bold mb-3">
|
||
Visa Service Options (5 Steps)
|
||
</label>
|
||
|
||
<div class="row mb-3">
|
||
<div class="col-md-12">
|
||
<div class="p-3 border rounded shadow-sm bg-white">
|
||
<label class="small text-muted">Service Main Title</label>
|
||
<input type="text" name="service_main_title"
|
||
class="form-control-modern w-100"
|
||
placeholder="e.g. Our USA Visa Service Options" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-3">
|
||
<% for(let i=1; i<=5; i++) { %>
|
||
<div class="col-md-12">
|
||
<div class="p-3 border rounded shadow-sm bg-white border-start ">
|
||
<div class="d-flex align-items-center mb-2">
|
||
<span class="badge bg-secondary me-2">
|
||
<%= i.toString().padStart(2, '0' ) %>
|
||
</span>
|
||
<input type="text" name="service_step_title[]"
|
||
class="form-control-modern flex-grow-1 fw-bold"
|
||
placeholder="Service Step <%= i %> Title" />
|
||
</div>
|
||
<textarea name="service_step_description[]"
|
||
class="form-control-modern w-100" rows="2"
|
||
placeholder="Service Step <%= i %> Description"></textarea>
|
||
</div>
|
||
</div>
|
||
<% } %>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12 mt-4">
|
||
<label class="form-label-modern fw-bold mb-3">
|
||
Related Countries (7 Items)
|
||
</label>
|
||
|
||
<div class="row g-3">
|
||
<% for(let i=1; i<=7; i++) { %>
|
||
<div class="col-md-6">
|
||
<div class="p-3 border rounded shadow-sm bg-white border-start ">
|
||
<div class="row g-2 align-items-center">
|
||
<input type="hidden" name="related_id[]" value="<%= i %>">
|
||
|
||
<div class="col-md-5">
|
||
<label class="small text-muted">Country Name</label>
|
||
<input type="text" name="related_name[]"
|
||
class="form-control-modern w-100" placeholder="e.g. Canada">
|
||
</div>
|
||
|
||
<div class="col-md-7">
|
||
<label class="small text-muted">Icon Path</label>
|
||
<div class="input-group">
|
||
<input type="text" class="form-control-modern flex-grow-1"
|
||
name="related_icon[]" id="related_icon_<%= i %>"
|
||
placeholder="/img/.../0<%= i %>.png">
|
||
<button type="button"
|
||
class="btn btn-outline-secondary btn-sm"
|
||
onclick="document.getElementById('fileRelated_<%= i %>').click()">
|
||
<i class="fas fa-upload"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="mt-2">
|
||
<img id="preview_related_<%= i %>" src="" alt="Preview"
|
||
style="max-width: 60px; height: 60px; object-fit: cover; display: none; border: 1px solid #ddd; padding: 2px; border-radius: 4px;">
|
||
</div>
|
||
|
||
<input type="file" id="fileRelated_<%= i %>"
|
||
style="display:none"
|
||
onchange="handleFileSelect(this, 'related_icon_<%= i %>', 'preview_related_<%= i %>')">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<% } %>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tab 3 -->
|
||
<div class="tab-pane fade" id="tab-contact" role="tabpanel">
|
||
<div class="row g-3">
|
||
<div class="col-md-12 mt-4">
|
||
<label class="form-label-modern fw-bold mb-3">
|
||
Contact Information Section
|
||
</label>
|
||
|
||
<div class="row g-3 p-3 border rounded shadow-sm bg-white border-start">
|
||
<div class="col-md-12">
|
||
<label class="small text-muted">Background Image (Contact Section)</label>
|
||
<div class="input-group">
|
||
<input type="text" class="form-control-modern flex-grow-1"
|
||
name="contact_bg_img" id="contact_bg_img" placeholder="/img/.../bg.jpg">
|
||
<button type="button" class="btn btn-outline-secondary btn-sm"
|
||
onclick="document.getElementById('fileContactBg').click()">
|
||
<i class="fas fa-upload"></i>
|
||
</button>
|
||
</div>
|
||
<img id="preview_contact_bg" src=""
|
||
style="max-width: 150px; display: none; margin-top: 5px; border-radius: 4px;">
|
||
<input type="file" id="fileContactBg" style="display:none"
|
||
onchange="handleFileSelect(this, 'contact_bg_img', 'preview_contact_bg')">
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<label class="small text-muted">Section Title</label>
|
||
<input type="text" name="contact_sectionTitle" class="form-control-modern w-100"
|
||
placeholder="e.g. Visa & Immigration">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="small text-muted">Help Text</label>
|
||
<input type="text" name="contact_helpText" class="form-control-modern w-100"
|
||
placeholder="e.g. Need Help? Book Lab Visit">
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<div class="col-md-4">
|
||
<label class="small fw-bold">Phone</label>
|
||
<input type="text" name="contact_phone_label"
|
||
class="form-control-modern w-100 mb-2" placeholder="Label (e.g. Call Us)">
|
||
<input type="text" name="contact_phone_value" class="form-control-modern w-100"
|
||
placeholder="Value (e.g. +009 438...)">
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<label class="small fw-bold">Email</label>
|
||
<input type="text" name="contact_email_label"
|
||
class="form-control-modern w-100 mb-2" placeholder="Label (e.g. Mail Us)">
|
||
<input type="email" name="contact_email_value" class="form-control-modern w-100"
|
||
placeholder="Value (e.g. info@...)">
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<label class="small fw-bold">Location</label>
|
||
<input type="text" name="contact_location_label"
|
||
class="form-control-modern w-100 mb-2" placeholder="Label (e.g. Location)">
|
||
<input type="text" name="contact_location_address"
|
||
class="form-control-modern w-100" placeholder="Address">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="form-footer">
|
||
<button type="button" class="btn-cancel-modern" id="btnBackToList">
|
||
<i class="fas fa-arrow-left"></i> Back to List
|
||
</button>
|
||
<button type="submit" form="formCountry" class="btn-save-modern">
|
||
<i class="fas fa-save"></i> Save
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- View Info -->
|
||
<div id="viewContainer" style="display: none; padding: 2rem">
|
||
<div class="row g-4">
|
||
<div class="col-md-6">
|
||
<div class="info-group">
|
||
<div class="info-label">Country Name</div>
|
||
<div class="info-value" id="view-name">-</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div class="info-group">
|
||
<div class="info-label">Services</div>
|
||
<div class="info-value" id="view-services">-</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div class="info-group">
|
||
<div class="info-label">Description</div>
|
||
<div class="info-value" id="view-description">-</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="info-group">
|
||
<div class="info-label">Phone</div>
|
||
<div class="info-value" id="view-phone">-</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="info-group">
|
||
<div class="info-label">Email</div>
|
||
<div class="info-value" id="view-email">-</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-footer">
|
||
<button type="button" class="btn-cancel-modern" id="btnBackFromView">
|
||
<i class="fas fa-arrow-left"></i> Back to List
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
const apiData = {
|
||
hero: {
|
||
title: "Visa Service",
|
||
summaryList: [
|
||
{
|
||
id: 1,
|
||
slug: "france",
|
||
icon: "/img/home-2/visa/03.png",
|
||
services: [
|
||
"Student Visa & Admission",
|
||
"Work Visa – H1B",
|
||
"Work permit for Canada",
|
||
"Student Visa for Canada",
|
||
],
|
||
detailedView: {
|
||
activeCountry: {
|
||
title: "COUNTRY FRANCE",
|
||
mainImage: "/img/inner-page/country-details/details-1.jpg",
|
||
description:
|
||
"France offers world-class education and cultural experiences...",
|
||
additionalInfo:
|
||
"Our consultancy provides complete guidance for study visas...",
|
||
tagline: "Experience the best of European education",
|
||
contactInfo: {
|
||
sectionTitle: "Visa & Immigration",
|
||
phone: { value: "+33 1 234 5678" },
|
||
email: { value: "info@france-visa.com" },
|
||
location: { address: "Paris, France" },
|
||
},
|
||
},
|
||
},
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "UK",
|
||
slug: "uk",
|
||
icon: "/img/home-2/visa/11.png",
|
||
services: [
|
||
"Student Visa & Admission",
|
||
"Work Visa – H1B",
|
||
"Work permit for Canada",
|
||
],
|
||
detailedView: null,
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "Canada",
|
||
slug: "canada",
|
||
icon: "/img/home-2/visa/02.png",
|
||
services: ["Student Visa & Admission", "Work Visa – H1B"],
|
||
detailedView: null,
|
||
},
|
||
],
|
||
},
|
||
};
|
||
|
||
let countriesData = {};
|
||
|
||
function attachEventListeners() {
|
||
document.querySelectorAll(".btn-view-modern").forEach((btn) => {
|
||
btn.addEventListener("click", function () {
|
||
viewCountry(parseInt(this.getAttribute("data-id")));
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll(".btn-edit-modern").forEach((btn) => {
|
||
btn.addEventListener("click", function () {
|
||
editCountry(parseInt(this.getAttribute("data-id")));
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll(".btn-delete-modern").forEach((btn) => {
|
||
btn.addEventListener("click", function () {
|
||
deleteCountry(parseInt(this.getAttribute("data-id")));
|
||
});
|
||
});
|
||
}
|
||
|
||
function showListView() {
|
||
document.getElementById("tableContainer").style.display = "block";
|
||
document.getElementById("formContainer").style.display = "none";
|
||
document.getElementById("viewContainer").style.display = "none";
|
||
document.getElementById("cardHeader").style.display = "flex";
|
||
}
|
||
|
||
function showFormView() {
|
||
document.getElementById("tableContainer").style.display = "none";
|
||
document.getElementById("formContainer").style.display = "block";
|
||
document.getElementById("viewContainer").style.display = "none";
|
||
document.getElementById("cardHeader").style.display = "none";
|
||
}
|
||
|
||
function showViewView() {
|
||
document.getElementById("tableContainer").style.display = "none";
|
||
document.getElementById("formContainer").style.display = "none";
|
||
document.getElementById("viewContainer").style.display = "block";
|
||
document.getElementById("cardHeader").style.display = "none";
|
||
}
|
||
|
||
function viewCountry(countryId) {
|
||
const country = countriesData[countryId];
|
||
if (country) {
|
||
document.getElementById("view-name").textContent = country.name || "-";
|
||
document.getElementById("view-services").textContent =
|
||
country.services.join(", ") || "-";
|
||
|
||
if (country.detailedView && country.detailedView.activeCountry) {
|
||
const details = country.detailedView.activeCountry;
|
||
document.getElementById("view-description").textContent =
|
||
details.description || "-";
|
||
document.getElementById("view-phone").textContent =
|
||
details.contactInfo?.phone?.value || "-";
|
||
document.getElementById("view-email").textContent =
|
||
details.contactInfo?.email?.value || "-";
|
||
}
|
||
|
||
showViewView();
|
||
}
|
||
}
|
||
|
||
function editCountry(countryId) {
|
||
const country = countriesData[countryId];
|
||
if (country) {
|
||
document.getElementById("country_id").value = country.id;
|
||
document.querySelector('input[name="name"]').value = country.name || "";
|
||
// document.querySelector('input[name="slug"]').value = country.slug || "";
|
||
document.querySelector('input[name="icon"]').value = country.icon || "";
|
||
|
||
const serviceInputs = document.querySelectorAll(
|
||
'input[name="services[]"]',
|
||
);
|
||
serviceInputs.forEach((input) => (input.value = ""));
|
||
country.services.forEach((service, index) => {
|
||
if (serviceInputs[index]) serviceInputs[index].value = service;
|
||
});
|
||
|
||
if (country.detailedView && country.detailedView.activeCountry) {
|
||
const details = country.detailedView.activeCountry;
|
||
document.querySelector('input[name="detail_title"]').value =
|
||
details.title || "";
|
||
document.querySelector('textarea[name="description"]').value =
|
||
details.description || "";
|
||
document.querySelector('input[name="contact_phone"]').value =
|
||
details.contactInfo?.phone?.value || "";
|
||
document.querySelector('input[name="contact_email"]').value =
|
||
details.contactInfo?.email?.value || "";
|
||
}
|
||
|
||
const firstTab = document.querySelector(".nav-tabs-modern .nav-link");
|
||
bootstrap.Tab.getOrCreateInstance(firstTab).show();
|
||
|
||
showFormView();
|
||
}
|
||
}
|
||
|
||
function deleteCountry(countryId) {
|
||
const country = countriesData[countryId];
|
||
if (confirm(`Delete "${country.name}"?`)) {
|
||
const index = apiData.hero.summaryList.findIndex(
|
||
(c) => c.id === countryId,
|
||
);
|
||
if (index !== -1) {
|
||
apiData.hero.summaryList.splice(index, 1);
|
||
delete countriesData[countryId];
|
||
loadTableData();
|
||
alert("Deleted!");
|
||
}
|
||
}
|
||
}
|
||
|
||
document
|
||
.getElementById("btnAddCountry")
|
||
.addEventListener("click", function () {
|
||
document.getElementById("formCountry").reset();
|
||
document.getElementById("country_id").value = "";
|
||
const firstTab = document.querySelector(".nav-tabs-modern .nav-link");
|
||
bootstrap.Tab.getOrCreateInstance(firstTab).show();
|
||
showFormView();
|
||
});
|
||
|
||
document
|
||
.getElementById("btnBackToList")
|
||
.addEventListener("click", showListView);
|
||
document
|
||
.getElementById("btnBackFromView")
|
||
.addEventListener("click", showListView);
|
||
|
||
document
|
||
.getElementById("formCountry")
|
||
.addEventListener("submit", function (e) {
|
||
e.preventDefault();
|
||
const formData = new FormData(this);
|
||
const countryId = formData.get("country_id");
|
||
const services = Array.from(
|
||
document.querySelectorAll('input[name="services[]"]'),
|
||
)
|
||
.map((input) => input.value)
|
||
.filter((val) => val.trim());
|
||
|
||
const countryData = {
|
||
id: countryId ? parseInt(countryId) : Date.now(),
|
||
name: formData.get("name"),
|
||
icon: formData.get("icon"),
|
||
services: services,
|
||
detailedView: {
|
||
activeCountry: {
|
||
title: formData.get("detail_title"),
|
||
mainImage: formData.get("mainImage"),
|
||
description: formData.get("description"),
|
||
additionalInfo: formData.get("additionalInfo"),
|
||
tagline: formData.get("tagline"),
|
||
contactInfo: {
|
||
sectionTitle: formData.get("contact_sectionTitle"),
|
||
phone: { value: formData.get("contact_phone") },
|
||
email: { value: formData.get("contact_email") },
|
||
location: { address: formData.get("contact_location") },
|
||
},
|
||
},
|
||
},
|
||
};
|
||
|
||
if (countryId) {
|
||
const index = apiData.hero.summaryList.findIndex(
|
||
(c) => c.id === parseInt(countryId),
|
||
);
|
||
if (index !== -1) {
|
||
apiData.hero.summaryList[index] = countryData;
|
||
alert("Updated!");
|
||
}
|
||
} else {
|
||
apiData.hero.summaryList.push(countryData);
|
||
alert("Added!");
|
||
}
|
||
|
||
loadTableData();
|
||
showListView();
|
||
});
|
||
|
||
document.addEventListener("DOMContentLoaded", loadTableData);
|
||
</script> |