@extends('layouts.master')
@section('content')
<div class="page-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <i class="mdi mdi-account"></i> {{$title}}
                    </div>
                    <form action="{{route($route.'.store')}}" method="POST" class="">
                    {{csrf_field()}}
                    <div class="card-body">
                        <table class="table w-100" 
                        data-search="false"
                        data-toggle="table"
                        data-pagination="true"
                        data-toolbar="#toolbar"
                        data-show-refresh="false"
                        data-url="{{route($route.'.grid')}}"
                        data-ajax-options='{"xhrFields": {"withCredentials": true}}'
                        data-sort-name="ids"
                        data-sort-order="desc"
                        data-page-size="10"
                        data-id-field="id"
                        id="grid-data">
                            <thead class="table-secondary text-primary">
                                <tr>
                                    <th class="text-center" colspan="2">Greenhouse gas</th>
                                    <th class="text-center" colspan="{{ count(@$ar) }}">IPCC Assessment Report</th>
                                </tr>
                                <tr>
                                    <th data-field="kode">Formula</th>
                                    <th data-field="nama">Nama</th>
                                    @foreach(@$ar as $dataAr)
                                    <th data-field="ar_{{$dataAr->ArId}}_{{ strtolower($dataAr->kode) }}">{{ $dataAr->kode }}</th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col-md-12 text-right">
                                <button type="submit" class="btn btn-success"><i class="mdi mdi-content-save-outline"></i> Simpan</button>
                            </div>
                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
	<script type="text/javascript">
     $(document).ready(function() {
            $('.numberInput').on('input', function() {
                this.value = this.value.replace(/[^0-9]/g, ''); // Hanya angka 0-9
            });
            $('#togglePassword').on('click', function() {
                let passwordField = $('#password');
                let icon = $(this).find('i');

                // Cek apakah input saat ini bertipe password
                if (passwordField.attr('type') === 'password') {
                    passwordField.attr('type', 'text'); // Ubah ke teks
                    icon.removeClass('mdi-eye').addClass('mdi-eye-off'); // Ganti ikon
                } else {
                    passwordField.attr('type', 'password'); // Ubah ke password
                    icon.removeClass('mdi-eye-off').addClass('mdi-eye'); // Kembalikan ikon
                }
            });
        });   
    </script>
@endsection