<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Nota Servis {{ $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)));
@endphp

{{-- KOP SURAT --}}
<table class="kop-table">
    <tr>
        <td class="kop-logo-cell">
            <div class="kop-logo"><div class="kop-logo-text">{{ $initials }}</div></div>
        </td>
        <td class="kop-info-cell">
            <div class="kop-company">{{ $companyName }}</div>
            @if($companyTagline)<div class="kop-sub">{{ $companyTagline }}</div>@endif
            <div class="kop-sub mt4">
                @if($companyAddress){{ $companyAddress }}@endif
                @if($companyPhone) &nbsp;|&nbsp; Telp: {{ $companyPhone }}@endif
                @if($companyEmail) &nbsp;|&nbsp; {{ $companyEmail }}@endif
                @if($companyWebsite) &nbsp;|&nbsp; {{ $companyWebsite }}@endif
            </div>
            @if($headerNote)<div class="kop-sub mt4" style="color:#374151;">{{ $headerNote }}</div>@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;">{{ $ticket->ticket_code }}</div>
            <div style="font-size:9px;color:#6b7280;margin-top:3px;">{{ $ticket->created_at->format('d/m/Y H:i') }}</div>
        </td>
    </tr>
</table>
<hr class="divider">

{{-- HEADER TIKET + STATUS --}}
<table class="ticket-header-table">
    <tr>
        <td style="vertical-align:top;">
            <div class="ticket-label">Nomor Tiket Servis</div>
            <div class="ticket-code">{{ $ticket->ticket_code }}</div>
            <div class="ticket-date">{{ $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',
                };
            @endphp
            <span class="badge {{ $badgeClass }}">{{ $ticket->status }}</span><br>
            @if($ticket->status === 'Picked Up')
                <div class="stamp stamp-received">DITERIMA</div>
            @elseif($ticket->status === 'Cancelled')
                <div class="stamp stamp-cancelled">BATAL</div>
            @endif
        </td>
    </tr>
</table>

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

{{-- PELANGGAN & PERANGKAT --}}
<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">{{ $ticket->customer->name }}</div>
                    @if($ticket->customer->whatsapp)<div class="info-box-sub">WA: {{ $ticket->customer->whatsapp }}</div>@endif
                    @if($ticket->customer->email)<div class="info-box-sub">Email: {{ $ticket->customer->email }}</div>@endif
                    @if($ticket->customer->address)<div class="info-box-sub">{{ $ticket->customer->address }}</div>@endif
                </div>
            </td>
            <td style="padding-left:6px;">
                <div class="info-box">
                    <div class="info-box-label">Perangkat</div>
                    <div class="info-box-name">{{ $ticket->brand }} {{ $ticket->model }}</div>
                    <div class="info-box-sub">Jenis: {{ $ticket->device_type }}</div>
                    @if($ticket->serial_number)<div class="info-box-mono">S/N: {{ $ticket->serial_number }}</div>@endif
                </div>
            </td>
        </tr>
    </table>
</div>

{{-- KELUHAN --}}
<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">{{ $ticket->problem_desc }}</div>
    </div>
</div>

{{-- KELENGKAPAN & KONDISI FISIK --}}
@php
    $accessories = $ticket->asset?->accessories ?? [];
    $physCond    = $ticket->asset?->physical_condition ?? '';
@endphp
@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>
            @if(count($accessories) > 0)
            <td style="width:{{ $physCond ? '50%' : '100%' }};vertical-align:top;padding-right:{{ $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">
                        @foreach(array_chunk($accessories, (int)ceil(count($accessories)/2)) as $col)
                        <td>
                            @foreach($col as $item)
                            <div class="acc-item">{{ $item }}</div>
                            @endforeach
                        </td>
                        @endforeach
                    </table>
                </div>
            </td>
            @endif
            @if($physCond)
            <td style="width:{{ count($accessories) > 0 ? '50%' : '100%' }};vertical-align:top;padding-left:{{ 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;">{{ $physCond }}</div>
                </div>
            </td>
            @endif
        </tr>
    </table>
</div>
@endif

{{-- PETUGAS PENANGANAN --}}
<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;">{{ $ticket->diagnosis_technician_name ?? '-' }}</strong></div>
                    <div class="info-box-sub">Final QC: <strong style="color:#111827;">{{ $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;">{{ $ticket->pickup_courier_name ?? '-' }}</strong></div>
                    <div class="info-box-sub">Delivery: <strong style="color:#111827;">{{ $ticket->delivery_courier_name ?? '-' }}</strong></div>
                </div>
            </td>
        </tr>
    </table>
</div>

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

@if($showCost)
{{-- BIAYA & CATATAN TEKNISI --}}
<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>
@endif

@if($showTtd)
{{-- TANDA TANGAN --}}
<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">
                        @if($ticket->asset?->sig_entry)
                            <img src="{{ public_path('storage/' . $ticket->asset->sig_entry) }}" alt="TTD Masuk" class="sig-img">
                        @endif
                    </div>
                    <div class="sig-name">{{ $ticket->customer->name }}</div>
                </div>
            </td>
            <td style="padding-left:6px;">
                <div class="sig-box">
                    <div class="sig-label">TTD Pengambilan{{ $ticket->asset?->recipient_name ? ' (' . $ticket->asset->recipient_name . ')' : '' }}</div>
                    <div class="sig-area">
                        @if($ticket->asset?->sig_exit)
                            <img src="{{ public_path('storage/' . $ticket->asset->sig_exit) }}" alt="TTD Keluar" class="sig-img">
                        @endif
                    </div>
                    <div class="sig-name">{{ $ticket->asset?->recipient_name ?? 'Penerima / Kurir' }}</div>
                </div>
            </td>
        </tr>
    </table>
</div>
@endif

{{-- FOOTER --}}
<div class="footer">
    <table style="width:100%;border-collapse:collapse;">
        <tr>
            <td class="footer-left">
                Dokumen ini digenerate otomatis oleh sistem {{ $companyName }}.<br>
                {{ $footerNote }}
            </td>
            <td class="footer-right">
                <img src="{{ $notaQrSvg }}" alt="QR Nota" class="qr-img"><br>
                {{ $ticket->ticket_code }} &bull; Dicetak {{ now()->format('d/m/Y H:i') }}<br>
                <span style="font-family:'DejaVu Sans Mono',monospace;">{{ $notaUrl }}</span>
            </td>
        </tr>
    </table>
</div>

</body>
</html>