@extends('layouts.layout')

@section('body_class', 'nav-md')


@section('body_content')
    <div class="container body">
        <div class="main_container">
            @include('includes.sidebar')

            <style>
                .form-horizontal {
                    min-height: 200px;
                    max-height: 608px; /* Sesuaikan tinggi maksimal sesuai kebutuhan */
                    overflow-y: auto;
                }
            </style>

            <div class="right_col" role="main">
                <div class="page-title">
                    <div class="title_left">
                        <h3><i class="fa fa-edit"></i>Special Interest Rate</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('special_interest_rate/request') }}">Special Interest Rate</a></li>
                        </ol>
                    </div>
                </div>

                
                {{-- <div class="col-xs-12 col-sm-4">
                    <div class="x_panel" style="margin-left: 550px;">
                        <div class="x_title">
                            <label class="col-xs-12 col-sm-4 control-label">Customer Name</label>
                            <input type="text" id="searchInput" placeholder="Search by Customer Name" style="width: 300px;">
                        </div>
                    </div>
                </div> --}}

                <div class="row">
                    <div class="col-xs-12 col-sm-8">
                        <div class="table-responsive-sm">
                            <div class="x_panel">
                                <div class="x_content" style="zoom: 0.9; overflow: auto;">
                                    <table class="table table-bordered table-striped" id="list" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th class="text-center">Account Number</th>
                                                <th class="text-center">Customer</th>
                                                <th class="text-center">Deposit Amount</th>
                                                <th class="text-center">Opening Date</th>
                                                <th class="text-center">Maturity Date</th>
                                                <th class="text-center">Interest Rate</th>
                                                <th class="text-center">Extend Type</th>
                                                <th class="text-center" hidden>no handphone</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($query as $data)
                                                <tr>
                                                    <td class="text-center">{{$data->nomor_rekening}}</td>
                                                    <td class="text-center">{{ $data->name }}</td>
                                                    <td class="text-right">{{$data->berat}}</td>
                                                    <td class="text-center">{{ date('d-m-Y', strtotime($data->created_at))}}</td>
                                                    <td class="text-center">{{ date('d-m-Y', strtotime($data->jatuh_tempo))}}</td>
                                                    <td class="text-right">{{$data->suku_bunga}}</td>
                                                    <td class="text-center">
                                                        @if($data->perpanjangan == 1) Tidak diperpanjang
                                                        @elseif($data->perpanjangan == 2) Pokok
                                                        @elseif($data->perpanjangan == 3) Pokok + Sewa Modal
                                                        @endif
                                                    </td>
                                                    <td class="text-center">
                                                        <div class="custom-control custom-checkbox">
                                                            <input type="checkbox" class="custom-control-input approval-checkbox" id="customCheck1" data-account-id="{{$data->nomor_rekening}}" data-id="{{$data->id }}" data-customer-name="{{$data->name}}" data-deposit="{{$data->berat}}" data-interest_old="{{$data->suku_bunga}}">
                                                        </div>
                                                    </td>
                                                    <td class="text-center" hidden>{{ $data->handphone}}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-4">
                        <div class="x_panel">
                            <div class="x_title">
                                <ul class="nav navbar-right panel_toolbox">
                                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
                                </ul>
                                <h2>Request</h2>
                            </div>

                            <div class="x_content">
                                <form id="form-update" class="form-horizontal">
                                    <table class="table table-bordered table-striped" id="myTable" style="width:100%; zoom: 0.9; overflow: auto;">
                                        <thead>
                                            <tr>
                                                <th colspan="4" class="text-center"> Request List </th>
                                            </tr>
                                            <tr>
                                                <th class="text-center">Account Number</th>
                                                <th class="text-center">Customer</th>
                                                <th class="text-center">Deposit Amount</th>
                                                <th class="text-center">New Interest Rate</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>

                                    <div class="form-group" style="margin-top:20px">
                                        <label class="col-xs-12 col-sm-5 control-label"></label>
                                        <div class="col-xs-6 col-sm-7">
                                            <button type="button" class="btn btn-primary btn-search update-sukuBunga"><i class="fa fa-check"></i> Proceed</button>
                                        </div>
                                    </div>
                                    <input type="text" value="{{auth()->user()->id}}" name="user_id" id="user_id" hidden>
                                    <input type="hidden" name="data" value="" class="input-data">
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.css" />
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.js"></script>
<!-- Include SweetAlert CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<!-- Include SweetAlert JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
<script>
     $(document).ready(function () {
        $('.approval-checkbox').on('change', function () {
            var isChecked = $(this).prop('checked');
            var idUser = $(this).data('id'); 
            var accountId = $(this).data('account-id');
            var customerName = $(this).data('customer-name');
            var total_gramasi = $(this).data('deposit');
            var interest_old = $(this).data('interest_old');
            var rowSelector = '#myTable tbody tr[data-account-id="' + accountId + '"]';
            var sukuBunga = $('#suku_bunga').val();
            if (isChecked) {
                if ($('#myTable tbody tr[data-account-id="' + accountId + '"]').length === 0) {
                    var newRow =
                        '<tr class="data" data-account-id="' + accountId + '">' +
                            '<td class="text-center" >' + accountId + '</td>' +
                            '<td class="text-center" >' + customerName + '</td>' +
                            '<td class="text-center" >' + total_gramasi + '</td>' +
                            '<td class="text-center" style="width: 200px;">' +
                            '<input type="hidden" name="accountId[]" value="' + accountId + '"><input type="hidden" name="customerName[]" value="' + customerName + '"><input type="hidden" name="total_gramasi[]" value="' + total_gramasi + '"><input type="hidden" name="idUser[]" value="' + idUser + '"><input type="hidden" name="interest_old[]" value="' + interest_old + '"><input type="text" name="new_interest_rate[]" class="suku_bunga form-control example-input" placeholder="Enter value" required>' +
                            '</td>' +

                        '</tr>';

                    $('#myTable tbody').append(newRow);
                }
            } else {
                $(rowSelector + ' .approval-checkbox').prop('checked', false).trigger('change');

                $(rowSelector).addClass('remove-warning').fadeOut(300, function () {
                    $(this).remove();

                    if ($('#myTable tbody tr').length === 0) {
                        $('#cancelButtonContainer').hide();
                    }
                });
            }

        });
        

        $(".update-sukuBunga").on("click", function () {

            if ($('input[name="new_interest_rate[]"]').filter(function () {
            return $.trim(this.value) === "" || !/\./.test(this.value);
        }).length > 0) {
            // Show notification if any input field is empty
            Swal.fire({
                icon: "error",
                title: "Error",
                text: "Please fill in all interest rate columns with valid values ​​(numbers must use (.)).",
            });
            return false; // Stop further processing
        }

                var formData = new FormData($('#form-update')[0]);

                $.ajax({
                    url: '/special_interest_rate/proceess',
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (response) {

                        Swal.fire({
                position: "center",
                icon: "success",
                title: "Pengajuan Telah Diterima",
                showConfirmButton: false,
                timer: 1500
            });
                        
                        // location.reload();
                        window.location.href = '/special_interest_rate/approval';
                    },
                    error: function (response) {
                        var response = response.responseJSON;
                        alert(response.error);
                        $("#form").find(".submit").removeClass('hidden');
                        $("#form").find(".loading").addClass('hidden');
                    },
                    complete: function () {
                        // Re-enable the button after the request is complete
                        $(".update-sukuBunga").prop('disabled', false);
                    }
                });
                return false;
            });


    $(document).ready(function () {
    $('#list').DataTable({
        order: [[0, 'desc']] // Mengurutkan kolom pertama secara descending
    });
        });


    //     $(document).ready(function () {
    //     // Ketika nilai input pencarian berubah
    //     $("#searchInput").on("keyup", function () {
    //         var searchText = $(this).val().toLowerCase(); // Ambil nilai input dan ubah ke huruf kecil

    //         // Loop melalui setiap baris dalam tabel
    //         $("#list tbody tr").filter(function () {
    //             // Sembunyikan baris yang tidak sesuai dengan kriteria pencarian
    //             $(this).toggle($(this).text().toLowerCase().indexOf(searchText) > -1);
    //         });
    //     });
    // });

 

    });
</script>