@props(['field', 'label', 'scrutiny','remarkOptions'])

<div>
    <div class="custom-sidebar-card">
        <div class="warning-header relative p-2">
          <i class="fa-solid collapse-sidebar fa-angle-up me-2"></i> Scrutiny of Serial no: {{ $label ?? ucwords($field) }}
        </div>

        <div class="warning-body">
            <div class="check-form">
                <div class="row align-items-start">
        
                    <div class="col-md-12">
                        <div class="radio-group mb-3">
                            <label class="custom-radio" for="{{ $field }}_Y">
                                <input type="radio"id="{{ $field }}_Y" wire:model.live="scrutiny.{{ $field }}.status" value="Y" {{ isset($scrutiny[$field]['status']) && $scrutiny[$field]['status'] === 'Y' ? 'checked' : '' }}/>
                                <span class="radio-icon"></span>
                                OK
                            </label>

                            <label class="custom-radio" for="{{ $field }}_N">
                                <input type="radio" id="{{ $field }}_N" wire:model.live="scrutiny.{{ $field }}.status" value="N" {{ isset($scrutiny[$field]['status']) && $scrutiny[$field]['status'] === 'N' ? 'checked' : '' }}/>
                                <span class="radio-icon"></span>
                                Not OK
                            </label>
                        </div>
                    </div>
                        @error("scrutiny.{{ $field }}.status")
                        <x-error :msg="$message" />
                        @enderror

                    <div class="col-md-12">
                        <div class="mb-3">
                            <label for="reason" class="form-label">Select Reason</label>
                            <select class="form-control custom-select" wire:model.live="scrutiny.{{ $field }}.selected_remark">
                            <option>Please Select</option>
                            @forelse($remarkOptions as $remark)
                                
                                <option value="{{ $remark }}">{{ $remark }}</option>
                            @empty
                                <option value="">No remarks available</option>
                            @endforelse
                            </select>
                        </div>
                    </div>
                           <div class="col-md-12">
                            <label for="remarks" class="form-label">Remarks</label>
                            <textarea class="form-control custom-input @error('scrutiny.' . $field . '.remarks') is-invalid @enderror" wire:model.live="scrutiny.{{ $field }}.remarks" rows="2"  placeholder="Remarks (required if Not OK)" id="{{ $field }}_remarks" @if(isset($scrutiny[$field]['status']) && $scrutiny[$field]['status'] === 'N') required @endif
                                placeholder="Please select reason here"></textarea>

                                  @error("scrutiny.{{ $field }}.remarks")
                                    <x-error :msg="$message" />
                                    @enderror
                        </div>
                        <!-- <button class="btn mt-3 btn-primary">Submit</button> -->
                </div>
            </div>
        </div>
    </div>
    @if($scrutiny['status'] === 'Y')
    <div class="d-none scrutiny-icon-collapse justify-content-center mt-3">
     <img src="{{ asset('/assets/images/ok.svg') }}" alt="scrutiny icon">
    </div>
    @elseif($scrutiny['status'] === 'N')

    <div class="d-none scrutiny-icon-collapse justify-content-center mt-3">
    <img src="{{ asset('/assets/images/not-ok.svg') }}" alt="scrutiny icon">

    </div>
    @else
    <div class="d-none scrutiny-icon-collapse justify-content-center mt-3">
    <img src="{{ asset('/assets/images/scrutiny.svg') }}" alt="scrutiny icon">
    </div>
    @endif
</div>