@extends('layouts.app')

@section('title', 'Detail Tiket — ' . $ticket->ticket_code)

@section('content')

{{-- Header tiket --}}
<div class="flex items-start justify-between mb-5 gap-3">
    <div>
        <p class="text-xs text-gray-400 uppercase tracking-widest mb-0.5">Nomor Tiket</p>
        <h1 class="text-2xl font-bold font-mono text-brand-700">{{ $ticket->ticket_code }}</h1>
        <p class="text-xs text-gray-400 mt-0.5">{{ $ticket->created_at->format('d M Y, H:i') }} WIB</p>
    </div>
    {{-- QR Code --}}
    <div class="flex-shrink-0 bg-white rounded-xl p-2 shadow border border-gray-100">
        {!! QrCode::format('svg')
              ->size(100)
              ->margin(1)
              ->color(30, 58, 95)
              ->backgroundColor(255, 255, 255)
              ->generate($qrUrl) !!}
    </div>
</div>

{{-- Status badge --}}
@php
    $statusColors = [
        'Pending'   => 'bg-yellow-100 text-yellow-800',
        'Checking'  => 'bg-sky-100 text-sky-800',
        'Repairing' => 'bg-blue-100 text-blue-800',
        'Ready'     => 'bg-green-100 text-green-800',
        'Picked Up' => 'bg-gray-100 text-gray-700',
        'Cancelled' => 'bg-red-100 text-red-800',
    ];
    $color = $statusColors[$ticket->status] ?? 'bg-gray-100 text-gray-700';
@endphp
<div class="mb-5">
    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold {{ $color }}">
        {{ $ticket->status }}
    </span>
</div>

{{-- Pelanggan --}}
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 mb-4">
    <h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">Pelanggan</h2>
    <dl class="space-y-2 text-sm">
        <div class="flex justify-between">
            <dt class="text-gray-500">Nama</dt>
            <dd class="font-medium text-gray-800">{{ $ticket->customer->name }}</dd>
        </div>
        @if($ticket->customer->whatsapp)
        <div class="flex justify-between">
            <dt class="text-gray-500">WhatsApp</dt>
            <dd class="font-medium text-gray-800">{{ $ticket->customer->whatsapp }}</dd>
        </div>
        @endif
        @if($ticket->customer->email)
        <div class="flex justify-between">
            <dt class="text-gray-500">Email</dt>
            <dd class="font-medium text-gray-800 break-all">{{ $ticket->customer->email }}</dd>
        </div>
        @endif
        @if($ticket->customer->address)
        <div class="flex justify-between gap-4">
            <dt class="text-gray-500 shrink-0">Alamat</dt>
            <dd class="font-medium text-gray-800 text-right">{{ $ticket->customer->address }}</dd>
        </div>
        @endif
    </dl>
</div>

{{-- Perangkat --}}
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 mb-4">
    <h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">Detail Perangkat</h2>
    <dl class="space-y-2 text-sm">
        <div class="flex justify-between">
            <dt class="text-gray-500">Jenis</dt>
            <dd class="font-medium text-gray-800">{{ $ticket->device_type }}</dd>
        </div>
        <div class="flex justify-between">
            <dt class="text-gray-500">Merek</dt>
            <dd class="font-medium text-gray-800">{{ $ticket->brand }}</dd>
        </div>
        <div class="flex justify-between">
            <dt class="text-gray-500">Model</dt>
            <dd class="font-medium text-gray-800">{{ $ticket->model }}</dd>
        </div>
        @if($ticket->serial_number)
        <div class="flex justify-between">
            <dt class="text-gray-500">S/N</dt>
            <dd class="font-medium font-mono text-gray-800">{{ $ticket->serial_number }}</dd>
        </div>
        @endif
        <div class="flex justify-between gap-4">
            <dt class="text-gray-500 shrink-0">Keluhan</dt>
            <dd class="font-medium text-gray-800 text-right">{{ $ticket->problem_desc }}</dd>
        </div>
    </dl>
</div>

{{-- Aset foto & tanda tangan --}}
@if($ticket->asset && ($ticket->asset->photo_entry || $ticket->asset->sig_entry))
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 mb-4">
    <h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">Dokumentasi Masuk</h2>
    <div class="grid grid-cols-2 gap-3">
        @if($ticket->asset->photo_entry)
        <div>
            <p class="text-xs text-gray-400 mb-1">Foto Barang</p>
            <img src="{{ Storage::url($ticket->asset->photo_entry) }}"
                 alt="Foto Barang"
                 class="w-full rounded-xl object-cover aspect-square border border-gray-100">
        </div>
        @endif
        @if($ticket->asset->sig_entry)
        <div>
            <p class="text-xs text-gray-400 mb-1">Tanda Tangan</p>
            <img src="{{ Storage::url($ticket->asset->sig_entry) }}"
                 alt="Tanda Tangan"
                 class="w-full rounded-xl object-contain aspect-square bg-white border border-gray-100 p-2">
        </div>
        @endif
    </div>
</div>
@endif

{{-- Log aktivitas --}}
@if($ticket->logs->count())
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 mb-5">
    <h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">Riwayat Aktivitas</h2>
    <ol class="relative border-l border-gray-200 ml-2 space-y-4">
        @foreach($ticket->logs->sortByDesc('created_at') as $log)
        <li class="ml-4">
            <div class="absolute w-2.5 h-2.5 bg-brand-500 rounded-full -left-1.5 mt-1.5 border border-white"></div>
            <p class="text-sm text-gray-800">{{ $log->note }}</p>
            <p class="text-xs text-gray-400 mt-0.5">
                {{ $log->created_at->format('d M Y, H:i') }}
                @if($log->user) — {{ $log->user->name }} @endif
            </p>
        </li>
        @endforeach
    </ol>
</div>
@endif

{{-- Actions --}}
<div class="flex flex-col gap-3">
    <a href="{{ route('tickets.label', $ticket->id) }}"
       target="_blank"
       class="w-full text-center bg-brand-600 hover:bg-brand-700 text-white font-semibold
              text-sm rounded-2xl py-4 flex items-center justify-center gap-2 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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
        </svg>
        Cetak Label
    </a>
    <a href="{{ route('tickets.create') }}"
       class="w-full text-center border border-gray-300 text-gray-700 font-medium
              text-sm rounded-2xl py-3 hover:bg-gray-50 transition">
        + Buat Tiket Baru
    </a>
</div>

@endsection
