@php
    $months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    $nonPreviousYear = [];
@endphp
<div class="card outline-secondary mb-4">
    <x-adminlte-modal id="non-modalYearlyView" title="Yearly View Summary" size="lg" theme="info" icon="fas fa-chart-bar" v-centered static-backdrop scrollable>
    <div class="table-responsive">
        <table class="table table-bordered text-center" id="non-yearly-summary-table">
            <thead class="thead-light">
                <tr>
                    <th>Year</th>
                    <th>Planned</th>
                    <th>Forecast</th>
                    <th>Actual</th>
                </tr>
            </thead>
            <tbody>
                <!-- Content filled dynamically via JS -->
            </tbody>
        </table>
    </div>
    <x-slot name="footerSlot">
        <x-adminlte-button theme="default" label="Close" class="model-btn-close" data-dismiss="modal" />
    </x-slot>
</x-adminlte-modal>   
    <div class="card-body">
        <form>
            
            <!-- Top Controls -->
                    <div class="row">
                            <div class="col-sm-4">
                                <div class="form-inline non-financial-buttons justify-content-start">
                                    <button type="button" class="btn btn-primary btn-sm mr-1" data-toggle="modal" data-target="#modalNewNonBenefits">
                                        Add New Non-Financial Benefits
                                    </button>
                                    <button type="button" class="btn btn-info btn-sm mr-1" id="non-btnYearlyView" data-toggle="modal" data-target="#non-modalYearlyView">Yearly View</button>
                                    <button type="button" class="btn btn-success non-financial-save-form btn-sm">Save</button>
                                </div>
                            </div>
           
                   </div>
                   <hr>

            <div id="non-benefit-output-container">
                @if (!empty($nonFinancialImpactsData))
                @foreach ($nonFinancialImpactsData as $impact)
                 @php $previousYear[] = $impact['year']; @endphp
                <div class="card border-primary mb-3 p-3 non-benefit-entry" data-non-benefit-year="{{ $impact['year'] }}">
                    <div class="row align-items-start w-100" >
                                <!-- non-benefit Type -->
                                <div class="col-sm-2">
                                    <div class="form-group">
                                        <label>Measure <span class="text-danger">*</span></label>
                                        <input type="textArea" class="form-control" name="measure" value="{{ $impact['measure'] }}" readonly>
                                    </div>
                                </div>

                                <!-- Frequency -->
                                <div class="col-sm-2">
                                    <div class="form-group">
                                        <label>Frequency</label>

                                        <select name="frequency" id="frequency" class="form-control" readonly>
                                            <option value="{{ $impact['frequency'] }}" selected>{{ $impact['frequency'] }}</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Frequency -->
                                <div class="col-sm-2">
                                    <div class="form-group">
                                        <label>Unit</label>
                                        <input type="textArea" class="form-control" name="unit" value="{{ $impact['unit'] }}" readonly>
                                    </div>
                                </div>

                        

                                <!-- Checkboxes -->
                                <div class="col-sm-2 d-flex flex-column justify-content-center">
                                    <div class="form-check">
                                        <input name="allocated" class="form-check-input" @if(isset($impact['allocated']) && $impact['allocated']) checked @endif type="checkbox">
                                        <label class="form-check-label">Allocated</label>
                                    </div>
                                </div>

                                <!-- Summary Values -->
                                <div class="col-sm-2">
                                    <p><strong>Planned:</strong> {{ currency_format($impact['yearly_planned_value']) }}</p>
                                    <p><strong>Forecast:</strong> {{ currency_format($impact['yearly_forecast_value']) }}</p>
                                    <p><strong>Actual:</strong> {{ currency_format($impact['yearly_actual_value']) }}</p>
                                    <input type="hidden" id="{{$impact['year']}}-non-planned-value" value="{{ currency_format($impact['yearly_planned_value']) }}">
                                    <input type="hidden" id="{{$impact['year']}}-non-forecast-value" value="{{ currency_format($impact['yearly_forecast_value']) }}">
                                    <input type="hidden" id="{{$impact['year']}}-non-actual-value" value="{{ currency_format($impact['yearly_actual_value']) }}">
                                </div>

                                <!-- Year & Buttons -->
                                <div class="col-sm-2">
                                    <span class="mr-2 font-weight-bold text-success">{{ $impact['year'] }}</span>
                                    <button type="button" class="btn btn-danger delete-non-benefit btn-sm mr-1"><i class="fas fa-minus"></i></button>
                                    <button type="button" class="btn btn-info btn-sm btn-update-non-benefit"><i class="fas fa-edit"></i></button>
                                </div>
                    </div>

                    <!-- Monthly Table -->
                    <div class="table-responsive mt-3">
                        <table class="table table-bordered text-center table-sm">
                            <thead class="thead-light">
                                <tr>
                                    <th>&nbsp;</th>
                                    @foreach ($months as $month)
                                        <th>{{ $month }}</th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th class="text-left">Planned</th>
                                    @foreach ($months as $month)
                                        <td><input type="text" class="form-control form-control-sm text-right" value="{{ currency_format(floor($impact['yearly_planned_value']/12)) }}" readonly></td>
                                    @endforeach
                                </tr>
                                <tr>
                                    <th class="text-left">Forecast</th>
                                    @foreach ($months as $month)
                                        <td><input type="text" class="form-control form-control-sm text-right" value="{{ currency_format(floor($impact['yearly_forecast_value']/12)) }}" readonly></td>
                                    @endforeach
                                </tr>
                                <tr>
                                    <th class="text-left">Actual</th>
                                    @foreach ($months as $month)
                                        <td><input type="text" class="form-control form-control-sm text-right" value="{{ currency_format(floor($impact['yearly_actual_value']/12)) }}" readonly></td>
                                    @endforeach
                                </tr>
                            </tbody>
                        </table>
                    </div>
                
                </div>
                @endforeach
                @endif   
   
            </div>
                
           
            
        
        </form>
      
    </div>
</div>
@include('backend.opportunities.details._modal_non_financial_benefits')

@push('js')
<script>
    const nonPreviousYears = @json($nonPreviousYear);
    let nonFinancialSaveUrl = "{{ route('opportunities.non-financial.savedata', base64_encode($threat->id)) }}";
    let nonFinancialDeleteUrl = "{{ route('opportunities.benefits-history.delete', [ 'id' => base64_encode($threat->id) ]) }}";
</script>
<script src="{{ asset('assets/js/backend/opportunities/opportunities-non-financial-impact.js') }}"></script>
@endpush