@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render('bucok.show', $bucok) }}
@endsection

@section('content')
    <div class="grid gap-5 lg:gap-7.5">
        <!-- Header Card -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Detail Bucok #{{ $bucok->nomor_tiket }}</h3>
                <div class="flex gap-2">
                    <a href="{{ route('bucok.index') }}" class="btn btn-sm btn-light">
                        <i class="ki-filled ki-left"></i> Kembali
                    </a>
                </div>
            </div>
        </div>

        <!-- Detail Information -->
        <div class="grid gap-5 lg:grid-cols-2 lg:gap-7.5">
            <!-- Informasi Dasar -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Informasi Dasar</h3>
                </div>
                <div class="card-body">
                    <div class="grid gap-5">
                        <div class="flex justify-between items-center py-2.5 border-b border-gray-200">
                            <div class="flex flex-col gap-1">
                                <div class="text-sm font-medium text-gray-900">No</div>
                                <div class="text-gray-700 text-2sm">{{ $bucok->no ?? '-' }}</div>
                            </div>
                        </div>

                        <div class="flex justify-between items-center py-2.5 border-b border-gray-200">
                            <div class="flex flex-col gap-1">
                                <div class="text-sm font-medium text-gray-900">Tanggal</div>
                                <div class="text-gray-700 text-2sm">
                                    {{ $bucok->tanggal ? dateFormat($bucok->tanggal, true) : '-' }}</div>
                            </div>
                        </div>

                        <div class="flex justify-between items-center py-2.5 border-b border-gray-200">
                            <div class="flex flex-col gap-1">
                                <div class="text-sm font-medium text-gray-900">Bulan</div>
                                <div class="text-gray-700 text-2sm">{{ $bucok->bulan ?? '-' }}</div>
                            </div>
                        </div>

                        <div class="flex justify-between items-center py-2.5 border-b border-gray-200">
                            <div class="flex flex-col gap-1">
                                <div class="text-sm font-medium text-gray-900">Tahun</div>
                                <div class="text-gray-700 text-2sm">{{ $bucok->tahun ?? '-' }}</div>
                            </div>
                        </div>

                        <div class="flex justify-between items-center py-2.5 border-b border-gray-200">
                            <div class="flex flex-col gap-1">
                                <div class="text-sm font-medium text-gray-900">Nomor Tiket</div>
                                <div class="font-medium text-gray-700 text-2sm">{{ $bucok->nomor_tiket }}</div>
                            </div>
                        </div>

                        <div class="flex justify-between items-center py-2.5">
                            <div class="flex flex-col gap-1">
                                <div class="text-sm font-medium text-gray-900">Status Penyelesaian</div>
                                <div class="text-2sm">{!! $bucok->status_badge !!}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Informasi COA -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Informasi COA</h3>
                </div>
                <div class="card-body">
                    <div class="grid gap-5">
                        <div class="flex justify-between items-center py-2.5 border-b border-gray-200">
                            <div class="flex flex-col gap-1">
                                <div class="text-sm font-medium text-gray-900">Nomor COA</div>
                                <div class="text-gray-700 text-2sm">{{ $bucok->nomor_coa ?? '-' }}</div>
                            </div>
                        </div>

                        <div class="flex justify-between items-center py-2.5 border-b border-gray-200">
                            <div class="flex flex-col gap-1">
                                <div class="text-sm font-medium text-gray-900">Nama COA</div>
                                <div class="text-gray-700 text-2sm">{{ $bucok->nama_coa ?? '-' }}</div>
                            </div>
                        </div>

                        <div class="flex justify-between items-center py-2.5 border-b border-gray-200">
                            <div class="flex flex-col gap-1">
                                <div class="text-sm font-medium text-gray-900">Deskripsi</div>
                                <div class="text-gray-700 text-2sm">{{ $bucok->deskripsi ?? '-' }}</div>
                            </div>
                        </div>

                        <div class="flex justify-between items-center py-2.5">
                            <div class="flex flex-col gap-1">
                                <div class="text-sm font-medium text-gray-900">Nominal</div>
                                <div class="font-medium text-gray-700 text-2sm">{{ $bucok->nominal_formatted }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Informasi Organisasi -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Informasi Organisasi</h3>
            </div>
            <div class="card-body">
                <div class="grid gap-5 lg:grid-cols-3">
                    <div class="flex justify-between items-center py-2.5 border-b border-gray-200">
                        <div class="flex flex-col gap-1">
                            <div class="text-sm font-medium text-gray-900">Cost Center</div>
                            <div class="text-gray-700 text-2sm">{{ $bucok->cost_center ?? '-' }}</div>
                        </div>
                    </div>

                    <div class="flex justify-between items-center py-2.5 border-b border-gray-200">
                        <div class="flex flex-col gap-1">
                            <div class="text-sm font-medium text-gray-900">Sub Direktorat</div>
                            <div class="text-gray-700 text-2sm">{{ $bucok->nama_sub_direktorat ?? '-' }}</div>
                        </div>
                    </div>

                    <div class="flex justify-between items-center py-2.5 border-b border-gray-200">
                        <div class="flex flex-col gap-1">
                            <div class="text-sm font-medium text-gray-900">Direktorat/Cabang</div>
                            <div class="text-gray-700 text-2sm">{{ $bucok->nama_direktorat_cabang ?? '-' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Informasi Penyelesaian -->
        @if ($bucok->tanggal_penyelesaian || $bucok->nominal_penyelesaian || $bucok->penyelesaian)
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Informasi Penyelesaian</h3>
                </div>
                <div class="card-body">
                    <div class="grid gap-5 lg:grid-cols-2">
                        <div class="flex justify-between items-center py-2.5 border-b border-gray-200">
                            <div class="flex flex-col gap-1">
                                <div class="text-sm font-medium text-gray-900">Tanggal Penyelesaian</div>
                                <div class="text-gray-700 text-2sm">
                                    {{ $bucok->tanggal_penyelesaian ? dateFormat($bucok->tanggal_penyelesaian, true) : '-' }}
                                </div>
                            </div>
                        </div>

                        <div class="flex justify-between items-center py-2.5 border-b border-gray-200">
                            <div class="flex flex-col gap-1">
                                <div class="text-sm font-medium text-gray-900">Nominal Penyelesaian</div>
                                <div class="font-medium text-gray-700 text-2sm">
                                    {{ $bucok->nominal_penyelesaian_formatted }}</div>
                            </div>
                        </div>

                        <div class="flex justify-between items-center py-2.5 border-b border-gray-200">
                            <div class="flex flex-col gap-1">
                                <div class="text-sm font-medium text-gray-900">Penyelesaian</div>
                                <div class="text-gray-700 text-2sm">{{ $bucok->penyelesaian ?? '-' }}</div>
                            </div>
                        </div>

                        <div class="flex justify-between items-center py-2.5 border-b border-gray-200">
                            <div class="flex flex-col gap-1">
                                <div class="text-sm font-medium text-gray-900">Umur Aging</div>
                                <div class="text-gray-700 text-2sm">{{ $bucok->umur_aging ?? '-' }} hari</div>
                            </div>
                        </div>

                        @if ($bucok->keterangan_gantung)
                            <div class="flex justify-between items-center py-2.5">
                                <div class="flex flex-col gap-1">
                                    <div class="text-sm font-medium text-gray-900">Keterangan Gantung</div>
                                    <div class="text-gray-700 text-2sm">{{ $bucok->keterangan_gantung }}</div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        @endif

        <!-- Informasi Audit -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Informasi Audit</h3>
            </div>
            <div class="card-body">
                <div class="grid gap-5 lg:grid-cols-2">
                    <div class="flex justify-between items-center py-2.5 border-b border-gray-200">
                        <div class="flex flex-col gap-1">
                            <div class="text-sm font-medium text-gray-900">Dibuat Oleh</div>
                            <div class="text-gray-700 text-2sm">{{ $bucok->creator?->name ?? '-' }}</div>
                        </div>
                    </div>

                    <div class="flex justify-between items-center py-2.5 border-b border-gray-200">
                        <div class="flex flex-col gap-1">
                            <div class="text-sm font-medium text-gray-900">Tanggal Dibuat</div>
                            <div class="text-gray-700 text-2sm">{{ dateFormat($bucok->created_at, true) }}</div>
                        </div>
                    </div>

                    <div class="flex justify-between items-center py-2.5 border-b border-gray-200">
                        <div class="flex flex-col gap-1">
                            <div class="text-sm font-medium text-gray-900">Diperbarui Oleh</div>
                            <div class="text-gray-700 text-2sm">{{ $bucok->updater?->name ?? '-' }}</div>
                        </div>
                    </div>

                    <div class="flex justify-between items-center py-2.5">
                        <div class="flex flex-col gap-1">
                            <div class="text-sm font-medium text-gray-900">Tanggal Diperbarui</div>
                            <div class="text-gray-700 text-2sm">{{ dateFormat($bucok->updated_at, true) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection