@extends('layouts.app')

@section('title', 'Detail Produksi #' . $produksi->id . ' - Dazry Laundry App')
@section('page_title', 'Detail Produksi')

@section('content')
<section class="bg-white shadow-md rounded-xl p-6 mb-8">
    <h2 class="text-2xl font-bold text-gray-800 mb-6">Detail Produksi #{{ $produksi->id }}</h2>

    {{-- Informasi Header Produksi --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-700 text-lg mb-8 border-b pb-4">
        <div class="font-semibold">Tanggal Produksi:</div>
        <div>{{ \Carbon\Carbon::parse($produksi->tanggal)->format('d F Y') }}</div>

        <div class="font-semibold">Produk Jadi:</div>
        <div>{{ $produksi->produkJadi->nama ?? 'N/A' }} ({{ $produksi->produkJadi->satuan ?? 'N/A' }})</div>

        <div class="font-semibold">Kuantitas Produksi:</div>
        <div>{{ number_format($produksi->kuantitas_produksi, 2, ',', '.') }} {{ $produksi->produkJadi->satuan ?? '' }}</div>

        <div class="font-semibold">Status:</div>
        <div>
            <span class="px-3 py-1 inline-flex text-sm leading-5 font-semibold rounded-full {{ $produksi->status === 'completed' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                {{ ucfirst($produksi->status) }}
            </span>
        </div>

        <div class="font-semibold">Keterangan:</div>
        <div>{{ $produksi->keterangan ?? '-' }}</div>

        <div class="font-semibold">Dibuat Pada:</div>
        <div>{{ $produksi->created_at->format('d-m-Y H:i:s') }}</div>

        <div class="font-semibold">Terakhir Diperbarui:</div>
        <div>{{ $produksi->updated_at->format('d-m-Y H:i:s') }}</div>
    </div>

    {{-- Detail Bahan Baku yang Digunakan --}}
    <h3 class="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">Bahan Baku yang Digunakan</h3>
    <div class="overflow-x-auto rounded-lg border border-gray-200">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">No.</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Bahan Baku</th>
                    <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Kuantitas Digunakan</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse ($produksi->details as $detail)
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $loop->iteration }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $detail->bahanBaku->nama ?? 'N/A' }} ({{ $detail->bahanBaku->satuan ?? 'N/A' }})</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-500">{{ number_format($detail->kuantitas_digunakan, 2, ',', '.') }} {{ $detail->bahanBaku->satuan ?? '' }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="3" class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">Tidak ada bahan baku yang tercatat untuk produksi ini.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Tombol Aksi --}}
    <div class="flex items-center justify-end mt-8 space-x-4">
        <a href="{{ route('produksi.index') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2.5 px-6 rounded-lg shadow-md transition-all duration-200 transform hover:scale-105">
            Kembali ke Daftar
        </a>
        <a href="{{ route('produksi.edit', $produksi->id) }}" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2.5 px-6 rounded-lg shadow-md transition-all duration-200 transform hover:scale-105">
            Edit Produksi
        </a>
    </div>
</section>
@endsection