@if(in_array($selectedServiceId,['S018','S013']))
    @php
        $type_authorisation_label = 'Type of authorisation<sup>14</sup>*';
        $service_area_label = 'Service Area <sup>15</sup>*';
    @endphp
@else
    @php
        $type_authorisation_label = 'Type of authorisation<sup>15</sup>*';
        $service_area_label = 'Service Area <sup>16</sup>*';
    @endphp
@endif
<div>
    <div class="mb-4 border rounded p-3">
        <h6 class="fw-bold">{!! $title??'' !!}</h6>
        <div class="card mb-3">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="table-primary">
                            <tr>
                                <th> {!! $type_authorisation_label !!}</th>
                                <th>Category of Service *</th>
                                <th>{!! $service_area_label !!}</th>
                                @if(!$readOnly['details_of_service'])
                                <th>Actions</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($services as $index => $service)
                            <tr>
                                <td>
                                    <select class="form-select form-select-sm {{ $readOnly['details_of_service'] ? 'readonly-select' : '' }}"
                                        wire:model.live="services.{{ $index }}.c_service_id"
                                        wire:loading.attr="disabled"
                                        wire:target="services.{{ $index }}.c_service_id">
                                        <option value="">Select Service</option>
                                        @if(isset($servicesMst[$index]) && !empty($servicesMst[$index]))
                                            @foreach ($servicesMst[$index] as $serviceMst)
                                             @if(
                                                    !in_array(auth()->user()->user_type, ['I', 'IE', 'L','NGO'])
                                                    || $serviceMst['c_serv_id'] === 'S016'
                                                )
                                            <option value="{{ $serviceMst['c_serv_id'] }}" @if($serviceMst['c_serv_id'] == $service['c_service_id']) selected @endif>
                                                {{ $serviceMst['c_serv_long_name'] }}
                                            </option>
                                            @endif
                                            @endforeach
                                        @endif
                                    </select>
                                    <div wire:loading wire:target="services.{{ $index }}.c_service_id" class="spinner-border spinner-border-sm ms-2" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    @error('services.'.$index.'.c_service_id') 
                                    <small class="text-danger small">{{ $message }}</small>
                                    @enderror

                                </td>
                                <td>
                                    <select class="form-select form-select-sm {{ $readOnly['details_of_service'] ? 'readonly-select' : '' }}"
                                        wire:model.live="services.{{ $index }}.n_service_area"
                                        wire:loading.attr="disabled"
                                        wire:target="services.{{ $index }}.n_service_area">
                                        <option value="" disabled>Select Area</option>
                                        @if(isset($serviceAreas[$index]) && !empty($serviceAreas[$index]))
                                        @foreach ($serviceAreas[$index] as $area)
                                        <option value="{{ $area['id'] }}" @if($area['id'] == $service['n_service_area']) selected @endif>
                                            {{ $area['c_serv_name'] }}
                                        </option>
                                        @endforeach
                                        @endif
                                    </select>
                                    <div wire:loading wire:target="services.{{ $index }}.n_service_area" class="spinner-border spinner-border-sm ms-2" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    @error('services.'.$index.'.n_service_area') 
                                    <small class="text-danger small">{{ $message }}</small>
                                    @enderror
                                </td>
                                <td>
                                    <select class="form-select form-select-sm {{ $readOnly['details_of_service'] ? 'readonly-select' : '' }}"
                                        wire:model.live="services.{{ $index }}.n_cir_id"
                                        wire:loading.attr="disabled"
                                        wire:target="services.{{ $index }}.n_cir_id">
                                        <option value="">Select Circle</option>
                                        @if(isset($circlesArea[$index]))
                                        @foreach ($circlesArea[$index] as $circle)
                                        <option value="{{ $circle['cir_id'] }}">
                                            {{ $circle['sh_desc'] }}
                                        </option>
                                        @endforeach
                                        @endif
                                    </select>
                                    <div wire:loading wire:target="services.{{ $index }}.n_cir_id" class="spinner-border spinner-border-sm ms-2" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                </td>
                                @if(!$readOnly['details_of_service'])
                                <td>
                                    <button type="button" class="btn btn-danger btn-sm"
                                        wire:confirm="Are you sure?"
                                        wire:click="removeService({{ $index }})"
                                        wire:loading.attr="disabled">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </td>
                                @endif
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted">No services added</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if(!$readOnly['details_of_service'])
                <button type="button" class="btn btn-outline-primary btn-sm" wire:click="addMisService">
                    <i class="fas fa-plus me-1"></i>Add Service
                </button>
                @endif
                @error('services')
                        <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>
           
        </div>
    </div>
</div>