@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>Summary Payment Channel</h3>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <ol class="breadcrumb">
                        <li>
                            <a href="{{ route('dashboard') }}">Dashboard</a>
                        </li>
                        <li>
                            <a href="{{ route('laku_cicil_config') }}">Laku Cicil</a>
                        </li>
                        <li class="active">Config</li>
                    </ol>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-12">
                    <div class="x_panel">
                        <div class="x_content">
                            <table id="table" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th class="text-center">No</th>
                                        <th class="text-center">Type</th>
                                        <th class="text-center">Last Updated</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $no = 1; @endphp
                                    @foreach ($configs as $config)
                                        <tr>
                                            <td class="text-center">{{ $no++ }}</td>
                                            <td class="text-center">{{ $config->name_config }}</td>
                                            <td class="text-center">{{ $config->updated_at }}</td>
                                            <td class="text-center">
                                                <button type="button"
                                                    class="btn btn-warning btn-view"
                                                    data-id="{{ $config->id }}">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button type="button"
                                                    class="btn btn-success fetch-data"
                                                    data-id="{{ $config->id }}">
                                                <i class="fa fa-edit"></i>
                                                </button>
                                                <button type="button">
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> 
</div>


@include('pages.lakucicil.lakucicil_modal_view')
@include('pages.lakucicil.lakucicil_modal_edit')

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>


@section('scripts')
<script>
    $(document).on('click', '.btn-view', function() {
        var id = $(this).data('id');
        $.ajax({
            url : 'config_view/id/' + id,
            type: 'GET',
            data: {
                type: id
            },
            success: function(response) {
                $('#modal_view').html(response);
                $('#modalView').modal('show');
            }
        })
    });
    // $(document).on('click', '.btn-view', function() {
    //     var url = $(this).data('url');
    //     $.get(url, function(res) {
    //         $('#configName').text(res.name_config);

    //         var tbody = $('#detailsTable');
    //         tbody.empty();

    //         if (res.details.length > 0) {
    //             let no = 1;
    //             res.details.forEach(function(d) {
    //                 if (d.name.toLowerCase().includes("threshold margin")) {
    //                     return;
    //                 }
    //                 tbody.append(`
    //                     <tr>
    //                         <td class="text-center">${no}</td>
    //                         <td class="text-center">${d.name} ${d.type}</td>
    //                         <td class="text-center">${d.value ?? '-'} %</td>
    //                         <td class="text-center">${d.status}</td>
    //                     </tr>
    //                 `);
    //                 no++;
    //             });
    //         } else {
    //             tbody.append('<tr><td colspan="5" class="text-center">No details available</td></tr>');
    //         }
    //         $('#modalView').modal('show');
    //     });
    // });

//     $(document).on('click', '.btn-edit', function() {
//     var url = $(this).data('url');
//     var updateUrl = $(this).data('update-url');

//     $.get(url, function(res) {
//         // set action form
//         $('#formEditConfig').attr('action', updateUrl);

//         // reset semua field
//         $('#threshold_margin_logam').val('');
//         $('#margin_user_regular_logam').val('');
//         $('#margin_user_elite_logam').val('');
//         $('#threshold_margin_digital').val('');
//         $('#margin_user_regular_digital').val('');
//         $('#margin_user_elite_digital').val('');

//         // filter berdasarkan config yang sedang dipilih
//         var details = res.details.filter(d => d.laku_cicil_configuration_id == res.id);

//         details.forEach(function(d) {
//             let type = d.type.toLowerCase();
//             let name = d.name.toLowerCase();

//             if (type === "fisik") {
//                 if (name.includes("threshold margin")) {
//                     $('#threshold_margin_logam').val(d.value);
//                 }
//                 if (name.includes("margin user reguler")) {
//                     $('#margin_user_regular_logam').val(d.value);
//                 }
//                 if (name.includes("margin user elite")) {
//                     $('#margin_user_elite_logam').val(d.value);
//                 }
//             }

//             if (type === "digital") {
//                 if (name.includes("threshold margin")) {
//                     $('#threshold_margin_digital').val(d.value);
//                 }
//                 if (name.includes("margin user reguler")) {
//                     $('#margin_user_regular_digital').val(d.value);
//                 }
//                 if (name.includes("margin user elite")) {
//                     $('#margin_user_elite_digital').val(d.value);
//                 }
//             }
//         });

//         $('#modalEditConfig').modal('show');
//     });
// });

$(document).on('click', '.fetch-data', function() {
            var id = $(this).data('id');
            $.ajax({
                url: 'config_edit/id/' + id,
                type: 'GET',
                data: {
                    type: id
                },
                success: function(response) {
                    $('#modal_content').html(response);
                    $('#exampleModal').modal('show');
                },
                error: function(xhr, status, error) {
                    console.error('AJAX request failed:', error);
                }
            });
        });
</script>
@endsection