<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nota Servis {{ $ticket->ticket_code }}</title>
<style>
body {
    font-family: Arial, 'Helvetica Neue', sans-serif;
    background-color: #f3f4f6;
    margin: 0; padding: 0;
    color: #1f2937;
}
.wrapper { max-width: 600px; margin: 32px auto; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.header  { background-color: #1d4ed8; padding: 28px 32px; }
.header h1 { color: #fff; font-size: 22px; margin: 0 0 4px; letter-spacing: .5px; font-family: monospace; }
.header p  { color: #bfdbfe; font-size: 13px; margin: 0; }
.body  { padding: 28px 32px; }
.status-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20px;
}
.row { display: flex; gap: 16px; margin-bottom: 16px; }
.card {
    flex: 1;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
}
.card-label { font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: .8px; color: #9ca3af; margin-bottom: 5px; }
.card-name  { font-weight: bold; font-size: 14px; color: #111827; }
.card-sub   { font-size: 12px; color: #6b7280; margin-top: 3px; }
.keluhan    { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 14px 16px; margin-bottom: 20px; }
.keluhan-label { font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: .8px; color: #92400e; margin-bottom: 5px; }
.cta        { text-align: center; margin: 24px 0 8px; }
.btn        { display: inline-block; background-color: #2563eb; color: #fff !important; padding: 12px 28px; border-radius: 8px; text-decoration: none; font-weight: bold; font-size: 14px; }
.footer     { border-top: 1px solid #f3f4f6; background: #f9fafb; padding: 14px 32px; text-align: center; font-size: 11px; color: #9ca3af; }
</style>
</head>
<body>
<div class="wrapper">

    <div class="header">
        <p style="font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#bfdbfe; margin:0 0 6px;">Service Center — Nota Servis</p>
        <h1>{{ $ticket->ticket_code }}</h1>
        <p>{{ $ticket->created_at->format('d F Y') }}</p>
    </div>

    <div class="body">

        @php
            $badgeColor = match($ticket->status) {
                'Pending'   => '#d97706',
                'Repairing' => '#2563eb',
                'Ready'     => '#059669',
                'Picked Up' => '#6b7280',
                'Cancelled' => '#dc2626',
                    'Checking'  => '#0284c7',
                default     => '#6b7280',
            };
        @endphp

        <div class="status-badge" style="background-color:{{ $badgeColor }};">
            {{ $ticket->status }}
        </div>

        @if($ticket->status === 'Picked Up' && $ticket->picked_up_at)
        <p style="font-size:13px; color:#15803d; background:#f0fdf4; border:1px solid #bbf7d0; padding:10px 14px; border-radius:8px; margin-bottom:16px;">
            ✅ Barang telah 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
        </p>
        @endif

        @if($ticket->status === 'Cancelled')
        <p style="font-size:13px; color:#b91c1c; background:#fef2f2; border:1px solid #fecaca; padding:10px 14px; border-radius:8px; margin-bottom:16px;">
            ❌ Tiket dibatalkan. Alasan: <strong>{{ $ticket->cancel_reason ?? '-' }}</strong>
        </p>
        @endif

        <p style="font-size:14px; color:#374151; margin-bottom:20px;">
            Halo <strong>{{ $ticket->customer->name }}</strong>, berikut adalah nota servis untuk perangkat Anda.
            Nota PDF terlampir dalam email ini.
        </p>

        {{-- Customer & Device --}}
        <table width="100%" cellspacing="0" cellpadding="0" style="margin-bottom:16px;">
            <tr>
                <td width="48%" valign="top">
                    <div class="card">
                        <div class="card-label">Pelanggan</div>
                        <div class="card-name">{{ $ticket->customer->name }}</div>
                        @if($ticket->customer->whatsapp)
                            <div class="card-sub">{{ $ticket->customer->whatsapp }}</div>
                        @endif
                    </div>
                </td>
                <td width="4%"></td>
                <td width="48%" valign="top">
                    <div class="card">
                        <div class="card-label">Perangkat</div>
                        <div class="card-name">{{ $ticket->brand }} {{ $ticket->model }}</div>
                        <div class="card-sub">{{ $ticket->device_type }}</div>
                        @if($ticket->serial_number)
                            <div class="card-sub" style="font-family:monospace; font-size:11px;">S/N: {{ $ticket->serial_number }}</div>
                        @endif
                    </div>
                </td>
            </tr>
        </table>

        {{-- Keluhan --}}
        <div class="keluhan">
            <div class="keluhan-label">Keluhan yang Dilaporkan</div>
            <p style="font-size:13px; color:#374151; margin:0; line-height:1.6;">{{ $ticket->problem_desc }}</p>
        </div>

        {{-- CTA --}}
        <div class="cta">
            <a href="{{ $notaUrl }}" class="btn">Lihat Nota Digital Online</a>
        </div>

        <p style="text-align:center; font-size:12px; color:#9ca3af; margin-top:8px;">
            Atau kunjungi: <a href="{{ $notaUrl }}" style="color:#2563eb;">{{ $notaUrl }}</a>
        </p>

    </div>

    <div class="footer">
        Service Center &bull; Email ini dikirim otomatis, tidak perlu dibalas. &bull; {{ $ticket->ticket_code }}
    </div>
</div>
</body>
</html>
