@extends('admin.layouts.app')
@section('panel')
    <div class="card b-radius--10">
        <div class="card-body p-0">
            <div class="table-responsive--md table-responsive">
                <table class="table table--light style--two">
                    <thead>
                        <tr>
                            <th>@lang('S.N.')</th>
                            <th>ID</th>
                            <th>Details</th>
                                <th>@lang('Action')</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($imf_items as $imf_item)
                            <tr>
                                <td>{{ $loop->index + $imf_items->firstItem() }}</td>

                                <td>
                                    <span class="fw-bold">{{ $imf_item->code }}</span>
                                </td>

                                <td>
                                    <span class="text--primary">{{$imf_item->details}}</span>
                                </td>
                                    <td>
                                                <button type="button" data-action="{{ route('admin.plans.fdr.imfdelete', $imf_item->id) }}" data-question="@lang('Are you sure to delete this IMF code?')" class="btn btn-sm confirmationBtn btn-outline--danger">
                                                    <i class="la la-la la-eye-slash"></i>@lang('Delete')
                                                </button>
                                    </td>
                            </tr>
                        @empty
                            <tr>
                                <td class="text-muted text-center" colspan="100%">{{ __($emptyMessage) }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if ($imf_items->hasPages())
            <div class="card-footer py-4">
                {{ paginateLinks($imf_items) }}
            </div>
        @endif
    </div>

    <x-confirmation-modal />
    @can('admin.plans.fdr.save')
        @include('admin.plans.fdr.imfform')
    @endcan
@endsection

@can('admin.plans.fdr.save')
    @push('breadcrumb-plugins')
        <!-- Modal Trigger Button -->
        <button type="button" class="btn btn-sm btn-outline--primary cuModalBtn" data-modal_title="@lang('Add IMF')">
            <i class="las la-plus"></i>@lang('Add IMF')
        </button>
    @endpush
@endcan

@push('script')
    <script>
        (function($) {
            "use strict";

            let modal = $("#cuModal");

            $('[name=interest_rate], [name=minimum_amount], [name=maximum_amount]').on('input', () => calculateProfit());

            function calculateProfit() {
                let minAmount = Number($('[name=minimum_amount]').val());
                let maxAmount = Number($('[name=maximum_amount]').val());
                let interest = Number($('[name=interest_rate]').val()) / 100;
                let interval = $('[name=installment_interval]').val();
                let totalMinAmount = minAmount * interest;
                let totalMaxAmount = maxAmount * interest;

                if (minAmount && maxAmount && interest) {
                    modal.find('#minAmount').text(`${showAmount(totalMinAmount)} @lang($general->cur_text)`);
                    modal.find('#maxAmount').text(`${showAmount(totalMaxAmount)} @lang($general->cur_text)`);
                    modal.find('#perInterval').text(interval);
                    modal.find('.final-amount').removeClass('d-none');
                }
            }

            $('#cuModal').on('show.bs.modal', function(e) {
                calculateProfit();
            });

            $('#cuModal').on('hidden.bs.modal', function(e) {
                modal.find('.final-amount').addClass('d-none');
            });

        })(jQuery);
    </script>
@endpush
