<!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>

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        brand: {
                            50:  '#eff6ff',
                            500: '#3b82f6',
                            600: '#2563eb',
                            700: '#1d4ed8',
                        }
                    }
                }
            }
        }
    </script>

    <style>
        @media print {
            .no-print { display: none !important; }
            body { background: white !important; }
            .nota-card { box-shadow: none !important; border: 1px solid #e5e7eb !important; }
            @page { size: A4 portrait; margin: 16mm; }
            .print-shell { max-width: 100% !important; padding: 0 !important; }
        }

        /* ── Digital stamp ──────────────────────────────────────── */
        .stamp-wrapper {
            position: relative;
            display: inline-block;
        }

        .stamp {
            position: absolute;
            top: 50%;
            right: -10px;
            transform: translateY(-50%) rotate(-15deg);
            padding: 6px 14px;
            border-width: 3px;
            border-style: solid;
            border-radius: 6px;
            font-size: 1.1rem;
            font-weight: 900;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            opacity: 0.85;
            white-space: nowrap;
            pointer-events: none;
            z-index: 10;
            user-select: none;
        }

        .stamp-received {
            color: #15803d;
            border-color: #15803d;
            background: rgba(220, 252, 231, 0.4);
        }

        .stamp-cancelled {
            color: #b91c1c;
            border-color: #b91c1c;
            background: rgba(254, 226, 226, 0.4);
        }
    </style>
</head>
<body class="min-h-screen bg-gray-100">

{{-- ── Flash messages (after redirect from handover) ──────── --}}
@if(session('success'))
<div class="max-w-4xl mx-auto pt-4 px-5 sm:px-6 no-print">
    <div class="rounded-lg bg-green-50 border border-green-200 p-3 text-green-800 text-sm flex gap-2 mb-0">
        <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9
                     10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                  clip-rule="evenodd"/>
        </svg>
        {{ session('success') }}
    </div>
</div>
@endif

<div class="print-shell max-w-4xl mx-auto px-5 sm:px-6 py-6">

    {{-- ── Toolbar: Print, PDF, Email, WA ─────────────────────── --}}
    <div class="flex flex-wrap items-center justify-between gap-3 mb-4 no-print">
        <h1 class="text-sm font-medium text-gray-500">Nota Digital Servis</h1>
        <div class="flex flex-wrap gap-2">

            {{-- Browser print --}}
            <button onclick="window.print()"
                    class="inline-flex items-center gap-1.5 text-sm font-semibold bg-gray-600 text-white
                           rounded-xl px-3 py-2 hover:bg-gray-700 transition shadow-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2
                             m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5
                             a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                </svg>
                Cetak
            </button>

            {{-- Download PDF --}}
            <a href="{{ route('nota.pdf', $ticket->ticket_code) }}"
               class="inline-flex items-center gap-1.5 text-sm font-semibold bg-red-600 text-white
                      rounded-xl px-3 py-2 hover:bg-red-700 transition shadow-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0
                             0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M10 13v4m0 0l-2-2m2 2l2-2m-2-7v1"/>
                </svg>
                Unduh PDF
            </a>

            {{-- Kirim Email --}}
            @if($ticket->customer->email)
            <form method="POST" action="{{ route('nota.send-email', $ticket->ticket_code) }}">
                @csrf
                <button type="submit"
                        class="inline-flex items-center gap-1.5 text-sm font-semibold bg-brand-600 text-white
                               rounded-xl px-3 py-2 hover:bg-brand-700 transition shadow-sm">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0
                                 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                    </svg>
                    Kirim Email
                </button>
            </form>
            @endif

            {{-- WhatsApp --}}
            @isset($waUrl)
            <a href="{{ $waUrl }}" target="_blank" rel="noopener noreferrer"
               class="inline-flex items-center gap-1.5 text-sm font-semibold bg-green-500 text-white
                      rounded-xl px-3 py-2 hover:bg-green-600 transition shadow-sm">
                {{-- WA Icon --}}
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15
                             -.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463
                             -2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606
                             .134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52
                             -.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01
                             -.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065
                             2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625
                             .712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289
                             .173-1.413-.074-.124-.272-.198-.57-.347zm-5.421 7.403h-.004a9.87 9.87 0 01-5.031
                             -1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001
                             -5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893
                             6.994c-.003 5.45-4.437 9.884-9.885 9.884zm8.413-18.297A11.815 11.815 0 0012.05 0C5.495
                             0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882
                             11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0
                             00-3.48-8.413z"/>
                </svg>
                WhatsApp
            </a>
            @endisset

        </div>
    </div>

    {{-- ── Main card ───────────────────────────────────────────── --}}
    <div class="nota-card rounded-2xl bg-white shadow-lg overflow-hidden">

        {{-- Header stripe --}}
        <div class="bg-brand-700 px-6 py-5 flex items-start justify-between gap-4">
            <div>
                <p class="text-brand-100 text-xs font-medium tracking-wide uppercase mb-1">Nota Servis</p>
                <h2 class="text-white text-2xl font-bold tracking-tight font-mono">{{ $ticket->ticket_code }}</h2>
                <p class="text-brand-100 text-xs mt-1">{{ $ticket->created_at->translatedFormat('d F Y') }}</p>
            </div>

            {{-- Status stamp --}}
            <div class="stamp-wrapper flex-shrink-0 pr-12">
                <span class="inline-block text-white text-sm font-semibold px-3 py-1 rounded-full
                    @if($ticket->status === 'Picked Up') bg-green-600
                    @elseif($ticket->status === 'Cancelled') bg-red-600
                    @elseif($ticket->status === 'Ready') bg-emerald-500
                    @elseif($ticket->status === 'Checking') bg-sky-500
                    @elseif($ticket->status === 'Repairing') bg-blue-500
                    @else bg-yellow-500 @endif">
                    {{ $ticket->status }}
                </span>

                @if($ticket->status === 'Picked Up')
                    <div class="stamp stamp-received">DITERIMA</div>
                @elseif($ticket->status === 'Cancelled')
                    <div class="stamp stamp-cancelled">BATAL</div>
                @endif
            </div>
        </div>

        {{-- Stamp info bar (Picked Up / Cancelled detail) --}}
        @if($ticket->status === 'Picked Up' && $ticket->picked_up_at)
        <div class="bg-green-50 border-b border-green-100 px-6 py-2.5 flex items-center gap-2 text-sm text-green-800">
            <svg class="w-4 h-4 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9
                         10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                      clip-rule="evenodd"/>
            </svg>
            <span>Barang diterima pada
                <strong>{{ $ticket->picked_up_at->translatedFormat('d F Y, H:i') }}</strong>
                @if($ticket->asset?->recipient_name)
                    oleh <strong>{{ $ticket->asset->recipient_name }}</strong>
                @endif
            </span>
        </div>
        @endif

        @if($ticket->status === 'Cancelled')
        <div class="bg-red-50 border-b border-red-100 px-6 py-2.5 flex items-start gap-2 text-sm text-red-800">
            <svg class="w-4 h-4 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586
                         10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414
                         L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                      clip-rule="evenodd"/>
            </svg>
            <span><strong>Alasan pembatalan:</strong>
                {{ $ticket->cancel_reason ?? '-' }}
                @if($ticket->cancelled_at)
                    <span class="text-red-500 ml-1">({{ $ticket->cancelled_at->translatedFormat('d F Y, H:i') }})</span>
                @endif
            </span>
        </div>
        @endif

        <div class="px-6 py-5 space-y-5">

            {{-- ── Info Pelanggan & Perangkat ────────────────────── --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                <div class="rounded-xl bg-gray-50 border border-gray-100 p-4">
                    <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-2">Pelanggan</p>
                    <p class="font-bold text-gray-900">{{ $ticket->customer->name }}</p>
                    @if($ticket->customer->whatsapp)
                        <p class="text-sm text-gray-500 mt-0.5">
                            <svg class="inline w-3.5 h-3.5 mr-0.5 text-green-500" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15
                                         -.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463
                                         -2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606
                                         .134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371
                                         -.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51
                                         -.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016
                                         -1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487
                                         .709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719
                                         2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
                            </svg>
                            {{ $ticket->customer->whatsapp }}
                        </p>
                    @endif
                    @if($ticket->customer->address)
                        <p class="text-xs text-gray-400 mt-1">{{ $ticket->customer->address }}</p>
                    @endif
                </div>

                <div class="rounded-xl bg-gray-50 border border-gray-100 p-4">
                    <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-2">Perangkat</p>
                    <p class="font-bold text-gray-900">{{ $ticket->brand }} {{ $ticket->model }}</p>
                    <p class="text-sm text-gray-500 mt-0.5">{{ $ticket->device_type }}</p>
                    @if($ticket->serial_number)
                        <p class="text-xs text-gray-400 mt-1 font-mono">S/N: {{ $ticket->serial_number }}</p>
                    @endif
                </div>
            </div>

            {{-- ── Keluhan ──────────────────────────────────────── --}}
            <div class="rounded-xl bg-amber-50 border border-amber-100 p-4">
                <p class="text-xs font-semibold text-amber-700 uppercase tracking-wide mb-1.5">Keluhan yang Dilaporkan</p>
                <p class="text-sm text-gray-700 leading-relaxed">{{ $ticket->problem_desc }}</p>
            </div>

            {{-- ── Kelengkapan & Kondisi Fisik ─────────────────── --}}
            @php
                $accessories = $ticket->asset?->accessories ?? [];
                $physCond    = $ticket->asset?->physical_condition ?? '';
            @endphp
            @if(count($accessories) > 0 || $physCond)
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                @if(count($accessories) > 0)
                <div class="rounded-xl bg-green-50 border border-green-100 p-4">
                    <p class="text-xs font-semibold text-green-700 uppercase tracking-wide mb-2">Kelengkapan Diserahkan</p>
                    <ul class="space-y-1">
                        @foreach($accessories as $item)
                        <li class="flex items-center gap-2 text-sm text-gray-700">
                            <svg class="w-4 h-4 text-green-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                            </svg>
                            {{ $item }}
                        </li>
                        @endforeach
                    </ul>
                </div>
                @endif
                @if($physCond)
                <div class="rounded-xl bg-sky-50 border border-sky-100 p-4">
                    <p class="text-xs font-semibold text-sky-700 uppercase tracking-wide mb-1.5">Kondisi Fisik saat Masuk</p>
                    <p class="text-sm text-gray-700 leading-relaxed">{{ $physCond }}</p>
                </div>
                @endif
            </div>
            @endif

            {{-- ── Petugas Penanganan ─────────────────────────── --}}
            <div class="rounded-xl bg-indigo-50 border border-indigo-100 p-4">
                <p class="text-xs font-semibold text-indigo-700 uppercase tracking-wide mb-2">Petugas Penanganan</p>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-gray-700">
                    <p>Teknisi Diagnosa: <span class="font-semibold">{{ $ticket->diagnosis_technician_name ?? '-' }}</span></p>
                    <p>Teknisi Final QC: <span class="font-semibold">{{ $ticket->final_qc_technician_name ?? '-' }}</span></p>
                    <p>Kurir Pickup: <span class="font-semibold">{{ $ticket->pickup_courier_name ?? '-' }}</span></p>
                    <p>Kurir Delivery: <span class="font-semibold">{{ $ticket->delivery_courier_name ?? '-' }}</span></p>
                </div>
            </div>

            {{-- ── Verifikasi Dokumen ─────────────────────────── --}}
            <div class="rounded-xl bg-gray-50 border border-gray-200 p-4">
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Verifikasi Dokumen</p>
                <div class="flex flex-col sm:flex-row items-start sm:items-center gap-3">
                    <div class="inline-flex items-center justify-center rounded-lg border border-gray-200 bg-white p-2">
                        {!! \SimpleSoftwareIO\QrCode\Facades\QrCode::size(96)->margin(1)->generate(route('nota.show', $ticket->ticket_code)) !!}
                    </div>
                    <div class="text-sm text-gray-600 leading-relaxed">
                        Scan QR untuk membuka nota digital resmi.
                        <p class="text-xs text-gray-400 mt-1 break-all">{{ route('nota.show', $ticket->ticket_code) }}</p>
                    </div>
                </div>
            </div>

            {{-- ── Riwayat servis (log) ─────────────────────────── --}}
            @if($ticket->logs->isNotEmpty())
            <div>
                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">Riwayat Penanganan</p>
                <ol class="relative border-l-2 border-gray-200 ml-2 space-y-4">
                    @foreach($ticket->logs as $log)
                    <li class="ml-5">
                        <span class="absolute -left-[9px] flex items-center justify-center w-4 h-4
                                     bg-brand-600 rounded-full ring-4 ring-white"></span>
                        <div class="rounded-xl bg-gray-50 border border-gray-100 p-3">
                            <p class="text-sm text-gray-800">{{ $log->note }}</p>
                            <p class="text-xs text-gray-400 mt-1">
                                {{ $log->created_at->translatedFormat('d M Y, H:i') }}
                            </p>
                            <p class="text-[11px] text-gray-500 mt-0.5">
                                Petugas: {{ $log->user?->name ?? 'Sistem' }}
                                @if($log->user?->role)
                                ({{ ucfirst($log->user->role) }})
                                @endif
                            </p>
                        </div>
                    </li>
                    @endforeach
                </ol>
            </div>
            @endif

            {{-- ── Foto & TTD Penerimaan ──────────────────────────── --}}
            @if($ticket->asset && ($ticket->asset->photo_entry || $ticket->asset->sig_entry))
            <div>
                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">Dokumentasi Penerimaan</p>
                <div class="grid grid-cols-2 gap-3">
                    @if($ticket->asset->photo_entry)
                    <div class="rounded-xl overflow-hidden border border-gray-200">
                        <p class="text-xs text-gray-500 px-2 pt-2 pb-1 font-medium">Foto Masuk</p>
                        <img src="{{ Storage::url($ticket->asset->photo_entry) }}"
                             alt="Foto kondisi masuk"
                             class="w-full object-cover max-h-40 bg-gray-100">
                    </div>
                    @endif
                    @if($ticket->asset->sig_entry)
                    <div class="rounded-xl overflow-hidden border border-gray-200">
                        <p class="text-xs text-gray-500 px-2 pt-2 pb-1 font-medium">TTD Penyerahan</p>
                        <img src="{{ Storage::url($ticket->asset->sig_entry) }}"
                             alt="Tanda tangan penyerahan"
                             class="w-full object-contain max-h-24 bg-white p-2">
                    </div>
                    @endif
                </div>
            </div>
            @endif

            {{-- ── Foto & TTD Pengambilan ─────────────────────────── --}}
            @if($ticket->asset && ($ticket->asset->photo_exit || $ticket->asset->sig_exit))
            <div>
                <p class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">Dokumentasi Pengambilan</p>
                <div class="grid grid-cols-2 gap-3">
                    @if($ticket->asset->photo_exit)
                    <div class="rounded-xl overflow-hidden border border-gray-200">
                        <p class="text-xs text-gray-500 px-2 pt-2 pb-1 font-medium">Foto Kondisi Akhir</p>
                        <img src="{{ Storage::url($ticket->asset->photo_exit) }}"
                             alt="Foto kondisi akhir"
                             class="w-full object-cover max-h-40 bg-gray-100">
                    </div>
                    @endif
                    @if($ticket->asset->sig_exit)
                    <div class="rounded-xl overflow-hidden border border-gray-200">
                        <p class="text-xs text-gray-500 px-2 pt-2 pb-1 font-medium">
                            TTD Pengambil
                            @if($ticket->asset->recipient_name)
                                <span class="text-gray-400 font-normal">({{ $ticket->asset->recipient_name }})</span>
                            @endif
                        </p>
                        <img src="{{ Storage::url($ticket->asset->sig_exit) }}"
                             alt="Tanda tangan pengambil"
                             class="w-full object-contain max-h-24 bg-white p-2">
                    </div>
                    @endif
                </div>
            </div>
            @endif

        </div>

        {{-- ── Footer nota ──────────────────────────────────────── --}}
        <div class="border-t border-gray-100 px-6 py-4 bg-gray-50 text-center">
            <p class="text-xs text-gray-400">
                {{ \App\Models\Setting::get('company_name') }} &middot; Dokumen ini digenerate secara otomatis &middot;
                <span class="font-mono">{{ $ticket->ticket_code }}</span>
            </p>
        </div>

    </div>{{-- /nota-card --}}

    {{-- Action buttons (no-print) --}}
    <div class="mt-5 flex flex-col sm:flex-row gap-3 no-print">
        <a href="{{ route('tickets.create') }}"
           class="flex-1 flex items-center justify-center gap-2 text-sm font-medium bg-white border
                  border-gray-300 text-gray-700 rounded-xl px-4 py-3 hover:bg-gray-50 transition">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Buat Tiket Baru
        </a>
        <a href="{{ route('admin.tickets.index') }}"
           class="flex-1 flex items-center justify-center gap-2 text-sm font-medium bg-brand-600
                  text-white rounded-xl px-4 py-3 hover:bg-brand-700 transition">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
            </svg>
            Daftar Antrean Admin
        </a>
    </div>

</div>
</body>
</html>
