<x-app-layout>

    <x-slot name="header">

        <div class="flex items-center justify-between">

            <div>

                <h2 class="text-2xl font-bold text-slate-800">
                    Production Details
                </h2>

                <p class="text-slate-500 text-sm mt-1">
                    View complete production information
                </p>

            </div>

           

        </div>

    </x-slot>

    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">

        <!-- Header -->
        <div class="p-6 border-b bg-slate-50">

            <div class="flex items-center gap-5">

                <div class="w-20 h-20 rounded-2xl bg-green-100 text-green-600 flex items-center justify-center text-4xl">

                    <i class="bi bi-gear-wide-connected"></i>

                </div>

                <div>

                    <h2 class="text-2xl font-bold text-slate-800">
                        {{ $production->product->name }}
                    </h2>

                    <p class="text-slate-500 mt-1">
                        Production Record
                    </p>

                </div>

            </div>

        </div>

        <!-- Details -->
        <div class="p-6">

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

                <div class="bg-slate-50 rounded-2xl p-5">

                    <p class="text-sm text-slate-500">
                        Product Name
                    </p>

                    <h3 class="text-lg font-bold text-slate-800 mt-2">
                        {{ $production->product->name }}
                    </h3>

                </div>

                <div class="bg-slate-50 rounded-2xl p-5">

                    <p class="text-sm text-slate-500">
                        Production Quantity
                    </p>

                    <h3 class="text-lg font-bold text-slate-800 mt-2">
                        {{ $production->quantity }}
                    </h3>

                </div>

                <div class="bg-slate-50 rounded-2xl p-5">

                    <p class="text-sm text-slate-500">
                        Total Cost
                    </p>

                    <h3 class="text-lg font-bold text-green-600 mt-2">
                        ₹ {{ number_format($production->total_cost, 2) }}
                    </h3>

                </div>

            </div>

        </div>

    </div>

</x-app-layout>