@extends('layout.app')

@section('title', 'Detail Tiket')

@section('content')
<x-material-page-header 
    title="Detail Tiket #{{ $ticket->id }}" 
    :breadcrumbs="[
        ['name' => 'Tiket', 'url' => route('tiket.index')],
        ['name' => 'Detail']
    ]"
>
    <a href="{{ route('tiket.edit', $ticket) }}" class="btn btn-sm bg-gradient-warning mb-0 me-2">
        <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">edit</i> Edit
    </a>
    <a href="{{ route('tiket.index') }}" class="btn btn-sm bg-gradient-secondary mb-0">
        <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">arrow_back</i> Kembali
    </a>
</x-material-page-header>

<div class="container-fluid py-4">
    <div class="card my-4">
        <div class="card-header pb-0 pt-3">
            <h6 class="mb-0">Informasi Tiket</h6>
        </div>
        <div class="card-body pt-0">
        <dl class="row">
            <dt class="col-sm-3">Judul</dt>
            <dd class="col-sm-9">{{ $ticket->judul }}</dd>

            <dt class="col-sm-3">Deskripsi</dt>
            <dd class="col-sm-9">{!! nl2br(e($ticket->deskripsi)) !!}</dd>

            <dt class="col-sm-3">Prioritas</dt>
            <dd class="col-sm-9">
                @if($ticket->prioritas == 'Kritis')
                    <span class="badge badge-sm bg-gradient-danger">{{ $ticket->prioritas }}</span>
                @elseif($ticket->prioritas == 'Tinggi')
                    <span class="badge badge-sm bg-gradient-warning">{{ $ticket->prioritas }}</span>
                @elseif($ticket->prioritas == 'Sedang')
                    <span class="badge badge-sm bg-gradient-info">{{ $ticket->prioritas }}</span>
                @else
                    <span class="badge badge-sm bg-gradient-secondary">{{ $ticket->prioritas }}</span>
                @endif
            </dd>

            <dt class="col-sm-3">Status</dt>
            <dd class="col-sm-9">
                @if($ticket->status == 'Selesai')
                    <span class="badge badge-sm bg-gradient-success">{{ $ticket->status }}</span>
                @elseif($ticket->status == 'Diproses')
                    <span class="badge badge-sm bg-gradient-warning">{{ $ticket->status }}</span>
                @elseif($ticket->status == 'Menunggu')
                    <span class="badge badge-sm bg-gradient-info">{{ $ticket->status }}</span>
                @elseif($ticket->status == 'Dibatalkan')
                    <span class="badge badge-sm bg-gradient-secondary">{{ $ticket->status }}</span>
                @else
                    <span class="badge badge-sm bg-gradient-primary">{{ $ticket->status }}</span>
                @endif
            </dd>

            <dt class="col-sm-3">Kategori</dt>
            <dd class="col-sm-9">{{ $ticket->kategori ?? '-' }}</dd>

            <dt class="col-sm-3">Lampiran</dt>
            <dd class="col-sm-9">
                @if($ticket->lampiran_path)
                    <a href="{{ asset('storage/'.$ticket->lampiran_path) }}" target="_blank">Lihat Lampiran</a>
                @else
                    -
                @endif
            </dd>
        </dl>
        </div>
    </div>
</div>
@endsection