<x-app-layout>
    @section('title', 'Detail Obat Masuk')

    @push('styles')
    <style>
        @media print {
            body { background-color: white !important; }
            .sidebar, nav, header, .print\:hidden { display: none !important; }
            main { margin-left: 0 !important; padding: 0 !important; }
            .max-w-7xl { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
            .shadow-sm, .shadow { box-shadow: none !important; border: 1px solid #ddd !important; }
            * { color: black !important; }
        }
    </style>
    @endpush

    <div class="space-y-6">
        <!-- Breadcrumb -->
        <nav class="flex" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
                <li>
                    <a href="{{ route('obat-masuk.index') }}" class="text-[#7A7FAE] hover:text-[#4A538F]">Obat Masuk</a>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-4 h-4 text-[#7A7FAE]" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                        </svg>
                        <span class="ml-1 text-[#2F347A] font-medium">Detail</span>
                    </div>
                </li>
            </ol>
        </nav>

        <div class="flex items-center justify-between">
            <h1 class="text-2xl font-bold text-[#2F347A]">Detail Obat Masuk</h1>
            <div class="flex gap-2">
                <x-btn type="secondary" onclick="window.print()" class="print:hidden">
                    <svg class="w-4 h-4 mr-1" 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>
                    Print
                </x-btn>
                @if(auth()->user()->isApoteker() || auth()->user()->isSuperAdmin())
                <x-btn type="secondary" href="{{ route('obat-masuk.edit', $obatMasuk) }}" class="print:hidden">
                    <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                    Edit
                </x-btn>
                @endif
                <x-btn type="secondary" href="{{ route('obat-masuk.index') }}" class="print:hidden">Kembali</x-btn>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Informasi Obat -->
            <x-card class="p-6">
                <h3 class="text-lg font-semibold text-[#2F347A] mb-4 pb-2 border-b border-[#E5E7F2]">Informasi Obat</h3>
                <dl class="space-y-3">
                    <div class="flex justify-between">
                        <dt class="text-[#7A7FAE]">Nama Obat</dt>
                        <dd class="font-medium text-[#2F347A]">{{ $obatMasuk->nama_obat }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-[#7A7FAE]">Kode Batch</dt>
                        <dd class="font-medium text-[#2F347A]">{{ $obatMasuk->kode_batch }}</dd>
                    </div>

                    <div class="flex justify-between">
                        <dt class="text-[#7A7FAE]">Kategori</dt>
                        <dd class="font-medium text-[#2F347A]">{{ $obatMasuk->kategori->nama ?? 'N/A' }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-[#7A7FAE]">Satuan</dt>
                        <dd class="font-medium text-[#2F347A]">{{ $obatMasuk->satuan->nama ?? 'N/A' }}</dd>
                    </div>
                    
                </dl>
            </x-card>

            <!-- Sumber Dana & Stok -->
            <x-card class="p-6">
                <h3 class="text-lg font-semibold text-[#2F347A] mb-4 pb-2 border-b border-[#E5E7F2]">Sumber Dana & Stok</h3>
                <dl class="space-y-3">
                    <div class="flex justify-between">
                        <dt class="text-[#7A7FAE]">Sumber Dana</dt>
                        <dd class="font-medium text-[#2F347A]">{{ $obatMasuk->sumber_dana ?? '-' }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-[#7A7FAE]">Barcode Obat</dt>
                        <dd class="font-medium text-[#2F347A]">{{ $obatMasuk->barcode ?? '-' }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-[#7A7FAE]">Stok</dt>
                        <dd class="font-medium text-[#2F347A]">{{ $obatMasuk->stok }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-[#7A7FAE]">No. Faktur</dt>
                        <dd class="font-medium text-[#2F347A]">{{ $obatMasuk->no_faktur ?? '-' }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-[#7A7FAE]">No. SBBK</dt>
                        <dd class="font-medium text-[#2F347A]">{{ $obatMasuk->no_sbbk ?? '-' }}</dd>
                    </div>
                </dl>
            </x-card>

            

            <!-- Tanggal -->
            <x-card class="p-6">
                <h3 class="text-lg font-semibold text-[#2F347A] mb-4 pb-2 border-b border-[#E5E7F2]">Tanggal</h3>
                <dl class="space-y-3">
                    <div class="flex justify-between">
                        <dt class="text-[#7A7FAE]">Tanggal Penerimaan</dt>
                        <dd class="font-medium text-[#2F347A]">{{ $obatMasuk->tanggal_penerimaan->format('d M Y') }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-[#7A7FAE]">Tanggal Kadaluarsa</dt>
                        <dd class="font-medium text-[#2F347A]">{{ $obatMasuk->tanggal_kadaluarsa->format('d M Y') }}</dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-[#7A7FAE]">Sisa Hari</dt>
                        <dd class="font-medium {{ $obatMasuk->sisa_hari <= 30 ? 'text-[#C0392B]' : ($obatMasuk->sisa_hari <= 60 ? 'text-[#B78103]' : 'text-[#1F9254]') }}">
                            {{ $obatMasuk->sisa_hari }} hari
                        </dd>
                    </div>
                    <div class="flex justify-between">
                        <dt class="text-[#7A7FAE]">Status</dt>
                        <dd>
                            <x-badge :type="$obatMasuk->status_kadaluarsa">
                                {{ $obatMasuk->status_kadaluarsa == 'kritis' ? 'Awas' : ($obatMasuk->status_kadaluarsa == 'waspada' ? 'Waspada' : 'Aman') }}
                            </x-badge>
                        </dd>
                    </div>
                </dl>
            </x-card>

            <!-- Catatan -->
            <x-card class="p-6">
                <h3 class="text-lg font-semibold text-[#2F347A] mb-4 pb-2 border-b border-[#E5E7F2]">Catatan</h3>
                <p class="text-[#7A7FAE]">{{ $obatMasuk->catatan ?? 'Tidak ada catatan' }}</p>
            </x-card>
        </div>
    </div>
</x-app-layout>
