@foreach($Products as $row)
<tr>
    <td></td>
    <!--<td>{{ $row->id }}</td>-->
    <td><span title="{{$product_name}}">{{mb_strimwidth($product_name, 0, 20, "...")}}</span></td>
    <td><span title="{{$product_description}}">{{mb_strimwidth($product_description, 0, 20, "...")}}</span></td>
    <td>{{$rate}}</td>
    <td>{{$tax_amount}}</td>
    <td>{{$tax_percentage}} %</td>
    <td>{{$unit_long}}</td>
    <td>
        <div class="dropdown">
            <button class="btn btn-light btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <i class="mdi mdi-dots-vertical align-middle font-size-16"></i></button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li>
                    <button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target=".bs-example-modal-xl{{$row->id}}" style="color:darkcyan">View</button>
                </li>                
                <!-- <li>
                    <a href="{{url('/product/')}}/edit/{{encrypt($row->id)}}" type="button" class="dropdown-item" style="color:goldenrod">Edit</a>
                </li>     -->
                <li>
                    <button type="button" class="dropdown-item" onClick="deleteProduct('{{encrypt($product_id)}}')" style="color:red;">Delete</button>
                </li>                 
            </ul>
        </div>
        <div class="modal fade bs-example-modal-xl{{$row->id}}" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="myExtraLargeModalLabel">{{$product_name}} Product's Details </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">

                        <div class="row">
                            <div class="col-md-4">
                                <h6 class="font-size-15 mb-1">Product Name</h6>
                                <p class="text-muted mb-0 font-size-14">{{$product_name}}</p>
                            </div>
                        </div>
                        <div class="row mt-4" >

                            <div class="col-md-4">
                                <h6 class="font-size-15 mb-1">Price</h6>
                                <p class="text-muted mb-0 font-size-14"> @if(!empty($rate)) {{$rate}} @else 0 @endif</p>
                            </div>
                            <div class="col-md-4">
                                <h6 class="font-size-15 mb-1">Tax Percentage</h6>
                                <p class="text-muted mb-0 font-size-14"> @if(!empty($tax_percentage)) {{$tax_percentage}} @else 0 @endif %</p>
                            </div>
                            <div class="col-md-4">
                                <h6 class="font-size-15 mb-1">Tax Amount</h6>
                                <p class="text-muted mb-0 font-size-14"> @if(!empty($tax_amount)) {{$tax_amount}} @else 0 @endif</p>
                            </div>


                        </div>
                        <div class="row mt-4" >
                            <div class="col-md-4">
                                <h6 class="font-size-15 mb-1">Unit</h6>
                                <p class="text-muted mb-0 font-size-14"> @if(!empty($unit_long)) {{$unit_long}} @else N/A @endif</p>
                            </div>
                            <div class="col-md-8">
                                <h6 class="font-size-15 mb-1">Description</h6>
                                <p class="text-muted mb-0 font-size-14" style="word-wrap: break-word;">{{$product_description}}</p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </td>
</tr>
@endforeach