568 lines
21 KiB
PHP
568 lines
21 KiB
PHP
@extends('layouts.vertical-individual', ['page_title' => $title ?? 'Synchrobreathe Report Card'])
|
|
|
|
@section('css')
|
|
<link href="{{ asset('assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap" rel="stylesheet" />
|
|
<style>
|
|
.sb-report-page {
|
|
padding: 12px 4px 32px;
|
|
}
|
|
|
|
.sb-report-page .form-label {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sb-report-page .form-control,
|
|
.sb-report-page .form-select {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.sb-preview {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.sb-sheet-slot {
|
|
margin: 0 auto 16px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.sb-sheet {
|
|
--sb-red: #ad2c31;
|
|
--sb-bar: #a3a3a0;
|
|
--sb-card: #cac9c4;
|
|
--sb-cell: #dadad5;
|
|
--sb-title: #6c6c69;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
color: #222;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: Poppins, Arial, sans-serif;
|
|
height: 1024.94pt;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 927.13pt;
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
.sb-swoosh {
|
|
border: 34pt solid rgba(243, 214, 216, 0.9);
|
|
border-bottom-color: transparent;
|
|
border-left-color: transparent;
|
|
border-radius: 50%;
|
|
height: 340pt;
|
|
left: -70pt;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 28pt;
|
|
transform: rotate(28deg);
|
|
width: 220pt;
|
|
z-index: 0;
|
|
}
|
|
|
|
.sb-bar {
|
|
background: var(--sb-bar);
|
|
flex: 0 0 16pt;
|
|
height: 16pt;
|
|
}
|
|
|
|
.sb-head {
|
|
align-items: flex-start;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
min-height: 62pt;
|
|
padding: 8pt 26pt 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sb-logo-brand {
|
|
height: 38pt;
|
|
margin-top: 4pt;
|
|
width: auto;
|
|
}
|
|
|
|
.sb-logo-cipla {
|
|
height: 18pt;
|
|
margin-top: 12pt;
|
|
width: auto;
|
|
}
|
|
|
|
.sb-badge {
|
|
background: var(--sb-red);
|
|
border-radius: 0 0 12pt 12pt;
|
|
color: #fff;
|
|
font-size: 20pt;
|
|
font-weight: 700;
|
|
left: 50%;
|
|
line-height: 1;
|
|
padding: 12pt 34pt 11pt;
|
|
position: absolute;
|
|
top: -16pt;
|
|
transform: translateX(-50%);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sb-title {
|
|
color: var(--sb-title);
|
|
font-size: 26pt;
|
|
font-weight: 600;
|
|
line-height: 1.15;
|
|
margin: 2pt 20pt 8pt;
|
|
position: relative;
|
|
text-align: center;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sb-panel {
|
|
background: var(--sb-card);
|
|
border-radius: 14pt;
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
margin: 0 18pt;
|
|
min-height: 0;
|
|
padding: 12pt 14pt 10pt;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sb-meta {
|
|
display: grid;
|
|
font-size: 13pt;
|
|
font-weight: 700;
|
|
gap: 2pt 16pt;
|
|
grid-template-columns: 1fr 1fr;
|
|
line-height: 1.25;
|
|
margin: 0 4pt 8pt;
|
|
}
|
|
|
|
.sb-meta .right {
|
|
padding-right: 28pt;
|
|
text-align: right;
|
|
}
|
|
|
|
.sb-meta .val {
|
|
color: var(--sb-red);
|
|
}
|
|
|
|
.sb-table-wrap {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.sb-table {
|
|
background: var(--sb-cell);
|
|
border-collapse: collapse;
|
|
height: 100%;
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
}
|
|
|
|
.sb-table th,
|
|
.sb-table td {
|
|
border: 0.75pt solid #f7f7f5;
|
|
box-sizing: border-box;
|
|
font-weight: 600;
|
|
padding: 1pt 2pt;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.sb-table .name-head {
|
|
background: var(--sb-card);
|
|
border: none;
|
|
width: 24%;
|
|
}
|
|
|
|
.sb-table .banner {
|
|
background: var(--sb-red);
|
|
border: none;
|
|
color: #fff;
|
|
font-size: 11pt;
|
|
font-weight: 600;
|
|
height: 20pt;
|
|
}
|
|
|
|
.sb-table .month {
|
|
background: #e7e7e3;
|
|
color: #4d4d4d;
|
|
font-size: 8pt;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sb-table .metric {
|
|
background: #e3e3df;
|
|
color: var(--sb-red);
|
|
font-size: 7.5pt;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.sb-table td.name {
|
|
background: #e3e3df;
|
|
color: #1c1c1c;
|
|
font-size: 8pt;
|
|
overflow: hidden;
|
|
padding-left: 6pt;
|
|
text-align: left;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sb-table td.num {
|
|
background: var(--sb-cell);
|
|
color: #222;
|
|
font-size: 8pt;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sb-sign {
|
|
color: #3a3a3a;
|
|
font-size: 11pt;
|
|
font-weight: 500;
|
|
margin: 12pt 26pt 8pt;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sb-sign-row,
|
|
.sb-sign-pair > div {
|
|
align-items: flex-end;
|
|
display: flex;
|
|
margin-top: 7pt;
|
|
}
|
|
|
|
.sb-sign-pair {
|
|
display: grid;
|
|
gap: 22pt;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.sb-sign .fill {
|
|
border-bottom: 0.8pt solid #8d8d8d;
|
|
flex: 1 1 auto;
|
|
margin-left: 4pt;
|
|
min-height: 14pt;
|
|
padding: 0 4pt 1pt;
|
|
}
|
|
|
|
#sb-report-loader {
|
|
align-items: center;
|
|
background: rgba(255, 255, 255, 0.85);
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
height: 100%;
|
|
justify-content: center;
|
|
left: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 9999;
|
|
}
|
|
|
|
#sb-report-loader.is-visible {
|
|
display: flex;
|
|
}
|
|
|
|
.sb-is-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
#sb-another-btn {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
@media screen {
|
|
.sb-sheet-slot {
|
|
height: calc(var(--sb-scale, 1) * 1024.94pt);
|
|
overflow: hidden;
|
|
width: calc(var(--sb-scale, 1) * 927.13pt);
|
|
}
|
|
|
|
.sb-sheet {
|
|
transform: scale(var(--sb-scale, 1));
|
|
transform-origin: top left;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
@page {
|
|
margin: 0;
|
|
size: 927.13pt 1024.94pt;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
.account-pages,
|
|
.account-pages > .container,
|
|
.sb-report-page,
|
|
.sb-preview,
|
|
.sb-sheet-slot {
|
|
background: #fff !important;
|
|
height: auto !important;
|
|
margin: 0 !important;
|
|
max-width: none !important;
|
|
overflow: visible !important;
|
|
padding: 0 !important;
|
|
width: auto !important;
|
|
}
|
|
|
|
.sb-report-form,
|
|
.footer,
|
|
.no-print,
|
|
#sb-report-loader {
|
|
display: none !important;
|
|
}
|
|
|
|
.sb-sheet {
|
|
box-shadow: none;
|
|
margin: 0;
|
|
page-break-after: always;
|
|
transform: none !important;
|
|
}
|
|
|
|
.sb-sheet:last-child {
|
|
page-break-after: auto;
|
|
}
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div id="sb-report-loader" aria-live="polite" aria-busy="false">
|
|
<img src="/images/loader-large.gif" alt="" width="64" height="64">
|
|
<span class="text-muted">Generating report card...</span>
|
|
</div>
|
|
|
|
<div class="sb-report-page">
|
|
<form method="get" action="{{ $base_url }}/report" id="sb-report-form" class="sb-report-form card{{ !empty($report) ? ' sb-is-hidden' : '' }}">
|
|
<div class="card-body">
|
|
<h4 class="page-title">{{ $title }}</h4>
|
|
<p class="text-muted">Select a user (territory), then add the lines that appear on the report card.</p>
|
|
|
|
@if (!empty($reportError))
|
|
<div class="alert alert-danger" role="alert">{{ $reportError }}</div>
|
|
@endif
|
|
|
|
@if (!empty($token ?? ''))
|
|
<input type="hidden" name="token" value="{{ $token }}">
|
|
@endif
|
|
|
|
<div class="mb-3">
|
|
<label for="field-tm_id" class="form-label">User (territory)</label>
|
|
<select name="tm_id" id="field-tm_id" class="form-select" required>
|
|
<option value=""></option>
|
|
@foreach ($territories as $territory)
|
|
<option value="{{ $territory['id'] }}"@if(($tmId ?? '') === $territory['id']) selected @endif>{{ $territory['label'] }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="field-comment" class="form-label">Comment</label>
|
|
<textarea name="comment" id="field-comment" class="form-control" rows="3">{{ $comment ?? '' }}</textarea>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="field-rbm" class="form-label">RBM</label>
|
|
<input type="text" name="rbm" id="field-rbm" class="form-control" value="{{ $rbm ?? '' }}">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="field-zbm" class="form-label">ZBM</label>
|
|
<input type="text" name="zbm" id="field-zbm" class="form-control" value="{{ $zbm ?? '' }}">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="field-marketing" class="form-label">Marketing</label>
|
|
<input type="text" name="marketing" id="field-marketing" class="form-control" value="{{ $marketing ?? '' }}">
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary">Generate report card</button>
|
|
</div>
|
|
</form>
|
|
|
|
@if (!empty($report))
|
|
@php
|
|
$doctorCount = count($report['doctors']);
|
|
$blankRows = max(0, 19 - $doctorCount);
|
|
$monthCount = max(count($report['months']), 1);
|
|
@endphp
|
|
<div class="no-print text-end mb-2" id="sb-report-actions">
|
|
<button type="button" class="btn btn-outline-dark btn-sm" id="sb-another-btn">Generate another report</button>
|
|
<a class="btn btn-dark btn-sm" id="sb-download-btn" href="{{ $base_url }}/download?{{ http_build_query(array_filter(['token' => $token ?? '', 'tm_id' => $tmId ?? '', 'comment' => $comment ?? '', 'rbm' => $rbm ?? '', 'zbm' => $zbm ?? '', 'marketing' => $marketing ?? ''], function ($value) { return $value !== ''; })) }}">Download</a>
|
|
</div>
|
|
<div class="sb-preview" id="sb-report-card">
|
|
<div class="sb-sheet-slot">
|
|
<article class="sb-sheet">
|
|
<div class="sb-swoosh" aria-hidden="true"></div>
|
|
<div class="sb-bar"></div>
|
|
<header class="sb-head">
|
|
<img class="sb-logo-brand" src="{{ asset('images/reportcard/foracort-synchrobreathe.png') }}" alt="foracort synchrobreathe">
|
|
<div class="sb-badge">Report Card</div>
|
|
<img class="sb-logo-cipla" src="{{ asset('images/reportcard/cipla.png') }}" alt="Cipla">
|
|
</header>
|
|
<h1 class="sb-title">Upgradation of Respi Physician</h1>
|
|
<section class="sb-panel">
|
|
<div class="sb-meta">
|
|
<div>Name: <span class="val">{{ $report['tm']['name'] }}</span></div>
|
|
<div class="right">HQ: <span class="val">{{ $report['tm']['hq'] }}</span></div>
|
|
<div>ABM: <span class="val">{{ $report['tm']['abm'] }}</span></div>
|
|
<div class="right">Zone: <span class="val">{{ $report['tm']['zone'] }}</span></div>
|
|
</div>
|
|
<div class="sb-table-wrap">
|
|
<table class="sb-table">
|
|
<colgroup>
|
|
<col class="name-head">
|
|
@for ($i = 0; $i < $monthCount * 2; $i++)
|
|
<col>
|
|
@endfor
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th class="name-head" rowspan="3"></th>
|
|
<th class="banner" colspan="{{ $monthCount * 2 }}">Foracort Sync Productivity</th>
|
|
</tr>
|
|
<tr>
|
|
@forelse ($report['months'] as $month)
|
|
<th class="month" colspan="2">{{ $month['label'] }}</th>
|
|
@empty
|
|
<th class="month" colspan="2"></th>
|
|
@endforelse
|
|
</tr>
|
|
<tr>
|
|
@foreach ($report['months'] as $month)
|
|
<th class="metric">QTY</th>
|
|
<th class="metric">Value</th>
|
|
@endforeach
|
|
@if ($report['months'] === [])
|
|
<th class="metric">QTY</th>
|
|
<th class="metric">Value</th>
|
|
@endif
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($report['doctors'] as $doctor)
|
|
<tr>
|
|
<td class="name">{{ $doctor['name'] }}</td>
|
|
@foreach ($report['months'] as $month)
|
|
@php
|
|
$cell = $doctor['cells'][$month['key']] ?? null;
|
|
@endphp
|
|
<td class="num">{{ $cell['qty'] ?? '0' }}</td>
|
|
<td class="num">{{ $cell['value'] ?? '0' }}</td>
|
|
@endforeach
|
|
</tr>
|
|
@endforeach
|
|
@for ($i = 0; $i < $blankRows; $i++)
|
|
<tr>
|
|
<td class="name"></td>
|
|
@foreach ($report['months'] as $month)
|
|
<td class="num"></td>
|
|
<td class="num"></td>
|
|
@endforeach
|
|
@if ($report['months'] === [])
|
|
<td class="num"></td>
|
|
<td class="num"></td>
|
|
@endif
|
|
</tr>
|
|
@endfor
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
<div class="sb-sign">
|
|
<div class="sb-sign-row">
|
|
<span>Comment:</span>
|
|
<span class="fill">{{ $report['comment'] }}</span>
|
|
</div>
|
|
<div class="sb-sign-pair">
|
|
<div>
|
|
<span>RBM:</span>
|
|
<span class="fill">{{ $report['rbm'] }}</span>
|
|
</div>
|
|
<div>
|
|
<span>ZBM:</span>
|
|
<span class="fill">{{ $report['zbm'] }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="sb-sign-row">
|
|
<span>Marketing:</span>
|
|
<span class="fill">{{ $report['marketing'] }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="sb-bar"></div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endsection
|
|
|
|
@section('script')
|
|
<script src="{{ asset('assets/libs/select2/select2.min.js') }}"></script>
|
|
@endsection
|
|
|
|
@section('script-bottom')
|
|
<script>
|
|
$(function () {
|
|
$('#field-tm_id').select2({
|
|
width: '100%',
|
|
placeholder: 'Select a user (territory)',
|
|
allowClear: true
|
|
});
|
|
|
|
$('#sb-report-form').on('submit', function (event) {
|
|
if (!$('#field-tm_id').val()) {
|
|
event.preventDefault();
|
|
$('#field-tm_id').select2('open');
|
|
return;
|
|
}
|
|
$('#sb-report-loader').addClass('is-visible').attr('aria-busy', 'true');
|
|
});
|
|
|
|
function scaleReportSheets() {
|
|
var preview = document.getElementById('sb-report-card');
|
|
if (!preview) {
|
|
return;
|
|
}
|
|
var sheet = preview.querySelector('.sb-sheet');
|
|
if (!sheet) {
|
|
return;
|
|
}
|
|
var natural = sheet.offsetWidth;
|
|
if (!natural) {
|
|
return;
|
|
}
|
|
var scale = Math.min(1, preview.clientWidth / natural);
|
|
preview.querySelectorAll('.sb-sheet-slot').forEach(function (slot) {
|
|
slot.style.setProperty('--sb-scale', String(scale));
|
|
});
|
|
}
|
|
|
|
scaleReportSheets();
|
|
$(window).on('resize', scaleReportSheets);
|
|
|
|
$('#sb-download-btn').on('click', function (event) {
|
|
event.preventDefault();
|
|
var params = new URLSearchParams(new FormData(document.getElementById('sb-report-form')));
|
|
window.location = '{{ $base_url }}/download?' + params.toString();
|
|
});
|
|
|
|
$('#sb-another-btn').on('click', function () {
|
|
$('#field-tm_id').val(null).trigger('change');
|
|
$('#field-comment, #field-rbm, #field-zbm, #field-marketing').val('');
|
|
$('#sb-report-form').removeClass('sb-is-hidden');
|
|
$('#sb-report-actions, #sb-report-card').addClass('sb-is-hidden');
|
|
var form = document.getElementById('sb-report-form');
|
|
if (form && form.scrollIntoView) {
|
|
form.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endsection
|