@props(['field', 'label', 'scrutiny','remarkOptions'])
@php
if (is_string($remarkOptions)) {
$decoded = json_decode(htmlspecialchars_decode($remarkOptions), true);
$remarkOptions = is_array($decoded) ? $decoded : [];
}
$remarkOptions = $remarkOptions ?? [];
@endphp
<div class="scrutiny-panel-wrapper" data-scrutiny-field="{{ $field ?? '' }}">
    <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>