@php
    use App\Models\IncidentStatus;
    $caseStatus = IncidentStatus::where('victimid', $id)->first() ?? new IncidentStatus();
@endphp

<div class="row">
    <legend>Case Status</legend>

    <div class="col-sm-6" id="home1">
        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Date: <span class="text-danger">*</span></label>
            <div class="col-md-8">
                <input type="text" readonly class="form-control datepicker" name="date_reported"
                       value="{{ old('date_reported', $caseStatus->date_logged) }}" required>
            </div>
        </div>

        <div class="form-group row">
            <label class="col-md-4 col-form-label text-md-left">Case Status: <span class="text-danger">*</span></label>
            <div class="col-md-8">
                <select id="reportedto" class="form-control search-select" name="reportedto" required>
                    <option value="">Choose One</option>
                    @foreach($statuses as $status)
                        <option value="{{ $status->id }}"
                            {{ old('reportedto', $caseStatus->incident_status) == $status->id ? 'selected' : '' }}>
                            {{ $status->name }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="form-group row" id="statuses">
            @if($caseStatus->incident_status == 1)
                <label class="col-sm-4 control-label">Pending Points: <span class="text-danger">*</span></label>
                <div class="col-md-8">
                    <select class="form-control search-select" name="pendingpoint" id="pendingpoint" required>
                        @foreach($pendingPoints as $point)
                            <option value="{{ $point->id }}"
                                {{ old('pendingpoint', $caseStatus->pendingpoint) == $point->id ? 'selected' : '' }}>
                                {{ $point->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
            @endif
        </div>

        <div class="form-group row" id="satisfied">
            {{-- Additional dynamic sections go here --}}
        </div>
    </div>

    <div class="col-sm-6" id="home1">
        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Details</label>
            <div class="col-sm-10">
                <textarea rows="5" cols="5" class="form-control" name="notes" placeholder="Details">{{ old('notes', $caseStatus->details) }}</textarea>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $(document).on('change', '#reportedto', function(){
            var reportedtoid = $(this).val();
            var opt = "";

            if(reportedtoid == 1){
                $.ajax({
                    type: 'get',
                    url: '/findStatuses',
                    data: { id: reportedtoid },
                    success: function(data){
                        opt += '<label class="col-sm-4 control-label">Pending Points: <span class="text-danger">*</span></label>';
                        opt += '<div class="col-md-8">';
                        opt += '<select class="form-control search-select" name="pendingpoint" id="pendingpoint" required>';
                        for (var i = 0; i < data.length; i++) {
                            opt += '<option value="'+data[i].id+'">'+data[i].name+'</option>';
                        }
                        opt += '</select></div>';
                        $("#statuses").html(opt);
                    },
                    error: function(){
                        console.log('Failed to fetch pending points');
                    }
                });
            } else {
                $("#statuses").html("");
                $("#satisfied").html("");
            }
        });

        // Trigger the change if 'reportedto' is already selected as 1
        if ($('#reportedto').val() == "1") {
            $('#reportedto').trigger('change');
        }
    });
</script>