<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Nota Servis <?php echo e($ticket->ticket_code); ?></title>
<style>
/* ══════════════════════════════════════════════════════════
   A4  210mm × 297mm  |  margin 16mm  |  DejaVu Sans 11px
   ══════════════════════════════════════════════════════════ */
@page {
    size: A4 portrait;
    margin: 16mm;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'DejaVu Sans', Arial, sans-serif;
    font-size: 11px;
    color: #1f2937;
    background: #ffffff;
    line-height: 1.45;
}

/* ── Utility ──────────────────────────────────────────── */
.mt4  { margin-top: 4px; }
.mt8  { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.bold { font-weight: bold; }
.mono { font-family: 'DejaVu Sans Mono', monospace; }
.muted{ color: #9ca3af; }

/* ── Kop surat ────────────────────────────────────────── */
.kop-table { width: 100%; border-collapse: collapse; }
.kop-logo-cell { width: 56px; vertical-align: middle; padding-right: 12px; }
.kop-logo {
    width: 50px; height: 50px;
    background-color: #1d4ed8;
    border-radius: 8px;
}
.kop-logo-text {
    color: #ffffff; font-weight: 900; font-size: 18px;
    text-align: center; line-height: 50px;
    font-family: 'DejaVu Sans Mono', monospace;
}
.kop-info-cell  { vertical-align: top; }
.kop-company    { font-size: 15px; font-weight: bold; color: #111827; }
.kop-sub        { font-size: 9px; color: #6b7280; margin-top: 2px; }
.kop-right-cell { width: 160px; text-align: right; vertical-align: middle; }

/* ── Divider ──────────────────────────────────────────── */
.divider { border: none; border-top: 2px solid #1d4ed8; margin: 10px 0 0 0; }

/* ── Ticket header ────────────────────────────────────── */
.ticket-header-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.ticket-label {
    font-size: 8px; font-weight: bold; letter-spacing: 1px;
    text-transform: uppercase; color: #6b7280;
}
.ticket-code {
    font-size: 22px; font-weight: bold;
    font-family: 'DejaVu Sans Mono', monospace;
    color: #1d4ed8; letter-spacing: 1px; margin-top: 2px;
}
.ticket-date { font-size: 10px; color: #6b7280; margin-top: 3px; }

/* ── Status badge ─────────────────────────────────────── */
.badge {
    display: inline-block; padding: 4px 12px;
    border-radius: 20px; font-size: 10px; font-weight: bold; color: #ffffff;
}
.badge-pending   { background-color: #d97706; }
.badge-repairing { background-color: #2563eb; }
.badge-ready     { background-color: #059669; }
.badge-pickedup  { background-color: #374151; }
.badge-checking  { background-color: #0284c7; }
.badge-cancelled { background-color: #dc2626; }

/* ── Stamp ────────────────────────────────────────────── */
.stamp {
    display: inline-block; border-width: 3px; border-style: solid;
    border-radius: 5px; padding: 4px 10px;
    font-size: 15px; font-weight: 900; letter-spacing: 3px;
    text-transform: uppercase; opacity: 0.85;
    -webkit-transform: rotate(-12deg); transform: rotate(-12deg);
    margin-top: 6px;
}
.stamp-received  { color: #15803d; border-color: #15803d; background-color: #f0fdf4; }
.stamp-cancelled { color: #b91c1c; border-color: #b91c1c; background-color: #fef2f2; }

/* ── Info bar ─────────────────────────────────────────── */
.infobar { padding: 7px 10px; font-size: 10px; border-radius: 6px; margin-top: 10px; }
.infobar-green { background-color: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.infobar-red   { background-color: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }

/* ── Section ──────────────────────────────────────────── */
.section { margin-top: 14px; }
.section-title {
    font-size: 8px; font-weight: bold; text-transform: uppercase;
    letter-spacing: 1px; color: #9ca3af;
    padding-bottom: 4px; border-bottom: 1px solid #f3f4f6; margin-bottom: 8px;
}

/* ── Info boxes 2-col ─────────────────────────────────── */
.info-grid { width: 100%; border-collapse: collapse; }
.info-grid td { vertical-align: top; width: 50%; }
.info-box {
    background-color: #f9fafb; border: 1px solid #e5e7eb;
    border-radius: 6px; padding: 9px 11px;
}
.info-box-label {
    font-size: 8px; font-weight: bold; text-transform: uppercase;
    letter-spacing: 0.8px; color: #9ca3af; margin-bottom: 5px;
}
.info-box-name { font-weight: bold; font-size: 12px; color: #111827; }
.info-box-sub  { font-size: 10px; color: #6b7280; margin-top: 2px; }
.info-box-mono { font-family: 'DejaVu Sans Mono', monospace; font-size: 9px; color: #6b7280; margin-top: 2px; }

/* ── Keluhan ──────────────────────────────────────────── */
.keluhan-box {
    background-color: #fffbeb; border: 1px solid #fde68a;
    border-radius: 6px; padding: 9px 11px;
}
.keluhan-label {
    font-size: 8px; font-weight: bold; text-transform: uppercase;
    letter-spacing: 0.8px; color: #92400e; margin-bottom: 4px;
}
.keluhan-text { font-size: 11px; color: #374151; line-height: 1.5; }

/* ── Kelengkapan / Aksesori ───────────────────────────── */
.acc-grid { width: 100%; border-collapse: collapse; }
.acc-grid td { width: 50%; vertical-align: top; padding: 0; }
.acc-item {
    font-size: 10px; color: #374151; padding: 2px 0;
}
.acc-item:before {
    content: "\2713\0020"; color: #16a34a; font-weight: bold;
}
.kondisi-box {
    background-color: #f0f9ff; border: 1px solid #bae6fd;
    border-radius: 6px; padding: 9px 11px;
}
.kondisi-label {
    font-size: 8px; font-weight: bold; text-transform: uppercase;
    letter-spacing: 0.8px; color: #0c4a6e; margin-bottom: 4px;
}

/* ── Log ──────────────────────────────────────────────── */
.log-dot-cell { width: 18px; padding-right: 8px; vertical-align: top; }
.log-dot { width: 9px; height: 9px; background-color: #2563eb; border-radius: 50%; margin-top: 3px; }
.log-box {
    background-color: #f9fafb; border: 1px solid #f3f4f6;
    border-radius: 5px; padding: 6px 9px; margin-bottom: 6px;
}
.log-note { font-size: 10.5px; color: #374151; }
.log-time { font-size: 9px; color: #9ca3af; margin-top: 2px; }

/* ── Biaya / Catatan ──────────────────────────────────── */
.cost-box {
    border: 1px solid #e5e7eb; border-radius: 6px;
    padding: 9px 11px; min-height: 55px;
}
.cost-label {
    font-size: 8px; font-weight: bold; text-transform: uppercase;
    letter-spacing: 0.8px; color: #9ca3af; margin-bottom: 6px;
}
.cost-line { border-bottom: 1px dashed #d1d5db; height: 20px; margin-bottom: 4px; }

/* ── Signature ────────────────────────────────────────── */
.sig-grid { width: 100%; border-collapse: collapse; }
.sig-grid td { vertical-align: top; width: 50%; }
.sig-box { border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; }
.sig-label {
    font-size: 8px; font-weight: bold; text-transform: uppercase;
    letter-spacing: 0.8px; color: #9ca3af;
    padding: 5px 8px 3px; background: #f9fafb; border-bottom: 1px solid #e5e7eb;
}
.sig-area  { min-height: 65px; padding: 4px; background: #fff; }
.sig-img   { max-width: 100%; max-height: 70px; display: block; }
.sig-name  { font-size: 9px; color: #6b7280; text-align: center; padding: 4px 0; }

/* ── Footer ───────────────────────────────────────────── */
.footer { border-top: 1px solid #e5e7eb; padding-top: 8px; margin-top: 16px; }
.footer-left  { font-size: 8.5px; color: #9ca3af; vertical-align: top; }
.footer-right { font-size: 8.5px; color: #9ca3af; text-align: right; vertical-align: top; }
.qr-img { width: 78px; height: 78px; display: inline-block; }
</style>
</head>
<body>

<?php
    $companyName    = \App\Models\Setting::get('company_name');
    $companyTagline = \App\Models\Setting::get('company_tagline');
    $companyAddress = \App\Models\Setting::get('company_address');
    $companyPhone   = \App\Models\Setting::get('company_phone');
    $companyEmail   = \App\Models\Setting::get('company_email');
    $companyWebsite = \App\Models\Setting::get('company_website');
    $headerNote     = \App\Models\Setting::get('nota_header_note');
    $footerNote     = \App\Models\Setting::get('nota_footer_note');
    $showCost       = \App\Models\Setting::get('nota_show_cost', '1') === '1';
    $showTtd        = \App\Models\Setting::get('nota_show_ttd', '1') === '1';
    $notaUrl        = route('nota.show', $ticket->ticket_code);
    $notaQrSvg      = 'data:image/svg+xml;base64,' . base64_encode(
        \SimpleSoftwareIO\QrCode\Facades\QrCode::format('svg')->size(120)->margin(1)->generate($notaUrl)
    );
    // Inisial logo dari dua kata pertama nama perusahaan
    $initials = implode('', array_map(fn($w) => strtoupper($w[0]), array_slice(explode(' ', $companyName), 0, 2)));
?>


<table class="kop-table">
    <tr>
        <td class="kop-logo-cell">
            <div class="kop-logo"><div class="kop-logo-text"><?php echo e($initials); ?></div></div>
        </td>
        <td class="kop-info-cell">
            <div class="kop-company"><?php echo e($companyName); ?></div>
            <?php if($companyTagline): ?><div class="kop-sub"><?php echo e($companyTagline); ?></div><?php endif; ?>
            <div class="kop-sub mt4">
                <?php if($companyAddress): ?><?php echo e($companyAddress); ?><?php endif; ?>
                <?php if($companyPhone): ?> &nbsp;|&nbsp; Telp: <?php echo e($companyPhone); ?><?php endif; ?>
                <?php if($companyEmail): ?> &nbsp;|&nbsp; <?php echo e($companyEmail); ?><?php endif; ?>
                <?php if($companyWebsite): ?> &nbsp;|&nbsp; <?php echo e($companyWebsite); ?><?php endif; ?>
            </div>
            <?php if($headerNote): ?><div class="kop-sub mt4" style="color:#374151;"><?php echo e($headerNote); ?></div><?php endif; ?>
        </td>
        <td class="kop-right-cell">
            <div style="font-size:8px;color:#9ca3af;text-transform:uppercase;letter-spacing:1px;margin-bottom:3px;">Tanda Terima</div>
            <div style="font-size:14px;font-weight:bold;font-family:'DejaVu Sans Mono',monospace;color:#1d4ed8;"><?php echo e($ticket->ticket_code); ?></div>
            <div style="font-size:9px;color:#6b7280;margin-top:3px;"><?php echo e($ticket->created_at->format('d/m/Y H:i')); ?></div>
        </td>
    </tr>
</table>
<hr class="divider">


<table class="ticket-header-table">
    <tr>
        <td style="vertical-align:top;">
            <div class="ticket-label">Nomor Tiket Servis</div>
            <div class="ticket-code"><?php echo e($ticket->ticket_code); ?></div>
            <div class="ticket-date"><?php echo e($ticket->created_at->format('l, d F Y')); ?></div>
        </td>
        <td style="text-align:right;vertical-align:top;padding-top:4px;">
            <?php
                $badgeClass = match($ticket->status) {
                    'Pending'   => 'badge-pending',
                    'Repairing' => 'badge-repairing',
                    'Ready'     => 'badge-ready',
                    'Picked Up' => 'badge-pickedup',
                    'Checking'  => 'badge-checking',
                    'Cancelled' => 'badge-cancelled',
                    default     => 'badge-pickedup',
                };
            ?>
            <span class="badge <?php echo e($badgeClass); ?>"><?php echo e($ticket->status); ?></span><br>
            <?php if($ticket->status === 'Picked Up'): ?>
                <div class="stamp stamp-received">DITERIMA</div>
            <?php elseif($ticket->status === 'Cancelled'): ?>
                <div class="stamp stamp-cancelled">BATAL</div>
            <?php endif; ?>
        </td>
    </tr>
</table>

<?php if($ticket->status === 'Picked Up' && $ticket->picked_up_at): ?>
<div class="infobar infobar-green">
    &#10003; Barang diterima pada <strong><?php echo e($ticket->picked_up_at->format('d F Y, H:i')); ?></strong>
    <?php if($ticket->asset?->recipient_name): ?> oleh <strong><?php echo e($ticket->asset->recipient_name); ?></strong><?php endif; ?>
</div>
<?php endif; ?>
<?php if($ticket->status === 'Cancelled'): ?>
<div class="infobar infobar-red">
    &#10007; Alasan pembatalan: <strong><?php echo e($ticket->cancel_reason ?? '-'); ?></strong>
    <?php if($ticket->cancelled_at): ?> &nbsp;(<?php echo e($ticket->cancelled_at->format('d F Y')); ?>)<?php endif; ?>
</div>
<?php endif; ?>


<div class="section">
    <div class="section-title">Informasi Pelanggan &amp; Perangkat</div>
    <table class="info-grid">
        <tr>
            <td style="padding-right:6px;">
                <div class="info-box">
                    <div class="info-box-label">Pelanggan</div>
                    <div class="info-box-name"><?php echo e($ticket->customer->name); ?></div>
                    <?php if($ticket->customer->whatsapp): ?><div class="info-box-sub">WA: <?php echo e($ticket->customer->whatsapp); ?></div><?php endif; ?>
                    <?php if($ticket->customer->email): ?><div class="info-box-sub">Email: <?php echo e($ticket->customer->email); ?></div><?php endif; ?>
                    <?php if($ticket->customer->address): ?><div class="info-box-sub"><?php echo e($ticket->customer->address); ?></div><?php endif; ?>
                </div>
            </td>
            <td style="padding-left:6px;">
                <div class="info-box">
                    <div class="info-box-label">Perangkat</div>
                    <div class="info-box-name"><?php echo e($ticket->brand); ?> <?php echo e($ticket->model); ?></div>
                    <div class="info-box-sub">Jenis: <?php echo e($ticket->device_type); ?></div>
                    <?php if($ticket->serial_number): ?><div class="info-box-mono">S/N: <?php echo e($ticket->serial_number); ?></div><?php endif; ?>
                </div>
            </td>
        </tr>
    </table>
</div>


<div class="section">
    <div class="section-title">Keluhan yang Dilaporkan</div>
    <div class="keluhan-box">
        <div class="keluhan-label">Deskripsi Masalah</div>
        <div class="keluhan-text"><?php echo e($ticket->problem_desc); ?></div>
    </div>
</div>


<?php
    $accessories = $ticket->asset?->accessories ?? [];
    $physCond    = $ticket->asset?->physical_condition ?? '';
?>
<?php if(count($accessories) > 0 || $physCond): ?>
<div class="section">
    <div class="section-title">Kelengkapan &amp; Kondisi Fisik</div>
    <table style="width:100%;border-collapse:collapse;">
        <tr>
            <?php if(count($accessories) > 0): ?>
            <td style="width:<?php echo e($physCond ? '50%' : '100%'); ?>;vertical-align:top;padding-right:<?php echo e($physCond ? '6px' : '0'); ?>;">
                <div class="info-box" style="background:#f0fdf4;border-color:#bbf7d0;">
                    <div class="info-box-label" style="color:#166534;">Kelengkapan yang Diserahkan</div>
                    <table class="acc-grid">
                        <?php $__currentLoopData = array_chunk($accessories, (int)ceil(count($accessories)/2)); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $col): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <td>
                            <?php $__currentLoopData = $col; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="acc-item"><?php echo e($item); ?></div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </td>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </table>
                </div>
            </td>
            <?php endif; ?>
            <?php if($physCond): ?>
            <td style="width:<?php echo e(count($accessories) > 0 ? '50%' : '100%'); ?>;vertical-align:top;padding-left:<?php echo e(count($accessories) > 0 ? '6px' : '0'); ?>;">
                <div class="kondisi-box">
                    <div class="kondisi-label">Kondisi Fisik saat Masuk</div>
                    <div style="font-size:10px;color:#374151;line-height:1.5;"><?php echo e($physCond); ?></div>
                </div>
            </td>
            <?php endif; ?>
        </tr>
    </table>
</div>
<?php endif; ?>


<div class="section">
    <div class="section-title">Petugas Penanganan</div>
    <table style="width:100%;border-collapse:collapse;">
        <tr>
            <td style="width:50%;padding-right:6px;vertical-align:top;">
                <div class="info-box" style="background:#eef2ff;border-color:#c7d2fe;">
                    <div class="info-box-label" style="color:#3730a3;">Teknisi</div>
                    <div class="info-box-sub" style="margin-top:0;">Diagnosa: <strong style="color:#111827;"><?php echo e($ticket->diagnosis_technician_name ?? '-'); ?></strong></div>
                    <div class="info-box-sub">Final QC: <strong style="color:#111827;"><?php echo e($ticket->final_qc_technician_name ?? '-'); ?></strong></div>
                </div>
            </td>
            <td style="width:50%;padding-left:6px;vertical-align:top;">
                <div class="info-box" style="background:#eef2ff;border-color:#c7d2fe;">
                    <div class="info-box-label" style="color:#3730a3;">Kurir</div>
                    <div class="info-box-sub" style="margin-top:0;">Pickup: <strong style="color:#111827;"><?php echo e($ticket->pickup_courier_name ?? '-'); ?></strong></div>
                    <div class="info-box-sub">Delivery: <strong style="color:#111827;"><?php echo e($ticket->delivery_courier_name ?? '-'); ?></strong></div>
                </div>
            </td>
        </tr>
    </table>
</div>


<?php if($ticket->logs->isNotEmpty()): ?>
<div class="section">
    <div class="section-title">Riwayat Penanganan (<?php echo e($ticket->logs->count()); ?> Catatan)</div>
    <table style="width:100%;border-collapse:collapse;">
        <?php $__currentLoopData = $ticket->logs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $log): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <tr>
            <td class="log-dot-cell"><div class="log-dot"></div></td>
            <td>
                <div class="log-box">
                    <div class="log-note"><?php echo e($log->note); ?></div>
                    <div class="log-time"><?php echo e($log->created_at->format('d M Y, H:i')); ?></div>
                    <div class="log-time" style="color:#6b7280;">Petugas: <?php echo e($log->user?->name ?? 'Sistem'); ?><?php if($log->user?->role): ?> (<?php echo e(ucfirst($log->user->role)); ?>)<?php endif; ?></div>
                </div>
            </td>
        </tr>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </table>
</div>
<?php endif; ?>

<?php if($showCost): ?>

<div class="section">
    <div class="section-title">Estimasi Biaya &amp; Catatan Teknisi</div>
    <table style="width:100%;border-collapse:collapse;">
        <tr>
            <td style="padding-right:6px;width:50%;vertical-align:top;">
                <div class="cost-box">
                    <div class="cost-label">Estimasi Biaya Servis</div>
                    <div class="cost-line"></div>
                    <div class="cost-line" style="width:60%;"></div>
                </div>
            </td>
            <td style="padding-left:6px;width:50%;vertical-align:top;">
                <div class="cost-box">
                    <div class="cost-label">Catatan Teknisi</div>
                    <div class="cost-line"></div>
                    <div class="cost-line"></div>
                </div>
            </td>
        </tr>
    </table>
</div>
<?php endif; ?>

<?php if($showTtd): ?>

<div class="section">
    <div class="section-title">Tanda Tangan</div>
    <table class="sig-grid">
        <tr>
            <td style="padding-right:6px;">
                <div class="sig-box">
                    <div class="sig-label">TTD Penyerahan (Pelanggan)</div>
                    <div class="sig-area">
                        <?php if($ticket->asset?->sig_entry): ?>
                            <img src="<?php echo e(public_path('storage/' . $ticket->asset->sig_entry)); ?>" alt="TTD Masuk" class="sig-img">
                        <?php endif; ?>
                    </div>
                    <div class="sig-name"><?php echo e($ticket->customer->name); ?></div>
                </div>
            </td>
            <td style="padding-left:6px;">
                <div class="sig-box">
                    <div class="sig-label">TTD Pengambilan<?php echo e($ticket->asset?->recipient_name ? ' (' . $ticket->asset->recipient_name . ')' : ''); ?></div>
                    <div class="sig-area">
                        <?php if($ticket->asset?->sig_exit): ?>
                            <img src="<?php echo e(public_path('storage/' . $ticket->asset->sig_exit)); ?>" alt="TTD Keluar" class="sig-img">
                        <?php endif; ?>
                    </div>
                    <div class="sig-name"><?php echo e($ticket->asset?->recipient_name ?? 'Penerima / Kurir'); ?></div>
                </div>
            </td>
        </tr>
    </table>
</div>
<?php endif; ?>


<div class="footer">
    <table style="width:100%;border-collapse:collapse;">
        <tr>
            <td class="footer-left">
                Dokumen ini digenerate otomatis oleh sistem <?php echo e($companyName); ?>.<br>
                <?php echo e($footerNote); ?>

            </td>
            <td class="footer-right">
                <img src="<?php echo e($notaQrSvg); ?>" alt="QR Nota" class="qr-img"><br>
                <?php echo e($ticket->ticket_code); ?> &bull; Dicetak <?php echo e(now()->format('d/m/Y H:i')); ?><br>
                <span style="font-family:'DejaVu Sans Mono',monospace;"><?php echo e($notaUrl); ?></span>
            </td>
        </tr>
    </table>
</div>

</body>
</html><?php /**PATH C:\laragon\www\Service-sistem\resources\views/nota/pdf.blade.php ENDPATH**/ ?>