WIP: email booking
This commit is contained in:
parent
feb7916fff
commit
057cdaffa9
|
|
@ -2,10 +2,12 @@
|
||||||
|
|
||||||
namespace App\Http\Controllers;
|
namespace App\Http\Controllers;
|
||||||
|
|
||||||
|
use App\Mail\SendUniqueCode;
|
||||||
use App\Models\BookingModel;
|
use App\Models\BookingModel;
|
||||||
use Carbon\Carbon;
|
use Carbon\Carbon;
|
||||||
use Generator;
|
use Generator;
|
||||||
use Illuminate\Http\Request;
|
use Illuminate\Http\Request;
|
||||||
|
use Illuminate\Support\Facades\Mail;
|
||||||
|
|
||||||
class BookingController extends Controller
|
class BookingController extends Controller
|
||||||
{
|
{
|
||||||
|
|
@ -87,6 +89,14 @@ public function store(Request $request)
|
||||||
'unix_expired_time' => $tgl_request
|
'unix_expired_time' => $tgl_request
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
Mail::to($request->email)->send(new SendUniqueCode(
|
||||||
|
$request->nama_lengkap,
|
||||||
|
$kode_unik,
|
||||||
|
date('H:i:s', $tgl_request - 86399),
|
||||||
|
date('H:i:s', $tgl_request),
|
||||||
|
$request->tgl_booking,
|
||||||
|
));
|
||||||
|
|
||||||
return response()->json([
|
return response()->json([
|
||||||
'status' => true,
|
'status' => true,
|
||||||
'msg' => 'Booking success!'
|
'msg' => 'Booking success!'
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
namespace App\Mail;
|
||||||
|
|
||||||
|
use Illuminate\Bus\Queueable;
|
||||||
|
use Illuminate\Contracts\Queue\ShouldQueue;
|
||||||
|
use Illuminate\Mail\Mailable;
|
||||||
|
use Illuminate\Mail\Mailables\Attachment;
|
||||||
|
use Illuminate\Mail\Mailables\Content;
|
||||||
|
use Illuminate\Mail\Mailables\Envelope;
|
||||||
|
use Illuminate\Queue\SerializesModels;
|
||||||
|
|
||||||
|
class SendUniqueCode extends Mailable
|
||||||
|
{
|
||||||
|
use Queueable, SerializesModels;
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a new message instance.
|
||||||
|
*/
|
||||||
|
public function __construct(public string $name, public string $code, public string $startExpirationTime, public string $endExpirationTime, public string $tglExpired)
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the message envelope.
|
||||||
|
*/
|
||||||
|
public function envelope(): Envelope
|
||||||
|
{
|
||||||
|
return new Envelope(
|
||||||
|
subject: 'Selamat datang di Smart Anxiety',
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the message content definition.
|
||||||
|
*/
|
||||||
|
public function content(): Content
|
||||||
|
{
|
||||||
|
return new Content(
|
||||||
|
view: 'layouts.mail-send-code',
|
||||||
|
with: [
|
||||||
|
'code' => $this->code,
|
||||||
|
'name' => $this->name,
|
||||||
|
'startExpirationTime' => $this->startExpirationTime,
|
||||||
|
'endExpirationTime' => $this->endExpirationTime,
|
||||||
|
'tglExpired' => $this->tglExpired
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the attachments for the message.
|
||||||
|
*
|
||||||
|
* @return array<int, Attachment>
|
||||||
|
*/
|
||||||
|
public function attachments(): array
|
||||||
|
{
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,273 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="id">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Kode Unik Anda</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||||
|
/* background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%); */
|
||||||
|
padding: 40px 20px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-container {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: linear-gradient(135deg, #1e3ce6 0%, #b0b8ff 100%);
|
||||||
|
padding: 40px 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header p {
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 50px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.greeting {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #2d3748;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
color: #4a5568;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
text-align: center;
|
||||||
|
margin: 40px 0;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-button {
|
||||||
|
display: inline-block;
|
||||||
|
background: linear-gradient(135deg, #84cc16 0%, #65a30d 100%);
|
||||||
|
color: #ffffff !important;
|
||||||
|
padding: 16px 48px;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
box-shadow: 0 10px 25px rgba(132, 204, 22, 0.4);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-button:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 15px 35px rgba(132, 204, 22, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box {
|
||||||
|
background: #f7fee7;
|
||||||
|
border-left: 4px solid #7065ff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 30px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box .code {
|
||||||
|
background: #f7fee7;
|
||||||
|
border-left: 4px solid #7065ff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 30px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box p {
|
||||||
|
color: #4a5568;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box strong {
|
||||||
|
color: #2d3748;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning {
|
||||||
|
background: #fff5f5;
|
||||||
|
border-left: 4px solid #f56565;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warning p {
|
||||||
|
color: #742a2a;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alternative-link {
|
||||||
|
background: #edf2f7;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 30px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alternative-link p {
|
||||||
|
color: #4a5568;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alternative-link a {
|
||||||
|
color: #84cc16;
|
||||||
|
word-break: break-all;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
background: #2d3748;
|
||||||
|
padding: 40px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer p {
|
||||||
|
color: #a0aec0;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .company-name {
|
||||||
|
color: #ffffff;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links {
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links a {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 10px;
|
||||||
|
color: #a0aec0;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links a:hover {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
body {
|
||||||
|
padding: 20px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 30px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
padding: 30px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.greeting {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reset-button {
|
||||||
|
padding: 14px 36px;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="email-container">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="header">
|
||||||
|
<div class="logo">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<h1>Smart Anxiety</h1>
|
||||||
|
<p>Sistem Pendeteksi Kecemasan</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content -->
|
||||||
|
<div class="content">
|
||||||
|
<h2 class="greeting">Halo! 👋</h2>
|
||||||
|
|
||||||
|
<p class="message">
|
||||||
|
🔑 Berikut adalah kode unik Anda untuk verifikasi booking:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="info-box code">
|
||||||
|
<h1 style="text-align: center">{{ $code }}</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-box">
|
||||||
|
<p><strong>⏰ Penting:</strong> Kode unik ini akan berlaku pada tanggal <strong>{{ $tglExpired }}</strong>, dari jam <strong>{{ $startExpirationTime }}</strong> sampai <strong>{{ $endExpirationTime }}</strong></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- <div class="warning">
|
||||||
|
<p><strong>⚠️ Tidak meminta reset password?</strong> Abaikan email ini dan tidak ada perubahan yang akan
|
||||||
|
dilakukan pada akun Anda.</p>
|
||||||
|
</div> --}}
|
||||||
|
|
||||||
|
{{-- <div class="alternative-link">
|
||||||
|
<p><strong>Mengalami masalah dengan tombol di atas?</strong></p>
|
||||||
|
<p>Salin dan tempel URL berikut ke browser Anda:</p>
|
||||||
|
<a href="{{ $url }}">{{ $url }}</a>
|
||||||
|
</div> --}}
|
||||||
|
|
||||||
|
<p class="message" style="margin-top: 40px; font-size: 14px; color: #718096;">
|
||||||
|
Salam hangat,<br>
|
||||||
|
<strong>Tim Smart Anxiety</strong>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="footer">
|
||||||
|
<p class="company-name">Smart Anxiety</p>
|
||||||
|
<p>Email ini dikirim secara otomatis, mohon tidak membalas email ini.</p>
|
||||||
|
<p style="margin-top: 20px; font-size: 12px;">
|
||||||
|
© {{ date('Y') }} Smart Anxiety. All rights reserved.
|
||||||
|
</p>
|
||||||
|
<div class="social-links">
|
||||||
|
<a href="#">Bantuan</a> •
|
||||||
|
<a href="#">Kebijakan Privasi</a> •
|
||||||
|
<a href="#">Syarat & Ketentuan</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -412,7 +412,14 @@
|
||||||
<script>
|
<script>
|
||||||
function sendAppointment() {
|
function sendAppointment() {
|
||||||
$('#error_msg').hide();
|
$('#error_msg').hide();
|
||||||
|
Swal.fire({
|
||||||
|
title: "Loading",
|
||||||
|
text: "Sedang memproses booking kamu, tunggu sebentar yaa!",
|
||||||
|
icon: "info",
|
||||||
|
showConfirmButton: false,
|
||||||
|
allowOutsideClick: false
|
||||||
|
});
|
||||||
|
|
||||||
let name = $('#nama_lengkap').val();
|
let name = $('#nama_lengkap').val();
|
||||||
let email = $('#email').val();
|
let email = $('#email').val();
|
||||||
let no_telp = $('#no_telp').val();
|
let no_telp = $('#no_telp').val();
|
||||||
|
|
|
||||||
|
|
@ -56,8 +56,14 @@
|
||||||
Route::resource('hasil_tes', HasilTesController::class);
|
Route::resource('hasil_tes', HasilTesController::class);
|
||||||
});
|
});
|
||||||
|
|
||||||
Route::get('api/eye/test', function(Request $req) {
|
Route::get('email/test', function(Request $req) {
|
||||||
return $req->token;
|
return view('layouts.mail-send-code', [
|
||||||
|
'code' => 'ABC123',
|
||||||
|
'name' => 'Mahayoga',
|
||||||
|
'startExpirationTime' => '09:00:00',
|
||||||
|
'endExpirationTime' => '09:05:00',
|
||||||
|
'tglExpired' => '2023-10-01'
|
||||||
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
require __DIR__.'/auth.php';
|
require __DIR__.'/auth.php';
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue