542 lines
16 KiB
PHP
542 lines
16 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Struk Transaksi</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
|
|
|
|
:root {
|
|
--color-A: #EBF1F5;
|
|
--color-B: #AFE5FF;
|
|
--color-C: #77C7EE;
|
|
--color-D: #024768;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: "PT Serif", serif;
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
color: var(--color-D);
|
|
background-color: white;
|
|
width: 1224px;
|
|
height: 528px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header-yellow {
|
|
background-color: #EAB308;
|
|
height: 32px;
|
|
width: 100%;
|
|
}
|
|
|
|
.header-dark {
|
|
background-color: var(--color-D);
|
|
height: 24px;
|
|
width: 100%;
|
|
}
|
|
|
|
.main-content {
|
|
padding: 24px;
|
|
font-size: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.top-section {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
padding-bottom: 4px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.contact-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-top: -20px;
|
|
}
|
|
|
|
.contact-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.contact-item i {
|
|
width: 20px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.instagram { color: #E4405F; }
|
|
.tiktok { color: #000000; }
|
|
.whatsapp { color: #25D366; }
|
|
|
|
.logo-container {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: -48px;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
height: 160px;
|
|
width: 100px;
|
|
background: #ccc;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #666;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.customer-info {
|
|
display: grid;
|
|
grid-template-columns: 130px 1fr;
|
|
gap: 0;
|
|
font-size: 12px;
|
|
align-items: center;
|
|
margin-top: -20px;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.customer-info .label {
|
|
text-align: right;
|
|
font-weight: 600;
|
|
padding-right: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.customer-info .value {
|
|
margin-top: 4px;
|
|
text-align: left;
|
|
padding-left: 8px;
|
|
height: 28px;
|
|
border-radius: 4px;
|
|
background-color: #DBEAFE;
|
|
padding: 4px 8px;
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.bank-logos {
|
|
display: flex;
|
|
margin-bottom: 4px;
|
|
gap: 179px;
|
|
}
|
|
|
|
.bank-group {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
|
|
.bank-logo {
|
|
height: 20px;
|
|
width: 40px;
|
|
background: #ccc;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
color: #666;
|
|
}
|
|
|
|
.items-table {
|
|
width: 100%;
|
|
border: 1px solid var(--color-D);
|
|
font-size: 14px;
|
|
table-layout: fixed;
|
|
border-bottom: 1px solid var(--color-D);
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.items-table th,
|
|
.items-table td {
|
|
border: 1px solid var(--color-D);
|
|
padding: 8px 4px;
|
|
}
|
|
|
|
.items-table th {
|
|
font-size: 18px;
|
|
border-bottom: 1px solid var(--color-D);
|
|
border-top: 1px solid var(--color-D);
|
|
text-align: center;
|
|
}
|
|
|
|
.items-table .col-qty { width: 40px; }
|
|
.items-table .col-item { width: 360px; }
|
|
.items-table .col-position { width: 70px; }
|
|
.items-table .col-weight { width: 40px; }
|
|
.items-table .col-purity { width: 40px; }
|
|
.items-table .col-price { width: 240px; }
|
|
|
|
.item-row {
|
|
text-align: center;
|
|
}
|
|
|
|
.item-detail {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px;
|
|
text-align: left;
|
|
}
|
|
|
|
.item-image {
|
|
width: 48px;
|
|
height: 48px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.item-placeholder {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: #f0f0f0;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.bottom-section {
|
|
display: flex;
|
|
font-size: 14px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.attention-section {
|
|
width: 40%;
|
|
padding: 8px;
|
|
text-align: left;
|
|
}
|
|
|
|
.attention-title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.attention-list {
|
|
margin-left: 16px;
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.attention-list li {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.attention-list .highlight {
|
|
color: #EF4444;
|
|
}
|
|
|
|
.sales-section {
|
|
width: 20%;
|
|
padding: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sales-name {
|
|
margin-top: 64px;
|
|
font-size: 14px;
|
|
border-radius: 4px;
|
|
background-color: var(--color-B);
|
|
width: 160px;
|
|
text-align: center;
|
|
padding: 4px;
|
|
}
|
|
|
|
.total-section {
|
|
margin-left: auto;
|
|
width: 25%;
|
|
padding: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.cost-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.cost-label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.cost-title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.cost-subtitle {
|
|
color: #EF4444;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.cost-value {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 160px;
|
|
}
|
|
|
|
.cost-input {
|
|
height: 28px;
|
|
padding: 0 8px;
|
|
font-size: 14px;
|
|
border-radius: 4px;
|
|
background-color: #DBEAFE;
|
|
text-align: left;
|
|
width: 100%;
|
|
border: none;
|
|
}
|
|
|
|
.total-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: -16px;
|
|
}
|
|
|
|
.total-title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.total-value {
|
|
padding: 4px 12px 4px 8px;
|
|
text-align: left;
|
|
font-size: 14px;
|
|
width: 100%;
|
|
}
|
|
|
|
.footer-text {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
text-align: left;
|
|
font-size: 12px;
|
|
background-color: var(--color-D);
|
|
color: white;
|
|
padding: 32px;
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.transaction-code {
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header-yellow">
|
|
<div class="header-dark"></div>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<div class="top-section">
|
|
<div class="contact-info">
|
|
<p class="contact-item">
|
|
<i class="fab fa-instagram instagram"></i>
|
|
tokomas_Jakartacitayam
|
|
</p>
|
|
<p class="contact-item">
|
|
<i class="fab fa-tiktok tiktok"></i>
|
|
tokomas_Jakartacitayam
|
|
</p>
|
|
<p class="contact-item">
|
|
<i class="fab fa-whatsapp whatsapp"></i>
|
|
08158851178
|
|
</p>
|
|
<p class="transaction-code">{{ $kode_transaksi ?? 'N/A' }}</p>
|
|
</div>
|
|
|
|
<div class="logo-container">
|
|
<div class="logo">LOGO</div>
|
|
</div>
|
|
|
|
<div class="customer-info">
|
|
<div class="label">Tanggal :</div>
|
|
<div class="value">
|
|
@if(isset($created_at))
|
|
@php
|
|
$date = \Carbon\Carbon::parse($created_at);
|
|
$days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
|
|
$dayName = $days[$date->dayOfWeek];
|
|
$formattedDate = $dayName . '/' . $date->format('d-m-Y');
|
|
@endphp
|
|
{{ $formattedDate }}
|
|
@else
|
|
N/A
|
|
@endif
|
|
</div>
|
|
|
|
<div class="label">Nama :</div>
|
|
<div class="value">{{ $nama_pembeli ?? 'N/A' }}</div>
|
|
|
|
<div class="label">Alamat :</div>
|
|
<div class="value">{{ $alamat ?? 'N/A' }}</div>
|
|
|
|
<div class="label">No.Hp :</div>
|
|
<div class="value">{{ $no_hp ?? 'N/A' }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bank-logos">
|
|
<div class="bank-group">
|
|
<div class="bank-logo">BCA</div>
|
|
<div class="bank-logo">BRI</div>
|
|
<div class="bank-logo">BNI</div>
|
|
</div>
|
|
<div class="bank-group">
|
|
<div class="bank-logo">MC</div>
|
|
<div class="bank-logo">VISA</div>
|
|
<div class="bank-logo">MANDIRI</div>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="items-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-qty">Jml</th>
|
|
<th class="col-item">Item</th>
|
|
<th class="col-position">Posisi</th>
|
|
<th class="col-weight">Berat</th>
|
|
<th class="col-purity">Kadar</th>
|
|
<th class="col-price">Harga</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@if(isset($item_transaksi) && count($item_transaksi) > 0)
|
|
@foreach($item_transaksi as $item)
|
|
<tr class="item-row">
|
|
<td>
|
|
@if(isset($item['harga_deal']) && $item['harga_deal'])
|
|
1
|
|
@endif
|
|
</td>
|
|
<td>
|
|
<div class="item-detail">
|
|
@if(isset($item['produk']['foto'][0]['url']))
|
|
<img src="{{ $item['produk']['foto'][0]['url'] }}" class="item-image" />
|
|
@else
|
|
<div class="item-placeholder"></div>
|
|
@endif
|
|
{{ $item['produk']['nama'] ?? '' }}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
@if(isset($item['produk']['nama']) && $item['produk']['nama'])
|
|
{{ $item['nampan']['nama'] ?? 'Brankas' }}
|
|
@endif
|
|
</td>
|
|
<td>
|
|
@if(isset($item['produk']['berat']) && $item['produk']['berat'])
|
|
{{ $item['produk']['berat'] }}g
|
|
@endif
|
|
</td>
|
|
<td>
|
|
@if(isset($item['produk']['kadar']) && $item['produk']['kadar'])
|
|
{{ $item['produk']['kadar'] }}k
|
|
@endif
|
|
</td>
|
|
<td>
|
|
@if(isset($item['harga_deal']) && $item['harga_deal'])
|
|
Rp{{ number_format($item['harga_deal'], 0, ',', '.') }}
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
@endif
|
|
|
|
{{-- Add empty rows to ensure minimum 2 rows --}}
|
|
@for($i = (isset($item_transaksi) ? count($item_transaksi) : 0); $i < 2; $i++)
|
|
<tr class="item-row">
|
|
<td></td>
|
|
<td>
|
|
<div class="item-detail">
|
|
<div class="item-placeholder"></div>
|
|
</div>
|
|
</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
@endfor
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Bottom Section -->
|
|
<div class="bottom-section">
|
|
<!-- PERHATIAN -->
|
|
<div class="attention-section">
|
|
<p class="attention-title">PERHATIAN</p>
|
|
<ol class="attention-list">
|
|
<li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li>
|
|
<li>Barang yang dikembalikan menurut harga pasaran dan dipotong ongkos bikin, barang rusak lain harga.</li>
|
|
<li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li>
|
|
<li class="highlight">Surat ini harap dibawa pada saat menjual kembali.</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<!-- SALES -->
|
|
<div class="sales-section">
|
|
<p><strong>Hormat Kami</strong></p>
|
|
<div class="sales-name">{{ $sales['nama'] ?? 'N/A' }}</div>
|
|
</div>
|
|
|
|
<!-- ONGKOS & TOTAL -->
|
|
<div class="total-section">
|
|
<div>
|
|
<!-- Ongkos bikin -->
|
|
<div class="cost-item">
|
|
<div class="cost-label">
|
|
<p class="cost-title">Ongkos bikin</p>
|
|
<p class="cost-subtitle">diluar harga jual</p>
|
|
</div>
|
|
<div class="cost-value">
|
|
<p>Rp</p>
|
|
<div class="cost-input">{{ number_format($ongkos_bikin ?? 0, 0, ',', '.') }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total -->
|
|
<div class="total-item">
|
|
<p class="total-title">Total Harga</p>
|
|
<div class="cost-value">
|
|
<p>Rp</p>
|
|
<p class="total-value">
|
|
{{ number_format($total_harga ?? 0, 0, ',', '.') }},-
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="footer-text">
|
|
Terima kasih sudah berbelanja dengan kami
|
|
</p>
|
|
</body>
|
|
</html> |