I am trying to add the counter based on the provider. It should be global not service wise. I mean if there are 2 services and both of them have 2 providers, then it should show the counter like provider 1 and 2 for first service, then provider 3 and 4 for next service.
<template x-if="services !== undefined" x-for="(service,key) in services.services">
<template x-if="service !== undefined">
<tbody>
<tr>
<td>
<h3 x-text="service.service_name"></h3>
<div id="service-info" class="mt-3">
<span class="text-left"
x-html="'Booking No. '+service.booking_number "></span><br>
<span class="text-left" x-html="'Start Time: '+ service.start_time "></span><br>
<span class="text-left" x-html="'End Time: '+ service.end_time "></span><br>
<span class="text-left"
x-html="'Providers: '+ service.providers.length "></span><br>
</div>
</td>
<td>
</td>
<td>
</td>
</tr>
<template x-for="(provider,index) in service.providers" :key="index">
<tr x-show="provider !== undefined && provider.check_in_status !== null">
<td>
<h3 x-show="details.hide_providers !== undefined && !details.hide_providers"
x-text="provider.user.name"></h3>
<h3 x-show="details.hide_providers !== undefined && details.hide_providers"
x-text="'service-' + service.id + '-' + provider.id + 'Provider ' + providerCounter++"
:id="'service-' + service.id + '-' + provider.id"></h3>
<!-- Increment customCounter after each provider is rendered -->
<div id="provider-info" class="mt-3">
<span class="text-left"
x-html="'Start Time: '+ new Date(provider.check_in_procedure_values.actual_start_timestamp).toLocaleDateString() "></span><br>
<span class="text-left"
x-html="'End Time: '+ new Date(provider.check_out_procedure_values.actual_end_timestamp).toLocaleDateString() "></span><br>
</div>
</td>
<td>
<div x-show=" 'total_durations_billing' in provider.billing_details ">
<span
x-show="!provider.service_payment_details.fixed_rate && provider.service_payment_details.day_rate "
class="text-left"
x-html="provider.billing_details.total_durations_billing.days == null ? '' : provider.billing_details.total_durations_billing.days+' Days '"></span>
<span x-show="!provider.service_payment_details.fixed_rate"
class="text-left"
x-html="provider.billing_details.total_durations_billing.hours == null ? '' : provider.billing_details.total_durations_billing.hours+' Hours '"></span>
<span
x-show="!provider.service_payment_details.fixed_rate && !provider.service_payment_details.day_rate"
class="text-left"
x-html="provider.billing_details.total_durations_billing.mins == null ? '' : provider.billing_details.total_durations_billing.mins+' Mins '"></span>
</div>
<div x-show=" 'total_durations_billing' in provider.billing_details == false ">
<span
x-show="!provider.service_payment_details.fixed_rate && provider.service_payment_details.day_rate "
class="text-left"
x-html="service.days == null ? '' : service.days+' Days '"></span>
<span x-show="!provider.service_payment_details.fixed_rate"
class="text-left"
x-html="service.hours == null ? '' : service.hours+' Hours '"></span>
<span
x-show="!provider.service_payment_details.fixed_rate && !provider.service_payment_details.day_rate"
class="text-left"
x-html="service.mins == null ? '' : service.mins+' Mins '"></span>
</div>
</td>
<td>
<template x-if="provider.billing_details !== undefined"
x-for="(charge,charge_index) in provider.billing_details"
:key="charge_index">
<template x-if="charge_index == 'service_charges'">
<div id="service-list" class="d-flex"
style="justify-content: space-between;">
<div class="text-left mb-2">
<p x-html="'Service Charges'"></p>
</div>
<div class="text-right mb-3">
<p x-html="charge"></p>
</div>
</div>
</template>
</template>
<template x-if="provider.billing_details !== undefined"
x-for="(charge,charge_index) in provider.billing_details"
:key="charge_index">
<template
x-if="charge_index == 'additional_charges' || charge_index == 'specialization_charges' || charge_index == 'expedited_charges'">
<template x-for="(details,detail_index) in charge">
<div id="service-list" class="d-flex"
style="justify-content: space-between;">
<div class="text-left mb-2">
<p x-text="details.label"></p>
</div>
<div class="text-right mb-3">
<p x-text="details.charges"></p>
</div>
</div>
</template>
</template>
</template>
<template x-if="provider.service_payment_details.expedited_rate !== undefined">
<div id="service-list" class="d-flex"
style="justify-content: space-between;">
<div class="text-left mb-2">
<p>Expedition Charges</p>
</div>
<div class="text-right mb-3">
<p x-html="provider.service_payment_details.expedited_rate"></p>
</div>
</div>
</template>
<template x-if="provider.billing_details !== undefined"
x-for="(charge,charge_index) in provider.billing_details"
:key="charge_index">
<template x-if="charge_index == 'discounts_list'">
<template x-for="(discounts,discount_index) in charge"
:key="discount_index">
<template x-if="discount_index !== undefined">
<div id="service-list" class="d-flex"
style="justify-content: space-between;">
<div class="text-left mb-2">
<p
x-html="'<strong>Discount :</strong> ' + discounts.label">
</p>
</div>
<div class="text-right mb-3">
<p x-html="discounts.value"></p>
</div>
</div>
</template>
</template>
</template>
</template>
<div id="service-list" class="d-flex" style="justify-content: space-between;">
<div class="text-left mb-2">
<p><strong>Total Provider Charges</strong></p>
</div>
<div class="text-right mb-3">
<p
x-html="services.currency + provider.billing_details.total_provider_charges">
</p>
</div>
</div>
</td>
</tr>
<!-- Increment the counter after rendering each service -->
</template>
I tried adding the counter but it was always returning the max count for every provider, meaning that if I had 10 providers it was showing provider 10 for each of them. Any ideas how I solve this?
1