1139 lines
27 KiB
PHP
1139 lines
27 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Invoice Pembayaran</title>
|
|
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--primary-blue: #7AB2D3;
|
|
--primary-blue-rgb: 122, 178, 211;
|
|
--dark-blue: #1E3A5F;
|
|
--light-blue: #e6f2f8;
|
|
--sidebar-width: 260px;
|
|
}
|
|
|
|
*{
|
|
margin:0;
|
|
padding:0;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
body{
|
|
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background:#f1f5f9;
|
|
padding:40px 20px;
|
|
color:#1e293b;
|
|
}
|
|
|
|
.invoice-container{
|
|
max-width:950px;
|
|
margin:auto;
|
|
background:white;
|
|
border-radius:24px;
|
|
overflow:hidden;
|
|
box-shadow:0 10px 40px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
/* HEADER */
|
|
.invoice-header{
|
|
background:linear-gradient(135deg, #1E3A5F 0%, #284f80 100%);
|
|
color:white;
|
|
padding:35px;
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:flex-start;
|
|
flex-wrap:wrap;
|
|
gap:20px;
|
|
}
|
|
|
|
.company-info{
|
|
display:flex;
|
|
gap:18px;
|
|
}
|
|
|
|
.logo{
|
|
width:70px;
|
|
height:70px;
|
|
border-radius:18px;
|
|
background:white;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
color:#1E3A5F;
|
|
font-size:30px;
|
|
}
|
|
|
|
.company-name{
|
|
font-size:1.7rem;
|
|
font-weight:700;
|
|
margin-bottom:6px;
|
|
}
|
|
|
|
.company-detail{
|
|
font-size:0.95rem;
|
|
opacity:0.9;
|
|
line-height:1.6;
|
|
}
|
|
|
|
.invoice-badge{
|
|
text-align:right;
|
|
}
|
|
|
|
.invoice-title{
|
|
font-size:2rem;
|
|
font-weight:800;
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
.status-paid{
|
|
display:inline-block;
|
|
background:#22c55e;
|
|
color:white;
|
|
padding:8px 18px;
|
|
border-radius:999px;
|
|
font-size:0.9rem;
|
|
font-weight:600;
|
|
}
|
|
|
|
/* BODY */
|
|
.invoice-body{
|
|
padding:35px;
|
|
}
|
|
|
|
.top-info{
|
|
display:grid;
|
|
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
|
|
gap:24px;
|
|
margin-bottom:35px;
|
|
}
|
|
|
|
.info-card{
|
|
background:white;
|
|
border:1px solid #e2e8f0;
|
|
border-radius:20px;
|
|
padding:24px;
|
|
|
|
box-shadow:
|
|
0 4px 12px rgba(15,23,42,.04);
|
|
|
|
transition:.3s;
|
|
}
|
|
|
|
.info-card:hover{
|
|
transform:translateY(-2px);
|
|
}
|
|
|
|
.info-title{
|
|
font-size:.85rem;
|
|
font-weight:700;
|
|
color:#64748b;
|
|
|
|
text-transform:uppercase;
|
|
letter-spacing:1px;
|
|
|
|
margin-bottom:20px;
|
|
padding-bottom:12px;
|
|
|
|
border-bottom:1px solid #e2e8f0;
|
|
}
|
|
|
|
.info-item{
|
|
margin-bottom:18px;
|
|
}
|
|
|
|
.info-item:last-child{
|
|
margin-bottom:0;
|
|
}
|
|
|
|
.info-label{
|
|
display:block;
|
|
|
|
font-size:.75rem;
|
|
font-weight:700;
|
|
|
|
color:#94a3b8;
|
|
|
|
text-transform:uppercase;
|
|
letter-spacing:1px;
|
|
|
|
margin-bottom:6px;
|
|
}
|
|
|
|
/* =====================================
|
|
INFORMASI TRANSFER
|
|
===================================== */
|
|
|
|
.rekening-transfer{
|
|
margin-bottom:35px;
|
|
background:linear-gradient(
|
|
135deg,
|
|
#eef7fc 0%,
|
|
#f8fbfd 100%
|
|
);
|
|
border:1px solid #cfe3ef;
|
|
}
|
|
|
|
.rekening-transfer .info-title{
|
|
color:#1E3A5F;
|
|
font-size:1rem;
|
|
}
|
|
|
|
.rekening-transfer .info-item{
|
|
margin-bottom:18px;
|
|
}
|
|
|
|
.rekening-transfer strong{
|
|
display:block;
|
|
margin-bottom:8px;
|
|
color:#475569;
|
|
font-size:.9rem;
|
|
}
|
|
|
|
.rekening-bank{
|
|
background:white;
|
|
border:1px solid #dbeafe;
|
|
padding:12px 16px;
|
|
border-radius:12px;
|
|
font-weight:600;
|
|
}
|
|
|
|
.rekening-box{
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
gap:15px;
|
|
|
|
background:white;
|
|
border:2px dashed #7AB2D3;
|
|
|
|
padding:16px 18px;
|
|
border-radius:14px;
|
|
}
|
|
|
|
.rekening-box span{
|
|
font-size:1.2rem;
|
|
font-weight:700;
|
|
color:#1E3A5F;
|
|
letter-spacing:1px;
|
|
}
|
|
|
|
.copy-btn{
|
|
border:none;
|
|
background:#1E3A5F;
|
|
color:white;
|
|
|
|
padding:10px 16px;
|
|
border-radius:10px;
|
|
|
|
cursor:pointer;
|
|
font-weight:600;
|
|
|
|
display:flex;
|
|
align-items:center;
|
|
gap:8px;
|
|
|
|
transition:.3s;
|
|
}
|
|
|
|
.copy-btn:hover{
|
|
background:#284f80;
|
|
transform:translateY(-2px);
|
|
}
|
|
|
|
/* PROPERTY */
|
|
.property-card{
|
|
background:#f8fafc;
|
|
border:1px solid #e2e8f0;
|
|
border-radius:20px;
|
|
padding:25px;
|
|
|
|
margin-top:40px;
|
|
margin-bottom:35px;
|
|
}
|
|
|
|
.section-title{
|
|
font-size:1.2rem;
|
|
font-weight:700;
|
|
margin-bottom:20px;
|
|
color:#1E3A5F;
|
|
}
|
|
|
|
.property-grid{
|
|
display:grid;
|
|
grid-template-columns:220px 1fr;
|
|
gap:25px;
|
|
align-items:center;
|
|
}
|
|
|
|
.property-image{
|
|
width:100%;
|
|
height:170px;
|
|
border-radius:16px;
|
|
object-fit:cover;
|
|
}
|
|
|
|
.property-name{
|
|
font-size:1.4rem;
|
|
font-weight:700;
|
|
margin-bottom:14px;
|
|
}
|
|
|
|
.property-detail{
|
|
margin-bottom:10px;
|
|
color:#475569;
|
|
}
|
|
|
|
/* TABLE */
|
|
.payment-table{
|
|
width:100%;
|
|
border-collapse:collapse;
|
|
margin-bottom:30px;
|
|
}
|
|
|
|
.payment-table thead{
|
|
background:#1E3A5F;
|
|
color:white;
|
|
}
|
|
|
|
.payment-table th,
|
|
.payment-table td{
|
|
padding:16px;
|
|
text-align:left;
|
|
}
|
|
|
|
.payment-table tbody tr{
|
|
border-bottom:1px solid #e2e8f0;
|
|
}
|
|
|
|
.payment-table tbody tr:last-child{
|
|
border-bottom:none;
|
|
}
|
|
|
|
.text-right{
|
|
text-align:right;
|
|
}
|
|
|
|
/* TOTAL */
|
|
.total-section{
|
|
margin-left:auto;
|
|
width:320px;
|
|
background:#f8fafc;
|
|
border-radius:18px;
|
|
padding:24px;
|
|
border:1px solid #e2e8f0;
|
|
}
|
|
|
|
.total-row{
|
|
display:flex;
|
|
justify-content:space-between;
|
|
margin-bottom:14px;
|
|
color:#475569;
|
|
}
|
|
|
|
.grand-total{
|
|
border-top:2px dashed #cbd5e1;
|
|
margin-top:16px;
|
|
padding-top:16px;
|
|
font-size:1.3rem;
|
|
font-weight:800;
|
|
color:#1E3A5F;
|
|
}
|
|
|
|
/* CSS POP UP */
|
|
.image-modal{
|
|
display:none;
|
|
position:fixed;
|
|
z-index:9999;
|
|
left:0;
|
|
top:0;
|
|
width:100%;
|
|
height:100%;
|
|
background:rgba(0,0,0,.9);
|
|
|
|
justify-content:center;
|
|
align-items:center;
|
|
}
|
|
|
|
.modal-image{
|
|
max-width:90%;
|
|
max-height:90%;
|
|
border-radius:12px;
|
|
}
|
|
|
|
.close-modal{
|
|
position:absolute;
|
|
top:20px;
|
|
right:35px;
|
|
color:white;
|
|
font-size:40px;
|
|
cursor:pointer;
|
|
font-weight:bold;
|
|
}
|
|
|
|
.close-modal:hover{
|
|
opacity:.7;
|
|
}
|
|
|
|
/* FOOTER */
|
|
.invoice-footer{
|
|
margin-top:40px;
|
|
padding-top:30px;
|
|
border-top:1px solid #e2e8f0;
|
|
display:flex;
|
|
justify-content:space-between;
|
|
gap:20px;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
.footer-note{
|
|
color:#64748b;
|
|
line-height:1.7;
|
|
max-width:500px;
|
|
}
|
|
|
|
.action-buttons{
|
|
display:flex;
|
|
gap:14px;
|
|
flex-wrap:wrap;
|
|
}
|
|
|
|
.btn{
|
|
padding:14px 22px;
|
|
border:none;
|
|
border-radius:14px;
|
|
text-decoration:none;
|
|
font-weight:600;
|
|
cursor:pointer;
|
|
transition:0.3s ease;
|
|
display:flex;
|
|
align-items:center;
|
|
gap:10px;
|
|
}
|
|
|
|
.btn-primary{
|
|
background:#1E3A5F;
|
|
color:white;
|
|
}
|
|
|
|
.btn-primary:hover{
|
|
background:#284f80;
|
|
}
|
|
|
|
.btn-outline{
|
|
background:white;
|
|
border:1px solid #cbd5e1;
|
|
color:#334155;
|
|
}
|
|
|
|
.btn-outline:hover{
|
|
background:#f8fafc;
|
|
}
|
|
|
|
.alert-success{
|
|
background:#dcfce7;
|
|
color:#166534;
|
|
padding:15px;
|
|
border-radius:12px;
|
|
margin-bottom:20px;
|
|
border:1px solid #86efac;
|
|
}
|
|
|
|
/* =====================================
|
|
UPLOAD BUKTI PEMBAYARAN
|
|
===================================== */
|
|
|
|
.upload-section{
|
|
margin-top:35px;
|
|
background:linear-gradient(
|
|
135deg,
|
|
#f8fbfd 0%,
|
|
#eef6fa 100%
|
|
);
|
|
border:1px solid #dbeafe;
|
|
border-radius:20px;
|
|
padding:28px;
|
|
box-shadow:0 8px 25px rgba(122,178,211,0.12);
|
|
}
|
|
|
|
.upload-section h3{
|
|
color:#1E3A5F;
|
|
font-size:1.25rem;
|
|
font-weight:700;
|
|
margin-bottom:20px;
|
|
display:flex;
|
|
align-items:center;
|
|
gap:10px;
|
|
}
|
|
|
|
.upload-section h3::before{
|
|
content:"📤";
|
|
font-size:1.2rem;
|
|
}
|
|
|
|
.upload-section form{
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:18px;
|
|
}
|
|
|
|
.upload-section input[type="file"]{
|
|
width:100%;
|
|
padding:14px;
|
|
border:2px dashed #7AB2D3;
|
|
border-radius:16px;
|
|
background:white;
|
|
cursor:pointer;
|
|
transition:0.3s ease;
|
|
color:#475569;
|
|
font-size:0.95rem;
|
|
}
|
|
|
|
.upload-section input[type="file"]:hover{
|
|
border-color:#1E3A5F;
|
|
background:#f8fafc;
|
|
}
|
|
|
|
.upload-section input[type="file"]::file-selector-button{
|
|
background:#1E3A5F;
|
|
color:white;
|
|
border:none;
|
|
padding:10px 16px;
|
|
border-radius:10px;
|
|
margin-right:15px;
|
|
cursor:pointer;
|
|
font-weight:600;
|
|
transition:.3s;
|
|
}
|
|
|
|
.upload-section input[type="file"]::file-selector-button:hover{
|
|
background:#284f80;
|
|
}
|
|
|
|
.upload-section .btn{
|
|
width:fit-content;
|
|
min-width:180px;
|
|
}
|
|
|
|
/* =====================================
|
|
PREVIEW BUKTI PEMBAYARAN
|
|
===================================== */
|
|
|
|
.property-card img{
|
|
max-width:100%;
|
|
width:350px;
|
|
border-radius:16px;
|
|
border:1px solid #e2e8f0;
|
|
box-shadow:0 10px 25px rgba(0,0,0,0.08);
|
|
transition:.3s ease;
|
|
}
|
|
|
|
.property-card img:hover{
|
|
transform:scale(1.02);
|
|
}
|
|
|
|
/* =====================================
|
|
STATUS BADGE
|
|
===================================== */
|
|
|
|
.status-waiting{
|
|
display:inline-block;
|
|
background:#f59e0b;
|
|
color:white;
|
|
padding:8px 18px;
|
|
border-radius:999px;
|
|
font-size:.9rem;
|
|
font-weight:600;
|
|
}
|
|
|
|
.status-verification{
|
|
display:inline-block;
|
|
background:#3b82f6;
|
|
color:white;
|
|
padding:8px 18px;
|
|
border-radius:999px;
|
|
font-size:.9rem;
|
|
font-weight:600;
|
|
}
|
|
|
|
@media(max-width:768px){
|
|
|
|
body{
|
|
padding:20px 10px;
|
|
}
|
|
|
|
.invoice-header,
|
|
.invoice-body{
|
|
padding:24px;
|
|
}
|
|
|
|
.property-grid{
|
|
grid-template-columns:1fr;
|
|
}
|
|
|
|
.invoice-badge{
|
|
text-align:left;
|
|
}
|
|
|
|
.total-section{
|
|
width:100%;
|
|
}
|
|
|
|
.invoice-footer{
|
|
flex-direction:column;
|
|
}
|
|
}
|
|
|
|
@media print{
|
|
|
|
body{
|
|
margin:0;
|
|
padding:0;
|
|
background:white;
|
|
}
|
|
|
|
.invoice-container{
|
|
width:100%;
|
|
max-width:100%;
|
|
margin:0;
|
|
box-shadow:none;
|
|
border-radius:0;
|
|
}
|
|
|
|
.action-buttons,
|
|
.upload-section,
|
|
.rekening-transfer,
|
|
.alert-success{
|
|
display:none !important;
|
|
}
|
|
|
|
.property-card{
|
|
margin-top:10px;
|
|
margin-bottom:10px;
|
|
padding:10px;
|
|
}
|
|
|
|
.info-card{
|
|
margin-bottom:8px;
|
|
padding:10px;
|
|
}
|
|
|
|
.invoice-body{
|
|
padding:15px;
|
|
}
|
|
|
|
.invoice-header{
|
|
padding:15px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="invoice-container">
|
|
|
|
<!-- HEADER -->
|
|
<div class="invoice-header">
|
|
|
|
<div class="company-info">
|
|
|
|
<div class="logo">
|
|
<i class="fas fa-home"></i>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="company-name">PT. Carani Bhanu Balakosa</div>
|
|
|
|
<div class="company-detail">
|
|
Jl. Raya Pakisan, Bunduh, Bataan, Kec. Tenggarang, Kabupaten Bondowoso, Jawa Timur <br>
|
|
caranibhanubalakosa@gmail.com <br>
|
|
085755649471
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="invoice-badge">
|
|
<div class="invoice-title">INVOICE</div>
|
|
|
|
<div style="margin-bottom:10px; opacity:0.9;">
|
|
INV-{{ $transaksi->id_transaksi }}
|
|
</div>
|
|
|
|
@if(!$transaksi->bukti_transaksi)
|
|
|
|
<div class="status-waiting">
|
|
<i class="fas fa-clock"></i>
|
|
Menunggu Pembayaran
|
|
</div>
|
|
|
|
@elseif($transaksi->status_transaksi == 'menunggu_verifikasi')
|
|
|
|
<div class="status-verification">
|
|
<i class="fas fa-search"></i>
|
|
Menunggu Verifikasi
|
|
</div>
|
|
|
|
@elseif($transaksi->status_transaksi == 'berhasil')
|
|
|
|
<div class="status-paid">
|
|
<i class="fas fa-circle-check"></i>
|
|
Lunas
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- BODY -->
|
|
<div class="invoice-body">
|
|
|
|
<!-- TOP INFO -->
|
|
<div class="top-info">
|
|
|
|
<div class="info-card">
|
|
<div class="info-title">Data Pembeli</div>
|
|
|
|
<div class="info-item">
|
|
<span class="info-label">Nama:</span>
|
|
{{ $transaksi->user->nama_user }}
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
<span class="info-label">Email:</span>
|
|
{{ $transaksi->user->email_user }}
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
<span class="info-label">Tanggal:</span>
|
|
{{ \Carbon\Carbon::parse($transaksi->created_at)->translatedFormat('d F Y') }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-card">
|
|
<div class="info-title">
|
|
Informasi Pembayaran
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
<span class="info-label">Status</span>
|
|
|
|
<span class="status-tag status-wait">
|
|
Menunggu Pembayaran
|
|
</span>
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
<span class="info-label">Jenis Transaksi</span>
|
|
|
|
{{ ucfirst($transaksi->jenis_transaksi) }}
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
<span class="info-label">
|
|
Upload Bukti Sebelum
|
|
</span>
|
|
|
|
{{ \Carbon\Carbon::parse($transaksi->created_at)
|
|
->addDays(1)
|
|
->translatedFormat('d F Y') }}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-card rekening-transfer">
|
|
<div class="info-title">
|
|
Informasi Transfer Pembayaran
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
<strong>Bank Tujuan</strong>
|
|
<div class="rekening-bank">
|
|
BCA
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
<strong>Nomor Rekening</strong>
|
|
|
|
<div class="rekening-box">
|
|
|
|
<span id="nomorRekening">
|
|
1234567890
|
|
</span>
|
|
|
|
<button
|
|
type="button"
|
|
class="copy-btn"
|
|
onclick="copyRekening()">
|
|
|
|
<i class="fas fa-copy"></i>
|
|
Salin
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
<strong>Atas Nama</strong>
|
|
|
|
<div class="rekening-bank">
|
|
PT Carani Bhanu Balakosa
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- PROPERTY -->
|
|
<div class="property-card">
|
|
|
|
<div class="section-title">
|
|
Detail Properti
|
|
</div>
|
|
|
|
<div class="property-grid">
|
|
<img
|
|
src="{{ $transaksi->properti->gambar->first()
|
|
? asset('storage/images/' . $transaksi->properti->gambar->first()->path_gambar)
|
|
: asset('images/placeholder-properti.png')
|
|
}}"
|
|
class="property-image"
|
|
alt="{{ $transaksi->properti->nama_properti }}">
|
|
|
|
<div>
|
|
|
|
<div class="property-name">
|
|
{{ $transaksi->properti->nama_properti }}
|
|
</div>
|
|
|
|
<div class="property-detail">
|
|
<strong>Perumahan:</strong>
|
|
{{ $transaksi->properti->perumahan->nama_perumahan ?? '-' }}
|
|
</div>
|
|
|
|
<div class="property-detail">
|
|
<strong>Blok:</strong>
|
|
{{ $transaksi->properti->blok->nama_blok ?? '-' }}
|
|
</div>
|
|
|
|
<div class="property-detail">
|
|
<strong>Status Unit:</strong>
|
|
{{ ucfirst($transaksi->properti->status_unit) }}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- TABLE -->
|
|
<div class="section-title">
|
|
Rincian Pembayaran
|
|
</div>
|
|
|
|
<table class="payment-table">
|
|
|
|
<thead>
|
|
<tr>
|
|
<th>Deskripsi</th>
|
|
<th>Jumlah</th>
|
|
<th class="text-right">Total</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>Pembayaran Properti</td>
|
|
<td>1</td>
|
|
<td class="text-right">
|
|
Rp {{ number_format($transaksi->total_harga, 0, ',', '.') }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
<!-- TOTAL -->
|
|
<div class="total-section">
|
|
|
|
<div class="total-row">
|
|
<span>Subtotal</span>
|
|
<span>
|
|
Rp {{ number_format($transaksi->total_harga, 0, ',', '.') }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="total-row">
|
|
<span>Biaya Admin</span>
|
|
<span>Rp 0</span>
|
|
</div>
|
|
|
|
<div class="total-row grand-total">
|
|
<span>Total</span>
|
|
<span>
|
|
Rp {{ number_format($transaksi->total_harga, 0, ',', '.') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
@if(!$transaksi->bukti_transaksi)
|
|
|
|
<div class="upload-section">
|
|
|
|
<h3>Upload Bukti Pembayaran</h3>
|
|
|
|
<form
|
|
action="{{ route('user.upload.bukti') }}"
|
|
method="POST"
|
|
enctype="multipart/form-data">
|
|
|
|
@csrf
|
|
|
|
<input
|
|
type="hidden"
|
|
name="id_transaksi"
|
|
value="{{ $transaksi->id_transaksi }}">
|
|
|
|
<input
|
|
type="file"
|
|
name="bukti_pembayaran"
|
|
required>
|
|
|
|
<button
|
|
type="submit"
|
|
class="btn btn-primary">
|
|
|
|
Upload Bukti
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
@endif
|
|
|
|
@if($transaksi->bukti_pembayaran)
|
|
<div class="property-card">
|
|
|
|
<div style="
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
margin-bottom:15px;
|
|
">
|
|
|
|
<div class="section-title" style="margin:0;">
|
|
Bukti Pembayaran
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onclick="openImageModal('{{ asset('storage/'.$transaksi->bukti_pembayaran) }}')"
|
|
style="
|
|
border:none;
|
|
background:#2563eb;
|
|
color:white;
|
|
width:40px;
|
|
height:40px;
|
|
border-radius:50%;
|
|
cursor:pointer;
|
|
">
|
|
|
|
<i class="fas fa-eye"></i>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<img
|
|
src="{{ asset('storage/'.$transaksi->bukti_pembayaran) }}"
|
|
style="
|
|
max-width:300px;
|
|
border-radius:12px;
|
|
">
|
|
</div>
|
|
@endif
|
|
|
|
<div id="previewContainer" style="display:none; margin-top:15px;">
|
|
|
|
<div style="
|
|
display:flex;
|
|
justify-content:space-between;
|
|
align-items:center;
|
|
margin-bottom:10px;
|
|
">
|
|
|
|
<strong>Preview Bukti Pembayaran</strong>
|
|
|
|
<button
|
|
type="button"
|
|
onclick="openImageModal()"
|
|
class="btn btn-primary">
|
|
|
|
<i class="fas fa-eye"></i>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<img
|
|
id="previewImage"
|
|
style="
|
|
max-width:300px;
|
|
border-radius:12px;
|
|
border:1px solid #ddd;
|
|
">
|
|
|
|
</div>
|
|
<div class="action-buttons">
|
|
|
|
<a href="{{ route('halaman-notifikasi') }}"
|
|
class="btn btn-outline">
|
|
<i class="fas fa-arrow-left"></i>
|
|
Kembali
|
|
</a>
|
|
|
|
</div>
|
|
<!-- FOOTER -->
|
|
<div class="invoice-footer">
|
|
|
|
<div class="footer-note">
|
|
Terima kasih telah melakukan pembayaran di Carani Estate.
|
|
Invoice ini dibuat otomatis oleh sistem setelah pembayaran
|
|
berhasil diverifikasi oleh admin.
|
|
</div>
|
|
|
|
@if($transaksi->status_transaksi == 'berhasil')
|
|
<div class="action-buttons">
|
|
<!--
|
|
<button onclick="window.print()" class="btn btn-outline">
|
|
<i class="fas fa-print"></i>
|
|
Cetak Invoice
|
|
</button> -->
|
|
|
|
<a
|
|
href="{{ route('invoice.pdf', $transaksi->id_transaksi) }}"
|
|
class="btn btn-primary">
|
|
|
|
<i class="fas fa-download"></i>
|
|
Download PDF
|
|
</a>
|
|
|
|
</div>
|
|
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@if(session('success'))
|
|
<div class="alert-success">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
|
|
<script>
|
|
let currentPreview = '';
|
|
|
|
document.querySelector(
|
|
'input[name="bukti_pembayaran"]'
|
|
).addEventListener('change', function(e){
|
|
|
|
const file = e.target.files[0];
|
|
|
|
if(!file) return;
|
|
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = function(event){
|
|
|
|
currentPreview = event.target.result;
|
|
|
|
document.getElementById('previewImage').src =
|
|
currentPreview;
|
|
|
|
document.getElementById('previewContainer').style.display =
|
|
'block';
|
|
};
|
|
|
|
reader.readAsDataURL(file);
|
|
});
|
|
|
|
function openImageModal(){
|
|
|
|
document.getElementById('modalImage').src =
|
|
currentPreview;
|
|
|
|
document.getElementById('imageModal').style.display =
|
|
'flex';
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
// SALIN REKENING
|
|
function copyRekening(){
|
|
|
|
const rekening =
|
|
document.getElementById(
|
|
'nomorRekening'
|
|
).innerText;
|
|
|
|
navigator.clipboard.writeText(rekening);
|
|
|
|
alert('Nomor rekening berhasil disalin');
|
|
}
|
|
</script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
@if(session('success'))
|
|
<script>
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Berhasil',
|
|
text: '{{ session('success') }}',
|
|
confirmButtonColor: '#1E3A5F'
|
|
});
|
|
</script>
|
|
@endif
|
|
|
|
<!-- Modal Preview Gambar -->
|
|
<div
|
|
id="imageModal"
|
|
style="
|
|
display:none;
|
|
position:fixed;
|
|
inset:0;
|
|
background:rgba(0,0,0,.8);
|
|
justify-content:center;
|
|
align-items:center;
|
|
z-index:9999;
|
|
">
|
|
|
|
<span
|
|
onclick="document.getElementById('imageModal').style.display='none'"
|
|
style="
|
|
position:absolute;
|
|
top:20px;
|
|
right:30px;
|
|
color:white;
|
|
font-size:35px;
|
|
cursor:pointer;
|
|
">
|
|
×
|
|
</span>
|
|
|
|
<img
|
|
id="modalImage"
|
|
style="
|
|
max-width:90%;
|
|
max-height:90%;
|
|
border-radius:12px;
|
|
">
|
|
</div>
|
|
</body>
|
|
</html>
|
|
```
|