<x-app-layout>

    <x-slot name="header">

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

            <div>

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

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

            </div>

           

        </div>

    </x-slot>

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

        <!-- Product Info -->
        <div class="lg:col-span-1">

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

                <div class="flex items-center justify-center mb-6">

                    <div class="w-24 h-24 rounded-3xl bg-blue-100 text-blue-600 flex items-center justify-center text-5xl">

                        <i class="bi bi-box-seam"></i>

                    </div>

                </div>

                <div class="space-y-5">

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

                        <h3 class="text-xl font-bold text-slate-800 mt-1">
                            {{ $product->name }}
                        </h3>
                    </div>

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

                        <h3 class="font-semibold text-slate-700 mt-1">
                            {{ $product->code }}
                        </h3>
                    </div>

                    <div>
                        <p class="text-sm text-slate-500">
                            HSN Code
                        </p>

                        <h3 class="font-semibold text-slate-700 mt-1">
                            {{ $product->hsn_code }}
                        </h3>
                    </div>

                    <div>
                        <p class="text-sm text-slate-500">
                            GST
                        </p>

                        <h3 class="font-semibold text-slate-700 mt-1">
                            {{ $product->gst }}%
                        </h3>
                    </div>

                    <div>
                        <p class="text-sm text-slate-500">
                            Selling Price
                        </p>

                        <h3 class="text-2xl font-bold text-green-600 mt-1">
                            ₹ {{ $product->price }}
                        </h3>
                    </div>

                    

                </div>

            </div>

        </div>

        <!-- Formula -->
        <div class="lg:col-span-2">

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

                <div class="p-5 border-b bg-slate-50">

                    <h3 class="text-xl font-bold text-slate-800">
                        Product Formula
                    </h3>

                </div>

                <div class="overflow-x-auto">

                    <table class="w-full">

                        <thead class="bg-slate-100">

                            <tr>

                                <th class="p-4 text-left">
                                    Material
                                </th>

                                <th class="p-4 text-left">
                                    Unit
                                </th>

                                <th class="p-4 text-left">
                                    Quantity Used
                                </th>

                                <th class="p-4 text-left">
                                    Material Price
                                </th>

                                <th class="p-4 text-left">
                                    Total Cost
                                </th>

                            </tr>

                        </thead>

                        <tbody>

                            @php
                                $grandTotal = 0;
                            @endphp

                            @foreach($product->materials as $item)

                                @php
                                    $total = $item->price * $item->pivot->quantity;
                                    $grandTotal += $total;
                                @endphp

                                <tr class="border-t">

                                    <td class="p-4 font-medium">
                                        {{ $item->name }}
                                    </td>

                                    <td class="p-4">
                                        {{ $item->unit }}
                                    </td>

                                    <td class="p-4">
                                        {{ $item->pivot->quantity }}
                                    </td>

                                    <td class="p-4">
                                        ₹ {{ $item->price }}
                                    </td>

                                    <td class="p-4 font-semibold text-green-600">
                                        ₹ {{ number_format($total, 2) }}
                                    </td>

                                </tr>

                            @endforeach

                        </tbody>

                        <tfoot class="bg-slate-50 border-t">

                            <tr>

                                <td colspan="4"
                                    class="p-4 text-right font-bold text-slate-800">

                                    Total Formula Cost

                                </td>

                                <td class="p-4 font-bold text-green-600 text-lg">

                                    ₹ {{ number_format($grandTotal, 2) }}

                                </td>

                            </tr>

                        </tfoot>

                    </table>

                </div>

            </div>

        </div>

    </div>

</x-app-layout>