283 lines
15 KiB
HTML
283 lines
15 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="admin-container">
|
|
<h1 style="color: var(--primary-color); margin-bottom: 2rem;">Admin Dashboard</h1>
|
|
|
|
<div class="tabs-header">
|
|
<button class="tab-btn active" onclick="openTab(event, 'tab-leads')">Leads & Forms</button>
|
|
<button class="tab-btn" onclick="openTab(event, 'tab-tours')">Tours & Activities</button>
|
|
<button class="tab-btn" onclick="openTab(event, 'tab-settings')">System Settings</button>
|
|
</div>
|
|
|
|
<!-- Leads Tab -->
|
|
<div id="tab-leads" class="tab-content glass-panel" style="display: block;">
|
|
<h2 style="color: var(--primary-color); margin-bottom: 1.5rem;">Recent Leads</h2>
|
|
<table class="admin-table" style="width: 100%;">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Name</th>
|
|
<th>Email</th>
|
|
<th>Phone</th>
|
|
<th>Interest</th>
|
|
<th>Retell AI</th>
|
|
<th>Message</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for lead in leads %}
|
|
<tr>
|
|
<td>{{ lead.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
|
|
<td>{{ lead.name }}</td>
|
|
<td>{{ lead.email }}</td>
|
|
<td>{{ lead.phone }}</td>
|
|
<td>{{ lead.interested_in }}</td>
|
|
<td>{{ 'Yes' if lead.wants_retell_ai else 'No' }}</td>
|
|
<td>{{ lead.message }}</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr><td colspan="7">No leads yet.</td></tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Tours Tab -->
|
|
<div id="tab-tours" class="tab-content" style="display: none;">
|
|
<div class="admin-grid">
|
|
<!-- Add Tour Form -->
|
|
<div class="glass-panel" style="margin-bottom: 2rem;">
|
|
<h2 id="tour-form-title" style="color: var(--primary-color); margin-bottom: 1.5rem;">Add Activity / Tour</h2>
|
|
<form id="tour-form" action="/admin/tours" method="POST" enctype="multipart/form-data">
|
|
<div class="form-group">
|
|
<label>Category</label>
|
|
<select name="category" class="form-control">
|
|
<option value="tour">Tour</option>
|
|
<option value="surf">Surf</option>
|
|
<option value="volcano">Volcano</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Title (English)</label>
|
|
<input type="text" name="title_en" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Title (Spanish)</label>
|
|
<input type="text" name="title_es" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Description (English)</label>
|
|
<textarea name="desc_en" class="form-control" required></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Description (Spanish)</label>
|
|
<textarea name="desc_es" class="form-control" required></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Price ($)</label>
|
|
<input type="text" name="price" class="form-control" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Image URL (Leave blank if you want to upload a file)</label>
|
|
<input type="text" name="image_url" class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Upload Image</label>
|
|
<input type="file" name="image_upload" class="form-control" accept="image/*">
|
|
</div>
|
|
<div class="form-group" style="margin-top: 2rem;">
|
|
<button type="submit" id="tour-submit-btn" class="btn btn-primary">Add Tour</button>
|
|
<button type="button" id="tour-cancel-btn" class="btn" style="display:none; background: #555; margin-left:1rem; color: #FFF;" onclick="cancelEdit()">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- List Tours -->
|
|
<div class="glass-panel">
|
|
<h2 style="color: var(--primary-color); margin-bottom: 1.5rem;">Current Activities</h2>
|
|
<div style="max-height: 600px; overflow-y: auto;">
|
|
<table class="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Category</th>
|
|
<th>Title</th>
|
|
<th>Price</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for tour in tours %}
|
|
<tr>
|
|
<td>{{ tour.category }}</td>
|
|
<td>{{ tour.title_en }}</td>
|
|
<td>${{ tour.price }}</td>
|
|
<td>
|
|
<button type="button" class="edit-tour-btn" style="background:none; border:none; color:var(--primary-color); font-weight: bold; cursor:pointer; margin-right: 15px;"
|
|
data-id="{{ tour.id }}"
|
|
data-category="{{ tour.category }}"
|
|
data-title-en="{{ tour.title_en }}"
|
|
data-title-es="{{ tour.title_es }}"
|
|
data-desc-en="{{ tour.desc_en }}"
|
|
data-desc-es="{{ tour.desc_es }}"
|
|
data-price="{{ tour.price }}"
|
|
data-image="{{ tour.image_url }}">
|
|
Edit
|
|
</button>
|
|
<form action="/admin/tours/delete/{{ tour.id }}" method="POST" style="display:inline;">
|
|
<button type="submit" style="background:none; border:none; color:#ff4444; cursor:pointer;" onclick="return confirm('Are you sure you want to delete this?')">Delete</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Settings Tab -->
|
|
<div id="tab-settings" class="tab-content" style="display: none;">
|
|
<div class="glass-panel" style="padding: 2rem;">
|
|
<h2 style="color: var(--primary-color); margin-bottom: 1.5rem;">System & API Settings</h2>
|
|
<form action="/admin/settings" method="POST" enctype="multipart/form-data">
|
|
|
|
<div class="admin-grid">
|
|
<div>
|
|
<h3 style="color: var(--secondary-color); margin: 0 0 1rem;">General</h3>
|
|
<div class="form-group">
|
|
<label>Agency Name</label>
|
|
<input type="text" name="agency_name" class="form-control" value="{{ settings.get('agency_name', '') }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Agency Email (Sender/Receiver)</label>
|
|
<input type="text" name="agency_email" class="form-control" value="{{ settings.get('agency_email', '') }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Logo URL (Leave blank to use uploaded image)</label>
|
|
<input type="text" name="logo_url" class="form-control" value="{{ settings.get('logo_url', '') }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Upload Logo</label>
|
|
<input type="file" name="logo_upload" class="form-control" accept="image/*">
|
|
</div>
|
|
|
|
<h3 style="color: var(--secondary-color); margin: 1.5rem 0 1rem;">Hero Video</h3>
|
|
<div class="form-group">
|
|
<label>Video URL (Leave blank to upload a file)</label>
|
|
<input type="text" name="hero_video_url" class="form-control" value="{{ settings.get('hero_video_url', '') }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Upload Video (.mp4)</label>
|
|
<input type="file" name="hero_video_upload" class="form-control" accept="video/mp4">
|
|
</div>
|
|
<h3 style="color: var(--secondary-color); margin: 1.5rem 0 1rem;">Mailtrap SMTP</h3>
|
|
<div class="form-group">
|
|
<label>Host</label>
|
|
<input type="text" name="mailtrap_host" class="form-control" value="{{ settings.get('mailtrap_host', '') }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Port</label>
|
|
<input type="text" name="mailtrap_port" class="form-control" value="{{ settings.get('mailtrap_port', '') }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Username</label>
|
|
<input type="text" name="mailtrap_user" class="form-control" value="{{ settings.get('mailtrap_user', '') }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Password</label>
|
|
<input type="password" name="mailtrap_password" class="form-control" value="{{ settings.get('mailtrap_password', '') }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 style="color: var(--secondary-color); margin: 0 0 1rem;">Cloudflare Turnstile</h3>
|
|
<div class="form-group">
|
|
<label>Site Key</label>
|
|
<input type="text" name="turnstile_site_key" class="form-control" value="{{ settings.get('turnstile_site_key', '') }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Secret Key</label>
|
|
<input type="password" name="turnstile_secret_key" class="form-control" value="{{ settings.get('turnstile_secret_key', '') }}">
|
|
</div>
|
|
|
|
<h3 style="color: var(--secondary-color); margin: 1.5rem 0 1rem;">Retell AI Integration</h3>
|
|
<div class="form-group">
|
|
<label>API Key</label>
|
|
<input type="password" name="retell_api_key" class="form-control" value="{{ settings.get('retell_api_key', '') }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Phone Number</label>
|
|
<input type="text" name="retell_number" class="form-control" value="{{ settings.get('retell_number', '') }}">
|
|
</div>
|
|
<div class="form-group checkbox-wrap" style="color: var(--text-light); margin-bottom: 1rem;">
|
|
<label>
|
|
<input type="checkbox" name="retell_enabled" {% if settings.get('retell_enabled') == 'true' %}checked{% endif %}>
|
|
Enable Retell AI Checkbox in Public Forms
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Agent ID</label>
|
|
<input type="text" name="retell_agent_id" class="form-control" value="{{ settings.get('retell_agent_id', '') }}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 2rem;">
|
|
<button type="submit" class="btn btn-primary">Save Settings</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openTab(evt, tabId) {
|
|
var i, tabcontent, tablinks;
|
|
tabcontent = document.getElementsByClassName("tab-content");
|
|
for (i = 0; i < tabcontent.length; i++) {
|
|
tabcontent[i].style.display = "none";
|
|
}
|
|
tablinks = document.getElementsByClassName("tab-btn");
|
|
for (i = 0; i < tablinks.length; i++) {
|
|
tablinks[i].className = tablinks[i].className.replace(" active", "");
|
|
}
|
|
document.getElementById(tabId).style.display = "block";
|
|
evt.currentTarget.className += " active";
|
|
}
|
|
|
|
// Edit Tour Functionality
|
|
document.querySelectorAll('.edit-tour-btn').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
var form = document.getElementById('tour-form');
|
|
document.getElementById('tour-form-title').innerText = "Edit Activity / Tour";
|
|
|
|
form.action = "/admin/tours/update/" + this.getAttribute('data-id');
|
|
form.querySelector('[name="category"]').value = this.getAttribute('data-category');
|
|
form.querySelector('[name="title_en"]').value = this.getAttribute('data-title-en');
|
|
form.querySelector('[name="title_es"]').value = this.getAttribute('data-title-es');
|
|
form.querySelector('[name="desc_en"]').value = this.getAttribute('data-desc-en');
|
|
form.querySelector('[name="desc_es"]').value = this.getAttribute('data-desc-es');
|
|
form.querySelector('[name="price"]').value = this.getAttribute('data-price');
|
|
form.querySelector('[name="image_url"]').value = this.getAttribute('data-image');
|
|
form.querySelector('[name="image_upload"]').value = ""; // Clear file input on edit
|
|
|
|
document.getElementById('tour-submit-btn').innerText = "Update Tour";
|
|
document.getElementById('tour-cancel-btn').style.display = "inline-block";
|
|
|
|
document.getElementById('tour-form').scrollIntoView({ behavior: 'smooth' });
|
|
});
|
|
});
|
|
|
|
function cancelEdit() {
|
|
var form = document.getElementById('tour-form');
|
|
document.getElementById('tour-form-title').innerText = "Add Activity / Tour";
|
|
form.action = "/admin/tours";
|
|
form.reset();
|
|
document.getElementById('tour-submit-btn').innerText = "Add Tour";
|
|
document.getElementById('tour-cancel-btn').style.display = "none";
|
|
}
|
|
</script>
|
|
{% endblock %}
|