@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('body_content')
    <div class="container body">
        <div class="main_container">
            @include('includes.sidebar')
            <div class="right_col" role="main">
                <div class="page-title">
                    <div class="title_left">
                        <h3>Saldo Akun - Config</h3>
                    </div>
                    <div class="clearfix"></div>
                </div>

                <div class="row">
                    <div class="col-xs-12">
                        <ol class="breadcrumb">
                            <li><a href="{{ route('dashboard') }}">Home</a></li>
                            <li><a href="{{ route('config') }}">Saldo Akun</a></li>
                            <li class="active">Config</li>
                        </ol>
                    </div>

                    <div class="col-xs-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>Saldo Akun - Config</h2>
                                <ul class="nav navbar-right panel_toolbox">
                                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                                </ul>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <form id="configForm">
                                    <div class="row">
                                        @php
                                            $chunks = $config->chunk(ceil($config->count() / 2));
                                        @endphp
                                        @foreach ($chunks as $chunk)
                                            <div class="col-md-6">
                                                @foreach ($chunk as $item)
													@if(in_array($item->name, ['interest_reguler', 'interest_elite', 'pajak_final']))
														<div class="form-group row">
															<label class="col-sm-5 col-form-label text-right">{{ $item->label }}</label>
															<div class="col-sm-7">
																<div class="input-group" style="width:100%;">
																	<input type="number" step="0.01" max="30 name="{{ $item->name }}"
																		value="{{ $item->value }}"
																		class="form-control config-input"
																		data-label="{{ $item->label }}"
																		data-original="{{ $item->value }}"
																		data-name="{{ $item->name }}">
																	<span class="input-group-addon">%</span>
																</div>
															</div>
														</div>
													@else
														<div class="form-group row">
															<label class="col-sm-5 col-form-label text-right">{{ $item->label }}</label>
															<div class="col-sm-7">
																<div class="input-group" style="width:100%;">
																	<span class="input-group-addon">Rp</span>
																	<input id="myNumber" type="number" step="0.00" name="{{ $item->name }}"
																		value="{{ $item->value }}"
																		class="form-control config-input"
																		data-label="{{ $item->label }}"
																		data-original="{{ $item->value }}"
																		data-name="{{ $item->name }}">
																</div>
															</div>
														</div>
													@endif
                                                @endforeach
                                            </div>
                                        @endforeach
                                    </div>

                                    <div class="text-center mt-3">
                                        <button type="button" class="btn btn-primary" data-toggle="modal"
                                            data-target="#confirmModal">
                                            Simpan
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>Change Log</h2>
                                <ul class="nav navbar-right panel_toolbox">
                                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                                </ul>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <table class="table table-bordered table-striped">
                                    <tr>
                                        <th class="text-left">Parameter</th>
                                        <th class="text-left">Nilai Saat ini</th>
                                        <th class="text-left">Terakhir Diperbarui</th>
                                        <th class="text-left">Diperbarui Oleh</th>
                                    </tr>
                                    @foreach($log as $item)
                                        <tr>
                                            <td class="text-left">{{ $item->parameter }}</td>
                                            <td class="text-left">
                                                @if ($item->id_config == 1 || $item->id_config == 2 || $item->id_config == 8)
                                                    {{ $item->value }} %
                                                @else
                                                    Rp {{ $item->value }}
                                                @endif
                                            </td>
                                            <td class="text-left">{{ $item->created_at }}</td>
                                            <td class="text-left">{{ $item->user->name }}</td>
                                        </tr>
                                    @endforeach
                                </table>
                                {{ $log->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <form id="submitConfigForm">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Apakah Anda Yakin ingin melakukan perubahan Config?</h5>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>

                            <div class="modal-body">
                                <table class="table table-bordered text-center">
                                    <thead>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Nilai Saat Ini</th>
                                            <th>Nilai Baru</th>
                                        </tr>
                                    </thead>
                                    <tbody id="changedParams">
                                        <!-- Diisi via JavaScript -->
                                    </tbody>
                                </table>
								<!--
                                <div class="alert alert-warning text-center">
                                    Perubahan Bunga akan efektif untuk perhitungan Bunga H+1
                                </div>
								-->
                            </div>

                            <div class="modal-footer justify-content-center">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batalkan</button>
                                <button type="submit" class="btn btn-primary" id="confirm-submit"
                                    style="display: none;">Simpan</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>


            @include('includes.footer')
        </div>
    </div>
    {{-- 
    <script>
        $(document).ready(function() {
            $('#btn-simpan').on('click', function() {
                // Ambil nilai baru dari input
                var newRegular = $('#bunga_regular').val();
                var newElite = $('#bunga_elite').val();

                // Tampilkan ke modal
                $('#new_regular').text(newRegular);
                $('#new_elite').text(newElite);

                // Tampilkan modal
                $('#confirmModal').modal('show');
            });

            $('#confirm-submit').on('click', function() {
                // Submit form asli
                $('#form-config').submit();
            });
        });
    </script> --}}

    {{-- <script>
        $(document).ready(function() {
            $('[data-toggle="modal"]').on('click', function() {
                let rows = '';

                $('.config-input').each(function() {
                    let original = $(this).data('original');
                    let current = $(this).val();
                    let label = $(this).data('label');

                    if (original != current) {
                        rows += `
                    <tr>
                        <td>${label}</td>
                        <td>${original}</td>
                        <td>${current}</td>
                    </tr>
                `;
                    }
                });

                if (rows) {
                    $('#config-change-body').html(rows);
                     $('#confirm-submit').show();

                } else {
                    $('#config-change-body').html(`
                        <tr>
                            <td colspan="3">Tidak ada perubahan</td>
                        </tr>
                    `);
                     $('#confirm-submit').hide();
                }
            });

            // On confirm submit
            $('#confirm-submit').on('click', function() {
                $('#configForm').submit();
            });
        });
    </script> --}}

    <script>
        $(document).ready(function() {
            $('[data-toggle="modal"]').click(function() {
                let changedRows = '';
                let hasChange = false;

                $('.config-input').each(function() {
                    const original = $(this).data('original');
                    const current = $(this).val();
                    const label = $(this).data('label');
                    const name = $(this).data('name');

                    if (original != current) {
                        hasChange = true;
                        changedRows += `
                        <tr>
                            <td>${label}</td>
                            <td>${original}</td>
                            <td>${current}</td>
                            <input type="hidden" name="${name}" value="${current}">
                        </tr>
                    `;
                    }
                });

                if (hasChange) {
                    $('#changedParams').html(changedRows);
                    $('#confirm-submit').show();
                } else {
                    $('#changedParams').html('<tr><td colspan="3">Tidak ada perubahan</td></tr>');
                    $('#confirm-submit').hide();
                }
            });
        });

        $('#submitConfigForm').submit(function(e) {

            let formData = $(this).serialize();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: '/saldo_akun/edit_config', 
                method: 'POST',
                data: formData,
                
                beforeSend: function() {
                    $('#confirm-submit').prop('disabled', true).text('Menyimpan...');
                },
                success: function(response) {
                    $('#confirmModal').modal('hide');
					location.reload();
                },
                error: function(xhr) {
                    alert(xhr.responseText);
                },
                complete: function() {
                    $('#confirm-submit').prop('disabled', false).text('Simpan');
                }
            });
			return false;
        });
    </script>


@endsection

@section('scripts')
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
    <script src="{{ url('js/vendors/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ url('/js/numberformat.min.js') }}"></script>
    <script src="{{ url('/js/kurs/list.min.js') }}"></script>
@endsection