@extends('layouts.master')

@section('title', 'GWP Matrix')

@section('content')
    <div class="card shadow-sm">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0 font-weight-bold">Global Warning Potential</h5>
        </div>

        <div class="card-body">

            <form method="POST" action="{{ route($route.'.store') }}">
                @csrf
                <div style="overflow-x:auto;">
                    <table class="table table-bordered table-detail" style="min-width: 1095px;">
                        <thead>
                            <tr class="table-primary text-white">
                                <th colspan="2" class="text-center">Greenhouse gas</th>
                                <th colspan="{{ $ars->count() }}" class="text-center">IPCC Assessment Report</th>
                            </tr>
                            <tr class="table-primary text-white">
                                <th class="text-center">Formula</th>
                                <th class="text-center">Name</th>
                                @foreach ($ars as $ar)
                                    <th class="text-center" width="10%">{{ $ar->code }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($ghgs as $ghg)
                                <tr>
                                    <td class="text-center">{{ $ghg->code }}</td>
                                    <td class="text-center">{{ $ghg->description }}</td>
                                    @foreach ($ars as $ar)
                                        <td>
                                            <input type="text" class="form-control text-right"
                                                name="gwp[{{ $ghg->code }}][{{ $ar->code }}]"
                                                value="{{ getFormattedValue(@$gwpMatrix[$ghg->code][$ar->code]->value) ?? '' }}"
                                                oninput="numberFormat(this)">
                                        </td>
                                    @endforeach
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <button type="submit" class="btn btn-primary">Simpan</button>
            </form>
        </div>
    </div>

    <script>
        function numberFormat(input) {
            let value = input.value.replace(/\./g, '').replace(/[^0-9]/g, '');
            if (!isNaN(value) && value.trim() !== '') {
                input.value = parseFloat(value).toLocaleString('id-ID', {
                    maximumFractionDigits: 10
                });
            }
        }
    </script>
@endsection