<div>
    <div class="flex">
        <input type="date" wire:model='start'
            class="font-bold bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-max p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">

        <input type="date" wire:model='end'
            class="ml-2 font-bold bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-max p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">


    </div>

    <div class="relative mt-5 overflow-x-auto">
        <header class="px-5 py-4 bg-blue-500 border-b border-blue-500">
            <h2 class="font-semibold text-gray-100">
                Productos - Reportes
            </h2>
        </header>
        <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
            <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400">
                <tr>
                    <th scope="col" class="px-6 py-3 rounded-l-lg">
                        N° Venta
                    </th>
                    <th scope="col" class="px-6 py-3 rounded-l-lg">
                        Descripción
                    </th>
                    <th scope="col" class="px-6 py-3">
                        P.Compra
                    </th>
                    <th scope="col" class="px-6 py-3">
                        P.Venta
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Cantidad
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Total
                    </th>
                    <th scope="col" class="px-6 py-3 rounded-r-lg">
                        Ganancio
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach ($sales as $sale )
                @foreach ($sale->Product as $product )
                <tr class="bg-white dark:bg-white-800">
                    <th scope="row" class="px-6 py-4 font-bold text-black capitalize whitespace-nowrap">
                        {{ $sale->id }}
                    </th>
                    <th scope="row" class="px-6 py-4 font-bold text-black capitalize whitespace-nowrap">
                        {{ $product->description_product}}
                    </th>
                    <td class="px-6 py-4 font-bold text-black capitalize">
                        <label class="text-blue-700">
                            S/. {{ number_format($product->pivot->price_product_buy,2) }}
                        </label>
                    </td>
                    <td class="px-6 py-4 font-bold text-black capitalize">
                        <label class="text-blue-700">
                            S/. {{ number_format($product->pivot->price_product_sale,2) }}
                        </label>
                    </td>
                    <td class="px-6 py-4 font-bold text-black capitalize">
                        {{ $product->pivot->amount_product_sale }}
                    </td>

                    <td class="px-6 py-4 font-bold">
                        <label class="text-green-700">
                            S/. {{ number_format(($product->pivot->price_product_sale *
                            $product->pivot->amount_product_sale ),2) }}
                        </label>
                    </td>
                    <td class="px-6 py-4 font-bold">
                        <label class="text-green-700">
                            S/. {{ number_format((($product->pivot->price_product_sale *
                            $product->pivot->amount_product_sale ) - ($product->pivot->price_product_buy *
                            $product->pivot->amount_product_sale )),2) }}
                        </label>
                    </td>
                </tr>
                <div class="hidden">
                    {{$total += $product->pivot->price_product_sale *
                    $product->pivot->amount_product_sale }}
                    {{ $gain += (($product->pivot->price_product_sale *
                    $product->pivot->amount_product_sale ) - ($product->pivot->price_product_buy *
                    $product->pivot->amount_product_sale )) }}
                </div>
                @endforeach
                @endforeach
            </tbody>
            <tfoot>
                <tr class="font-semibold text-gray-900 bg-gray-200 ">
                    <th scope="row" class="px-6 py-3 text-base"></th>
                    <td class="px-6 py-3"></td>
                    <td class="px-6 py-3"></td>
                    <td class="px-6 py-3"></td>
                    <td class="px-6 py-3">TOTAL</td>
                    <td class="px-6 py-3 text-lg font-bold text-green-700">
                        S/. {{ number_format($total,2)}}
                    </td>
                    <td class="px-6 py-3 text-lg font-bold text-green-700">
                        S/. {{ number_format($gain,2)}}
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
