@php
    $months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    $previousYear = [];
    $aster_share = 100;
     if (!empty($financialImpactsData)){
        if (!empty($financialImpactsData) && isset($financialImpactsData[0]['shell_share_precentage'])) {
             $aster_share = $financialImpactsData[0]['shell_share_precentage'];
        }
    }
                         
@endphp
<x-adminlte-modal id="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="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 outline-secondary mb-4">
    <div class="card-body">
        <form>

            <!-- Top Controls -->
            <div class="row">
                
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Aster Share</label>
                        
                        <input type="text" id="shell_share" class="form-control" value="{{ $aster_share ?? '' }}">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label>Currency</label>
                        <select name="input_currency" id="input_currency" class="form-control" disabled>
                            @foreach (App\Models\Threat::getMasterCurrency() as $key => $currency_name)
                                <option value="{{ $key }}" {{  ($threat->financialImpact && $key == $threat->financialImpact->master_currency_id) ? 'selected' : '' }}>
                                    {{ $currency_name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                 <div class="col-sm-4">
                    <div class="form-inline financial-buttons justify-content-end">
                        <button type="button" class="btn btn-primary btn-sm mr-1" data-toggle="modal" data-target="#modalNewBenefits">Add New Benefits</button>
                        <button type="button" class="btn btn-info btn-sm mr-1" id="btnYearlyView" data-toggle="modal" data-target="#modalYearlyView">Yearly View</button>
                        <button type="button" class="btn btn-success financial-save-form btn-sm">Save</button>
                    </div>
                </div>
                </div>
                  
               
               <div id="benefit-output-container">
                @if (!empty($financialImpactsData))
                @foreach ($financialImpactsData as $impact)
                 @php $previousYear[] = $impact['year']; @endphp
                <div class="card border-primary mb-3 p-3 benefit-entry" data-benefit-year="{{ $impact['year'] }}">
    <div class="row align-items-start w-100" >
        <!-- Benefit Type -->
        <div class="col-sm-3">
            <div class="form-group">
                <label>Benefit Type</label>
                <input name="benefit_type" class="form-control" readonly value="{{ $impact['benefit_type_name'] }}">
                <input type="hidden" name="benefit_type_id" class="form-control" readonly value="{{ $impact['benefit_type_id'] }}">
            </div>
        </div>

        <!-- Frequency -->
        <div class="col-sm-3">
            <div class="form-group">
                <label>Frequency</label>
                <input name="frequency" class="form-control" readonly value="{{ $impact['frequency'] }}">
            </div>
        </div>

        <!-- Checkboxes -->
        <div class="col-sm-2 d-flex flex-column justify-content-center">
            <div class="form-check">
                <input name="impacts_business_result" class="form-check-input impacts_business_result" @if($impact['is_business_impact']) checked @endif type="checkbox">
                <label class="form-check-label">Impacts Business Result</label>
            </div>
            <div class="form-check">
                <input name="allocated" class="form-check-input allocated" @if($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']}}-planned-value" value="{{ currency_format($impact['yearly_planned_value']) }}">
            <input type="hidden" id="{{$impact['year']}}-forecast-value" value="{{ currency_format($impact['yearly_forecast_value']) }}">
            <input type="hidden" id="{{$impact['year']}}-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-financial-benefit btn-sm mr-1"><i class="fas fa-minus"></i></button>
            <button type="button" class="btn btn-info btn-sm btn-update-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>
                
            </div>
            
            <!-- Right Info and Buttons -->
            
        </form>
    </div>
</div>
<x-adminlte-modal id="modalNewBenefits" title="Add New Financial Benefit" size="xl" theme="primary" icon="fas fa-edit" v-centered
    static-backdrop scrollable>
    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary">
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-6">
                            <!-- text input -->
                            <div class="form-group">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="auto-split">
                                    <label class="form-check-label" for="auto-split">Auto Split benefits into next 12
                                        months</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="manual-fill" checked="">
                                    <label class="form-check-label" for="manual-fill">Fill benefits Manually for a Given
                                        year</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <p><small>*Select Recurring when the benefit is structural else select One-off for one
                                    time
                                    benefit<br>*Make sure you have captured the impact in future years as
                                    incremental</small></p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="inputBenefitType">Benefit Type</label>
                                <select id="inputBenefitType" class="form-control custom-select">
                                    @php $first = true; @endphp
                                    @foreach (App\Models\Threat::getMasterBenefitType() as $key => $benefit_type_name)
                                        <option value="{{ $key }}" {{ $first ? 'selected' : '' }}>{{ $benefit_type_name }}</option>
                                        @php $first = false; @endphp
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="inputFrequency">Frequency</label>
                                <select id="inputFrequency" class="form-control custom-select">
                                    <option value="Recurring">Recurring</option>
                                    <option value="One-Off" selected>One-Off</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group">
                                <label for="inputYear">Year</label>
                                <select id="inputYear" class="form-control custom-select">
                                    @php
                                        $currentYear = date('Y');
                                        $yearsToShow = 10; // Number of years to show in the dropdown
                                    @endphp
                                    @for ($year = $currentYear; $year < $currentYear + $yearsToShow; $year++)
                                        <option value="{{ $year }}">
                                            {{ $year }}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="table-responsive">
                                <table class="table table-sm table-bordered">
                                    <tbody>
                                        <tr>
                                            <th class="align-middle" rowspan="3">Planned</th>
                                            <th>Jan</th>
                                            <th>Feb</th>
                                            <th>Mar</th>
                                            <th>April</th>
                                            <th>May</th>
                                            <th>June</th>
                                            <th>July</th>
                                            <th>Aug</th>
                                            <th>Sep</th>
                                            <th>Oct</th>
                                            <th>Nov</th>
                                            <th>Dec</th>
                                        </tr>
                                        <tr>
                                            <td   style="width: 8%;"><input type="text" id="planned-jan" class="form-control-sm planned-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="planned-feb" class="form-control-sm planned-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="planned-mar" class="form-control-sm planned-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="planned-apr" class="form-control-sm planned-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="planned-may" class="form-control-sm planned-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="planned-jun" class="form-control-sm planned-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="planned-jul" class="form-control-sm planned-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="planned-aug" class="form-control-sm planned-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="planned-sep" class="form-control-sm planned-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="planned-oct" class="form-control-sm planned-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="planned-nov" class="form-control-sm planned-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="planned-dec" class="form-control-sm planned-monthly-benefit"
                                                    value=""></td>
                                           
                                            
                                        </tr>
                                        <tr>
                                            <td style="width: 15%;" colspan="2">Q1<input type="text" id="planned-q1"
                                                    class="form-control-sm" value="" readonly></td>
                                            <td style="width: 15%;" colspan="2">Q2<input type="text" id="planned-q2"
                                                    class="form-control-sm" value="" readonly></td>
                                            <td style="width: 15%;" colspan="2">Q3<input type="text" id="planned-q3"
                                                    class="form-control-sm" value="" readonly></td>
                                            <td style="width: 15%;" colspan="2">Q4<input type="text" id="planned-q4"
                                                    class="form-control-sm" value="" readonly></td>
                                            <td style="width: 40%;" colspan="4">Yearly incremental Delivery<input
                                                    type="text" id="planned-yearlyDelivery" class="form-control-sm" value=""></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                     <div class="row">
                        <div class="col-sm-12">
                            <div class="table-responsive">
                                <table class="table table-sm table-bordered">
                                    <tbody>
                                        <tr>
                                            <th class="align-middle" rowspan="3">Forecast</th>
                                            <th>Jan</th>
                                            <th>Feb</th>
                                            <th>Mar</th>
                                            <th>April</th>
                                            <th>May</th>
                                            <th>June</th>
                                            <th>July</th>
                                            <th>Aug</th>
                                            <th>Sep</th>
                                            <th>Oct</th>
                                            <th>Nov</th>
                                            <th>Dec</th>
                                        </tr>
                                        <tr>
                                            <td   style="width: 8%;"><input type="text" id="forecast-jan" class="form-control-sm forecast-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="forecast-feb" class="form-control-sm forecast-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="forecast-mar" class="form-control-sm forecast-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="forecast-apr" class="form-control-sm forecast-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="forecast-may" class="form-control-sm forecast-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="forecast-jun" class="form-control-sm forecast-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="forecast-jul" class="form-control-sm forecast-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="forecast-aug" class="form-control-sm forecast-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="forecast-sep" class="form-control-sm forecast-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="forecast-oct" class="form-control-sm forecast-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="forecast-nov" class="form-control-sm forecast-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="forecast-dec" class="form-control-sm forecast-monthly-benefit"
                                                    value=""></td>
                                            
                                            
                                        </tr>
                                        <tr>
                                            <td style="width: 15%;" colspan="2">Q1<input type="text" id="forecast-q1"
                                                    class="form-control-sm" value="" readonly></td>
                                            <td style="width: 15%;" colspan="2">Q2<input type="text" id="forecast-q2"
                                                    class="form-control-sm" value="" readonly></td>
                                            <td style="width: 15%;" colspan="2">Q3<input type="text" id="forecast-q3"
                                                    class="form-control-sm" value="" readonly></td>
                                            <td style="width: 15%;" colspan="2">Q4<input type="text" id="forecast-q4"
                                                    class="form-control-sm" value="" readonly></td>
                                            <td style="width: 40%;" colspan="4">Yearly incremental Delivery<input
                                                    type="text" id="forecast-yearlyDelivery" class="form-control-sm" value=""></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                     <div class="row">
                        <div class="col-sm-12">
                            <div class="table-responsive">
                                <table class="table table-sm table-bordered">
                                    <tbody>
                                        <tr>
                                            <th class="align-middle" rowspan="3">Actual</th>
                                            <th>Jan</th>
                                            <th>Feb</th>
                                            <th>Mar</th>
                                            <th>April</th>
                                            <th>May</th>
                                            <th>June</th>
                                            <th>July</th>
                                            <th>Aug</th>
                                            <th>Sep</th>
                                            <th>Oct</th>
                                            <th>Nov</th>
                                            <th>Dec</th>
                                        </tr>
                                        <tr>
                                            <td   style="width: 8%;"><input type="text" id="actual-jan" class="form-control-sm actual-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="actual-feb" class="form-control-sm actual-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="actual-mar" class="form-control-sm actual-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="actual-apr" class="form-control-sm actual-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="actual-may" class="form-control-sm actual-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="actual-jun" class="form-control-sm actual-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="actual-jul" class="form-control-sm actual-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="actual-aug" class="form-control-sm actual-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="actual-sep" class="form-control-sm actual-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="actual-oct" class="form-control-sm actual-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="actual-nov" class="form-control-sm actual-monthly-benefit"
                                                    value=""></td>
                                            <td   style="width: 8%;"><input type="text" id="actual-dec" class="form-control-sm actual-monthly-benefit"
                                                    value=""></td>
                                            
                                            
                                        </tr>
                                        <tr>
                                            <td style="width: 15%;" colspan="2">Q1<input type="text" id="actual-q1"
                                                    class="form-control-sm" value="" readonly></td>
                                            <td style="width: 15%;" colspan="2">Q2<input type="text" id="actual-q2"
                                                    class="form-control-sm" value="" readonly></td>
                                            <td style="width: 15%;" colspan="2">Q3<input type="text" id="actual-q3"
                                                    class="form-control-sm" value="" readonly></td>
                                            <td style="width: 15%;" colspan="2">Q4<input type="text" id="actual-q4"
                                                    class="form-control-sm" value="" readonly></td>
                                            <td style="width: 40%;" colspan="4">Yearly incremental Delivery<input
                                                    type="text" id="actual-yearlyDelivery" class="form-control-sm" value=""></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
    
    <x-slot name="footerSlot">
        <x-adminlte-button theme="default" label="Close" class="mr-auto model-btn-close" data-dismiss="modal" />
        <x-adminlte-button theme="primary" label="Create" class="financial-create-save-changes" data-dismiss="modal" />
    </x-slot>
</x-adminlte-modal>


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