feat: extend rate card profiles with brands, terms, and custom HTML, and remove search bar from search index view
This commit is contained in:
I-Fun
@@ -6,137 +6,347 @@
|
||||
$ab = hexdec(substr($accent, 4, 2));
|
||||
$accentRgb = "{$ar},{$ag},{$ab}";
|
||||
|
||||
$bg = $profile->bg_color ?? '#FFFBFE';
|
||||
$text = $profile->text_color ?? '#374151';
|
||||
$bg = $profile->bg_color ?? '#FFFBFE';
|
||||
$text = $profile->text_color ?? '#374151';
|
||||
$accentHex = '#' . $accent;
|
||||
@endphp
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Rate Card — {{ $profile->owner_name }}</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'DejaVu Sans', sans-serif;
|
||||
background: {{ $bg }};
|
||||
color: {{ $text }};
|
||||
background:
|
||||
{{ $bg }}
|
||||
;
|
||||
color:
|
||||
{{ $text }}
|
||||
;
|
||||
padding: 36px 32px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
color: #D1D5DB;
|
||||
}
|
||||
|
||||
/* Quill WYSIWYG Compatibility */
|
||||
.ql-align-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.ql-align-right {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
.ql-align-justify {
|
||||
text-align: justify !important;
|
||||
}
|
||||
|
||||
.ql-size-small {
|
||||
font-size: 0.75em !important;
|
||||
}
|
||||
|
||||
.ql-size-large {
|
||||
font-size: 1.5em !important;
|
||||
}
|
||||
|
||||
.ql-size-huge {
|
||||
font-size: 2.5em !important;
|
||||
}
|
||||
|
||||
.contact-person-page,
|
||||
.terms-and-conditions-page {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px solid {{ $accentHex }};
|
||||
border-bottom: 2px solid
|
||||
{{ $accentHex }}
|
||||
;
|
||||
}
|
||||
.logo-img { max-height: 72px; max-width: 140px; margin: 0 auto 10px; display: block; }
|
||||
.name { font-size: 24px; font-weight: 700; color: {{ $accentHex }}; }
|
||||
.tagline { color: #9CA3AF; margin-top: 4px; font-size: 11px; }
|
||||
.contacts { margin-top: 10px; font-size: 10px; color: #6B7280; }
|
||||
.contacts span { margin: 0 6px; }
|
||||
.platform-section { margin-bottom: 22px; }
|
||||
|
||||
.logo-img {
|
||||
max-height: 72px;
|
||||
max-width: 140px;
|
||||
margin: 0 auto 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color:
|
||||
{{ $accentHex }}
|
||||
;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: #9CA3AF;
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.contacts {
|
||||
margin-top: 10px;
|
||||
font-size: 10px;
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
.contacts span {
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
.platform-section {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.platform-title {
|
||||
font-size: 13px; font-weight: 700;
|
||||
color: {{ $text }};
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color:
|
||||
{{ $text }}
|
||||
;
|
||||
margin-bottom: 8px;
|
||||
padding: 5px 10px;
|
||||
background-color: rgba({{ $accentRgb }}, 0.1);
|
||||
border-left: 4px solid {{ $accentHex }};
|
||||
border-left: 4px solid
|
||||
{{ $accentHex }}
|
||||
;
|
||||
}
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left; padding: 7px 10px;
|
||||
text-align: left;
|
||||
padding: 7px 10px;
|
||||
background-color: rgba({{ $accentRgb }}, 0.08);
|
||||
color: #6B7280; font-size: 9px;
|
||||
text-transform: uppercase; letter-spacing: 0.05em;
|
||||
color: #6B7280;
|
||||
font-size: 9px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
border-bottom: 1px solid rgba({{ $accentRgb }}, 0.25);
|
||||
}
|
||||
td { padding: 8px 10px; border-bottom: 1px solid #F3F4F6; vertical-align: top; }
|
||||
tr:last-child td { border-bottom: none; }
|
||||
.service-name { font-weight: 600; color: {{ $text }}; }
|
||||
.content-type {
|
||||
display: inline-block; font-size: 9px;
|
||||
background-color: rgba({{ $accentRgb }}, 0.1);
|
||||
color: {{ $accentHex }};
|
||||
padding: 1px 7px; border-radius: 10px; margin-top: 2px;
|
||||
|
||||
td {
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid #F3F4F6;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.service-name {
|
||||
font-weight: 600;
|
||||
color:
|
||||
{{ $text }}
|
||||
;
|
||||
}
|
||||
|
||||
.content-type {
|
||||
display: inline-block;
|
||||
font-size: 9px;
|
||||
background-color: rgba({{ $accentRgb }}, 0.1);
|
||||
color:
|
||||
{{ $accentHex }}
|
||||
;
|
||||
padding: 1px 7px;
|
||||
border-radius: 10px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
color: #9CA3AF;
|
||||
font-size: 10px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-weight: 700;
|
||||
color:
|
||||
{{ $accentHex }}
|
||||
;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.price-unit {
|
||||
color: #9CA3AF;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.negotiable {
|
||||
color: #F59E0B;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 36px;
|
||||
color: #D1D5DB;
|
||||
font-size: 9px;
|
||||
border-top: 1px solid #F3F4F6;
|
||||
padding-top: 14px;
|
||||
}
|
||||
.desc { color: #9CA3AF; font-size: 10px; margin-top: 3px; }
|
||||
.price { font-weight: 700; color: {{ $accentHex }}; font-size: 13px; }
|
||||
.price-unit { color: #9CA3AF; font-size: 9px; }
|
||||
.negotiable { color: #F59E0B; font-size: 9px; font-weight: 600; }
|
||||
.footer { text-align: center; margin-top: 36px; color: #D1D5DB; font-size: 9px; border-top: 1px solid #F3F4F6; padding-top: 14px; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
@if($profile->logo_path && file_exists(storage_path('app/private/' . $profile->logo_path)))
|
||||
<img src="{{ storage_path('app/private/' . $profile->logo_path) }}" class="logo-img" alt="{{ $profile->owner_name }}">
|
||||
@endif
|
||||
<div class="name">{{ $profile->owner_name }}</div>
|
||||
@if($profile->tagline)
|
||||
<div class="tagline">{{ $profile->tagline }}</div>
|
||||
@endif
|
||||
<div class="contacts">
|
||||
@if($profile->email)<span>✉ {{ $profile->email }}</span>@endif
|
||||
@if($profile->whatsapp)<span>· {{ $profile->whatsapp }}</span>@endif
|
||||
@if($profile->ig_handle)<span>· @{{ $profile->ig_handle }}</span>@endif
|
||||
@if($profile->tiktok_handle)<span>· @{{ $profile->tiktok_handle }}</span>@endif
|
||||
@if($profile->youtube_handle)<span>· {{ $profile->youtube_handle }}</span>@endif
|
||||
<div class="header">
|
||||
@if($profile->logo_path && file_exists(storage_path('app/private/' . $profile->logo_path)))
|
||||
<img src="{{ storage_path('app/private/' . $profile->logo_path) }}" class="logo-img"
|
||||
alt="{{ $profile->owner_name }}">
|
||||
@endif
|
||||
<div class="name">{{ $profile->owner_name }}</div>
|
||||
@if($profile->tagline)
|
||||
<div class="tagline">{{ $profile->tagline }}</div>
|
||||
@endif
|
||||
<div class="contacts">
|
||||
@if($profile->ig_handle)<span>· {{ '@' . ltrim($profile->ig_handle, '@') }}</span>@endif
|
||||
@if($profile->tiktok_handle)<span>· {{ '@' . ltrim($profile->tiktok_handle, '@') }}</span>@endif
|
||||
@if($profile->youtube_handle)<span>· {{ $profile->youtube_handle }}</span>@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@foreach($rateCards as $platform => $cards)
|
||||
<div class="platform-section">
|
||||
<div class="platform-title">
|
||||
@php $icons = ['instagram' => 'Instagram', 'tiktok' => 'TikTok', 'youtube' => 'YouTube', 'general' => 'General']; @endphp
|
||||
{{ $icons[$platform] ?? ucfirst($platform) }}
|
||||
@foreach($rateCards as $platform => $cards)
|
||||
<div class="platform-section">
|
||||
<div class="platform-title">
|
||||
@php $icons = ['instagram' => 'Instagram', 'tiktok' => 'TikTok', 'youtube' => 'YouTube', 'general' => 'General']; @endphp
|
||||
{{ $icons[$platform] ?? ucfirst($platform) }}
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:38%">Service</th>
|
||||
<th style="width:37%">Description</th>
|
||||
<th style="width:25%; text-align:right">Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($cards as $card)
|
||||
<tr>
|
||||
<td>
|
||||
<div class="service-name">{{ $card->service_name }}</div>
|
||||
@if($card->content_type)
|
||||
<span class="content-type">{{ $card->content_type }}</span>
|
||||
@endif
|
||||
</td>
|
||||
<td>
|
||||
@if($card->description)
|
||||
<div class="desc">{{ $card->description }}</div>
|
||||
@endif
|
||||
</td>
|
||||
<td style="text-align:right">
|
||||
@if($profile->show_prices)
|
||||
<div class="price">{{ $card->formatted_price }}</div>
|
||||
<div class="price-unit">{{ str_replace('_', ' ', $card->price_unit) }}</div>
|
||||
@else
|
||||
<div class="price" style="font-size:11px">On Request</div>
|
||||
@endif
|
||||
@if($card->is_negotiable)
|
||||
<div class="negotiable">Negotiable</div>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
@if(!empty($profile->past_brands))
|
||||
@php
|
||||
$logoSizesPdf = [
|
||||
'small' => 'max-height:30px; max-width:60px;',
|
||||
'medium' => 'max-height:45px; max-width:90px;',
|
||||
'large' => 'max-height:65px; max-width:130px;',
|
||||
];
|
||||
$sizeStylePdf = $logoSizesPdf[$profile->brand_logo_size ?? 'medium'] ?? $logoSizesPdf['medium'];
|
||||
@endphp
|
||||
<div style="page-break-before: always;"></div>
|
||||
<div class="platform-section" style="margin-top:20px; page-break-inside:avoid;">
|
||||
<div class="platform-title" style="text-align:center;">Brand Collaborations</div>
|
||||
<div style="text-align:center; padding-top:10px;">
|
||||
@foreach($profile->past_brands as $brandPath)
|
||||
@if(file_exists(storage_path('app/public/' . $brandPath)))
|
||||
<img src="{{ storage_path('app/public/' . $brandPath) }}"
|
||||
style="{{ $sizeStylePdf }} object-fit:contain; margin:0 10px; display:inline-block; vertical-align:middle;">
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($profile->terms_and_conditions)
|
||||
<div style="page-break-before: always;"></div>
|
||||
<div class="platform-section" style="margin-top:20px; page-break-inside:avoid;">
|
||||
<div class="platform-title">Terms & Conditions</div>
|
||||
<div style="font-size:10px; color:#6B7280; line-height:1.5; padding:0 10px;">
|
||||
{!! $profile->terms_and_conditions !!}</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div style="page-break-before: always;"></div>
|
||||
@if($profile->contact_person_html)
|
||||
<div class="contact-person-page">
|
||||
{!! $profile->contact_person_html !!}
|
||||
</div>
|
||||
@else
|
||||
<div style="text-align: center; margin-top: 40px;">
|
||||
<h1
|
||||
style="font-family: 'Comic Sans MS', sans-serif; font-size: 32px; font-weight: 900; letter-spacing: 4px; color: #111827; margin-bottom: 30px; text-transform: uppercase;">
|
||||
CONTACT PERSON</h1>
|
||||
@if($profile->whatsapp)
|
||||
<div
|
||||
style="font-family: 'Comic Sans MS', sans-serif; font-size: 36px; font-weight: 900; color: #14b8a6; margin-bottom: 5px;">
|
||||
{{ $profile->whatsapp }}</div>
|
||||
<div
|
||||
style="font-family: 'Comic Sans MS', sans-serif; font-size: 20px; font-weight: 800; color: #14b8a6; margin-bottom: 30px; letter-spacing: 2px;">
|
||||
(WHATS APP)</div>
|
||||
@endif
|
||||
|
||||
@if($profile->email)
|
||||
<div
|
||||
style="font-family: 'Comic Sans MS', sans-serif; font-size: 14px; font-weight: 800; color: #f97316; margin-bottom: 10px; letter-spacing: 2px;">
|
||||
EMAIL</div>
|
||||
<div
|
||||
style="font-family: 'Comic Sans MS', sans-serif; font-size: 32px; font-weight: 900; color: #ef4444; margin-bottom: 40px; letter-spacing: 2px;">
|
||||
{{ strtoupper($profile->email) }}</div>
|
||||
@endif
|
||||
<div
|
||||
style="font-size: 11px; font-weight: 900; color: #111827; line-height: 1.5; max-width: 80%; margin: 0 auto; text-transform: uppercase;">
|
||||
Kami tidak bertanggung jawab atas segala bentuk kerjasama yg timbul dengan pihak selain dari kontak diatas
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="footer">
|
||||
{{ $profile->custom_footer ?: 'Prices may vary. Contact for custom packages.' }}
|
||||
· Generated {{ now()->format('d M Y') }}
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:38%">Service</th>
|
||||
<th style="width:37%">Description</th>
|
||||
<th style="width:25%; text-align:right">Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($cards as $card)
|
||||
<tr>
|
||||
<td>
|
||||
<div class="service-name">{{ $card->service_name }}</div>
|
||||
@if($card->content_type)
|
||||
<span class="content-type">{{ $card->content_type }}</span>
|
||||
@endif
|
||||
</td>
|
||||
<td>
|
||||
@if($card->description)
|
||||
<div class="desc">{{ $card->description }}</div>
|
||||
@endif
|
||||
</td>
|
||||
<td style="text-align:right">
|
||||
@if($profile->show_prices)
|
||||
<div class="price">{{ $card->formatted_price }}</div>
|
||||
<div class="price-unit">{{ str_replace('_', ' ', $card->price_unit) }}</div>
|
||||
@else
|
||||
<div class="price" style="font-size:11px">On Request</div>
|
||||
@endif
|
||||
@if($card->is_negotiable)
|
||||
<div class="negotiable">Negotiable</div>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
<div class="footer">
|
||||
{{ $profile->custom_footer ?: 'Prices may vary. Contact for custom packages.' }}
|
||||
· Generated {{ now()->format('d M Y') }}
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user