@extends('adminlte::page')

@section('title', 'Investment Planning Form Report')

@section('content_header')
    <div class="row mb-2">
        <div class="col-sm-6">
            <h1>Investment Planning Form Report</h1>
        </div>
        <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
                <li class="breadcrumb-item active">Investment Planning Form Report</li>
            </ol>
        </div>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card card-primary card-outline">
                <div class="card-header">
                    <h3 class="card-title">Choose option(s) to generate investment planning form report</h3>
                    <div class="card-tools">
                        <button class="btn bg-gradient-success add-new-threat ml-2 btn-sm"
                            id="preview-ipf-report-btn">Preview Report</button>
                        <button class="btn bg-gradient-primary add-new-threat ml-2 btn-sm" id="export-pdf-ipf-btn">Export To
                            PDF</button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="inputProjectID">Project ID</label>
                                <input type="text" id="inputProjectID" class="form-control" value="MOC 68274">
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="inputThreatID">Threat ID</label>
                                <input type="text" id="inputThreatID" class="form-control" value="I-4245292">
                            </div>
                        </div>
                        <div class="col-sm-4 d-none" id="inputThreatDropdownForReport">
                            <div class="form-group">
                                <label for="inputThreatDropdown">Threats</label>
                                <select id="inputThreatDropdown" class="form-control">
                                    <option>Select Threat</option>
                                    <option>Flare Hydraulic Adequacy Impact due to Fouling</option>
                                    <option>S2 Soot blower reliability</option>
                                    <option>U10900 Benzene toxic gas emission</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row d-none" id="ipf-report-preview-container">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card card-primary">
                                <div class="card-header">
                                    <h3 class="card-title text-bold">Project Information - ID: MOC-82772</h3>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <table class="table table-bordered table-sm dark-bordered-table">
                                                <tbody>
                                                    <!-- Static Data (Can be dynamically replaced with Blade variables if needed) -->
                                                    <tr>
                                                        <th class="w-25">Project Title</th>
                                                        <td>K10101 Electrification and SMPO2 Energy Efficiency Project</td>
                                                    </tr>
                                                    <tr>
                                                        <th class="w-25">Threat ID</th>
                                                        <td>I-4245292</td>
                                                    </tr>
                                                    <tr>
                                                        <th class="w-25">Project Description</th>
                                                        <td>To Upgrade 2 no?s of existing EWS @ PS010 & SS500 with latest
                                                            Windows Using this opportunity, we would like to onboard into
                                                            PCD (To enable OS patched at pre-defined frequency and antivirus
                                                            definition up to date and meet site PCD requirements) Key
                                                            enabler to view detailed event logs, alarms, motor states, motor
                                                            trends, motor status, etc. without lagging or inaccurate
                                                            information shown. Using this opportunity, we would like to
                                                            create dedicated graphic page in DCS/PI to monitor the
                                                            status/health of S2 IMCS.</td>
                                                    </tr>
                                                    <tr>
                                                        <th class="w-25">Project Manager</th>
                                                        <td>Kock Su</td>
                                                    </tr>
                                                    <tr>
                                                        <th class="w-25">Project Owner</th>
                                                        <td>huat-cheh lim</td>
                                                    </tr>
                                                    <tr>
                                                        <th class="w-25">Project Status</th>
                                                        <td>CANCELLED</td>
                                                    </tr>
                                                    <tr>
                                                        <th class="w-25">Project Category</th>
                                                        <td>TA (Turnaround)</td>
                                                    </tr>
                                                    <tr>
                                                        <th class="w-25">Funding Category</th>
                                                        <td>T/A</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <table class="table table-bordered table-sm dark-bordered-table">
                                                <tbody>
                                                    <!-- Static Data (Can be dynamically replaced with Blade variables if needed) -->
                                                    <tr>
                                                        <th>USD</th>
                                                        <th>Planned</th>
                                                        <th>Forecast</th>
                                                    </tr>
                                                    <tr>
                                                        <td>Capex</td>
                                                        <td>600000.00</td>
                                                        <td>600000.00</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Opex</td>
                                                        <td>0.00</td>
                                                        <td>0.00</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Revex</td>
                                                        <td>0.00</td>
                                                        <td>0.00</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Total</th>
                                                        <td>600000.00</td>
                                                        <td>600000.00</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-sm-6">
                                            <table class="table table-bordered table-sm dark-bordered-table">
                                                <tbody>
                                                    <!-- Static Data (Can be dynamically replaced with Blade variables if needed) -->
                                                    <tr>
                                                        <th></th>
                                                        <th>Actual</th>
                                                    </tr>
                                                    <tr>
                                                        <td>NPV</td>
                                                        <td>1000</td>
                                                    </tr>
                                                    <tr>
                                                        <td>IRR</td>
                                                        <td>59.70%</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Payback Time (RT)</td>
                                                        <td>9.8</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <table class="table table-bordered table-sm dark-bordered-table">
                                                <tbody>
                                                    <!-- Static Data (Can be dynamically replaced with Blade variables if needed) -->
                                                    <tr>
                                                        <th>Other</th>
                                                        <th>2025</th>
                                                        <th>2026</th>
                                                        <th>2027</th>
                                                        <th>2028</th>
                                                        <th>2029</th>
                                                        <th>2030</th>
                                                    </tr>
                                                    <tr>
                                                        <th>Planned</th>
                                                        <td>100000.00</td>
                                                        <td>100000.00</td>
                                                        <td>100000.00</td>
                                                        <td>100000.00</td>
                                                        <td>100000.00</td>
                                                        <td>100000.00</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Forecast</th>
                                                        <td>100000.00</td>
                                                        <td>100000.00</td>
                                                        <td>100000.00</td>
                                                        <td>100000.00</td>
                                                        <td>100000.00</td>
                                                        <td>100000.00</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="card card-primary">
                                <div class="card-header">
                                    <h3 class="card-title text-bold">Additional Project Information</h3>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <table class="table table-bordered table-sm dark-bordered-table">
                                                <tbody>
                                                    <!-- Static Data (Can be dynamically replaced with Blade variables if needed) -->
                                                    <tr>
                                                        <th>Type</th>
                                                        <td>CAPEX AI</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Entity</th>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <th>Plant</th>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <th>Site</th>
                                                        <td>Bukom</td>
                                                    </tr>

                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-sm-6">
                                            <table class="table table-bordered table-sm dark-bordered-table">
                                                <tbody>
                                                    <!-- Static Data (Can be dynamically replaced with Blade variables if needed) -->
                                                    <tr>
                                                        <th>WBS No</th>
                                                        <td>12345</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Project No</th>
                                                        <td>12345678</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Unit No</th>
                                                        <td>New Entry</td>
                                                    </tr>
                                                    <tr>
                                                        <th>PU No</th>
                                                        <td></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <table class="table table-bordered table-sm dark-bordered-table">
                                                <tbody>
                                                    <!-- Static Data (Can be dynamically replaced with Blade variables if needed) -->
                                                    <tr>
                                                        <th>OP Capex Headline (USD)</th>
                                                        <td>2000.00</td>
                                                    </tr>
                                                    <tr>
                                                        <th>OP CY Prev Yr Capex(USD)</th>
                                                        <td>2000.00</td>
                                                    </tr>
                                                    <tr>
                                                        <th>OP CY Capex(USD)</th>
                                                        <td>2000.00</td>
                                                    </tr>
                                                    <tr>
                                                        <th>OP CY+1 Capex(USD)</th>
                                                        <td>2000.00</td>
                                                    </tr>
                                                    <tr>
                                                        <th>OP CY+2 Capex(USD)</th>
                                                        <td>2000.00</td>
                                                    </tr>
                                                    <tr>
                                                        <th>OP CY+3 Capex(USD)</th>
                                                        <td>2000.00</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-sm-6">
                                            <table class="table table-bordered table-sm dark-bordered-table">
                                                <tbody>
                                                    <!-- Static Data (Can be dynamically replaced with Blade variables if needed) -->
                                                    <tr>
                                                        <th>Plan RFSU (Go Live) Date</th>
                                                        <td>12-05-2025</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Plan CAC Date</th>
                                                        <td>12-05-2025</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Plan PAC Date</th>
                                                        <td>12-05-2025</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Forecast CAC Date</th>
                                                        <td>12-05-2025</td>
                                                    </tr>
                                                    <tr>
                                                        <th>Forecast PAC Date</th>
                                                        <td>12-05-2025</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <table class="table table-bordered table-sm dark-bordered-table">
                                                <tbody>
                                                    <!-- Static Data (Can be dynamically replaced with Blade variables if needed) -->
                                                    <tr>
                                                        <th class="w-25">Capex OP CY Comments</th>
                                                        <td>1. What is the problem? Yes a. Expected. What was expected to
                                                            happen prior to the event? b. Actual; What actually happened. C.
                                                            Impact: Consequence as a result of the event?</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection