@if(!empty($details['product_details']) && count($details['product_details']) > 0)
  <div style="margin-bottom: 16px;">
    <h4 style="font-size: 13px; font-weight: 700; margin: 0 0 8px 0; color: #1e293b; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 6px;">
      <i class="fa fa-box" style="color: #4f46e5;"></i>
      @lang('lang_v1.product_sold_details_register')
    </h4>
    <div class="table-responsive" style="border: none; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); border-radius: 12px; max-height: 250px; overflow-y: auto;">
      <table class="table table-bordered" style="margin: 0;">
        <thead style="position: sticky; top: 0; z-index: 1;">
          <tr>
            <th style="width: 40px; text-align: center;">#</th>
            <th style="text-align: left;">@lang('product.sku')</th>
            <th style="text-align: left;">@lang('sale.product')</th>
            <th style="text-align: center; width: 80px;">@lang('sale.qty')</th>
            <th style="text-align: right; width: 100px;">@lang('sale.total_amount')</th>
          </tr>
        </thead>
        <tbody>
          @php
            $total_amount = 0;
            $total_quantity = 0;
          @endphp
          @foreach($details['product_details'] as $detail)
            <tr>
              <td style="text-align: center; font-weight: 600; color: #64748b;">{{$loop->iteration}}</td>
              <td style="text-align: left; font-size: 10px; color: #64748b; font-family: monospace;">{{$detail->sku}}</td>
              <td style="text-align: left;">
                <strong style="color: #1e293b;">{{$detail->product_name}}</strong>
                @if($detail->type == 'variable')
                 <br><small style="color: #64748b;">({{$detail->product_variation_name}} - {{$detail->variation_name}})</small>
                @endif
              </td>
              <td style="text-align: center; font-weight: 600; color: #1e293b;">
                {{@format_quantity($detail->total_quantity)}}
                @php
                  $total_quantity += $detail->total_quantity;
                @endphp
              </td>
              <td style="text-align: right; font-weight: 600;">
                <span class="display_currency" data-currency_symbol="true" data-orig-value="{{ $detail->total_amount ?? 0 }}">
                  @format_currency($detail->total_amount ?? 0)
                </span>
                @php
                  $total_amount += $detail->total_amount;
                @endphp
              </td>
            </tr>
          @endforeach
        </tbody>
        <tfoot style="background-color: #f8fafc; border-top: 2px solid #e2e8f0;">
          <tr>
            <th colspan="3" style="text-align: right;">@lang('sale.total'):</th>
            <th style="text-align: center; font-weight: 700; color: #1e293b;">{{@format_quantity($total_quantity)}}</th>
            <th style="text-align: right; font-weight: 700; color: #4f46e5;">
              <span class="display_currency" data-currency_symbol="true" data-orig-value="{{ $total_amount }}">
                @format_currency($total_amount)
              </span>
            </th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
@endif

@if(!empty($details['product_details_by_brand']) && count($details['product_details_by_brand']) > 0)
  <div style="margin-bottom: 16px;">
    <h4 style="font-size: 13px; font-weight: 700; margin: 0 0 8px 0; color: #1e293b; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 6px;">
      <i class="fa fa-tags" style="color: #4f46e5;"></i>
      @lang('lang_v1.product_sold_details_register') (@lang('lang_v1.by_brand'))
    </h4>
    <div class="table-responsive" style="border: none; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); border-radius: 12px; max-height: 250px; overflow-y: auto;">
      <table class="table table-bordered" style="margin: 0;">
        <thead style="position: sticky; top: 0; z-index: 1;">
          <tr>
            <th style="width: 40px; text-align: center;">#</th>
            <th style="text-align: left;">@lang('brand.brands')</th>
            <th style="text-align: center; width: 80px;">@lang('sale.qty')</th>
            <th style="text-align: right; width: 100px;">@lang('sale.total_amount')</th>
          </tr>
        </thead>
        <tbody>
          @php
            $total_amount_brand = 0;
            $total_quantity_brand = 0;
          @endphp
          @foreach($details['product_details_by_brand'] as $detail)
            <tr>
              <td style="text-align: center; font-weight: 600; color: #64748b;">{{$loop->iteration}}</td>
              <td style="text-align: left;"><strong>{{$detail->brand_name}}</strong></td>
              <td style="text-align: center; font-weight: 600; color: #1e293b;">
                {{@format_quantity($detail->total_quantity)}}
                @php
                  $total_quantity_brand += $detail->total_quantity;
                @endphp
              </td>
              <td style="text-align: right; font-weight: 600;">
                <span class="display_currency" data-currency_symbol="true" data-orig-value="{{ $detail->total_amount ?? 0 }}">
                  @format_currency($detail->total_amount ?? 0)
                </span>
                @php
                  $total_amount_brand += $detail->total_amount;
                @endphp
              </td>
            </tr>
          @endforeach
        </tbody>
        <tfoot style="background-color: #f8fafc; border-top: 2px solid #e2e8f0;">
          <tr>
            <th colspan="2" style="text-align: right;">@lang('sale.total'):</th>
            <th style="text-align: center; font-weight: 700; color: #1e293b;">{{@format_quantity($total_quantity_brand)}}</th>
            <th style="text-align: right; font-weight: 700; color: #4f46e5;">
              <span class="display_currency" data-currency_symbol="true" data-orig-value="{{ $total_amount_brand }}">
                @format_currency($total_amount_brand)
              </span>
            </th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
@endif

@if(!empty($details['types_of_service_details']) && count($details['types_of_service_details']) > 0)
  <div style="margin-bottom: 16px;">
    <h4 style="font-size: 13px; font-weight: 700; margin: 0 0 8px 0; color: #1e293b; text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 6px;">
      <i class="fa fa-list" style="color: #4f46e5;"></i>
      @lang('lang_v1.types_of_service_details')
    </h4>
    <div class="table-responsive" style="border: none; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); border-radius: 12px;">
      <table class="table table-bordered" style="margin: 0;">
        <thead>
          <tr>
            <th style="width: 40px; text-align: center;">#</th>
            <th style="text-align: left;">@lang('lang_v1.types_of_service')</th>
            <th style="text-align: right; width: 120px;">@lang('sale.total_amount')</th>
          </tr>
        </thead>
        <tbody>
          @php
            $total_service_sales = 0;
          @endphp
          @foreach($details['types_of_service_details'] as $detail)
            <tr>
              <td style="text-align: center; font-weight: 600; color: #64748b;">{{$loop->iteration}}</td>
              <td style="text-align: left;"><strong>{{$detail->types_of_service_name ?? "--"}}</strong></td>
              <td style="text-align: right; font-weight: 600;">
                <span class="display_currency" data-currency_symbol="true" data-orig-value="{{ $detail->total_sales ?? 0 }}">
                  @format_currency($detail->total_sales ?? 0)
                </span>
                @php
                  $total_service_sales += $detail->total_sales;
                @endphp
              </td>
            </tr>
          @endforeach
        </tbody>
        <tfoot style="background-color: #f8fafc; border-top: 2px solid #e2e8f0;">
          <tr>
            <th colspan="2" style="text-align: right;">@lang('lang_v1.grand_total'):</th>
            <th style="text-align: right; font-weight: 700; color: #4f46e5;">
              <span class="display_currency" data-currency_symbol="true" data-orig-value="{{ $total_service_sales }}">
                @format_currency($total_service_sales)
              </span>
            </th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
@endif